CSS3 font selection

By Abhijit Menon-Sen <>

I've used Verdana as the preferred font on this web site for years. I don't particularly like it, but it works well enough and is widely available. But is there a better choice?

I didn't pay attention when I learned about CSS3 @font-face definitions, because I thought that—like so many good things in CSS—it would be usable only in the distant future. Then I stumbled across FontSquirrel and the Google Font Directory, so I spent a while looking for a clear sans-serif font for text and a monospaced font (for code listings) that went well with it.

The Droid fonts (Droid Sans, Droid Sans Mono, and Droid Serif) were one obvious choice, but I didn't really like them, and didn't think they went very well together. I preferred Bistream's Vera family (Sans, Mono, and Serif) or the DejaVu fonts (Sans, Mono, Serif) that were derived from Vera thanks to its very liberal license. They were very legible and went extremely well together, but were not especially distinguished. They looked almost exactly like Verdana, in fact.

The font I liked by far the best of all was PT Sans. It was clear, light, and sharp—a pleasure to read. Unfortunately, its capital Q (with a detached tail) was so ugly, especially at larger sizes, that I didn't want to use it at all. Some other fonts I tried were Cantarell, Quicksand, Titillium, and Puritan. None of them impressed me as much as PT Sans, however; and I didn't find a good monospaced font to go with any of them (but I didn't spend much time trying). I didn't look at any non-free fonts.

One minor problem is that none of these fonts have glyphs for Devanagari characters. I didn't notice, at first, because Firefox is clever enough to display the missing characters in another font; but Chrome displays only the dreaded little boxes. I don't use non-Latin characters often, so I could live with having to mark them up individually to use Verdana (which does have suitable glyphs), but it's an inconvenience.

I think I'll stick with Verdana for now, until I have time to investigate the options more thoroughly.