CheatSheet:Typography for UI

1. Typography Fundamentals

1.1 Key Terminology

1.2 Type Classifications

2. Typography in UI Design

2.1 Type Hierarchy

• Establishes visual order and importance through size, weight, and color
• H1: Page title (28-48px)
• H2: Section headings (24-32px)
• H3: Subsection headings (18-24px)
• Body: Main content (14-16px)
• Caption: Supplementary text (12-14px)
• Use 3-4 different text sizes maximum for clarity
• Maintain consistent size relationships across interface

2.2 Font Weights

• Use 2-3 weights maximum per interface
• Regular for body text, Medium/Semibold for headings, Bold for emphasis

2.3 Readability Guidelines

3. Color and Contrast

3.1 WCAG Contrast Requirements

• Test contrast using browser tools or online checkers
• Never use gray text lighter than #767676 on white background
• Avoid pure black (#000000) on white; use dark gray (#1a1a1a) instead

3.2 Text Color Best Practices

• Primary text: 87% opacity or #1a1a1a
• Secondary text: 60% opacity or #616161
• Disabled text: 38% opacity or #9e9e9e
• Use color to support meaning, not as sole indicator

4. Type Scale and Spacing

4.1 Modular Scale Systems

• Choose base size (e.g., 16px), multiply by ratio to generate scale
• Creates harmonious, proportional sizing relationships

4.2 8-Point Grid System

• All spacing and sizing uses multiples of 8 (8, 16, 24, 32, 40, 48px)
• Line heights should align to 8px grid
• 4px baseline grid acceptable for finer control
• Ensures consistency and easier developer handoff

5. Web Fonts and Performance

5.1 Font Loading Methods

5.2 Font File Formats

• WOFF2: Best compression, modern browser support
• WOFF: Fallback for older browsers
• TTF/OTF: Uncompressed, larger file sizes
• Use WOFF2 primarily, WOFF as fallback

5.3 Performance Optimization

• Load only required weights and styles
• Limit to 2-3 font families maximum
• Use font-display: swap to prevent invisible text
• Subset fonts to include only needed characters
• Preload critical fonts in HTML head

6. Common UI Typography Patterns

6.1 Button Text

• Use sentence case or title case, avoid all caps for long labels
• Medium or Semibold weight (500-600)
• 14-16px font size
• Increase letter spacing slightly (+0.5px) for uppercase

6.2 Form Labels and Inputs

• Label: 12-14px, Medium weight
• Input text: 14-16px, Regular weight
• Placeholder: Same size as input, reduced opacity (60%)
• Helper text: 12px, Regular weight

6.3 Navigation

• Primary nav: 14-16px, Medium weight
• Active state: Bold or color change
• Consistent spacing between items (16-24px)

6.4 Data Tables

• Headers: 12-14px, Semibold, uppercase with letter spacing
• Cell content: 13-14px, Regular
• Align numbers right, text left
• Use monospace for numerical data requiring comparison

7. Responsive Typography

7.1 Breakpoint Adjustments

• Reduce heading sizes by 20-30% on mobile
• Increase line height slightly on mobile (1.5-1.6)
• Reduce line length on large screens using max-width

7.2 Fluid Typography

• Use CSS clamp() for smooth scaling: clamp(min, preferred, max)
• Example: font-size: clamp(1rem, 2.5vw, 2rem)
• Use viewport units (vw, vh) with min/max constraints

8. Accessibility Considerations

8.1 Screen Reader Support

• Use semantic HTML (h1-h6, p, strong, em)
• Maintain logical heading hierarchy without skipping levels
• Avoid text in images; use alt text when necessary
• Ensure focus indicators are visible for keyboard navigation

8.2 Text Resizing

• Use relative units (rem, em) instead of px
• Design should remain functional at 200% zoom
• Avoid fixed heights that cut off text when resized
• Test with browser zoom at 150% and 200%

8.3 Dyslexia-Friendly Design

• Use sans-serif fonts with clear character differentiation
• Increase line spacing (1.5-2.0)
• Left-align text, avoid justified alignment
• Use adequate paragraph spacing
• Avoid italics for long passages

9. Typography in Figma

9.1 Text Styles Setup

• Create text styles for all typography variants
• Naming convention: Category/Type/Size (e.g., Heading/H1/Desktop)
• Include font family, size, weight, line height, letter spacing
• Organize styles in logical groups using forward slashes

9.2 Auto Layout with Text

• Enable auto layout on text containers for responsive behavior
• Set horizontal resizing to "Hug contents" or "Fill container"
• Add padding using auto layout spacing values
• Use constraints for fixed positioning within frames

9.3 OpenType Features

• Access via Text properties panel → three dots menu
• Ligatures: Connect characters aesthetically (fi, fl)
• Tabular figures: Equal-width numbers for tables
• Stylistic sets: Alternate character designs
• Superscript/Subscript: For mathematical notation

10. Common Typography Mistakes

10.1 Errors to Avoid

• Using too many fonts (stick to 2-3 maximum)
• Poor contrast making text unreadable
• Lines too long (over 90 characters)
• Insufficient line height causing cramped appearance
• Overusing bold, italic, or underline
• Center-aligning body text (reduces readability)
• All caps for long passages (slower reading speed)
• Text too small on mobile (minimum 16px)
• Inconsistent spacing and sizing across interface
• Using decorative fonts for body text

10.2 Professional Polish

• Use proper quotation marks (" ") not straight quotes (" ")
• Use em dashes (-) not hyphens (-) for breaks
• Apply hanging punctuation for justified text
• Avoid orphans (single words on new line) and widows (single lines on new page)
• Use non-breaking spaces between related items (12 kg, not 12
  kg)

11. Popular UI Font Choices

11.1 Sans Serif Fonts

11.2 System Font Stack

• -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif
• Uses native fonts for fastest loading and familiar appearance
• No external requests, optimal performance