Typography and Dynamic Type

Add to favorites

Learn to make the content clear and readable

Typography Basics

It’s important to learn these typography terms and what they mean. These names will be employed often when explaining typography. Baseline refers to the line the text sits on whereas x-height is the height of lowercase characters. A descender is the part that goes past the baseline (letters g and p) whereas an ascender shows where the top of letters such as d and h touch.

Typography-Basics

Kerning

Kerning is the process to adjust the space between two specific characters in order to achieve a pleasing visual result. There is an awesome site where you can test your Kerning abilities.

Kerning

San Francisco Font

The default font for iOS is San Francisco, which is made in-house by Apple. You can download the new fonts at this link. It’s beautiful, free and most importantly, designed for legibility. I encourage you to watch the video to understand how it affects the design for iOS.

Dynamic Type

Accessibility is a prominent theme in iOS design. Apple provides you access to dynamic font presets, as shown in this image. Like this, if you set your text to Body, and enable Dynamic Type, the system will automatically increases the size based on the user’s preferences.

Body Text

Pick a font that looks good in the body text. When in doubt, pick one that is both clean and comfortable to read. San Francisco, Helvetica Neue, Open Sans, Roboto, Proxima Nova, Inter and Museo Sans are some of my favorites. They’re all available for free on Google Fonts and Typekit (with a Creative Cloud account).

Font Weight

Modern fonts such as SF have many extra font weights: Thin, Ultralight, Light, Medium, Semibold, Heavy and Black in addition to the usual suspects: Regular, and Bold. In general, at 11-19 pt, use SF Text Regular. At 20-34 pt, use SF Display Medium and at 34 pt or more, use SF Display Bold. Please note that at bigger sizes, you can afford using thinner fonts like Light and Ultralight.

Line Height

The line height should be between 120% to 145% of the font size. In the image below, the right example has a line height that equals the font size (100%). In the left, I applied a 145% scale. The difference is substantial. Now, multiply that quantity of words by 10 and you get an idea of how frustrating it can be to have to read such condensed text.

45-90 Characters Per Line

When your line is too long, the reader will have a hard time focusing. The overwhelming amount of text per line wears them off, because each jump to a new line gives excitement and that happens less when lines are too long.

Use Your Typeface Wisely

It’s one thing to know about typefaces, it is another to know how to use it. Beautiful typography doesn’t just happen, you have to carefully curate and customize it. For instance, don’t force bold or italic if the font doesn’t support it. Use italics, underline, bold, lists and colors to reinforce the hierarchy and interactions.

Hierarchy

Creating a hierarchy is an important part of typography. This makes it easier to distinguish between text elements and improves the readability experience for the end user.

Text Alignment

Text can be aligned in one of the three ways - left, center and right. You can use left alignment for languages such as English whereas text can be right aligned for languages such as Arabic. Center alignment can be used for short lines of text that are in quotes.

Serif & Sans Serif

A sans-serif typeface is one that does not have the small projecting features called "serifs" at the end of strokes. Both Serif and Sans are good choices. The Serif fonts are more commonly used in more traditional apps that encourage reading and storytelling such as Medium, iBooks and The New York Times. It has a lot of charm. The Sans typefaces are more utilitarian and neutral, used widely in most modern apps. Its popularity also means that it's more generic. The amount of Sans serif typefaces out there is overwhelming, so pick carefully.

Additional Resources

Typography is an art form that is worth exploring. It goes well beyond iOS. When you've reached a level where you can call your craft Art, that is the biggest achievement that you can get.

Typography Guide

If you'd like to learn more about combining typefaces, apostrophes, quotes, dashes and brackets, I suggest heading to typogui.de.

A Five Minutes Guide to Better Typography

A real treatto read. Smartly designed to give you time to stop and think about each point. It’s also cleverly animated to give better impact.

Typography Cheatsheet

This is a great resource when it comes to keeping with the latest fonts as well as the trends in typography. It includes guidelines on how to proper usage of characters as well as grammar.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

iOS Colors

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

ios-design-handbook-typography-and-dynamic-type

Intro to iOS 14 Design

A complete guide to designing for iOS 14 with videos, examples and design files