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.
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.
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.
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.
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).
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.
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:
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.
[FONT=Verdana]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.[/FONT]
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.
@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’
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.
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.
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.
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)
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.
