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.