Typography

Typography

Typography is the most critical part of interface design. Sloppy, inconsistent usage of font sizes, weights, and colors is the clearest signal that a designer doesn't know what they're doing.

Read references/typography-knowledge.md for detailed examples and analysis of real-world apps.

The Rule of Four

Limit yourself to a maximum of four type sizes or less. This rule can be broken, but only when you understand why the boundaries exist.

The evidence: Instagram's home screen uses essentially one type size (15pt) with only a smaller 12pt for story labels. Twitter uses three sizes for its entire timeline. iOS Settings uses two sizes on internal pages. Facebook Messenger's main screen: three sizes.

When apps use 5-6+ sizes (like Facebook's Discover tab), they immediately look disorganized and lack cohesion.

The four roles

Most well-designed interfaces combine:

1. Title — Page or section titles
2. Body/Subtitle — Primary content, list items, navigation
3. Action items — Buttons, links, interactive elements (often same size as body, differentiated by color/weight)
4. Metadata — Timestamps, helper text, secondary info

You can often collapse these to 2-3 sizes. The fewer sizes, the cleaner the interface.

Extending Without Adding Sizes

Change meaning without adding sizes by varying:

• Color — Same size, different color: black for titles, gray for subtitles, blue for actions
• Weight — Bold for names, regular for body, medium for interactive (Instagram uses subtle weight changes for actionable profile names)
• Position — Right-aligned text reads as a value/definition of the left-aligned label (iOS Settings pattern)
• Decoration — Underlines, background colors, or pill shapes on action items
• Case — ALL CAPS at a smaller size can serve as a section divider without adding a new size

Font Weight as Hierarchy

Weight controls emphasis and interactive meaning:

• Bold/Heavy — Primary titles, emphasis
• Semibold/Medium — Interactive elements, secondary emphasis
• Regular — Body text, descriptions
• Light — Use very sparingly. Thin weights at small sizes become unreadable.

Never use more than 3 weights in a single view.

Hierarchy Principles

• Create contrast between heading and body sizes — if they're too close, hierarchy collapses
• The title should be unmistakably the title without relying on position alone
• Within body content, use weight and color to create sub-hierarchy, not more sizes
• Metadata should be noticeably smaller — it's supporting information, not primary content

System Fonts

System fonts (SF Pro, Roboto, Segoe UI) are a legitimate, strategic choice:

• Familiarity — Users read them unconsciously, getting to content faster
• Performance — No extra font loading, especially critical on web
• Quality — Apple and Google invest heavily in these typefaces
• Reduced decisions — Focus energy on other design choices

Using system fonts doesn't make you less of a designer. Master the fundamentals (size, weight, spacing, hierarchy) before relying on custom fonts to carry the design.

When to Go Custom

Venture outside system fonts when:

• The brand already has a specific typeface
• You need to convey a specific personality system fonts can't deliver
• You've mastered the fundamentals and want to differentiate
• The project is web-based (more opportunity for custom display fonts)

When going custom, test the font on numbers, not just words. Odd number forms undermine otherwise good choices.

Practical Rules

• Body text on mobile: 15-17pt is the sweet spot
• Never go below 11-12pt for any interface text
• Line height: 1.4-1.6× for body text, tighter for headings
• Letter-spacing: tighten for large display text, default or slightly loose for body
• Use tabular-nums / monospace for numbers that change (prices, stats, timestamps)
• Truncate with ellipsis when space is constrained, but ensure the truncated version still communicates

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: lenxism
• Source: lenxism/ives
• License: MIT

Install and usage instructions live in the source repository linked above.