A Font for All Knowledge II: 11 Golden Rules of Text

Designing a gorgeous page doesn’t end with the perfect font pairing – well, it does if you’re me, but I’ve learned a lot in the past couple of hours…

Why? One of our chief designers has had a word in my ear about placing, arranging, formatting and styling text on your pages – and believe me when I say, the advice he has is golden.

These are the exact 11 rules our design team use to create our Pro page templates every single week. Ignore them at your peril – then, use them to increase sales.

(If we had the budget, we’d get these commandments carved in stone. In a nice 12pt Lato, of course.)

1. Always have a at least 2 font-weights of difference between headlines and paragraphs. This is in order to build contrast without having to go too wacky. For example, if you were using the same font for headline and body text, you’d want to use Regular weight for paragraphs and Bold for headlines (skipping semi-bold). When pairing different fonts, look for a difference in thickness between the two – try a thick headline and thinner body text, and vice versa.

2. Never use true black for paragraphs. Apparently, #333 (a dark smoky grey) is the new black when it comes to web design. Pure black (#000) is too difficult to read, as the contrast between background and foreground is taken to the extreme. You won’t be able to tell the difference, so just lighten it up a couple notches.

3. Never use two different fonts that are too similar. Alright, I know you love Playfair Display, but some font types work best for headlines and others for body text – that font you really hate in the Import dialog might look totally different on your page, so try it out.

4. Use a serif font for headlines and sans serif for paragraphs. This one’s interesting, because while I don’t disagree, I don’t necessarily agree, either. Serifs are the tiny little feet some letters have (like Times New Roman) and sans serif means without little feet (like Arial). Our designer is recommending serif fonts for headlines to make them easier to read – but while this can work, it’s hard to beat a bold sans-serif to grab attention, which is really what a headline’s all about. One for testing!

5. Never use more than 2 fonts. Don’t be greedy, people – more than 2 fonts makes the site load slower, and muddies your brand identity.

6. Never use script, curly or really “decorated” fonts for paragraphs. You love that brush font, but it only comes in all caps and will it really be legible at 12pt? Keep weird fonts for great big headlines – otherwise you’ll have your readers rushing to click Reader View.

7. Apply multiples of your paragraph font size for all other text. This will please those among you who love numbers and organised increments. If your paragraph text is 16px, for example, then make your header 3 font 32px, header 2 font 48px, and header 1 font 64px. It pleases the eye, and the brain. (Our designer says he likes to work with an 8px “baseline grid”, so his fonts are generally 16, 24, 32 and so on.)

8. Line-heights small for heavy fonts, line-heights tall for others. If your font is thick or all caps like Oswald, you can get away with a tight line-height and it will still be readable and look good. On the other hand, if you use a thinner font like Roboto, you’ll want to balance out that extra whitespace with a larger line height.

9. In all other cases, 1.5 line height. This is the most readable for paragraphs. This means the space between lines is 1.5 times the height of the letters.

10. Letter-spacing makes body text easier to read. Convertri doesn’t currently support kerning (letter-spacing), but you can add spaces between each letter to let text breathe – and in some cases, that’s probably a very good idea. For headlines it’s better to reduce space to make the headline more compact, and quickly skimmable. But if your font’s kerning is narrow, get a fresh pair of eyes to make sure you’re not accidentally saying something you don’t want to!

11. Alignment! Alignment! Alignment! Your paragraphs look best when they fill up “boxes” of all the same width. Adjust the headline and body text alignments and resize the elements so they’re all a standard size.

What do you think of our font commandments? Have any of these solved niggling design issues you may have, or do you disagree and prefer to throw the rulebook out the window when it comes to fonts? Let us know in the comments!