The problem with "just pick a Google Font"
Most blog posts reach for Inter or Roboto and call it done. That works — but it also looks like everything else on the internet.
Typography is the first thing readers feel, even before they consciously notice it. A great stack creates trust. A bad one creates friction.
My current system
I use three fonts in a strict hierarchy:
- Display — a high-contrast serif for titles. Currently Playfair Display.
- Body — a low-contrast humanist sans for reading. Currently Inter.
- Mono — a legible monospaced face for code. Currently JetBrains Mono.
Why three layers?
The contrast between a bold serif headline and a clean sans body creates visual rhythm. Your eye knows immediately what is a heading and what is text — without relying on size alone.
:root {
--font-display: "Playfair Display", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", monospace;
}
Line length matters more than you think
Optimal reading is between 60–75 characters per line. Anything wider and your eyes have to travel too far. Anything narrower and you are constantly wrapping.
Set max-width: 68ch on your prose container. Done.
The spacing formula
- Line height for body:
1.75–1.8 - Line height for headings:
1.15–1.25 - Paragraph spacing:
1.25rem
These are not magic numbers — they come from centuries of book typography. Trust them.
Conclusion
Typography is not decoration. It is the infrastructure of communication. Get it right once and every word you write benefits from it.