What is the ideal number of font sizes to use for a website?


Question

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.

1
11
7/28/2013 9:15:00 PM

Accepted Answer

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.

10
7/28/2013 5:00:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^