Type is the voice of your words.
“Web design is 95% typography,” wrote designer Oliver Reichenstein back in 2006. The same sentence in two fonts can sound like a lawyer or a clown. Typography is how you choose the voice.
The words stay. The voice changes.
- SerifLittle feet and centuries of books. It sounds trustworthy, literary, established.
- ScriptHandwritten curves. Personal, romantic, elegant. Lovely for one line, painful for a paragraph.
- DisplayTall, tight and LOUD. Built for headlines that must be seen from across the street.
- MonospaceEvery letter the same width, like code. Technical, precise, a bit nerdy.
- Sans-serifClean and modern, the default voice of apps. Fonts that "fit" the product make brands likelier to be chosen (Doyle & Bottomley, 2004).
Typeface, font, what?
A typeface is the design (Helvetica). A font is one specific file of it (Helvetica Bold Italic). A family is all the weights and styles together. Most people say "font" for everything, and that's fine.
A typeface is like a singer. Fonts are that singer whispering, shouting or singing in a deep voice. Same person, different moods.
The anatomy of a letter
The x-height matters most for beginners. Fonts with a tall x-height look bigger and read better at small sizes. That's why UI fonts usually have one.
Five personalities to know
There are hundreds of thousands of fonts, but almost all of them fall into a handful of groups. Each group carries a mood.
Serif
Little feet on the strokes. Descends from Roman stone carving and old printing. Feels traditional, trustworthy, literary, premium. Used by the New York Times, Vogue and law firms.
Sans-serif
No feet. Became popular in the 20th century. Feels modern, clean, neutral, friendly. The default for apps and tech: Google, Airbnb, Spotify.
Slab serif
Chunky, block-like serifs. Feels sturdy, confident, a bit retro. Common on posters and in Western and industrial vibes.
Script
Looks handwritten. Feels personal, elegant or playful. Wedding invites, bakeries, signatures. Never use it for body text.
Monospace
Every letter is the same width, like a typewriter. Feels technical, honest, nerdy. Code, tech brands, editorial labels like the ones on this site.
Display
Made to be big: headlines and logos. Can be wild. Feels like whatever it was designed to feel. Use it once per design, at large sizes only.
Fonts change what people believe
Doyle & Bottomley found people were more likely to choose a brand when the font "fit" the product (a sturdy font for a tough product, a delicate one for a soft one) than when it didn't, even with identical names.
Doyle, J. R. & Bottomley, P. A. (2004). Font appropriateness and brand choice. Journal of Business Research, 57(8).Brumberger showed readers consistently assign personalities to typefaces ("elegant", "friendly", "direct"). When the font's persona clashes with the text's tone, the message feels off.
Brumberger, E. R. (2003). The rhetoric of typography: The persona of typeface and text. Technical Communication, 50(2).When exercise instructions were printed in a hard-to-read font, people estimated the routine would take 15.1 minutes instead of 8.2, and were less willing to try it. (A small study of 20 students, but it fits a large body of "processing fluency" research.) Readability changes how difficult things feel.
Song, H. & Schwarz, N. (2008). If it's hard to read, it's hard to do. Psychological Science, 19(10).If your doctor wrote your prescription in bubbly party letters, you'd worry. If a birthday invite looked like a tax form, nobody would come. The letters have to match the moment.
Line length and spacing, felt
Robert Bringhurst's classic The Elements of Typographic Style recommends roughly 45–75 characters per line for body text, with about 66 as ideal. Move the sliders and feel the difference.
Typography exists to honour content. When the line is too long, the eye loses its place on the way back to the start of the next line. When it's too short, the reader is constantly interrupted and the rhythm turns choppy. Good leading, the space between lines, gives each line room to breathe without letting the paragraph fall apart. Change the sliders and notice how quickly reading goes from effortless to tiring. Nobody will ever compliment you on good line length, but everybody feels bad line length.
Leading
Space between lines. Body text: 1.4–1.6× the font size. Big headlines: tighter, 1.0–1.15×.
Tracking
Even spacing across a whole word or line. Add a little to ALL CAPS and tiny labels. Remove a little from big headlines.
Kerning
Space between one specific pair of letters, like "AV" or "To". Matters in logos and huge headlines.
↑ hover to over-track it. Too much spacing breaks words apart.
Sizes that belong together
Don't pick sizes randomly (14, 17, 23, 31...). Pick a base size and multiply by a fixed ratio. Musical ratios like the "major third" (1.25) or "perfect fourth" (1.333) make sizes feel related, like notes in a chord.
Rule of thumb: apps and dense interfaces suit small ratios (1.125–1.25). Posters and editorial landing pages suit big ones (1.333–1.618).
How to pair fonts without crying
Start with one family
One good family with several weights can do everything. Pairing is optional, not required.
Two maximum
One for headlines (personality), one for body (readability). A third is almost always a mistake.
Contrast, don't conflict
Pair things that are clearly different (serif + sans), never almost the same (two similar sans-serifs look like an accident).
Match the bones
Look for similar x-height and proportions so they sit together nicely on a line.
Steal from the pros
Fonts In Use shows real pairings by real designers. Start there instead of guessing.
A soft serif headline over a clean sans body. Editorial, warm and trustworthy.
Serif + Sans · editorialOne sans family, bold vs regular. Clean product and SaaS energy.
One family · productA mono label with an italic serif body. Techy but human.
Mono + Serif · editorial-techGetting fonts (legally)
| Where | Cost | Good for |
|---|---|---|
| Google Fonts | Free, open licence | Learning and most projects. Try: Fraunces, DM Serif, Space Grotesk, Instrument Sans, Bricolage Grotesque. |
| Fontshare (Indian Type Foundry) | Free for commercial use | High quality modern sans and serifs: Satoshi, General Sans, Clash Display, Erode. |
| Adobe Fonts | Included with Creative Cloud | Huge professional library. |
| Independent foundries | Paid licences | Klim, Grilli Type, Commercial Type, Pangram Pangram, Displaay. The fonts behind big brands. |
A font is software. "Free for personal use" means you can't use it for a client or anything you sell. Always check the licence before shipping.
Homework
Type walk
Photograph 20 signs, menus and labels. Sort them into serif, sans, slab, script, mono and display.
One sentence, five voices
Set "We're open late tonight" in five fonts. Write down the kind of business each one sounds like.
Play the games
KernType and Shape Type (method.ac) train your eye for spacing and letterforms in minutes.
Copy a magazine page
Recreate one magazine spread's typography exactly in Figma: sizes, leading, spacing.