Ask your favorite typophile about the difference between Arial and Helvetica, and you’re sure to regret it… unless you have a latent appreciation for the differences between font faces, the attention given to kerning and hinting, and more. But ask them what’s the difference between Tahoma and Verdana, and you might just be surprised by the ensuing silence. Yet, these are two of the most popular online fonts, and have aged significantly well considering they share corporate roots with Comic Sans and Arial.1 If any fonts ever deserved scrutiny and attention, it’s these two.
Here are two lines of text, one in each of the two fonts in question:
Aside from the appalling hinting obvious in the second line,2 there are some uncanny likenesses between the two. While it’s hard to point out any structural differences between the characters, this image actually gives us our first major hint as to the difference between these two popular fonts: the second sample is somewhat heavier, almost as if it were a “Tahoma Medium” rather than a different font altogether.
The differences don’t stop there, however. Solely factoring in the width of the strokes in the Verdana font sample does not account for the extra word’s worth of x-spacing taken up by the second line. If we drop the size of the Verdana sample down to 10.5pt from the original 11, we get characters with approximately the same width as those in the Tahoma sample, making it clear that the variations in linewidth stem from a different reason:
Before we dig deeper into the differences between the two fonts, let’s take a step back and explore their origins and design motivations. Both Verdana and Tahoma were introduced in Windows 95, as part of the collection of fonts commissioned by Microsoft for “the new PC era,” and designed by the legendary Matthew Carter of Georgia3 fame and then hinted to pixel perfection by Tom Rickner of Monotype.
The purpose of this commission was to create a package of fonts that could be used for a variety of purposes sharing a common theme: rendered/displayed on a computer screen rather than in print. The Microsoft-commissioned package of fonts was one of the first – if not the very first – attempts at creating fonts optimized for display rather than print; addressing issues such as legibility, kerning, letter spacing, and more as affected by the nature of the medium displaying them and its salient characteristics, such as a low DPI, a different reading distance, zero literal ink bleed, and pixels formed of individual RGB subpixel components.4
To that end, Matthew’s final package included both a serif font (none other than the beautiful Georgia) as well as the two sans serif fonts we are looking at today. What’s curious is that these two are essentially the same font, just adjusted for on-screen legibility differently (or, perhaps more accurately, to a different extent). To illustrate just how similar these two fonts are, here’s the letter
a as it appears in both, superimposed atop of one another:
We can immediately see that they’re so similar, it’s not even funny. The biggest difference between the two samples is in their width; at 12pt the letter
a is 0.072″ in Tahoma, while at the same point size it comes in at 0.077″ instead (or 7% wider). In fact, here’s what they look like when the Verdana sample is scaled in the x-direction down to 93.5% of its original:
As far as how the characters themselves were designed, this is the last difference between the two fonts: Tahoma’s characters are drawn with a shade smaller counters when compared to their Verdana counterparts.
Counters are part of the design elements of a typeface, and refer to the negative space formed by the connecting of strokes in a character. Here’s the counter for the
a from Tahoma:
While both the Tahoma and Verdana samples in the last last specimen above start off in the top-left corner pixel-for-pixel identical, the downwards stroke of the letter
a gains a hair’s width as it becomes fully perpendicular to the x-axis, and retains this extra width the rest of the way down:
The same can be seen in the bowl of the letter
a, where the leftmost stroke in the Tahoma sample inches inwards, reducing the radius of the bowl ever so slightly, then coming back in to connect with the stem just a pixel or two higher than the Verdana sample does (while having gone back to the same stroke width), also reducing the size of the counter in the process:
While that just about covers the difference between the characters of these two fonts, there’s one final piece of the puzzle left. We come back full circle to the text samples in the opening paragraph and the difference in the line length between the Tahoma and Verdana samples, a difference not wholly accounted for by the differences in stroke size or the horizontal scale of the individual letters: the tracking.
Here we can finally see clearly the biggest difference between these two typefaces. With the individual characters in the Verdana sample scaled down to 93% of their initial width, the only non-negligible difference between the two fonts is now their letter spacing: Verdana’s characters are spaced considerably farther apart than those of Tahoma. While they start off nicely lined up at the
s, the situation deteriorates significantly from there, until the
l in Verdana’s
sample is superimposed on top of the
e from the Tahoma text.
We’ve already discussed the various factors that contribute to legibility on a computer display, and it’s a fairly straightforward exercise to come up with individual features or characteristics of a display that would lead it to benefit in legibility by increasing the tracking5 of the letters. What’s not clear is the impetus that would lead to both of fonts being chosen for inclusion with Windows 95 and making their way into web and PC history. If these are two font faces that are structurally and aesthetically identical for all intents and purposes, why ship with two (extremely) different letter trackings? If one tracking has superior legibility when it comes to on-screen displays, why include the other?
The answer to that question can be found in a Typophile column titled Georgia & Verdana: Typefaces designed for the screen (finally) by Daniel Will-Harris,6 who interviewed Simon Earnshaw, then a typographer working at Microsoft:
The Verdana family started in early Summer 94 as a two font typeface (Tahoma), designed by Matthew Carter and hinted by Tom Rickner, to be used as a system font for Windows 95.
To make the fonts work in extended text settings, it was necessary to open up the counters more, widen the advance widths and loosen the spacing. Thus Verdana was born; effectively the more generous cousin of Tahoma.
And there you have it, straight from the horse’s mouth. Tahoma is the original and Verdana was created to specifically optimize for certain requirements that required enhanced legibility, perhaps, as some would say, even at the cost of aesthetics.
As for what these “extended text” settings might include, it’s hard to say for sure based off of what little Earnshaw has given us to work with; but just from what we know about how window forms are drawn under Windows, it’s likely a reference to the difference between text-heavy (“extended text”) and text-light regions. Unlike, say, a book, a system UI has quite the mix of design elements and features text in a lot of distinct settings. In places, text resembles a newspaper headline, while in others comparisons to the body of a chapter book would be more apt.
Today there remains little resemblance to the original world of on-screen text as it existed in 1994. High DPI screens are everywhere, and the world of font hinting has moved from the original monochrome hinting approach to first greyscale aliasing then color aliasing with ClearType under Windows Vista,7, and now hardware-accelerated text rendering with advanced capabilities like infinitely variable stroke widths with the new OTF variable sized fonts feature when rendered with Direct2D/DirectWrite under Windows 10.8
So between these two fonts, which should you use? To this writer’s eye’s, Tahoma certainly has better aesthetics, and it has been continuously extended with a richer character set and more symbols, while Verdana has somewhat languished over the years. Perhaps more importantly, the type hinting for Verdana seems somewhat lackluster, suggesting it may have been skipped over or given only the meagerest of attention from Microsoft’s typography division when it came to updating the fonts’ hinting to play nicer with ClearType and DirectWrite/Direct2D. And yet, some have a preference for the (extreme) bias towards legibility that Verdana presents, and given the right setting, it can certainly be a worthy choice. It’s your call.
So do you think you can spot the difference in this final test? Verdana’s spacing and horizontal scale has been adjusted to match that of Tahoma – but can you tell which is which?
Just to name two fonts that designers love to hate. ↩
There is also bound to be additional hinting due to the complexities of Direct2D/DirectWrite text rendering, which takes into account the monitor, resolution, DPI, and actual pixel arrangement; some or all of which likely differ between the environment where the screenshot was taken and your PC viewing this image right now. ↩
Being, in the humble opinion of this writer, one of the most excellently designed, superbly hinted, and well balanced general-purpose fonts available today, all these years later. If you haven’t come across Georgia Pro before, you should take a look at it. It supplements Georgia with all the missing widths and some additional symbols, making it a great font to layout text with. ↩
Source: Typographically Speaking: The Art of Matthew Carter by Margaret Re, Johanna Drucker, James Mosley, and none other than Matthew Carter himself. Not available on Amazon, but available on Google Books. ↩
“Tracking” is the distance between a virtual rectangle drawn tightly around each letter, while “kerning” affects the distance between the actual components of each letter and adjacent components of other letters ↩
Which saw a virtual cornucopia of new, ClearType-ready fonts released to celebrate the occasion. ↩
And Microsoft is once more releasing a font to mark the occasion, and this time it’s Bahnschrift. More on that later. ↩