Kenny has started a war, a typographical war! Let’s see who survives round two:
Introduction:
Three default fonts are used in the web browsers of three different operating systems. In order to grade each font in their individual context, I have compiled an image from the three Kenny made, showing the three browser fonts placed next to each other for comparison. I have saved the identities of each font until the end of this feature.
Title (”The Jux Entente”):
At this point size, you can make the most detailed analysis of the structure of the fonts…
- On the first font, most of the edges are blurry\aliased, even the straight lines, but especially on the serifs. The “x” in Jux is a bit out of proportion, and the geometry of the lowercase letters creates lines that are not consistent from letter to letter. Also, the stroke widths vary slightly, and anytime the width changes, aliasing comes in to play.
- In the second sample, the lines are very crisp, without looking jagged. I don’t like the “J” in Jux; it digs too deeply into the subscript, while still reaching to the top of the superscript area. Overall, the letters are of a very consistent stroke width. It avoids most of the aliasing by using straight or thick lines wherever possible. Legibility is also improved by the geometry of the lowercase letters, keeping the focus at the center of each letter, most notably in the “e” letters.
- Number three is much crisper than the first one, it manages to get clarity in its curves and lines without aliasing. At this size, it can afford to render curves with more contrast and less blending; however, it loses points because the stroke widths vary widely between very thick and razor thin. The “e” letters are oblong and have the same geometry issues as the first one. In my opinion, this mixture of line widths and varying lines of sight increases eyestrain and reduces legibility.
Verdict: #2, with #3 following very close behind. #2 would have won by a much larger margin if it weren’t for that ambitious “J”.
Menu (”Features Members Forum …”):
This one is a little easier to judge…
- At this point size, any benefit the first font had is now lost. Practically every edge, curved or straight, is aliased to the point where it is completely blended with the background color, and appears darker than te other two. The edges are not clear at all, and it hurts just to read it.
- Number two is still strong at this size, maintaining clarity and stroke width for good general legibility. It’s one flaw is in the word “Members” where it inexplicably has a larger than average space between the “M” and the “e”.
- The third font is much clearer than the first, and still resists aliasing well, but its constrained geometry really hurts it now, as the lowercase letters become caricatures of themselves and only two pixels stand in the way of the “e” becoming a “c”. The spacing between letters is very consistent, but a little close for comfort. In addition, the razor edges of its various strokes cause the lowercase letters to develop breaks and jagged lines.
Verdict: #2, hands down.
Feature Title (”Sorry …”):
Here we get to see the inverse contrast of the previous two…
- Number one improves slightly at this larger size, but even here it seems as if it is smudged somehow, especially on the round lowercase letters. It actually fits right in with my signature image, which is not a good thing.
- Here, number two is slightly disappointing compared to its previous samples. I can see aliasing on the letters “y” and “s”, and I’m not too fond of that comma, either. It’s still quite legible, but the aliasing is now noticable.
- Number three comes out strong here, maintaining legibility in spite of its geometry. The curves are relatively crisp, and I like the comma. We still see some spacing concerns as the “rry” run together, but largely a decent presentation.
Verdict: Tie between #2 and #3.
Name, Date, and Text (”Zagrophyte”/” February …”/”We are in …”):
I’m combining these since they are the same size.
- Number one continues to fall behind as it fades into the background. In all three remaining samples it appears blurrier and out of place in regards to the other two. It does try to gain legibility by being bolder than the others, but if we wanted it to be bold we would have formatted it that way.
- This is a tough decision. In the name field, the blue color of #2 doesn’t do it any favors, as the generally beneficial smoothing causes a slight haze around the letters, something I just got done complaining about in #1; however, in the date and content text fields, the black color provides the contrast that this font needs to rise above its aliasing issues, and the well-formed nature of this font really shines. The eyes glide over the text easily, and eyestrain is negligible.
- No one can question the clarity of the third font in this final round. Unfortunately, I think that it is a little too pixely. While still easier to read than #1, the pixelation really detracts from the form and aesthetics of the text. The combination of inconsistent geometry and jagged edges push it away from first place. I don’t mind it so much in the name and date sections, but in the content text area I would rather not scrape my eyes over those sharp edges and inconsistent sight-lines for paragraphs at a time.
Verdict: #2 overall, due to the fact that you’re going to be reading mostly content text in a browser scenario.
Conclusion:
I contend that the second font in most cases is best, due to overall aesthetic form and geometric consistency. I had picked #1 as my runner up before I wrote this, but after examining each one closely, there’s no doubt that #3 is leagues ahead of #1 in clarity and legibility. Graeme criticizes the size of #2, but I don’t see the larger size as a flaw, and certainly wouldn’t call it ridiculously huge–with the exception of that “J”, of course!
I believe I’ve successfully outlined the reasons for my Juxtaposition on font #2, including many points for why it is more legible, regardless of size.
Cheat Sheet (select with mouse to view):
#1: Mac OS X, #2: Ubuntu Linux 7.10, #3: Windows XP
