Don’t smoke Verdana!

Verdana is very popular at the “I-can-read-4px-fonts school of web designers”. That is because Verdana _is_ pretty, and it’s legible even at fairly small sizes.
Still, I hate it, and you should avoid it. I’ve prepared nine screenshots to show you why.


These screenshots all share the following characteristics, which is fairly typical setting when Verdana is used:
bc. p {
font-size: 10px;
line-height: 14px;
width: 42em;
text-align: justify;
}
The problem arises when Verdana does not exist on the computer where the web site is viewed. Most often one would specify a line of fallback fonts, ending with sans-serif.
h3. Verdana
!http://virtuelvis.com/download/146/verdana.png(Verdana rendering at 10/14px)!
Verdana at 10px is fairly readable if you have 20/20 vision. And if you don’t have 20/20-vision, it may sometimes be classified as “readable”.
h3. Bitstream Vera Sans
!http://virtuelvis.com/download/146/bitstream.png(Bitstream Vera Sans rendering at 10/14px)!
Harder to read than Verdana, but still readable. I’d recommend upping the font-size a bit if you’re going to use this.
h3. MS Sans Serif
!http://virtuelvis.com/download/146/mssans.png(MS Sans Serif rendering at 10/14px)!
MS Sans serif also appears readable at 10px, but notice how the lines appear “squashed”, and it doesn’t look oh-so-pretty anymore? This means you would have to increase line height, which again might make lines of text appear disconnected if Verdana exists.
h3. Arial
!http://virtuelvis.com/download/146/arial.png(Arial rendering at 10/14px)!
We are quickly moving into the realm of the nearly-unreadable here. I have to move a closer to the monitor to be able to read this.
h3. Trebuchet MS
!http://virtuelvis.com/download/146/trebuchet.png(Trebuchet MS rendering at 10/14px)!
Microscope anyone?
h3. Tahoma
!http://virtuelvis.com/download/146/tahoma.png(Tahoma rendering at 10/14px)!
Yeah, a microscope is _definitely_ needed. Now with letters having the wrong width.
h3. Default sans-serif font Mozilla 1.3 on Redhat Linux
!http://virtuelvis.com/download/146/linsans.png(Linux – Mozilla sans-serif rendering at 10/14px)!
Who said Trebuchet MS with mutilated kerning and spacing?
h3. Default sans-serif font, Opera 7.11 on Redhat Linux
!http://virtuelvis.com/download/146/linsans2.png(Linux – Opera sans-serif rendering at 10/14px)!
Six degrees of spacing errors.
h3. Ouch
Finally, let’s see what happens when the clueless designer is hanging around, using font-family: Verdana; for our nice 10/14px example, without specifying a generic font-family?
!http://virtuelvis.com/download/146/allwrong.png(Rendering at 10/14px when generic font family is missing)!
I’ll repeat, with emphasis: Ouch!.
So kids, don’t do Verdana.

28 Comments

  1. I don’t understand the point. As per your screenshots, Verdana is most readable. And the comment about no generic font family applies to any font family, not only Verdana.
    Besides, most sans-serif font are unsuitable for anything other than headings. Unless, that is, they were specifically designed for readability, like Trebuchet MS.
    Speaking of ugly, I would say that text longer that one line with Arial, Helvetica, Verdana, Tahoma and unspecified line height and unspecified size is ugly. You can exaggerate the other way round, and leave everything undefined. That is why W3 specs styles are so ugly they could stop all clocks in Switzerland. With the exception, uh, of thirteen people on this planet, me included, who customized their fonts in their browsers.
    M.

  2. exclipy

     /  2004-01-12

    I don’t see the problem either.
    Verdana and Georgia are so popular, especially at small sizes because their aspect values (x-height/font-size) are so high, which makes them so legible at small sizes.
    I have my Windows fonts imported over in Linux, so I can actually see Verdana in Linux. It also works better if you turn of anti-aliasing. But I concede that not all Linux users will do this.
    And I don’t need a microscope where you say you do. I can read it perfectly from a normal reading distance (and I’m far from 20/20). Do you have an extremely high resolution? I’m on 1024×768 17″ (CRT).
    Also, you can hardly argue that accidentally forgetting to fallback to sans-serif is a problem.

  3. Rob

     /  2004-01-12

    I don’t understand either. What’s your point? You seem to contradict yourself.

  4. Hmm, don’t see it either. Verdana gives me a clear and nice typeface. I installed Bitstream Vera fonts as you suggested in your previous entry. They look very nice on Linux but on my win machine they look quite crispy. So may be it’s an OS related issue. I mean Verdana on my Linux machine is also not exactly looking the same as on my other.

  5. To all: How can you not understand it? The above pictures are taken on a computer where Verdana is not installed (except the first one). When a web site is styled for and with Verdana, and the characteristics of other fonts aren’t taken into consideration, the text becomes unreadable where Verdana isn’t available.
    Of course Verdana is readable above. That’s half the point. People don’t design with Verdana and make it unreadable. I at least hope they don’t. When Verdana is used, almost all other fallback fonts are unreadable.

  6. Seara

     /  2004-01-12

    In this case Verdana is; afaik; the most readable font. And font-size: 10px; I’m to beleive that this aticle is “just for the stupid” of Your readers. 10px _is_ to small in any font.
    In this case I beleive You truly missed Your point.

  7. Well, I can agree that the last example (with the serif) is a bit hard to read, but the other ones are just fine. Personally, I set the default font in my browser to be sans-serif (Vera on Linux, Verdana on Windows), so I wouldn’t get that version. Serifs don’t work well on screens, except for in very big point sizes (like in headings). Unfortunately, most browsers have their default configuration the other way around for some reason.
    I think that the biggest problem is with people specifying pixel sizes, and people having high resolutions. Pixel sizes work well if you know the sizee of the pixels (in units of length), not otherwise. Personally, whenever I specify a non-relative font size (which I try to avoid as much as possible), I always define it in points, since points will scale properly depending on your screen resolution (given that you have configured your display properly, that is).
    I’m at 1152×864 on a 17 inch CRT here, under Linux (with anti-alias disabled, I hate anti-aliased fonts). Are you using a higher resolution on a smaller screen? Then I would understand your problems.

  8. Peter,
    Agreed about anti-aliased fonts. Everything is “bold” under anti-alias.
    The reason why serif is better for large blocks of text is that it is more readable. That is why since XIX century serif is used for text, and sans-serif for headings. Serif is eye-friendly.
    It is of course true that serif may be dangerous at small sizes, but then it is the whole point – to adjust size to the font type. If I use serif, I never go below 90% of the default – and I always use percentages for font sizes. Palatino, or Times, or even smallish Garamond are infinitely more readable at 90% or 100% than any sans-serif.
    Besides, very few authors specify a line height that would help comfort the reader. it is in my humble opinion more important than the font type. I loathe long blocks of text in sans-serif, but I will read them without trouble or discomfort if the line height is set to be at least 200%.
    So no, I wouldn’t agree about serif being bad for text. Not at all. Typographic principles encourage using white space between lines (in css it’s line height), and serif for text, which of course demands large enough size.
    Fortunately, there are computer screen fonts that are halfway between serif and sans-serif. They are good, too.
    M.

  9. To reiterate my point, which Asbjørn already explicitly said something about:
    The proportions of the Verdana font differ fairly significantly from any other commonly available typeface. The font is both quite wide, and it has a large x-height, a characteristic it does not share with any of the fonts commonly used as fallbacks. And no, there’s no use in talking about “fallback fonts” that aren’t commonly installed on any computer.
    The problem arises when Verdana does not exist on the system viewing the web site. For instance, I am now sitting on a machine where Verdana does not exist, and I have no opportunity to install new fonts.
    Due to Verdanas readability at small sizes, people often use Verdana in the size range 9 to 11 pixels, and on this system, I often end up with webpages that are unreadable to me, simply because the fallback fonts appear too small. And yes, I often see the “Ouch” example.
    People have asked if I’m using systems with high resolutions? Well, from 1152×864 on a 17″ via 1280×960″ on 19″ to 1600×1200 on 21″ systems is not what I would consider “high” resolutions.
    As for the serif vs. sans-serif debate: Ideally, yes, serif fonts are more readable. That however, is very dependant on the viewing devices ability to accurately reproduce the serifs, something computer screens unfortunately don’t do yet (I’m waiting for 150 or 200dpi screens to become commonplace).

  10. Claude

     /  2004-01-15

    At the risk of being off-topic, does anyone know what exactly measures the point-size especially for Verdana? Is it the height of a specific glyph?

  11. CSS 2.1 says that the font-size “corresponds to the em square”:http://www.w3.org/TR/CSS21/fonts.html#font-size-props.

  12. I believe Microsoft has designed Verdana exactly for the task of on-screen readability so why don’t you let your guns on the ground and use it + Trebuchet MS + Georgia

  13. Øyvind

     /  2004-01-16

    The only lessons learned from the above example is to use Verdana with a little care (but that really applies to all typography)
    I suggest that using verdana in a decent size (12px) would solve the legibility issues for almost every single user around the globe.
    And remeber that there is smarter alternative fonts to set than just “sans-serif”.
    Consider this line for a starter:
    bc. font-family: Verdana, “Bitstream Vera Sans”, Geneva, “Lucida Grande”, sans-serif

  14. Erm… I don’t really see a problem with those pics either.
    The only lesson that should be learned is that the px value is not an accessible unit to use. Instead use em (where 1em is used for normal text & >1em is used for headers).
    That way the fontsize is equal to the user’s preference.
    I once posted the URL of my site to a newsgroup requesting a site review. At the time all the font sizes were specified in px. I actually changed all the font sizes 4 times after people kept complaining that it was too big/small, before someone suggested I use em.

  15. Anyone who have looked at my “stylesheet”:http://virtuelvis.com/styles/screen.css will no doubt have noticed that I do not use the px units myself.
    The problem with Verdana in the example is not, contrary to popular belief among some of the commenters, the size set in px.
    Whether you set Verdana with 0.7-0.8em or 10/11/12px is hardly relevant. What _is_ relevant is that when Verdana is the first-choice font in the CSS, the fallback fonts are often quite unreadable.
    The Verdana problem could largely have been a non-problem if browsers had supported font-size-adjust, but that particular CSS property is implemented in so few browsers, and on so few webpages that it is removed from the current CSS2.1 Working Draft.

  16. Rob

     /  2004-02-01

    In my opinion, Verdana is the most logical and best choice for the sans-serif font.
    If you are concerned that computers without Verdana installed on them will display the substitute font as too small per specified size, than you can use in your design the least readable of all popular fonts, specify the smallest readable size of that font and then replace that font with Verdana (without changing the size, of course). Style sheets make that trick very easy and quick to employ.
    Rob

  17. The problem you have then, Rob, is that the base with installed Verdana gets a font that’s too big. Not a huge problem accessible-wise, but a minor problem design- and typography-wise.
    The best thing is to not use Verdana, as this font differentiates from the other Sans-Serifs so much that it can’t be used as an alternative. Many other fonts can be switched without the user noticing though, and that’s the whole point of having comma separated font variants in the stylesheet.
    When this comma separated list contains a font which is very different from the others, and especially if this font is the first one (which the design therefore is adjusted to), much of the use with ‘alternative fonts’ is spoiled.
    IMHO, of course.

  18. Rob

     /  2004-02-03

    Well, Asbjørn, I don’t know what system you are using, but on my Mac I get Verdana installed automatically with my operating system and I presume that all Windows boxes have them installed as well, since Microsoft designed that font (and Georgia, too – which is the best serif font for the screen). That would cover about 95% of all existing computers. So, I do not feel that there is much damage done to the general public viewing web sites where Verdana is specified as a font of choice.
    Those two fonts are best things that Microsoft ever designed, by the way…
    Rob

  19. Rob: Linux distributions come without Verdana installed, and what you see on the bottom three screenshots is what these users end up seeing. My philosophy is that you shouldn’t discriminate against any user if it can be avoided. Avoiding Verdana, and instead choosing a font that’s more likely not to cause catastrophically unreadable pages is a good way to do this.
    As a footnote: Using Verdana would have be perfectly safe if browsers had supported font-size-adjust and authors had used it. Unfortunately browser implementations are virtually non-existent, and the property is being dropped from CSS 2.1.

  20. The lack of or existing support for something, and other statistics isn’t what this is about. It’s not about figures, it’s about something so simple as just avoiding one font face and with that not discriminate anyone.
    If that «anyone» is only 1 person, or if it is 1.000.000 doesn’t really matter, imho. If there’s no real point in discriminating him/her/them, why the heck would you? There are plenty of other brilliant fonts you can use, which cooperate much better than Verdana, and which just as many (if not more) people have installed.
    Someone have described not using Verdana as «adjusting the web page to minorities», just as adjusting web pages to Netscape Navigator 4.7. Well, that’s not the case. At all. The case is that when dropping Verdana, you actually save yourself work and at the same time don’t discriminate anyone. When adjusting to Netscape 4.7, you use heaps of time doing it, and still you are going to «discriminate» someone using other buggy and partly broken browsers.
    Instead you should aim at supporting standards (and not browsers), playing safe when choosing color (color blindness is an issue, e.g.) and what this discussion is about; play it safe when you’re choosing font. Verdana isn’t a safe bet, and is horribly easy and quick to avoid. So that’s what you imho should do. Don’t smoke Verdana.

  21. Rob

     /  2004-02-07

    Guys!
    If you say “Don’t use Verdana, because some minuscule percentage of computers can’t display it properly”, than, perhaps we shouldn’t use CSS either, because some browsers can’t interpret it properly?
    You are advocating regress in web design, while we all should push for progress. Verdana and Georgia are the only widely used fonts that are specifically designed for the screen and are much easier to read than any others (and I have to emphasize the “widely used”). Why should we go back to the lowest common denominator when we have truely wonderful font to use?
    Regards,
    Rob

  22. Rob, this entry resides in the “Accessibility” category, because using Verdana _causes accessibility problems._
    CSS does not cause accessibility problems, CSS _solves_ them.

  23. Hass

     /  2004-02-07

    I’d say yuor gtitneg pterry pkciy, Arves. Dnid’t you see taht stduy that sohwed the fsrit and lsat lrtetes in palce is all that is nedeed for cmheeoirsnopn?…Great post, you sparked quite a debate. On my system the line height in this comments section is too high for my taste, curious how it would look in Verdana.

  24. Rob

     /  2004-02-12

    Arve,
    My apology! Somehow, I didn’t realize this was an accessibility problem…
    Speaking of accessibility – who can tell me why is it that every time I am trying to use Safari to access this page, after 5-10 seconds my browser quits unexpectedly? When I use Explorer, everything seems to work fine.
    Rob

  25. Rob: I try to keep all HTML and CSS at this site valid, so if Safari crashes, there probably is a bug in the version of Safari you are using.

  26. Rob

     /  2004-02-18

    Hi, Arve,
    I got the latest version (1.2), but everything is possible…
    Best regards,
    Rob

  27. Aubli

     /  2005-09-20

    Hi Arve,
    Above, you mention that both relative text sizing with pixels and with ems fail to address the problems caused by the use of Verdana, and that this is because Verdana’s exaggerated x-height is the culprit.
    I wonder, can specifying text sizing using the ‘ex’ unit (as recommended here: http://kb.mozillazine.org/Em_vs._ex ) help? Or is browser support for the ex unit too shaky for this to be a viable solution? Am I right in thinking that the ex unit suggests an approach to making verdana work in harmony with other fonts (even if the actual implementation of ex units does not yet allow this)?

  28. Aubli: No. What _could_ have potentially helped, was if browsers supported the CSS 2.0 feature named “font-size-adjust”:http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size-adjust — but I wouldn’t hold my breath.
    (FWIW: Most browsers treat 1ex=0.5em