Survey Most Legible Serif and Sans Serif Web Font

Mak's picture

Hello all,

I'm working on a project for a web model and I'm surveying what everyone thinks is the most legible font for the web for body text in Serif and Sans Serif fonts?

hrant's picture

If by "web fonts" you mean fonts that are installed in OSes
and can be called up in plain HTML, that's sort of a limiting
discussion (as well as very imprecise these days, considering
rendering differences between Windows and MacOS).

But if you mean screen fonts (which can actually be deployed
without necessarily being present on the host system) then for
sans I would alert you to my Mana fonts, which come in 16, 13
and 11 PPEM (each in regular and bold). Here's a sample setting
of the two smaller sizes:

And here's a head-to-head comparison:

For a serif face, to me Georgia is unmatched... for now. :-)


Mak's picture

Sorry i do mean for screen...
thanks for the reply!

Guerella's picture

this isn't an answer, but a great site to check out for readability testing.

Si_Daniels's picture

> as well as very imprecise these days, considering
rendering differences between Windows and MacOS

This is true. When Apple stopped using hints they likely went for a the antialiasing algorithms that worked best for Lucida. So the answer would be “depends”.

Mak's picture

I totally forgot about typetester.
Thank you!

John Hudson's picture

Hrant, do you have anything wider than Mana? I find it to condensed for easy reading. It looks good in the navigation example contra antialiased Tahoma, but in the text comparison with Verdana I find the latter easier to read, even though the actual rendering of many of the individual letters in Mana is better than the b/w Verdana bitmaps. I'm sure this is due almost entirely to the narrowness of Mana.

hrant's picture

I agree that it's a bit too narrow for optimal reading.
Although the difference between this and one more bit
of width isn't minor! In fact one more bit might make it
non-optimal on the other side - at least at those PPEMs.
For example a 14 PPEM bitmap font at the widths of the
Mana-16 might be right on the mark.

My reasons for making Mana like this are that:
1) It's a sans, so non-optimal for reading anyway. I have a serif in the works that's wider. But, as above, part of the reason it looks wider is that the x-height is one bit shorter (and so are the descenders).
2) Since it's a screen font, being able to fit in narrow spaces is a big plus, and this makes Mana more versatile.
3) It helps it stand out from the crowd, including Verdana.
4) Making it wider would cause the interal white to start overpowering the interletter spacing, especially in the lighter weights, which also have smaller x-heights (and especially for a sans). The "integerness" of everything in a bitmap font (including here the interletter spacing) tends to propagate issues throughout the design. It's like the various "integernesses" :-) are in a multi-way tug-of-war, and you have to make sure nothing falls in the mud.

But really, I actually find Mana more readable than Verdana on that page, probably because: the grays hold the letters (and boumas?) together better; and it's one bit taller, making it of comparable apparent size, something even more important onscreen than in print.

But if there's enough demand (read: $) for a wider sans,
then I'd love to make it - in bitmap font design that sort
of change isn't too hard. The hard part is sizing. :-)


Syndicate content Syndicate content