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.
#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
#2. Leave plenty of margin space around components
#3. Make body copy, buttons, and overline a sans serif with low contrast
#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
#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.]
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.
#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]
Need help with your app? You can work with any of our Adalo experts – they can help you with everything from 1:1 coaching, creating an app from scratch, to fixing those pesky bugs, and even giving your app a much-needed facelift! Find out how you can work with an Adalo expert.
