SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    How many fonts is too many on your website?

    I've been pondering on fonts and the use of them on website for a while. How many fonts should you use on your website? Recently somebody pointed out that I am using way too many fonts on my site. I only thought I was using 3 fonts, but he might have included the various styles etc. included.

    Previously we use to use graphics programs to make flashy icons with text, now we use CSS3. We can now make jazzy buttons with drop shadows and rounded corners.

    How many fonts is too many?

    PS: Love the new changes of the forums styles.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    As a general rule, I would try to use no more than three families (but obviously you can use italic and bold variations of each of those as well) ... there may be some sites where you want to use more, and that's fine, but you should have a good rationale for why you want that many fonts, and why it's going to be more effective than sticking with a smaller number.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,754
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sega View Post
    I've been pondering on fonts and the use of them on website for a while. How many fonts should you use on your website? Recently somebody pointed out that I am using way too many fonts on my site. I only thought I was using 3 fonts, but he might have included the various styles etc. included.

    Previously we use to use graphics programs to make flashy icons with text, now we use CSS3. We can now make jazzy buttons with drop shadows and rounded corners.

    How many fonts is too many?

    PS: Love the new changes of the forums styles.
    This is a matter of opinion for most, it depends on how you can make the look go . I prefer to just use 2 (3 depending on what I'd be using it for) for my website. Different styles (italics), as said sbove, are fine. They help richen the message you are trying to get across.

    It really does depend on how you use the font though. You may be using a font on a section of your website wehre it just doesn't fit . It's a case by case scenario.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Zealot sammyspam's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    General design principles tend to recommend the use of either 2 or 3.

  5. #5
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by sammyspam View Post
    General design principles tend to recommend the use of either 2 or 3.
    Haven't really heard that...where did you find that recommendation?

    If you're thinking about the use of @font-face, I wouldn't recommend using over 2 to 3 of those...much more and it takes a long time (or unnecessarily long time) to load.

    ~TehYoyo

  6. #6
    SitePoint Zealot sammyspam's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Haven't really heard that...where did you find that recommendation?

    If you're thinking about the use of @font-face, I wouldn't recommend using over 2 to 3 of those...much more and it takes a long time (or unnecessarily long time) to load.

    ~TehYoyo
    I just did a desktop publishing course at university to go with commerce degree and that was one of the design principle (for both business documents and web browsing).

  7. #7
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Gotcha. Well I guess you should follow that...if it's a good college, of course.

    ~TehYoyo

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I don't use more than three typefaces on a page. For one, it's aesthetically difficult to pull off a decent and homogeneous design with more than two or three typefaces, and secondly, the use of multiple typefaces increases the weight of your pages unnecessarily as you'd either have to embed them via @font-face directly in your CSS or via the aid of Javascript. In both cases you'll have lots of extra kb a user needs to load and it's the only relatively safe option (minus users with JS and scripts disabled), given that there really are no "web safe" system fonts.

    For that reason, I stick to having some generic system font for body text and, if required, use one extra font via @font-face for headings and the like.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Three seems to be the rule of thumb. I don't know enough about design to really say why that might be, but my guess is that it has to do with the fact that most sites have basically three main elements:

    - Logo/site name

    - Headings

    - Body copy

  10. #10
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @kohoutek ; @TehYoyo ; @Stevie D ;

    The reason I ask is mainly because somebody informed me that web design is 90+% typography, and that I'd used too many fonts. I've already increased the performance of the page and reduced the fonts to 3. We seam to be over analytical on what we on personal projects than client work.

    The article I found was here http://www.informationarchitects.jp/...graphy-period/. It's dated a couple of years back, wanted to know your take on this guys.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  11. #11
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Sega View Post
    The reason I ask is mainly because somebody informed me that web design is 90+% typography, and that I'd used too many fonts. I've already increased the performance of the page and reduced the fonts to 3. We seam to be over analytical on what we on personal projects than client work.

    The article I found was here http://www.informationarchitects.jp/...graphy-period/. It's dated a couple of years back, wanted to know your take on this guys.
    That's a very interesting article, and I would back up most of what it says. A key point is "Choosing a typeface is not typography". There's a lot more to it than that – setting the right style of typeface, line spacing/leading, letter spacing, casing, colour, the relationships between the different areas and purposes of text. Sure, you have less freedom and less fine control in web design than in print media; you rely on the browser to sort out the hinting and kerning, you recognise that you aren't going to get an exact size consistently, some people might not see that font at all ... but the basics are all there.

    Think about what you're trying to achieve with typography. In almost all cases, you're trying to create a website that is easy to read, where the user doesn't consciously notice the design because it "just works". How does having more fonts help with that?

    Look at most popular and well designed websites, and you will find few that use more than three fonts – typically one for body text, one for headings/highlights and one for branding/logos. I'm sure there are good sites that use more than that, but they are rare. A great many use two or even only one.

    As I said, think about why you are using different fonts.

    For a more extreme example of over-fonting, take a look at this logo that a major UK bus company is now using:

    Six words, three fonts, three cases ... and it looks horribly messy as a result.

    Here in Sitepoint Forums, different things appear in Arial, Verdana and Tahoma and (with all due respect to the design time) it's one of the few aspects of the design that I really don't like. It creates jarring moments for no good reason. Those three fonts all have a sufficiently similar purpose that there's no reason to use more than one of them.

  12. #12
    SitePoint Guru bronze trophy Slackr's Avatar
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    679
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I've recently done some more digging on webfonts and their use. Coming from a graphic design background and being around the web scene for a while I tended to be ultra conservative anyway. I've tried to track down a video I watched recently that was excellent and was a panel of 3-4 different people discussing typography on the web from different viewpoints.

    I've found Smashing Mag has written well on typography you can see a good summary article here. There are other resources listed there as well.

  13. #13
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Wow... thanks guys, makes for brilliant reading!

    @Slackr ; I found article link really quite impressive.

    Thanks @Stevie D ; for your demonstration of the UK bus company that did just that! I think that your example used typography and fonts to another LV and it's shocking that a major bus company would take this approach in displaying it's advertising. Initially I thought the dot on the 'i' belonged to 'believe' and not to 'improving'
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  14. #14
    SitePoint Guru bronze trophy Slackr's Avatar
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    679
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Yea once you start looking into it you start to appreciate the differences fonts can make to a website's ability to communicate. I've always been a fan of websites where I can go and read easily (without adjusting the font height) and can read long articles for long periods. It's true that good content is a must, but it isn't the only thing. Some sites are frustrating in their use of text regardless of their good content. With the increase in platforms and responsive design becoming much more prevalent looking at these issues is not as simple as it used to be.

  15. #15
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Slackr View Post
    I've found Smashing Mag has written well on typography you can see a good summary article here. There are other resources listed there as well.
    Good article. I prefer to use only one font and vary the case, size, weight & style to achieve the formatting that is necessary.

  16. #16
    SitePoint Guru bronze trophy Slackr's Avatar
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    679
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I wish I could find a copy of the video because it was a well-rounded discussion. Haha found it! It was an audio presentation with slides from a typographica SXSW forum 2011! It is an hour long but you could skip the Q&A at the end. I would recommend it as a good starting point for anyone who wants a good snapshot of what matters in web typography and how to start. Even if you don't listen to the audio, flick through the slides and check out the resources at the bottom of the page - more than enough to boggle the mind.

  17. #17
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My practice when designing web site is to use 2 font families and variations with italic, bold, different letter spacing etc. Everything over 3 font families is overkill for design.

  18. #18
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I try to stick to two or at max three different fonts. It really depends on how well the fonts work together. I wouldn't have a script font mixed in with comic sans because that is mixing a professional look with a lighter feeling font. Of course as mentioned before this doesn't include using different variations of the same font (bold, italic, etc)

  19. #19
    Non-Member
    Join Date
    Apr 2010
    Posts
    298
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Usually the logo has one font, your subtitles should have another, and the general content can be another. That is 3 tops. I don't see the need to have more than 3 in general.

  20. #20
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Thanks guys for your help and the references. I think I might have gone overboard, but it's cool to learn.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  21. #21
    SitePoint Guru dojo's Avatar
    Join Date
    Feb 2005
    Location
    Romania
    Posts
    899
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am using a 'fancy' font for the titles and a 'normal' one for the main text. So 2. Have used 3 in some cases (a narrow font for a menu or some titles), but most of the times it's just 2 font-families.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •