What makes a font to be rendered sharp and clear on screen?

orenstuf's picture

(newbie question)
When searching for free-licensed fonts for a project, I've found that a lot of fonts looks pale and thin on screen, unless enlarged to a very big size. Others are dark enough, but somewhat blurred. Theirs glyphs don't have homogeneous black color with sharp outlines which distinguishes them from the background.

At the picture above (at the file I've uploaded to this link it is much more obvious to see), only line 3 (DejaVu Sans) and 5 (Arial) are clear and sharp.Lines 1 and 2 are blurred, and line 4 is blurred and also not dark enough.

So I would like to ask what makes some fonts sharper then others, and weather making a font to look sharper on screen involved a lot of work.

Stephen Coles's picture

The appearance on Windows computers has a lot to do with the quality of the font. (This is why the free stuff is often inadequate.) I recommend reading up on hinting and Windows text rendering. Here are some links:


Frode Bo Helland's picture

Yes, it involves a lot of work.

For an interesting new take on this, check out the RE types from Webtype/Font Bureau. The old "web safe" fonts, Arial, Verdana, Georgia, Times etc. are optimized for a screen rendering method that is rather outdated: snapping to the pixel grid, with or without blur. The RE fonts are more future minded. This kind of hinting is certainly less time consuming.

Bendy's picture

OH dear goodness, what now is RE rendering? I love the way this industry is becoming 'future-minded' so quickly, but it's becoming increasingly difficult not to be left behind, no? Frode, do you have any links that explain what this is/how it works?

John Hudson's picture

Bendy: OH dear goodness, what now is RE rendering?

Frode didn't refer to ‘RE rendering’, but to RE fonts. These are the fonts from Font Bureau that they call ‘Reading Edge’. In simple terms, they seek to provide the best screen rendering at text sizes across a range of different screen rendering technologies by combining strategies of outline design and hinting.

Frode Bo Helland's picture

Few really fully understand. David Berlow is so far beyond in terms of intelligence :) It involves a compromise between sub pixel rendering, grayscaling and pixel snapping. Stems with equal widths will render consistent when the left side is snapped to the pixel grid, but allow for more variation in form than full pixel snap because the right edge is "free".

orenstuf's picture

Thanks guys for the help.

Syndicate content Syndicate content