All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

how many fonts should i use in a website?

  • # May 18, 2013 at 3:19 am


    I just want to know, how many font’s we can use in new fresh design.

    Actually i am making one new design. I’d always used three/four font’s, which i think
    it’s too many.

    In-fact if you can send me some link ‘s with good typography website, so i can understand better.

    Thanks in advance :-)

    Rihan Terence

    # May 18, 2013 at 5:07 am

    > In-fact if you can send me some link ‘s with good typography website, so i can understand better

    The amount of fonts used on a site doesn’t mean they’re using good judgement on the overall usage. What is looking at someone’s website going to do for you regarding typography?

    # May 18, 2013 at 5:10 am

    This reply has been reported for inappropriate content.

    @chrisburton seems to be a Type sensei…looking forward to an answer.

    my guess would be as many as fit the design naturally, without using fonts just to use fonts. So if you could use 4 fonts, and have it still look natural, it is probably okay. I like to use two, having headings and other special fonts match the logo, and the rest be the main body text. this is just my guess, since I am far from an expert. expect some far better answers incoming :)

    # May 18, 2013 at 5:11 am

    This reply has been reported for inappropriate content.

    ha looks like he was already on it as I typed that :P

    # May 18, 2013 at 5:20 am

    Sometimes you need at least four fonts depending on the design. Some webfonts do not come with specific styles.

    + true small caps
    + swashes
    + true italics
    + etc.

    # May 18, 2013 at 4:15 pm

    I would use whatever will make your design look good while not hindering performance. If you’re embedding fonts or pulling them from a resource such as google web fonts or typekit, you need to be careful not to overdo it as the more fonts you add the bigger the download size.

    Also be aware of your audience and the platforms they using. If you need to still need to cater to IE7-8 be aware that some embedded fonts can have rendering problems/failures in those browsers. Make sure you test and workaround them, as workarounds do exist.

    Finally, you didn’t distinguish between multiple font families or multiple font weights. You could pick one good font family and load different weights (Light, Book, Bold, Black, etc) instead of choosing several entirely different font families.

    Try googling “font combinations” for some inspiration.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed