🔠 Typography
Choosing Fonts

Updated at 2017-07-10 19:09

Creating great typeface combinations is an art, not a science.

Using more than two typefaces in one view is confusing. Don't use more than two fonts at the same time if you are not sure what you are doing. Never go past 3 even if you know what you're doing. Limiting yourself is good.

Easy way: - Choose one sans-serif font and use different font weights of that.

The most important thing is the contrast between fonts. Typefaces that are too similar tend to get mixed and provide no value. Typefaces that are too different look accidental and unprofessional.

Easy way: - Choose one sans-serif for the headlines. - Lookup one serif font for the body that has something in common with the sans-serif. e.g. stroke width or character style. But they should be otherwise different.

Change font rendering to affect the contrast between fonts. If fonts you want to use are too far apart, you can also apply decorations to both to bring them closer together e.g. outlines, coloring, drop shadows.

Thin <-> Light <-> Medium <-> Bold

It is popular to use sans-serif for headings and body on digital media. Some people like to use serif for the body but then you need to make text size larger and have a good quality font so it looks good.

The most popular web sans-serif fonts are Arial and Helvetica. The most popular web serif fonts are Georgia and Chaparral Pro.

Fonts with a lot of personality need a neutral pair. If you are using a script or display font for headings, always consider a neutral sans-serif body typeface to balance it out.

Remember to match the emotional mood of your font and message. More about specific font emotions in font notes.

Comic Sans is friendly and warm font and should never be used in formal context like in legal text.

Arial and Georgia are popular and neutral fonts and should be avoided when you want to express something artistic.

Always test your fonts on a few different devices. Normal is to test on a Windows, a Mac and a mobile phone. On Windows and Mac, it is good to test Chrome, Firefox and the native browser.

Avoid body fonts with less than 400 weight as they may render poorly.

Some fonts have strong connections to past usages.

Garamond => Apple. Gotham => Obama in the US.

Play with typefaces, they have personality you need to find. Stick to your set of typefaces and only add fonts when you have played with them a little bit on personal projects. Headings are common places to show font personality, body text should always focus on being readable.