The flexibility of the system fonts helps you achieve optimal legibility at every point size and gives you the breadth and depth you need for precision typesetting throughout your app.

iOS: SF Pro and SF Compact

The rounded variant of the system fonts can help you coordinate your text style with the appearance of soft or rounded UI elements, or to provide an alternative typographic voice

iOS: SF Pro Rounded and SF Compact Rounded

SF Mono is a monospaced variant of San Francisco — that is, a typeface in which all characters are equal in width. You typically use a monospaced typeface when you want to align columns of text, such as in a coding environment

iOS: SF Mono

New York is a classical serif typeface you can use in the interface or to provide a traditional reading experience

iOS: New York

- Use built-in text styles whenever possible.
- Emphasize important information. 
- Prioritize content when responding to text-size changes.
- Minimize the number of typefaces you use in your interface.
- Modify leading to improve readability or conserve space.
- Make sure custom fonts are legible. 
- Implement accessibility features for custom fonts.
- Adjust tracking as needed in interface mockups.
- In interface mockups, use text size to determine when to use SF Pro Text and Display, SF Compact Text and Display, or NY Small, Medium, Large, and Extra Large.

iOS: Choosing Fonts to Enhance Your App

Dynamic Type provides additional flexibility by letting readers choose their preferred text size.

iOS: Dynamic Type Sizes

In addition to the standard dynamic type sizes, the system offers a number of even larger sizes for users with accessibility needs.

iOS: Larger Accessibility Type Size

Apple provides two type families you can use in your iOS apps.

- San Francisco (SF). San Francisco is a sans serif type family. 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 display context (at large sizes) as it does in a reading context (at text sizes).

Using both typefaces can help you create stronger visual hierarchies or highlight semantic differences in content.

University of Michigan - Ann Arbor

Three primary themes differentiate iOS from other platforms:
- Clarity: Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. 
- Deference: Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. 
- Depth: Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. 

iOS Design

Apple Human Interface Guidelines

Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data.
- Use color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly.
- Use complementary colors throughout your app. The colors in your app should work well together, not conflict or distract.
- In general, choose a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.
- Consider choosing a tint color to indicate interactivity throughout your app. If you define a tint color that denotes interactivity, make sure other colors don’t compete.
- Provide two versions of your tint color to make sure it looks good in both light and dark modes.
- Avoid using the same color for interactive and noninteractive elements.
- Consider how artwork and translucency affect nearby colors.
- Test your app’s color scheme under a variety of lighting conditions.
- Consider how your use of color might be perceived in other countries and cultures. 
- Avoid using colors that make it hard for people to perceive content in your app.

iOS: Color

Successful branding involves more than just adding brand assets to your app. Great apps express unique brand identity through smart font, color, and image decisions. Provide enough branding to give people context in your app, but not so much that it becomes a distraction.
- Incorporate refined, unobtrusive branding. Using colors from your app icon throughout your interface is one great way to provide context in your app.
- Don’t let branding get in the way of great app design.
- Defer to content over branding.
- Resist the temptation to display your logo throughout your app.

iOS: Branding

In Dark Mode, the system uses a darker color palette for all screens, views, menus, and controls, and it uses more vibrancy to make foreground content stand out against the darker backgrounds.
- Comply with the appearance mode people choose in Settings.
- Test your designs in both light and dark appearances.
- Ensure that your content remains comfortably legible in Dark Mode when you adjust the contrast and transparency accessibility settings

Learn Before

Related

Learn After