Font for body text

[David]

I'm always on the lookout for for fonts that can usefully be used for body text in order to set designs apart from the usual duopoly of Arial and Verdana. As good as those two fonts are, they do tend to make sites look rather generic.

I'm currently working on a small site design and was looking for a font that read well on desktop and phone - surprisingly difficult. I have been using Droid Sans for a while, which does work well but is a little limited in the range of styles (only regular and bold).

My new favourite for body text is Open Sans - available from Google Web Fonts (yes, that means it's free). It is a very versatile font and best of all, it comes in a range of 5 different weights plus italic variants and a condensed version. It is designed by Steve Matteson, who also designed the Droid fonts.

I am using Open Sans in combination with the serifed Cambo font for headings - a combination that seems to work very well. See example below:

Open Sans.png

[blues_driven]

Those two work well together, I usually start at Font Squirrel as they have a good selection of the best free fonts and the @font-face kits are really useful. I'm using the Aller family for body text and Gnuolane for headings:
font-sample.jpg

[David]

Very nice John, I particularly like Aller but am sticking with Open Sans for now. The thing that has exercised me recently is font rendering in different browsers - there are significant differences in the quality and it's quite surprising. So far, my investigations reveal the following:

FONT RENDERING QUALITY
Internet Explorer = Excellent
Firefox = OK/Poor
Safari = OK
Opera = Poor
Chrome = Crap!

Whatever else you say about Internet Explorer, it's by far the best browser when it comes to rendering fonts.

Cambo.png

Above, the same text rendered in Cambo in Internet Explorer (above) and Chrome (below).

[David]

I missed this article when it was published but it has a great explanation for the differences we are now seeing with web fonts: A Closer Look At Font Rendering.