ImageMagick/RMagick: Why your text is coming out blocky and unreadable

2014/05/03

I found a ton of threads various places asking about this, full of really nice advice that was totally irrelevant and didn’t change anything.

It’s not your DPI, it’s not the resolution, it’s none of that. Every thread I found was full of suggestions or ideas which were irrelevant, and which suggested that things only look good at large font sizes. Nope.

It’s that you want transparent strokes and a colored fill for rendering. The reason this shows up more at smaller font sizes is that if you have a fairly likely default stroke width of 1px, that’s really noticeable on 10-point characters, and barely noticeable on 50-point characters.

So in RMagick:

#!/usr/bin/ruby -w
require 'RMagick'
canvas = Magick::Image.new(240, 63) { self.background_color = 'white' }
gc = Magick::Draw.new
gc.text_align(Magick::LeftAlign)
gc.text_antialias(false)
gc.font('Monaco')
gc.font_style(Magick::NormalStyle)
gc.font_weight(100)
gc.stroke('transparent')
gc.fill('black')
gc.text(2, 12, 'Transparent stroke, black fill.')
gc.stroke('black')
gc.text(2, 26, 'Black stroke, black fill.')
gc.fill('red')
gc.text(2, 40, 'Black stroke, red fill.')
gc.font_size(20)
gc.text(2, 60, 'Black/red.')
gc.stroke('red')
gc.fill('black')
gc.text(122, 60, 'Red/black.')
gc.draw(canvas)
canvas.write('fonts.png')

produces this output:

Comments [archived]


From: Dave Leppik
Date: 2014-05-05 16:51:37 -0500

So why are you rendering fonts without antialiasing into a PNG anyway? Assuming this is going to end up on a web page (okay, big assumption on my part), you can use CSS to do just about anything. And what you can’t do in CSS you can do with SVG or a Canvas tag. (If you really must support obsolete versions of IE, there is a canvas polyfill library out there.)


From: seebs
Date: 2014-05-07 10:06:18 -0500

The antialiasing is a red herring, I turned it off so it’s easier to see what’s happening; with antialiasing on, you still get horrible effects.

The actual reason I was rendering into a PNG was that I’m doing a thing where I want to make tile sets, so I made a program to generate a PNG with a nice grid with numbers in the grid cells to show you what tile ID each cell is.