Typography = Tone of Voice
Choosing the right font combination can elevate your design, enhance readability, and set the right tone.
The Golden Rule: Contrast with Cohesion
Pair a display or decorative font with a neutral body font. Think of it as a balance between personality and clarity.
Stick to Two Fonts
Using more than two fonts can look cluttered and distract users. Keep it simple for a clean and consistent UI.
Play with Weight & Size
Sometimes, different weights or styles of the same font family can give you all the contrast you need.
Use Tools to Help
Use Figma plugins like Font Collections to explore font combinations and test them visually.
Typography That Fits: Mobile vs Web
Good typography adapts to the screen. Font sizes, spacing, and line height should be tailored for the user’s context.
Base Size Recommendations:
Web: 16px is the standard body size
Mobile: 14–16px for body text
Headlines should scale accordingly
Consider Tap Targets & Readability
Larger font sizes improve legibility on mobile. Make sure touchable text is at least 16px for accessibility.
Use a Type Scale
If body size is 16px, using the golden ratio, you can create a scale by multiplying each size by 1.618
Line Height & Spacing:
Mobile: 1.4–1.6 line height
Web: 1.5–1.75 line height
Adjust based on font style and screen size.
Why Typography Hierarchy Matters
Visual hierarchy helps users scan and absorb content quickly. Good hierarchy = better usability.
Use Size to Create Focus
Headlines should stand out. Use size differences to signal what's most important.
Weight, Color, and Case
Use bold weights, color contrast, or UPPERCASE sparingly to guide attention, but don’t overdo it.
Use Size to Create Focus
Consistent margins, line height, and alignment help users navigate content with ease.
Use hierarchy to reduce cognitive load, improve readability, and make your UI feel intentional.
Back to Top