A swift guide to better typography for iOS
7 effective tips to learn iOS typography in today’s mobile-first world.
iOS has slowly gone back to its roots.
We now see bold typography everywhere.
Titles are usually big and black.
This only makes sense given the recent surge of larger devices such as the iPhone 11 and the iPad Pro.
Another reason that we’re witnessing larger typefaces is accessibility. With billions of users tuning into their phones daily, designers are having to cater to masses of all ages.
Accessibility empowers those with some form of visual disability to set large fonts for the apps that support it.
After the release of iOS 11, which is when iOS started transitioning to its roots, users have started expecting features like accessibility by default.
Typography Basics
Before diving into typography for iOS, it’s essential to learn the art and history of typography if you want to achieve the best results.
The reason for learning typography basics is that if you’re aware of the different elements that affect your typeface and something doesn’t look right, you’ll know exactly what might be causing the issue.
Designers should be familiar with the terms highlighted above. Here’s a great resource by freeCodeCamp if you want to learn more about the anatomy of letterforms.
“Type is a beautiful group of letters, not a group of beautiful letters.”
— Matthew Carter
Tip #1: Know when to use Sans and Serif
A Serif typeface is one that has the small projecting featured, called “serifs,” at the end of strokes.
A Sans typeface, on the other hand, doesn’t have the “serifs,” hence the term preceding it, “sans.” By the way, in French, “sans” translates to “without.”
The Sans typefaces, which are the more popular option nowadays, are more neutral and utilitarian. You’ll notice a lot of modern apps using these typefaces.
The downside of Sans fonts is that they’re more generic, so it doesn’t allow your designs to stand out much. Also, since there are millions of Sans fonts out there, you need to pick carefully.
The Serif typefaces are generally used in apps and websites that encourage storytelling like Medium and The New York Times since they offer a lot of charm.
I feel that it’s crucial to go back to our roots when it comes to design. This is why I encourage others to adopt Serif for apps and websites intended for heavy reading.
Tip #2: Align with readability in mind
There are different ways to enforce structure since elements are properly aligned only when they feel aligned to the designer.
Typically, you should align the text to match the direction of the language that you’re using for your content.
As a result, for most languages including English, you should align the vast majority of your text to the left.
When in doubt, align left.
When the text is aligned to the left, especially on mobile devices, it also creates a straight left edge.
This gives your design a better structure and enables readers to scan each line by simply shifting focus to the left edge.
It’s also easily scannable since the reader’s eyes don’t need to find the starting point of each line.
When the lines are spaced too tightly, it’s easy for readers to finish reading a line and jump back to the left edge, only to be unsure which line comes next.
This is when other alignment options can home handy. For instance, you can center-align headlines or short, independent blocks of text.
If something is longer than three or four lines, it’ll almost always look better when aligned to the left.
Tip #3: Pick fonts that have a lot of weights
Generally, a minimum of three to four font-weights would constitute a typeface.
But, it’s usually a good idea to pick fonts that have more than five to seven weights.
While this isn’t always true, the number of font-weights associated with a particular font can often indicate the level of care and effort designers spent on curating the typeface.
Font directories such as Google Fonts let you filter by the number of styles, which is a combination of the available weights and their italic variations.
A great way to drill down your options is to crank up the filter to 10+ (since you need to account for italics).
In addition to the usual suspects — Regular and Bold — modern fonts like SF have extra font weights. For instance, SF Display is packed with Ultralight, Thin, Light, Medium, Semibold, Heavy, and Black.
When thinking in terms of iOS design, here are some general guidelines:
- 11–19pt: SF Pro/UI Text (Regular)
- 20–34pt: SF Pro/UI Display (Medium)
- 34pt or more: SF Pro/UI Display (Bold)
You’re also free to use lighter weights such as Ultralight or Thin but only do so if you’re pretty comfortable with typography. It’s usually best to stick to the guidelines.
When in doubt, however, incrementally skip a weight to re-enforce proper structure.
Tip #4: Pick body fonts that have a wide letter-spacing
Usually, the fonts in the body have greater letter-spacing since they’re much smaller than the titles and need to be clean and comfortable to scan.
As a result, options like San Francisco, Helvetica Neue, Open Sans, Graphik, Montserrat, Circular, and Avenir Next are some of my favorites.
Most of these are available for free on Google Fonts. Proxima Nova is another great option that’s available for free on Typekit (with a Creative Cloud account).
The interface below uses Poppins.
Artists design a font family with an intended purpose. A family such as Poppins has been designed to be notably legible, even at small sizes.
We should keep this in mind when picking fonts for our apps. Apple surely does.
SF Pro/UI Display has tight letter-spacing as opposed to SF Pro/UI Text, which has a wide letter-spacing. iOS automatically adjusts the tracking value and renders Display or Text depending on the font size to ensure the best possible reading experience.
Here’s an exercise for you. Can you guess which fonts Apple uses for the body and the header texts?
We’ll take a look at that in the next section.
Tip #5: The font size should be at least 11pt for the iPhone, Ipad, and Apple Watch
Although the font size should be a minimum of 11pt, the recommended size for the body text is 15–19pt.
Make sure that your text doesn’t go under 10pt since a lot of users might find the content unreadable.
If you’re using the San Francisco typeface, iOS will automatically adjust the tracking value and render Display or Text depending on the font size. Apple does this to ensure that the text is always easy to process.
If your font size is at least 20pt, you should use the SF Pro/UI Display typeface. Otherwise, you should use the SF Pro/UI Text typeface.
Currently, you can only apply these values in Photoshop, but here’s a great Sketch plugin to quickly apply the correct values. This plugin will adjust the character spacing on text layers using the SF UI Text/Display fonts to what it would be when used in the actual app.
Tip #6: Pay attention to the line-height
Have you ever accidentally read the same line of text twice, or accidentally skipped a line?
The line-height plays an important role in that it makes it easy for the reader to find the next line when the text wraps.
If the line-height is either too little or too much, the reader won’t be able to quickly jump to the next line while retaining context.
The line-height should typically lie between 120% and 145% of the font size. However, this is still a little generic and not a one size fits all solution.
It’s usually best to have a line-height of 125% for a short paragraph and 150% for a long story.
Choosing the “right” line-height is a complicated task and warrants a separate discussion. It’s more than just picking one value that works across the board.
In general, think about increasing the number of words by 10x, and gauge how frustrating it could potentially get for users to read the text. Then, adjust the line-height accordingly.
Tip #7: Use between 40 and 70 characters per line
When you’re styling paragraphs, you might occasionally make the mistake of fitting the text to your layout. This can go against creating the best reading experience.
When your text is too wide, readers can have trouble focusing. An overwhelming amount of text per line distracts the user and doesn’t get the message across.
For better readability, it’s recommended that you have between 40 and 70 characters per line. This makes the jump to a new line more exciting and can even effectively immerse the user in your content.
Going wider could work, so do it at your own risk. Stick to the 40–70 range if you want to play it safe.
The text content will generally make up the majority of your design, which is why designers spend a lot of their time focusing on readability first. Unless you’re a typography aficionado, you’ll want something clean and simple at first, something that’s not necessarily original.
Good typography makes us want to read, so it’s best to focus on its utility.
Apple recommends San Francisco as the latest default font since they designed it for legibility. If you have the latest version of iOS installed, you’ll notice San Francisco in all your built-in apps.
If you want to learn more about how the San Francisco typeface affects the iOS design landscape, check out this video.
Once you start to pay close attention to the typography on well-designed products, it won’t be long before you’ll feel comfortable utilizing different typefaces in creative ways!
