0

I seem to remember coming across a UX rule several years ago referring to the max number of font styles that should be used on a webpage. Can anyone here who is more involved with UX provide some insight on this? Is the general rule max of 3 where a style is defined as any variation/combination of font attributes such as size (12, 14, 16, etc), family (arial, etc), weight, etc?

1

My recommendation is to use a maximum of 3:

1. You should aim for consistency, and by adding too many font styles you risk breaking the rule of unity in design.

2. Performance considerations. By adding too many fonts you can increase the weight of your site dramatically and it will slow down the website.

However,

There are situations and projects that can benefit from many fonts. I once designed a poster for a concert in my city and ended up using 10 different fonts for it. Almost every word was a different font :). Also, it was just a poster not a website.

Here are some links for further reading:

https://en.wikipedia.org/wiki/Visual_design_elements_and_principles

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

http://usabilitygeek.com/12-typography-guidelines-for-good-website-usability/

  • 1
    I pray for my data's sake that your website never loads 10 different fonts to it or a different font for every word. It's one thing for a poster, completely different for a website – Zach Saucier Mar 31 '17 at 13:05
  • Of course not ! That would be silly. I was just pointing out the fact that in some designs you could go crazy/experimental with typography. :) – user37388 Mar 31 '17 at 17:29
0

No... There's no rule for font styles. This is your design call how many font styles you want to use.

But Ideally 1-3 font styles you can use for your project.

0

Learned not to put more than 2 fonts on any single PAGE in school (2015ish), however I regularly notice multiple font styles on a single page in other people's work. As a rule of thumb I use two fonts consistently on a site and will add one addition font to stylize as necessary on a single page. But remember that these style choices are meant to enhance your page. Your fontt should not be distracting to an average reader and it should not cause your site to look chaotic or disorganized. As long as you feel that you're enhancing and not taking away from your work do whatever you like.

As far attributes like font size, I use size to help organize the page and that is achieved by consistencey throughout your site. Sticking to a family is a little different because different browsers are going to handle your code differently. So you may include a specific font but it could get pushed to the most similar style or the default of its family by the browser anyway. The best way to avoid this is to test in many environments. But again, these choices boil down to preference.

  • 1
    There is a lot of irrelevant info in this answer – Zach Saucier Apr 3 '17 at 22: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.