Typography in UI: The Rules I Follow
Typography makes or breaks an interface. Here are the practical rules I apply to every project for clean, readable, beautiful type.
Typography is responsible for about 90% of web design. Yet it’s one of the most overlooked aspects of UI. Here are the rules I follow on every project.
Rule 1: Two Fonts Maximum
One for headings, one for body text. That’s it. Using more than two fonts creates visual noise.
My current go-to combinations:
- Geist + Geist (yes, one font family can do both)
- Inter + Inter for clean SaaS interfaces
- Outfit + Inter for more personality
Rule 2: Establish a Type Scale
Don’t pick random font sizes. Use a modular scale. I typically use these sizes:
12px— Captions, labels14px— Body text, secondary content16px— Primary body text20px— Section subheadings24px— Card titles32px— Section headings48px— Hero headings
Rule 3: Line Height Matters More Than Font Size
A good line height makes text effortless to read. My general guidelines:
- Headings: 1.1–1.2 × font size
- Body text: 1.5–1.7 × font size
- Captions: 1.4 × font size
Rule 4: Limit Line Length
Ideal line length for readability is 50–75 characters per line. Use max-width on text containers to enforce this.
Rule 5: Use Weight for Hierarchy, Not Size
Before making a heading bigger, try making it bolder. Before making body text smaller, try making it lighter. Weight changes are subtler and more elegant.
Good typography doesn’t shout. It guides.