The iOS Font Size Guidelines (Updated for iOS 15)
Erik D. Kennedy В· Updated Aug 7, 2021
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, SF Pro (or similar) and (b) you want to match iOS conventions.
iPhone Typography Guidelines
Here’s a quick summary of styles. See below for visual reference and more in-depth guidelines.
| Element | Sizing | Notes |
|---|---|---|
| Titles (of pages or modals) | 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 |
| Form controls (Buttons, Text inputs) | 17pt | Highlight important buttons with medium font weight |
| Tab bar, 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 has some big chunky titles, like “Inbox” below – at 34pt, it’s about the biggest text you’ll see on an iPhone.
But once you scroll, titles morph to 17pt, the default size for text-based actions as well.
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.
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.
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. This balance of emphasizing and deemphasizing styles is crucial.
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.
This should be starting to feel pretty straightforward now. The only surprise is the segmented button at 15pt size (doesn’t match the other 17pt controls). 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.
Search uses the default size and weight, though the color is a bit lighter before you start typing in.
Modals
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.
iPad Typography Guidelines
As of last update (Aug 2021), iPads generally have lower pixel densities than iPhones (though this has been true for years). Since iPads have fewer pixels per inch, anything that’s sized in “pixels” or “points” will be slightly larger on an iPad. Because we hold iPads slightly farther away from our eyes than iPhones, this balances out nicely – you can keep most of the same font sizes on iPad and iPhone. So start any iPad typography work 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…
Others are bigger.
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.
SF Typography Guidelines
The default iOS font is SF, or San Francisco. You can download SF Pro for free. It’s not necessary to use SF 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:
- Hand-adjust the character spacing depending on your font size according to the table below
- Use text styles directly from the Figma iOS library or Apple’s iOS UI Design library (for Sketch, Photoshop, or XD)
- Use this handy Figma plugin or 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.
One Final Note рџЋ
If this is your first time here, you might also be interested in:
- Learn UI Design, my full-length online video course on user interface design
- The Design Newsletter, a 50,000+ person newsletter with original design articles aimed at giving you tactical advice to improve your UX/UI skills.
Some people have some really nice stuff to say about the newsletter.
Thank you for your newsletter. It’s possibly the best newsletter I’ve received since 1999, when I started freelancing.
Tricia Littlefield
Founder, TheSimpleWeb
Each time I receive an email from you, I’m like вЂDamn, this is a long email! No way will I read all of this’, then I began to read and I’m like вЂDamn, this is so freaking brillant’ and read it all.
Jean-Philippe
UX Strategist, Freelance
Источник
Apple text font style
San Francisco (SF) is the system font on all Apple platforms; the SF Pro variant is the system font in macOS. Using the system font gives your text legibility, clarity, and consistency with apps across Apple platforms. Download the San Francisco family of fonts here.
Beginning in macOS 11, the system provides the San Francisco fonts in the variable font format. This format combines different font styles together in one file, and supports interpolation between styles to create intermediate ones. With interpolation, typefaces can adapt to all sizes while appearing specifically designed for each size.
Interpolation also enables optical sizing, which refers to the creation of different typographic designs to fit different sizes. In macOS 11 and later, the system font supports dynamic optical sizes, merging the discrete optical sizes Text and Display into a single, continuous design. This design allows each glyph or letterform to be interpolated to produce a structure that’s precisely adapted to the point size.
NOTE Using variable fonts in a design tool that’s running on an earlier version of macOS may produce unexpected results. In this case, continue using Text and Display.
Use built-in text styles whenever possible. In macOS 11 and later, you can use the built-in text styles to express content in ways that are visually distinct, while retaining optimal legibility. For example, use the Body text style for primary content, and use the Footnote and Caption text styles for labels and secondary content. The table below lists the weight, size, line height, and emphasized weight for each style. For developer guidance, see NSFont.TextStyle.
| Text style | Weight | Size (points) | Line height (points) | Emphasized weight |
|---|---|---|---|---|
| Large Title | Regular | 26 | 32 | Bold |
| Title 1 | Regular | 22 | 26 | Bold |
| Title 2 | Regular | 17 | 22 | Bold |
| Title 3 | Regular | 15 | 20 | Semibold |
| Headline | Bold | 13 | 16 | Heavy |
| Subheadline | Regular | 11 | 14 | Semibold |
| Body | Regular | 13 | 16 | Semibold |
| Callout | Regular | 12 | 15 | Semibold |
| Footnote | Regular | 10 | 13 | Semibold |
| Caption 1 | Regular | 10 | 13 | Medium |
| Caption 2 | Medium | 10 | 13 | Semibold |
Point size based on image resolution of 144ppi for @2x designs.
Modify leading to improve readability or conserve space. Leading is the space between lines of text. In some cases, text layouts work better when you increase or decrease this space. When you display text in wide columns or long passages, more space between lines (loose leading) can make it easier for people to keep their place while moving from one line to the next. Conversely, if you need to display two lines of text in an area where height is constrained — for example, in a list row — decreasing the space between lines (tight leading) can help the text fit well. If you need to display three or more lines of text, avoid tight leading even in areas where height is limited. The system defines API that lets you increase or decrease the space between lines by two points; for developer guidance, see loose and tight (SwiftUI), and looseLeading and tightLeading (AppKit).
Emphasize important information. Use font weight, size, and color to highlight the most important information in your app.
Minimize the number of typefaces you use in your interface. Mixing too many different typefaces can make your app seem fragmented and sloppy.
Make sure custom fonts are legible. Custom fonts are supported on macOS, but may be tough to read. Unless your app has a compelling need for a custom font, such as for branding purposes or to create an immersive gaming experience, it’s usually best to stick with the system fonts. If you do use a custom font, make sure it’s easily readable, even at small sizes.
Use the standard Fonts panel for user font changes. If your app supports typography and text layout, use the standard Fonts panel to obtain the user’s font selection rather than designing a custom font-picker. The Fonts panel is familiar to people and includes controls for selecting a font and adjusting attributes such as typeface, size, and color. For developer guidance, see NSFontPanel.
Use dynamic system font variants to match the text appearance of standard controls. Dynamic system font variants give your text the same look and feel of the text that appears in standard system-provided controls. Use these variants to achieve a look that’s consistent with other apps on the platform.
| Dynamic font variant | API |
|---|---|
| Control content | controlContentFontOfSize |
| Label | labelFontOfSize |
| Menu | menuFontOfSize |
| Menu bar | menuBarFontOfSize |
| Message | messageFontOfSize |
| Palette | paletteFontOfSize |
| Title | titleBarFontOfSize |
| Tool tips | toolTipsFontOfSize |
| Document text (user) | userFontOfSize |
| Monospaced document text (user fixed pitch) | userFixedPitchFontOfSize |
| Bold system font | boldSystemFontOfSize |
| System font | systemFontOfSize |
Adjust tracking as needed in interface mockups. In a running app, the system font dynamically adjusts tracking at every point size. To produce an accurate interface mockup of a UI that uses the variable system fonts, you don’t have to choose a discrete optical size at certain point sizes, but you might need to adjust the tracking. In this situation, you can use the SF Pro tracking values listed below or see Apple Design Resources.
| Size (points) | Tracking (1/1000em) | Tracking (points) |
|---|---|---|
| 6 | +41 | +0.24 |
| 7 | +34 | +0.23 |
| 8 | +26 | +0.21 |
| 9 | +19 | +0.17 |
| 10 | +12 | +0.12 |
| 11 | +6 | +0.06 |
| 12 | 0 | 0.0 |
| 13 | -6 | -0.08 |
| 14 | -11 | -0.15 |
| 15 | -16 | -0.23 |
| 16 | -20 | -0.31 |
| 17 | -26 | -0.43 |
| 18 | -25 | -0.44 |
| 19 | -24 | -0.45 |
| 20 | -23 | -0.45 |
| 21 | -18 | -0.36 |
| 22 | -12 | -0.26 |
| 23 | -4 | -0.10 |
| 24 | +3 | +0.07 |
| 25 | +6 | +0.15 |
| 26 | +8 | +0.22 |
| 27 | +11 | +0.29 |
| 28 | +14 | +0.38 |
| 29 | +14 | +0.40 |
| 30 | +14 | +0.40 |
| 31 | +13 | +0.39 |
| 32 | +13 | +0.41 |
| 33 | +12 | +0.40 |
| 34 | +12 | +0.40 |
| 35 | +11 | +0.38 |
| 36 | +10 | +0.37 |
| 37 | +10 | +0.36 |
| 38 | +10 | +0.37 |
| 39 | +10 | +0.38 |
| 40 | +10 | +0.37 |
| 41 | +9 | +0.36 |
| 42 | +9 | +0.37 |
| 43 | +9 | +0.38 |
| 44 | +8 | +0.37 |
| 45 | +8 | +0.35 |
| 46 | +8 | +0.36 |
| 47 | +8 | +0.37 |
| 48 | +8 | +0.35 |
| 49 | +7 | +0.33 |
| 50 | +7 | +0.34 |
| 51 | +7 | +0.35 |
| 52 | +6 | +0.31 |
| 53 | +6 | +0.33 |
| 54 | +6 | +0.32 |
| 56 | +6 | +0.30 |
| 58 | +5 | +0.28 |
| 60 | +4 | +0.26 |
| 62 | +4 | +0.24 |
| 64 | +4 | +0.22 |
| 66 | +3 | +0.19 |
| 68 | +2 | +0.17 |
| 70 | +2 | +0.14 |
| 72 | +2 | +0.14 |
| 76 | +1 | +0.07 |
| 80 | 0 | 0 |
| 84 | 0 | 0 |
| 88 | 0 | 0 |
| 92 | 0 | 0 |
| 96 | 0 | 0 |
Not all apps express tracking values as 1/1000em. Point size based on image resolution of 144ppi for @2x and 216ppi for @3x designs.
In interface mockups, use text size to determine when to use SF Pro Text and Display. If you use the Text and Display discrete optical sizes in an interface mockup, you need to use different variants at different text sizes. Specifically, use SF Pro Text for text 19 points or smaller, and SF Pro Display for text 20 points or larger. If you need to adjust tracking, see the tracking values available in Apple Design Resources.
Источник
