Typography guide
How to choose typography
A practical typography guide for choosing fonts that create rhythm, hierarchy and a clear visual voice.
Quick answer
To choose typography for design, start with readability, then build personality. Pick one clear body font, one expressive heading font and a simple hierarchy for sizes, weights and spacing. Good typography should create rhythm, guide attention and make the content easier to understand.
Typography starts with the message
Before choosing fonts, ask what the design needs to say. A portfolio, restaurant website, design tool and legal document should not all speak with the same typographic voice. Typography is not font shopping. It is tone, structure and rhythm.
Start with the content. Is it short and bold, long and editorial, technical, poetic, playful or direct? The answer tells you whether the type should be quiet, warm, sharp, elegant or energetic.
Step 1: choose a readable body font
The body font does the daily labour. It carries paragraphs, captions, descriptions and instructions. Choose something readable before choosing something spectacular.
- Use clear letterforms.
- Check readability at small sizes.
- Avoid body fonts that are too narrow, too decorative or too fragile.
- Test the font on mobile, not only on your large screen kingdom.
Step 2: choose a heading style
Headings create voice and hierarchy. You can use the same typeface in a heavier weight, or pair your body font with a contrasting display font.
Same family
Clean, consistent and easy to manage. Good for tools, education, portfolios and minimal brands.
Contrasting pair
More expressive. Pair a neutral sans with a serif, slab, condensed or bold display face.
Display only
Use decorative type only for large headings or small labels. Do not force it to carry paragraphs.
Variable fonts
Flexible and modern. Use weight, width and optical size to create hierarchy within one type system.
Step 3: build hierarchy
Hierarchy tells the reader where to begin and what matters. It is created by size, weight, spacing, contrast and position.
- H1: the loudest typographic moment. Give it room.
- H2: section titles that break the page into clear parts.
- Body: readable, steady and not too small.
- Labels: short uppercase or small bold text can help organise sections.
- Buttons: clear, confident and easy to scan.
Font pairing rules that actually help
Font pairing works best when the fonts are different enough to create contrast, but similar enough to belong in the same room.
Pair mood, not just shape
A warm serif and a friendly sans can work because they share tone, even if their shapes differ.
Use contrast with restraint
Contrast one or two things: weight, width, style or texture. Do not contrast everything at once.
Limit your system
Two typefaces are usually enough. Three can work. Six is a small font circus.
Check the x-height
Fonts with very different x-heights can feel awkward together in body and interface text.
Typography checklist
- Can people read the body text easily?
- Is the main heading clearly the most important text?
- Do links and buttons stand out?
- Are line lengths comfortable?
- Is there enough space between sections?
- Does the type mood fit the project?
- Does the system still work on mobile?
Use the tool
Build your type rhythm
Use Oh Juicy typography tools to match fonts, create type scales and choose typographic systems with more confidence.
Frequently asked questions
How do I choose typography for a website?
Start with a readable body font, choose a heading style that fits the brand voice and create a clear hierarchy for headings, labels, body text and buttons.
How many fonts should I use?
Most designs work well with one or two typefaces. Use different weights and sizes to create variety before adding more fonts.
What is type hierarchy?
Type hierarchy is the system of sizes, weights and spacing that tells the reader what to read first, second and third.
