This balance of emphasizing and deemphasizing styles is crucial. But notice that even though the title is smaller, it’s a thicker font weight, meaning you can still recognize it as a title. On the settings page, the options themselves are written out in the default text style, even though the section titles (e.g. Notice a trend here? iOS doesn’t style font sizes the way you might naively expect. 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.

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). You never knew how many things were actually lists until you started displaying them on a tall, thin screen. Lists are the bread and butter of phone apps. 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). 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. IOS has some big chunky titles, like “Inbox” below – at 34pt, it’s about the biggest text you’ll see on an iPhone.īut once you scroll, titles morph to 17pt, the default size for text-based actions as well. We’ll cover not just the actual font sizes, but also how Apple thinks about text styles. Let’s break this down element-by-element and look at illustrated examples. Highlight important buttons with medium font weight Skip a font size between secondary and tertiary text

IOS 10+ page titles are 34pt before scrolling, 17pt once scrolled See below for visual reference and more in-depth guidelines. Quickly navigate to other chapters: Intro ĭesigning 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. You’re reading Font Sizes in UI Design: The Complete Guide.

Status bar ios html example