0

Recently during a usability tests almost all of our customers complained about the small font size on our website.

We use:

  • 26px for headlines
  • 13px, bold, for navigation, product names, etc.
  • 11px for body text, product attributes, etc.

What would be a good size increase for a site that's filled up with information? The recommended 16 pixels body copy seems to be okay for content sites, but I'm not convinced about it's size for search results and product description in those results - it seems to be way too big. Are there any studies on what's an optimal font for e-commerce search results, product pages, etc?

Improve this question
1

If you are setting your body to 16px and body text to 11px, your resulting font size will be 68.8% of your body font size. Try using EM's instead and understand how PX, EM's & percentages work.

Article on font units

Improve this answer
1
  • If I understand correctly, I would still have to change the baseline for our fonts and THEN use EM/% instead of pixels, right?
    – Matt
    Jul 8 '14 at 13:28
1

I'm still a HUGE fan of pixels. The problem however is that we're in the age of responsive design now. Unfortunately, Ems are starting to make more sense to me, even if I HATE what happens when you accidentally nest Ems or lose track of the base font-size. You could very easily end up with a font that's even smaller than you have now.

Whatever you do though, don't mix pixels with Ems, this goes for both fonts and layout. You need to be 100% in or 100% out.

Back in the day when I worked for a major university, we used 11-12px fonts for our text. We had people complaining that it was too big. A lot of this is going to be dependent upon who your audience is, how computer savvy they are and how old their machines are. The older your audience, the larger the font is going to have to be.

Improve this answer
2
  • Well, that's something that I can look up with Demographics and Resolution report withing Google Analytics, but it would still require some values. What I'm worried about is what happens to layout with bigger font, that alone makes even simple A/B testing a pain in the ass.
    – Matt
    Jul 8 '14 at 13:54
  • Use rem to avoid the nesting nightmare of em, if your browser support requirements allow.
    – Matt Obee
    Jul 8 '14 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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