13

I'd like to know how many font sizes can you use for a website.

Someone said to me it's better not to use more than 3 different font sizes (e.g. 16px for heading, 11px for text and 13 px for smaller headlines).

Is it a good or bad idea to use more than 3 font sizes per webpage (e.g. 4)? I just ask because I'm considering using a fourth one but don't know if it could ruin my design.

4 Answers 4

11

This question is interesting. I've honestly never heard of a limited number of font-sizes. I have, however, heard of the number of font-faces generally not exceeding 2 or 3. In today's responsive web, you'll see font-sizes changing all the time depending on the viewport.

This wouldn't be a good answer without some sources, so there are two interesting articles I think you should read from Smashing Magazine. One is on Typography guidelines and techniques(I've linked you down to the section they talk about scaling the heading tags in relative terms) h1: 1.5ems, h2: 1.375ems etc etc.

The second article is a huge study Smashing Magazine does on typography every year on some of the web's most popular sites. These sites are primarily content driven so typography is of key importance to them.

I think what you'll find though is that there aren't any generally agreed upon best practices for the font sizes. As long as they don't dramatically change as to distract the viewer, you can play with them at your discretion. If you can use the font sizes in a distinguishable way so the user can relate a font size to a particular content type, than you should be fine. Just don't go overboard.

1
  • 1
    Wow! Thank you very much for that awesome answer!:D You saved my day!:) Just wanted to mention that the guy who said to me that you should never use more than 3 different font sizes at once was my former boss of a graphic design agency in Germany. I didn't like him much and he told me a lot of bull$hit while I was working there so I think his rule of 3 different sizes is complete nonsense if you ask me. Just a quick note...
    – drpelz
    Jul 28, 2013 at 17:40
4

I'd like to know how many font sizes can you use for a website.

Technically, an infinite amount.

Someone said to me it's better not to use more than 3 different font sizes

'Good' design tends to work within a set of contraints, so a lot of these rule-of-thumb type rules are just that--constraints used to rein in the range of options to provide some focus and direction.

Is it a good or bad idea to use more than 3 font sizes per webpage

Yes. And no. Er...it depends.

It's all based on the particulars of your design. Ask yourself: does adding a 4th font size work? Can you justify it's use? If so, go for it.

0
2

As many as you like. Think about a newspaper. It may use many different sizes for headings to express relative importance. There’s no general reason why you could not do the same on web pages. For example, tag clouds make heavy use of font size variation.

2
  • While newspapers do use scale to accommodate varying levels of importance, they were also traditionally used as a means of copy fitting.
    – DA01
    Jul 28, 2013 at 22:29
  • Tag clouds are a good example!
    – unor
    Oct 12, 2013 at 18:03
2

I agree with most of the answers that have been given above but would like to add one more here.

First, I think you have to make sure that you maintain a layout that will remain appealing to visitors at most. If you mix and match font sizes so much, it might end up being messier and hard to read.

Secondly, consider the user base. Who are going to use your site? Some people use different platforms and certain font sizes look different on different platforms.

The most important thing to do is to keep a consistent look on your pages. Good luck!

1
  • 1
    Basically you are right, of course!:) BUT 3 font sizes only can make developing a complex gaming site difficult in my case.
    – drpelz
    Jul 29, 2013 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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