![]() This little popup is a super illustrative example of how Apple styles text. Search uses the default size and weight, though the color is a bit lighter before you start typing in. 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. The only surprise is the segmented button at 15pt size (doesn’t match the other 17pt controls). This should be starting to feel pretty straightforward now. 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. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |