Mobile app version of vmapp.org
Login or Join
Sims5801359

: What is the ideal number of font sizes to use for a website? 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

@Sims5801359

Posted in: #Css #Typography #WebsiteDesign

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.

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Sims5801359

4 Comments

Sorted by latest first Latest Oldest Best

 

@Ann6370331

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!

10% popularity Vote Up Vote Down


 

@Shelley591

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.

10% popularity Vote Up Vote Down


 

@Eichhorn212

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.

10% popularity Vote Up Vote Down


 

@Angela777

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% popularity Vote Up Vote Down


Back to top | Use Dark Theme