We know we aren’t all typography enthusiasts but chances are we know the basics. We know what a font is (obvi 💁‍♀️), that it can come in different weights 🏋️‍♀️ like bold or italic, and that we generally don’t want to use “comic” fonts unless we are actually making a comic. Though, since most of our knowledge about fonts and typesetting comes from our required “double-spaced-12-point-academic-serif” essay writing days, we may not know as much about how to use them in app design. Just as wine and cheese pairings can make or break a fancy dinner party 🧀, font pairings can make or break the look of an app. 

Lucky for us, type enthusiasts/nerds/experts exist and a couple of them put together this list of 5 pointers to apply to your app! And if any of this seems overwhelming remember you can always click your red shoes together three times and say “there’s no place like system fonts” and return home.

Limit App Design to 2 Fonts

#1. Reminder: One font is fine! Lots of apps just have one and they use different weights to create hierarchy. If you’re going to use one, use the system default or a similar sans serif font.

Don't use more than 2 fonts (or else things get a little crazy!) 🤯 🤯

#2. 1 font for the Header (high level type like titles) and 1 font for the Body (type for content like the copy of an article)

#3. Maintain a 90/10 ratio for body to headings font.

#4. [Pro Tip: you can use different weights & capitalization to get the full range of styles out of those two fonts.]

Maintain Legibility While Styling

#1. Header fonts can be decorative, serif or sans serif

If you're new to fonts just remember the difference between serif vs sans serif you're good to go!

#2. Leave plenty of margin space around components

#3. Make body copy, buttons, and overline a sans serif with low contrast

Please don't use bold expressive fonts for you buttons and body text. It makes it really tough to read! 🤓 🤓

#4. Keep high contrast between text and background color

#5. [Pro Tip: Remember that while it may be tempting to think outside the box while designing your app, legibility and easy information transfer to your user should be the top priority. Keep it clean, accessible, and simple.]

Consider Hierarchy of Information

#1. List Headings should usually be bold and larger than the body font

#2. Body font medium, regular, or light

#3. [Pro Tip: beyond weight and point size, you can experiment with capitalization to distinguish hierarchy between various headings, subheadings, overlines, body copy, and captions]

Keep Font Sizes Consistent

#1. Body copy font size should be 14-18pt

#2. There should be 5-9 words per line of body copy

Make sure that bold headlines aren't full sentences that take up too much of the screen.

#3. Headlines should be 3-4 lines max with 1-2 words per line

#4. [Pro Tip: Limit levels of hierarchy on a screen and keep those levels consistent across similar screens.]

The app on the left has different font sizes across different screens so it makes it seem complicated and confusing. 😕 😕

Set Rules for Your Font Colors

#1. Normally vibrant colored text means that it’s clickable.

#2. Make sure your font colors have enough contrast.

#3. Titles are normally black or a dark shade of gray while Subtitles are normally a lighter shade of gray.

#4. Don’t use too many colors.

😱 😱 😱 Too many colors! My eyes hurt!

#5. [Pro Tip: You can use color as a subtitle or a heading but do so with consistency and don’t mix that with button text of the same color on that screen.]

Consider Your Brand Voice and Audience

#1. Get inspiration from fonts used by other apps in your industry 

#2. To pair fonts use the suggested pairing feature from Google Fonts

#3. If your font isn’t available on the platform then find one that’s similar using resources such as Typewolf and Google 

#4. [Pro Tip: Going to freehand your font choices? Pairing a serif with a sans serif is a safe bet for creating a balanced design. You can also get inspiration by looking up your typefaces on FontsinUse]