Number of Fonts per Design

Question

I'm working on a website and wondering at what point I'm using too many fonts and need to cut back. Right now, I have a handwritten font (HF1) that is being used for the site name, a quite different handwritten font (HF2) for the page title, and a serif font (SF1) that is being used for the body text.

Currently I'm looking at the headings, and I really don't like the way Georgia (SF1) looks when bold: The characters look imbalanced and too heavy when large and bold. I'm torn between...

1. Making them not bold, distinguishing them from body text another way.
2. Making them a different serif font (probably Adobe's Jenson Pro) and bolding them.

Jenson Pro is a nice looking font, but I'm wondering if I have too much going on font-wise on the page right now. More generally, how much can one hope to get away with typographically?

Answer 1

I'd go minimalist with this.

1. Start with a single font family. That is, a combination of bold, condensed etc. For example of what I mean see PT Sans from the Google Font API.
2. If you plan to add any more, then justify it explicitly. That is, convince yourself that there is not only an asethetic, but a functional reason for the additional font.
3. Obvious functional variations include code and maybe the font used in your logo.
4. The reason why I say all this is that it's easier to convey an overall sense of harmony if your fonts are consistent in some way -- font families will do all that work for you.

Finally, the same applies for use of colour and size -- try and keep a limited subset of these as well. The Web Style Guide has some good stuff on typography for the web.

Answer 2

During my graphic design education the general rule expressed was 3 fonts per design.

This included the logo's font. So if you had a logo with Gotham, that's 1. Body copy at say... Lucida, that's 2. and Titles or Headers using League Gothic, that's your 3rd.

That's how I do it anyway.

Answer 3

Just my own taste: I think that if I wanted HF1, I'd stick with HF1 and forget about HF2. To me, it's jarring to be confronted with two unfamiliar specialty fonts. As for the body, I'd pick an unremarkable, unnoticeable sans-serif font: nobody ever got fired for choosing IBM^h^h^h Helvetica.

Answer 4

Choose between:

1. Just one typeface
2. Serif typeface for headers, sans-serif typeface for everything else — or the reverse

This is a simple, but effective, rule of thumb to work with typography. Of course, the more you'll learn about typography allows you to finely craft the choice (and break the rule of thumb), but this is a good base to start.

Consider also:

• The logotype is an exception (and should stay the only one), but one of the two typefaces you're using should look good alongside the logo itself. This tip doesn't count if you don't have a proper logo.
• Aim for readability and balance in the page.
• Use variations consistently: for example, use bold with the same "meaning" all around the website.
• Don't use too many variations in the page, neither size or italic/bold.
• Watch out for aliasing differences on different browsers.

Answer 5

For the purposes of interface, I'd strive towards consistency rather than a hard and fast rule on typography. If the fonts you use are consistent in consistent places, there shouldn't be a problem. Favor readability, clarity, and consistency over rules.

Make it look good and you'll be perfect.

That being said, go to sites like Google, Apple, and this one for reference.

Answer 6

You use the appropriate amount of typefaces needed. There is no 'rule' for this other than hiring a good graphic designer.

Answer 7

I agree with ehdv in consolidating the two HW fonts unless there is a compelling reason to keep them as they are, or if they already look fairly similar.

For your headings, I would suggest doing something else to make your headings stand out. Perhaps a larger size and italics if you don't like the bold? I am a big fan of how Georgia looks on screens - but choose something that fits your website's style.

You can get away with whatever you want it typography as long as it works. If you have a bunch of different fonts from similar families, and nothing stands out awkwardly, then it works. Just choose fonts that don't jar the reader when going from text --> heading --> text.

Answer 8

To start with: I agree with previous suggestions not to use too many fonts, and possibly try to find the same 'handwriting' font for both uses! 2-3 fonts per page should be the maximum.

As you complain that your preference, 'Georgia' serif, looks too unbalanced I think several other options have been overlooked so far:

1. you could use a different letter spacing for you Headers. I find that 'letter-spacing: 0.2em;' (or similar value) in my CSS quite often makes headers look better in comparison with the body text.

2. use a different font stack! I prefer now 'font-family: "Didot", "Bodoni MT", "Century Schoolbook", "Niagara Solid", "Utopia", "Georgia", "Times", "Times New Roman", serif;' for headings - these are all commonly supported fonts. (Google 'font stacks' to find others).

3. if all of the above fails: use a font for your headings which has a native 'bold' version included in the System Font, eg 'Arial + Arial Black' or the 'Century Gothic' variations. I find that fonts which were designed in a bold typeface tend to have less kerning problems than regular fonts styled in CSS with 'strong' or 'bold', hence look more balanced.

Answer 9

Choose one serif and one sans for your project. Pay attention to form balance of them during your choice, this is mandatory.

Balanced fonts choice means balanced layout design.

Answer 10

I think this is an appropriate ux question - Ive worked with graphic designers who are unaware that their is a rule of thumb in ux that you should err on the side of fewer. And my understanding is max 2 or 3.