Struggling to choose between Arial (11px) and Verdana (10px) as screen font for my ecommerce site.

Here are my thoughts:

  • Arial has that connection to Helvetica. It oozes authority. Most popular ecommerce sites use it.

  • Verdana on the other hand, is more smooth and flowing. Laid back in a way. Looks extremely good at 10px (or your equivalent).

What y'all think?

  • 3
    Arial does not ooze authority. ;) – DA01 Feb 22 '12 at 21:24
  • 1
    Also, this should be migrated to graphic design – DA01 Feb 22 '12 at 21:24

There are surprisingly few actual studies on which fonts work better for specific occasions, so you're going to have to take a more practical pragmatic approach and decide on the site content and audience first, then take the various merits of your font choices into consideration after you've determined the site usage.

For example, yes, Verdana is a more 'friendly' font than Arial, chiefly because it falls into the Humanist font style, designed to mimic a hand-written calligraphy style of writing. Is this 'friendly' approach more appropriate to your target audience? For instance IKEA made a decision to change their entire web and print font to Verdana for specific business reasons, although they did get quite some criticism for this. However sites such as Harrods that are particularly concerned with professionalism and high-quality have opted for the Arial / Helvetica route.

Which audience is closer to yours?

Something else to consider is that Verdana is primarily suited to smaller font sizes, so if you were to go with this font you'd possibly experience issues when displaying page headers in this font. Too much character spacing makes larger fonts less readable at larger sizes.

Also something to consider, is this site going to be more local or international? Wider fonts such as Verdana will mean that when displaying longer words you'd risk it interfearing with your html templates (such as having to switch the language into German).

| improve this answer | |
  • Thanks man! Gave me a lot to think about. Basically it's an international online retailer for womens fashion, much like your Harrods. I recently heard that one of the things women hate the most about their boyfriends is when they change their voice to sound more friendly, so maybe the Arial / Helvetica route is the way to go? – Mark Boulder Feb 22 '12 at 13:07
  • Well as there doesn't appear to be any specific readily-available studies done on the usage of these fonts for these sort of situations you have now just made an (albeit loose) business case for going with Arial font. Being able to back up your decisions - as subjective as they may be - is always useful! No need to accept my answer so quickly though, other people may well have access to actual studies into this topic that may be more valid than just my subjective opinions. – JonW Feb 22 '12 at 13:30
  • They'll be ablte to read both. Conversionwise I think you won't really get a difference. It's a design decision. Both are good fonts for the web. In case of fashion probably I would stick with Arial/Helvetica. – tamimat Feb 22 '12 at 14:30

Setting aside my type nerd instincts and just addressing the UX implications of the choice:

Verdana was designed as a screen font, and so is very well hinted at small pixel sizes on 96 DPI screens. It also has an extremely high x-height, which improves its readability especially at small sizes. It is infinitely more legible for screen use than Arial.

Arial is fundamentally a bastardisation of Helvetica, which was designed in 1957 for print and signage. That Microsoft have done a good job hinting the font makes it a passable display font as well, but it will never be as useful for that use as Verdana is (and its cousins Tahoma and Georgia are).

All that is becoming far less important going forward though, with the invention of ClearType (on Windows) and Quartz text rendering (on OS X), and especially as we begin interacting with websites nowadays on devices like the iPhone 4 with extremely high-density displays, all of which are attempting to make type on-screen more like type on the page.

Which is all a really roundabout way of saying "it's more of a visual design and branding question than a purely UX consideration".

| improve this answer | |

It depends or your goals.

Lets look...

Conversions/Revenue. You can use google analytics custom vars to a/b test it to see if they improve conversion. However, it would be better to look revenue impact of font family change in custom reports. More complex test use can Google Website Optimizer. Here is how http://elnostreraco.com/blog/test-multivariant-plantilla-google-website-optimizer/ (in catalan, use translator inside)

Eficiency. At least, use analytics custom reports to check time on site, pages/visit, recency, frequency, etc on A or B option. I don't think you can get many insights user testing key tasks comparing font families.

Satisfaction. You can run a simple questionary you can segment by font-family. That is completly subjective, but if you ask your current users you get real answers and their preferences. Don'ask directly on font family, ask for redability or overall apearance satisfaction.

| improve this answer | |

In both cases visually impaired people will have problems, 11 or even 12px is too tiny for elderly and people who don't have a perfect sight. Which would lead to less conversion, especially if you use that font for product descriptions. BTW you did not mention WHERE you would like to use those fonts, I assume is the base paragraph text.

| improve this answer | |
  • Indeed. A lot of users don't know you can adjust the text 'zoom'. – PhillipW Feb 22 '12 at 12:43
  • Yes, this would be the base screen font. I'll be using pro fonts for the promotion / marketing material though. – Mark Boulder Feb 22 '12 at 13:06
  • 1
    Would agree that although type of font is important. Font size here it far more important. I think it is just too small. Why not 1em? If the text is important enough to be on the page then it should be readable. – The Question Feb 22 '12 at 13:32
  • Verdana has a very large x-height, however, so works much better at smaller sizes. And while font size is a concern, as always, we have to push end users a little bit to make their own adjustments sometimes. Overly Big type can be annoying and a usability issue as well. – DA01 Feb 22 '12 at 21:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.