Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

Arial vs. Verdana

29 Jul 2003 by

We’re curious… Between Arial and Verdana, which HTML-based font do you prefer online? Which do you think is more readable? Which do you think is cleaner? Which do you think is better for a web-based e-commerce UI? This is across the full spectrum of common sizes you’d find online (from small 9 point to large 20+ point). And, when you leave your comment, please let us know if your browser renders aliased or anti-aliased text. Thanks.

67 comments so far (Post a Comment)

29 Jul 2003 | bk said...

Verdana - aliased.

29 Jul 2003 | pecky said...

Verdana and not because I am an Arial snob.

Anti-aliased - Safari.

29 Jul 2003 | Steven Garrity said...

Verdana all the way - I use every variety of browser, mac/pc, anti-aliased/not.

29 Jul 2003 | De Murph [Aliased] said...

Verdana... optimised for screen legibility (not just letter shapes... also body heights and letter-spacing).

29 Jul 2003 | Mal Ross said...

Preference: Verdana (at all sizes)
Browser: Aliased up to and incl. 12pt, anti-aliased above

I prefer Verdana for a variety of reasons, but the main one is its legibility. I feel very comfortable reading it. In comparison, reading Arial makes me feel cross-eyed, just because the letters are so tightly packed. At 8, 9 and 10pt in particular, Verdana kicks Arial's ass. Also, Arial's quite an old-looking font these days. Nobody wants to look like they're stuck in the last century. Finally, I just find the curves in Verdana more aesthetically pleasing.

29 Jul 2003 | Stephen DesRoches said...

add one more for Verdana

29 Jul 2003 | Anthony Morales said...

Verdana. Arial is too compact, however, I prefer a larger-than-default line-height for the font sizes above 11px. While Verdana is great horizontally, it's a little too squat. I use both mac/pc, aliased/anti-aliased font.

29 Jul 2003 | Daniel Burka said...

No question, Verdana. Also, at least on the PC, the kerning of Tahoma at 11px is much nicer and otherwise varies very little from Verdana at that size.

29 Jul 2003 | Jeff said...

I've been struggling with this question for a while. Seems like Verdana displays better at 10px for labels. Arial's bold isn't distinguishable from roman at that size. On MacOSX, Lucida Grande seems to beat them both at 10px anti-alias for clarity.

As you get into body copy, the difference isn't as striking. 11px Verdana is my choice as the best compromise across platforms.

Here's a collection of screenshots from different platforms
http://www.howardesign.com/exp/compare/

And a utility for side-by-side comparisons
http://www.howardesign.com/exp/fonts/compare.html

29 Jul 2003 | dale. said...

verdana - anti-aliased

29 Jul 2003 | hurley #1 said...

And another for Verdana (and I use anti-aliasing).

I work a lot on a site whose body text is all in small Arial, and I feels dense to me compared with the relative spaciousness of Verdana at the same size.

The perception of Arial as a "dated" font will probably doom it to the same fate as Helvetica, which is seen as terribly 1980s. Although Helvetica is still preferred by some, even today. You can waste a few minutes making these two fonts duke it out at www.mimeartist.com/helvetica/

29 Jul 2003 | JF said...

Jeff, that side-by-side comparison page is really useful. Thanks for posting it.

29 Jul 2003 | stone said...

Verdana. The horizontal stretch increases the space inside the counters (closed spaces inside letters like a, e and o), increasing legibility. Plus, Verdana looks much better in print, and it's always a possibility that online pages will be printed.

29 Jul 2003 | Chris said...

Verdana - at small sizes I like it Aliased, however larger sizes Anti-Aliased. The new Windows XP Font smoothing is totally awesome, it is the best thing going for Windows based type.

29 Jul 2003 | stone said...

Aliased

29 Jul 2003 | stone said...

Aliased.

29 Jul 2003 | Guy said...

Verdana for body copy and Arial for headings (if larger than 11px (equiv)).

Verdana looks much better at small sizes and Arial looks much better at larger sizes.

I use both Mac and PC in both aliased and anti-aliased modes. Verdana looks good in both. Arial looks bad when not anti-aliased.

29 Jul 2003 | Sonia said...

Verdana - aliased and anti

29 Jul 2003 | jazer said...

I wouldn't go so far as to say either is better, but rather Verdana is well suited to small sizes, and Arial works well at headline sizes. The two fonts also have a slightly different feel to them--Verdana seems a bit friendlier (more curvy), while Arial is very clean and modern (yes, I believe).

29 Jul 2003 | Bondi said...

Anyone here mix Arial and Verdana? Any good examples of mixing these fonts?

29 Jul 2003 | Mike said...

First, I use Verdana, anti-aliased. Arial is too "defaultish" for me ;)

I ran across this site awhile back, and think its pretty interesting. How well do you know your Helvetica from your Arial? Can you differentiate in a head to head match up?

Probably not ;) I was fooled... big time lol

29 Jul 2003 | Steven said...

Verdana - usually anti-aliased (OS X). Arial is just fugly when aliased. When it's anti-aliased, it can look good, especially in larger sizes (as several have said above). Though it's OS X-only (yes?), I'm becoming fond of Lucida Grande of late, though maybe it's just that I'm getting bored with both Arial and Verdana (despite Verdana's superior legibility).

29 Jul 2003 | pb said...

Verdana. On this page, the comments are aliased and the name/date is not. Arial is OK for headlines but I don't believe was ever intended for text.

29 Jul 2003 | Tomas said...

Verdana, preferably at 11px, never in "big" sizes. I think Arial is too narrow, maybe for headlines, that kind of stuff.

29 Jul 2003 | Steve said...

I'm awfully tired of both fonts. Like several people mentioned, of the two, Verdana works better at body copy sizes. There are some larger sizes where, even bolded, it carries no weight at all. Not what you want in a headline font.

For body copy - assuming there's lots of copy to read - I've gone to preferring good ol' Times. Readability studies that date back decades show that seriffed fonts are notably better in terms of readability than sans serif fonts. So why would I do body copy in a less-efficient font?

In contrast, sans serif fonts are better for large presentation. It's a good reason why many newspapers have sans serif headline fonts. And why they all have serifed body fonts.

29 Jul 2003 | Menc said...

I think Pixelsurgeon is a good example of combining verdana for body text and arial for headings. And another vote for verdana - aliased and anti - aliased.

29 Jul 2003 | fajalar said...

For apps I use Verdana for field captions, and body text. But I use Arial for table data. Since verdana is wider than Arial, I can get more into a table with multiple columns and still have it be readable.

Anti-aliased.

29 Jul 2003 | Jamie said...

Verdana for all occasions. (I think I'm starting to notice a trend...)

Jeff - thanks for the side-by-side font tool. Very nice.

29 Jul 2003 | speedy said...

verdana - anti-aliased (safari)

29 Jul 2003 | fajalar said...

Doesn't mention Arial, but I forgot to add:

"Research shows no reliable differences in reading speed or user preferences between 10-point Times Roman, Georgia serif fonts, Helvetica, or Verdana sans serif fonts."

From our good friends at usability.gov.

29 Jul 2003 | Michael Spina said...

Definitely Verdana, anti-aliased. Verdana (at least on the Web) is the new Helvetica.

29 Jul 2003 | bbr said...

i read somewhere that sans serif fonts are more legible at small sizes on computer monitors, especially when aliased. personally i find small aliased type pretty hard to read for body copy, especially like 10px georgia or times. it's nice for headers though.

is there a way to get safari to alias text correctly? the only way i can do it is by changing the size of font smoothing in the system preferences. however, the letter spacing gets really funky when i do this. is there another way? i love safari but miss reading aliased 11px verdana text.

29 Jul 2003 | Jasmeet said...

Verdana, Safari: Anti-aliased

29 Jul 2003 | hurley #1 said...

Readability studies that date back decades show that seriffed fonts are notably better in terms of readability than sans serif fonts. So why would I do body copy in a less-efficient font?

I think those readability studies were based on print on paper. I remember reading somewhere (maybe in Nielsen's book?) that sans-serif type on the screen is easier to read than serif type.

That said, quite a few people, mostly in America, have been switching to Georgia (a serif font) for body text on their sites, it seems pretty readable online as long as you don't keep it too small.

29 Jul 2003 | Mal Ross said...

> i read somewhere that sans serif fonts are more legible at
> small sizes on computer monitors, especially when aliased.

Surely the aliased vs. anti-aliased legibility thing varies according to what technology's being used to perform the anti-aliasing? A lot of the stuff people quote on not anti-aliasing small fonts is from before either Quartz or ClearType were in existence. Since then, small anti-aliased fonts have started looking a lot better.

29 Jul 2003 | ML said...

This article on Arial offers more of a print perspective but it's interesting nonetheless.

Despite its pervasiveness, a professional designer would rarelyat least for the momentspecify Arial. To professional designers, Arial is looked down on as a not-very-faithful imitation of a typeface that is no longer fashionable. It has what you might call a "low-end stigma." The few cases that I have heard of where a designer has intentionally used Arial were because the client insisted on it. Why? The client wanted to be able to produce materials in-house that matched their corporate look and they already had Arial, because it's included with Windows. True to its heritage, Arial gets chosen because it's cheap, not because it's a great typeface.

29 Jul 2003 | RS said...

Arial does have a place in web layouts that are formal and full of serif text. Verdana looks too casual in these contexts.

29 Jul 2003 | Aaron Swartz said...

Verdana for all of the above. I use it in both anti-aliased and aliased browsers.

Verdana doesn't look as good at some of the larger sizes, but it's as good or better than Arial.

29 Jul 2003 | Steve said...

That's true that the readability studies I cited were for paper. I started my publishing life in newspapers, so a lot of the "rules" there still influence me.

I could see how readability doesn't vary as much on computer screens. Computer screens are such a horrible reading environment anyway - I don't remember the figures, but people read appreciably slower on screen than on paper, which is part of the reason paper consumption kept going up as offices became more computerized - so differences in typefaces might not make much of a difference at all.

The primary difficulty when using serifed fonts online is not to use one that kerns real tightly. The serifs don't have as sharp definition as in print, so they can start to run together, which defeats the whole point of serifs as visual cues readers can use to scan instead of looking at individual characters (which is how experienced readers read - they don't view whole letters or words).

29 Jul 2003 | Darrel said...

This is kind of a silly question isn't it? You're asking if a typeface designed for print is as legible as one designed specifically for web sites?

29 Jul 2003 | Ryan Schroeder said...

Look, I hate Arial as much as the next full-blooded designer but anything set in Verdana over 11pt/px looks like complete ass. Verdana is probably the best "Web Font" for small aliased text, but has absolutly no excuse for existing in any other size.

29 Jul 2003 | dmr said...

I cannot tolerate cheap theft; piss on Arial.

But a nod to Mr. Schroeder; Verdana is terrible at large web sizes (14px +).

29 Jul 2003 | Markku Seguerra said...

verdana - aliased (firebird pc)

29 Jul 2003 | Paul said...

Yes, Verdana, but I too think it looks silly at anything over 16px. And that's pushing it a bit.

I haven't been able to find many comfortable uses for Arial lately. Georgia, on the other hand....

(Safari, anti-aliased.)

29 Jul 2003 | Darrel said...

Verdana is a text face. Not really a display face.

29 Jul 2003 | c3o said...

One more vote for Verdana at small sizes, and anything but it for headings (or in print).
So who got the "APPLE" example from the test Mike linked right? That cost me a perfect score.

29 Jul 2003 | c3o said...

Oh, and: Anti-aliased, XP ClearType.
I find it makes the most difference with Georgia, which is just a lot more beautiful than without anti-aliasing.

29 Jul 2003 | ~bc said...

As for "using Times for text -Steve" I have sworn off Times. I can just hear an old typography professor saying "NEVER use Times, it is such a poorly spaced font!" And to this day, I avoid it like the plague. Georgia for serifs: Matthew Carter designed it as Verdana's serif'ed screen companion.

29 Jul 2003 | Steve said...

I agree, bc, about its spacing. However, it's the one serif typeface that's pretty well guaranteed to be on most any computer. I do prefer Georgia myself.

29 Jul 2003 | Jacob said...

Tiny-ish Verdana is nice for general text, and for smaller headlinesI like my h3s just a bit bigger than my body textbold Verdana can look very nice (color optional). For times when you feel especially Teutonic (or when you curse the rarity of DIN Autobahn!), Arial Black can give a headline a ticket to what it needs.

30 Jul 2003 | Fargoboy said...

Verdana for almost all sans-serif small- to medium-sized type (aliased or anti-aliased; I happen to prefer aliased in most instances).

Arial, Arial Black for larger, display type instances (anti-aliased).

Also, Arial (not Bold, Black or Italic though) for small, tabular type where a narrower typeface allows more data horizontally at the same point (or pixel) size.

Side note:

Verdana and Georgia, along with some other fonts from that era, are unique in that they were typefaces designed specifically to be aliased on the screen (before anti-aliasing was prevalent), but "smooth" when printed. Very few typefaces before or since were designed with this double-duty in mind since system-wide anti-aliasing killed the need. Obviously, small, bitmapped type is still being designed, but it generally is designed to be only aliased/bitmapped (like Kottke's Silkscreen), and is used in print work only to portray a bitmapped style.

Daniel Will-Harris tells the fabled tale of Matthew Carter and Tom Rickner's creation of Verdana for Microsoft back in 1994.

30 Jul 2003 | MrAnonymous said...

Verdana

Arial is okay in larger sizes (12+)...like for headlines, etc.

30 Jul 2003 | Name said...

Verdana (Aliased on OS X) - if i'm on an anti-aliased machine, I appreciate Verdana even more.

go red sox.

31 Jul 2003 | Jesper said...

Verdana.

c3o is absolutely right. ClearType rocks socks.

31 Jul 2003 | Joe Clark said...

Why in the name of G-d are you even talking about Arial as an actual typeface? Why are you giving it the time of day?

01 Aug 2003 | pete said...

Verdana, Mozilla, aliased.

01 Aug 2003 | Salaam said...

We're curious. Which is better? A delicious meal or forced prison sodomy? Arial is the buymusic.com of typography. Even blind people find it ugly. Matthew Carter designed Verdana for the screen. It is a beautiful font, especially at 11px or below, and above 18px (as in headlines). It shouldn't work at all when antialiased, but, wonder of wonders, it does. It looks great either way. (On my system it is antialiased.) Arial, by contrast, is a quick hack on Helvetica, done with no finesse and little love. If Arial had had to compete as a font, it would have died five minutes after its bloody abortive birth.

01 Aug 2003 | Futzy said...

Aliased? Aliased? Jesus God. The unfortunate but accurate nomenclature is antialiased or non-antialiased. Type cannot be "aliased." Sorry. Oh, and Arial sucks horse turds through a cocktail straw.

01 Aug 2003 | Paul said...

Verdana is by far the best of the two (I don't have aliasing in my browser). It's much cleaner and far easier to read at smaller font sizes, whilst scaling better than Arial for use in headings etc.

01 Aug 2003 | Taylor said...

Arial - Firebird - PC - Anti-aliased

I don't believe the perfect web font exists, but Arial comes the closest. (This is only between Arial and Verdana - I would go Trebuchet [13px] all the way, if possible.) Verdana is too "pudgy" for me. Arial renders well anti-aliased and aliased, also.

04 Aug 2003 | Todd Warfel said...

Having had font smoothing on screen from Open GL on OS X for quite some time, when I look at aliased text on PC screens, it seems so wrong.

Sans-serif: Lucinda Grande anti-aliased; Georgia anti-aliased; then Verdana (Mac OS X, Safari).

Serif: Verdana anti-aliased.

07 Aug 2003 | Jacob Hantla said...

I understand all of the Verdana votes, but for me--maybe I'm old school, maybe I'm lame, maybe I just have no taste--but Arial is absolutely my favorite font. I do agree, for body text, arial is too compressed and does indeed (as one contributor put it) have a tendency to make me go cross-eyed if the columns are too wide. But as far as giving the page an inviting, yet modern feel, I like nothing better than Arial for all of my headings, titles, (and sometimes even logos). I seem to be outnumbered though.

07 Aug 2003 | Agent Uranium said...

I prefer Verdana.

08 Aug 2003 | Jonny Roader said...

British NHS websites are required to use Arial/Helvetica, and it has to be said that there is something comfortably authoritarian about seeing Arial on a hospital site. Verdana is a more pleasing font to the online eye, but good design is surely not always about producing the most beautiful page? Verdana on certain sites looks too informal.

Non-antialiased. You get used to it. I turn off all Windows XP trickery for performance reasons.

13 Aug 2003 | Martin Mes said...

Another useful Font Size Test Page.

04 Nov 2004 | free rape videos said...

free rape pics http://www.rapestoriespics.com/

Comments on this post are closed

 
Back to Top ^