Course Blog Newsletter Subscribe

The iOS Font Size Guidelines (Updated for iOS 11)

You’re reading Font Sizes in UI Design: The Complete Guide. Quickly navigate to other chapters: Intro · iOS · Android · Web · Principles

Designing an iPhone or iPad app and not sure what font sizes to use? Here’s the quick and dirty summary of font sizes assuming (a) you’re using Apple’s default font, San Francisco (or similar) and (b) you want to match the iOS style.

iPhone Typography Guidelines

Here’s a quick summary of styles. See below for visual reference and more in-depth guidelines.

Element Sizing Notes
Page titles,
Modal titles
17pt Medium font weight
iOS 10+ page titles are 34pt before scrolling, 17pt once scrolled
Paragraph text,
Links
17pt
Secondary text 15pt Lighter color as well
Tertiary text,
Captions,
Segmented buttons
13pt Skip a font size between secondary and tertiary text
Buttons,
Text inputs
17pt Highlight important buttons with medium font weight
Action Bar 10pt Don't go smaller than this

Let’s break this down element-by-element and look at illustrated examples. We’ll cover not just the actual font sizes, but also how Apple thinks about text styles.

Titles

iOS 10 has some big chunky titles, like “Inbox” below – at 34pt, it’s about the biggest text you’ll see on an iPhone.

iOS large title

But once you scroll, titles morph to 17pt, the default size for text-based actions as well.

iOS small title

Note that the title shrinks to the same size as default text – but they use a heavier weight and top-and-center placement to distinguish it as a title. This was a bit of a revelation to beginning-designer-Erik, as I always expected that titles would be bigger than normal text (not simply bolder).

List Views

Lists are the bread and butter of phone apps. You never knew how many things were actually lists until you started displaying them on a tall, thin screen. Let’s look at those next.

iOS email list font sizes

In a list view – in this particular example, emails – iOS treats the sender’s name as normal-sized text (17pt), and the subject and preview as secondary, smaller text (15pt). I think this is worth noting, because again, starting out as a designer, my instinct was to do the opposite: make the body the default size and make the sender’s name even bigger. Notice a trend here? iOS doesn’t style font sizes the way you might naively expect.

iOS settings list font sizes

On the settings page, the options themselves are written out in the default text style, even though the section titles (e.g. “AirDrop”) are smaller (whoa!). But notice that even though the title is smaller, it’s a thicker font weight, meaning you can still recognize it as a title. Again: subtle.

The notes below the settings (“AirDrop lets you share instantly…”) are written in 13pt font, which is the smallest we’ve seen in any of these UI examples.

Form Controls

Let’s look at a few controls real quick.

iOS button
iOS button group
iOS text box

This should be starting to feel pretty straightforward now. The only surprise is the segmented button at 13pt size (seems too small). My hunch is that, since Apple knew some of these buttons would have many options, they just defaulted to a smaller text size for the control, even if there are only two options.

iOS search box

Search uses the default size and weight, though the color is a bit lighter before you start typing in.

Modals

iOS modal with annotated font sizes

This little popup is a super illustrative example of how Apple styles text.

  • The title is the default size. Which you would think would not be enough, but what have we seen before? A thicker font weight to make up for it not being any bigger.
  • The explanatory text is 13pt. I would’ve guessed it would be 15pt, like the email body text, but perhaps they just wanted it to fit on one line?
  • The password input is 13pt, which would be too small for a normal text input, though my hunch is because you’re only going to see a bunch of black circles, it doesn’t need to be the default size.
  • “OK” and “Cancel” are the default size, but since “OK” is hopefully what you will press, Apple draws a little more attention to it by making it a thicker weight.

These font sizes follow a clear pattern, and they illustrate some nice text-styling tricks, but there are some odd inconsistencies for sure.

Action Bar

Finally we’ve got the action bar at the bottom of the screen. This is the smallest text I could find in the whole UI – 10pt. I would stay away from such a small size as much as possible.

iOS action bar

iPad Typography Guidelines

As of this writing (spring 2018), iPads generally have lower pixel densities than iPhones. This means an element that is the same size in your design app, it’ll appear slightly larger on an iPad. Because of this, the vast majority of font sizes stay the same between iPhone and iPad. So if you’re designing an iPad app, start by reading the iPhone section above.

That being said, the biggest difference is with titles. As you have a larger canvas to work with, an ideal body font size remains ideal – but you have much more space for larger titles.

So while some applications still use the iPhone-style 17pt titles…

iPad screen with 17pt title

Others are bigger.

iPad screen with 28pt title
iPad screen with 32pt title

A couple native apps use the SF’s boldest weight, heavy. In my opinion, this is the true “iPad version” of the bold titles on iPhone – but Apple is oddly inconsistent with its usage.

iPad screen with 50pt title

Above, I also point out the Music app’s irregular bottom tab bar (with 17pt text). Most native iPad apps retain the iPhone-style 10pt tab bar text, but I think this is a better “translation” of the design to a larger screen.

So overall, for iPad, you’re going to be following a lot of iPhone styles, but with a little more room to get creative in your headers.

San Francisco Guidelines

The default iOS font is San Francisco. You can download San Francisco for free. It’s not necessary to use San Francisco when creating an iOS app, but if you want it to have that default iOS look, then SF is your new best friend.

Apple would like you to be a doll and follow a few extra rules when using San Francisco.

First, use SF Pro Display at font sizes 20 or higher. Only use SF Pro Text for body text and smaller.

Font Size Font Family
19 or smaller SF Pro Text
20 or larger SF Pro Display

Second, San Francisco is designed to have different character spacing at different sizes. So if you want to perfectly mimic the “default iOS” look, have a few options:

  1. Hand-adjust the character spacing depending on your font size according to the table below
  2. Use text styles directly from the Apple iOS UI Design Sketch (slash Photoshop slash XD) library
  3. Use this handy Sketch plugin to automatically have SF’s character spacing set correctly, depending on its font size

Or just ignore the fact that Apple tells you to change character spacing down to the hundredth of a pixel. Live free or die, man.

Font Style Font Size Character Spacing
Bold title 34pt 0.41
Body text 17pt -0.41
Secondary text 15pt -0.24
Tertiary text 13pt -0.08
Smallest text 10pt 0.12

San Francisco is the default font for iPhone and iPad. So if you’re using it, best to know about these restrictions. However, you can, of course, design iOS apps in any font you want. Be careful that others might appear bigger or smaller, or less legible, even at the same size.

Continue to Chapter 2: Android/Material Design Font Size Guidelines

You Might Also Like: