What is the minimum recommended size for serif type to be displayed on screen?
Typography
Apple provides two type families you tin use in your iOS apps.
San Francisco (SF). San Francisco is a sans serif type family that includes SF Pro, SF Pro Rounded, SF Mono, SF Compact, and SF Compact Rounded. SF Pro is the system font in iOS, macOS, and tvOS; SF Compact is the system font in watchOS. Designed to match the visual clarity of the platform UIs, the system fonts are legible and neutral.
New York (NY). New York is a serif typeface that provides a unique tone designed to complement the SF fonts. NY works as well in a graphic brandish context (at large sizes) equally it does in a reading context (at text sizes).
You tin can download the San Francisco and New York fonts here.
Beginning in iOS fourteen, the organization provides the San Francisco and New York fonts in the variable font format. This format combines different font styles together in ane 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 iOS 14 and later, the organization fonts support dynamic optical sizes, merging a font's discrete optical sizes — such as Text and Display for SF Pro and SF Compact, and Small, Medium, Large, and Extra Large for New York — 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 indicate size.
NOTE Using variable fonts in a blueprint tool that'southward running on an earlier version of iOS may produce unexpected results. In this instance, keep using Text and Display.
Because SF Pro and NY are compatible, there are many ways you tin can incorporate typographic contrast and diverseness into your iOS interfaces while maintaining a consistent look and feel. For case, using both typefaces tin help you create stronger visual hierarchies or highlight semantic differences in content.
Apple-designed typefaces back up an extensive range of weights, sizes, styles, and languages, so you can blueprint comfortable and beautiful reading experiences throughout your app. When you use text styles with the system fonts, you also get support for Dynamic Type and the larger accessibility type sizes, which permit people choose the text size that works for them. For specific values, run across Dynamic Type Sizes and Larger Accessibility Blazon Sizes. Size data, including tracking values, is as well available in the Sketch, Photoshop, and Adobe XD Apple tree Design Resource for iOS.
The organization defines APIs that make information technology piece of cake to employ the SF and NY typefaces; for programmer guidance, see the withDesign method and SystemDesign structure of UIFontDescriptor.
SF Pro and SF Compact
The flexibility of the organization fonts helps you accomplish optimal legibility at every point size and gives you the breadth and depth you need for precision typesetting throughout your app.
SF Pro and SF Meaty support:
- Over one hundred languages using Latin, Greek, and Cyrillic scripts
- 9 weights — from Ultralight to Black — in both uprights and italics
- Variable letter spacing that automatically adjusts based on the size of the text
- Pocket-size capitals, fractions, and inferior and superior numerals
- Dynamic optical sizes
For programmer guidance, see the default property of the SystemDesign construction.
SF Pro Rounded and SF Compact Rounded
The rounded variant of the system fonts can help you coordinate your text fashion with the appearance of soft or rounded UI elements, or to provide an alternative typographic voice.
SF Pro Rounded and SF Compact Rounded back up:
- Over one hundred languages using Latin, Greek, and Cyrillic scripts
- Uprights in ix weights — from Ultralight to Black
- Variable alphabetic character spacing that automatically adjusts based on the size of the text
- Small capitals, fractions, and junior and superior numerals
- Dynamic optical sizes
For developer guidance, encounter the rounded holding of the SystemDesign structure.
SF Mono
SF Mono is a monospaced variant of San Francisco — that is, a typeface in which all characters are equal in width. You lot typically use a monospaced typeface when you want to align columns of text, such every bit in a coding environment. For example, Xcode and Swift Playgrounds use SF Mono by default.
Note SF Pro uses the OpenType tabular lining feature to back up the display of monospaced numbers and currencies.
SF Mono supports:
- Over one hundred languages using Latin, Greek, and Cyrillic scripts
- Six weights — from Light to Heavy — in both uprights and italics
- Monospacing across all weights (that is, changing the font weight doesn't cause the text to reflow)
- Dynamic optical sizes
For programmer guidance, see the monospaced property of the SystemDesign structure.
New York
New York is a classical serif typeface yous can use in the interface or to provide a traditional reading experience.
NY supports:
- Over one hundred languages using Latin, Greek, and Cyrillic scripts
- Half dozen weights — from Regular to Black — in both uprights and italics
- Variable letter spacing that automatically adjusts based on the size of the text
- Dynamic optical sizes
For programmer guidance, see the serif property of the SystemDesign construction.
Choosing Fonts to Enhance Your App
Utilize built-in text styles whenever possible. The built-in text styles let you express content in means that are visually distinct, while retaining optimal legibility. These styles — including headline, trunk, callout, and several sizes of championship — are based on the system fonts and let you lot take reward of key typographic features, such as Dynamic Type, which automatically adjusts tracking and leading for every font size. For developer guidance, see UIFontTextStyle.
Emphasize important information. Use font weight, size, and color to highlight the most important information in your app.
Prioritize content when responding to text-size changes. Not all content is equally of import. When someone chooses a larger size, they want to make the content they care about easier to read; they don't ever want every word on the screen to exist larger.
Minimize the number of typefaces y'all employ in your interface. Mixing also many dissimilar typefaces tin can brand your app seem fragmented and sloppy.
Modify leading to improve readability or conserve space. Leading is the space between lines of text. In some cases, text layouts work improve when you increase or decrease this space. When y'all display text in wide columns or long passages, more space betwixt lines (loose leading) can make it easier for people to go along their identify while moving from one line to the side by side. Conversely, if y'all need to display two lines of text in an area where acme is constrained — for example, in a list row — decreasing the space betwixt lines (tight leading) can help the text fit well. If y'all demand to display three or more than lines of text, avoid tight leading even in areas where height is express. The organization defines API that lets y'all increase or decrease the space betwixt lines by two points; for developer guidance, see loose and tight (SwiftUI), and traitLooseLeading and traitTightLeading (UIKit).
Make certain custom fonts are legible. Custom typefaces are supported on iOS, but may be tough to read, specially if they have stylistic attributes that brand letterforms hard to discern when displayed at small sizes. Unless your app has a compelling need for a custom font — such as for branding purposes or to create an immersive gaming experience — information technology's usually best to stick with the arrangement fonts. Consider using a custom font for display text only; if you practise use it for reading or interface text, make sure information technology'south legible, even at small sizes.
Implement accessibility features for custom fonts. Arrangement fonts automatically react to accessibility features similar bold text and larger type. Implement the same behavior in apps that apply custom fonts past making certain accessibility features are enabled and registering for notifications when they change. For guidance, see Text Size and Weight.
Adjust tracking as needed in interface mockups. In a running app, the organization fonts dynamically adjust tracking at every signal size. To produce an accurate interface mockup of a UI that uses the variable system fonts, you lot might need to adjust the tracking. For guidance, see the values listed in Tracking Values and available in Apple tree Pattern Resource.
Notation iOS uses San Francisco as the organisation font for Latin, Greek and Cyrillic alphabets, and a variety of other typefaces for other scripts.
Dynamic Type Sizes
Dynamic Type provides boosted flexibility past letting readers choose their preferred text size. Here are the weight, size, and leading values for each text style at different Dynamic Type sizes.
Larger Accessibility Type Sizes
In addition to the standard dynamic type sizes, the arrangement offers a number of fifty-fifty larger sizes for users with accessibility needs. Here are the weight, size, and leading values for each text style at the larger accessibility type sizes.
Tracking Values
To help you create accurate interface mockups, employ the tracking values the system defines for various sizes of SF Pro, SF Pro Rounded, and New York.
Source: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/
0 Response to "What is the minimum recommended size for serif type to be displayed on screen?"
Post a Comment