Typography and Text Styling in Figma

Key Concepts

• Font Selection
• Font Size and Scale
• Line Height and Spacing
• Text Alignment and Justification
• Color and Contrast

1. Font Selection

Font selection is crucial for establishing the tone and readability of your mobile app. Sans-serif fonts like Helvetica or Arial are often preferred for mobile interfaces due to their clean and modern appearance. Serif fonts, such as Times New Roman, can be used for a more traditional or formal feel. Display fonts, with their unique and artistic styles, are best reserved for headings or special elements.

Example: For a fitness app, you might choose a bold, sans-serif font like Montserrat for headings to convey energy and modernity, while using a lighter, sans-serif font like Roboto for body text to ensure readability.

2. Font Size and Scale

Font size and scale determine how large or small text appears on the screen. A well-defined scale helps maintain visual hierarchy and readability. Common scales include modular scales, which use ratios to determine font sizes. For mobile apps, it's essential to ensure that the smallest text is still legible on smaller screens.

Example: A modular scale might define the font sizes for a mobile app as follows: Heading 1 (32px), Heading 2 (24px), Body Text (16px), and Caption (12px). This scale ensures that headings are prominent and body text is easily readable.

3. Line Height and Spacing

Line height, also known as leading, is the vertical space between lines of text. Proper line height improves readability and prevents text from appearing too cramped or spaced out. Spacing, including letter spacing and word spacing, also affects readability and aesthetic appeal. For mobile apps, line height is typically set between 1.2 and 1.5 times the font size.

Example: For a mobile app with body text set at 16px, a line height of 24px (1.5 times the font size) would provide adequate space between lines, enhancing readability without making the text look sparse.

4. Text Alignment and Justification

Text alignment determines how text is positioned within its container. Common alignments include left-aligned, right-aligned, centered, and justified. Left-aligned text is generally preferred for mobile apps as it enhances readability. Justified text, which aligns both left and right margins, can create uneven spacing between words and is less commonly used in mobile design.

Example: In a mobile app, left-aligned text for body content ensures a clear reading path, while centered text might be used for headings or titles to create a balanced and visually appealing layout.

5. Color and Contrast

Color and contrast play a significant role in text readability. High contrast between text and background colors ensures that text is easily legible. For mobile apps, dark text on a light background or light text on a dark background is typically used to maximize contrast. Additionally, color can be used to highlight important information or create visual hierarchy.

Example: In a mobile app with a dark mode, white text on a dark background would provide high contrast and readability. For emphasis, you might use a bright accent color like blue for call-to-action buttons or important notifications.