Here are some typography best practices I usually recommend to clients:
When making decisions as to which fonts and styles to use on a website, it’s important to establish a “visual hierarchy” of content that is both aesthetically pleasing and creates distinction between Headings, Subheadings and Body text. I also recommend using enough white space between blocks of text in an effort to promote an effortless reading (user) experience.
Body text
- The most common font size for Body text is 16px (or, better yet, 1em).
- Avoid center-aligning your text, the uneven edges are jarring. I usually set the left and right margin of the text’s container to auto.
- Justified text works great for newspapers, not websites.
- Choose low-contrast fonts over high ones.
- The optimal line-height of paragraph text is between 1.25–1.5× the font-size.
Headings
- The average font size for Heading text is somewhere around 36px (or, better still, around 2.25em).
- Always prioritize readability and overall user experience. Make sure the headings are not too big or bold or otherwise overpowering.
- That being said, you also need to make sure that your headlines meet readers’ expectations. Considerably larger text with ample spacing between its child paragraph signifies a change in subject matter, whereas smaller headlines much closer to paragraphs imply that the content is related.
- In the event that your headline MUST wrap to the next line, the optimal line-height for headings is less than what it is for Body text.
In general, I’d also be sure to not overdo it and use way too many fonts. I would say 2-3 fonts on any given page, including whatever font you may be using in your logo, is enough. Typically this means one font for headings, one font for body text and MAYBE another for subheadings.
To your question about performance — the more fonts you use, the more resources your site and server have to load. There will absolutely be an impact on performance, so this is another reason to keep font choices very specific and limited. I’ve heard compelling arguments for and against serif/sans-serif/mixing serif fonts, and I think this is mostly a matter of personal preference. I would lean toward overall legibility and user experience — if certain fonts make your text easier to read, I would make decisions accordingly.
