// learning_tools · cargo/07
The Type Field Guide
Six things worth knowing about type on the web. Each one explained plainly, each one with something you can play with.
Typography is a deep subject and most of it you can happily ignore. This is the part you cannot: a handful of ideas that decide whether text on a page is comfortable to read or quietly annoying.
This is not a course. It is the 20 percent that fixes 80 percent of the mistakes. Read a little, drag the demos, and move on.
// type scale
The type scale
Most people pick font sizes by feel. 14 here, 22 there, 32 for the big heading, whatever looks right in the moment. It works until the project grows and the sizes start to multiply, and then nothing quite lines up.
A type scale fixes that. Pick a base size, usually 16 pixels, and a ratio. Every size is the one below it multiplied by the ratio. The sizes relate to each other because they are all built from the same number, like notes spaced evenly apart.
A tight ratio like 1.2 keeps everything close, which suits dashboards and apps with a lot of text. A wide ratio like 1.5 spreads the sizes far apart, which suits a marketing page that wants one enormous headline. Neither is correct. They are different tools.
a small workshop
Build the thing you wish existed.
Small tools, made carefully, and shipped on a Saturday.
This paragraph stays at 16 pixels the whole time. Only the headline and subheading move, because a scale changes how sizes relate, not the body you actually read. Switch between tight and wide and watch the page change personality.
// line height
Line height
Line height is the space from one line of text to the next. Browsers default to roughly 1.2, which is often too tight for body text. The lines sit close, the eye trips going from the end of one to the start of the next, and reading gets quietly tiring.
For body text, somewhere around 1.5 is a safe starting point. Bigger text needs proportionally less, so headings usually want something tighter, often in the 1.1 to 1.3 range. A heading set at body line height can look like it is coming apart.
Here is the trick worth keeping. Squint at a paragraph until the words go blurry. You want an even gray. If it looks striped and dark, the line height is probably too tight. If it looks washed out and gappy, it is too loose.
Good typography is mostly invisible. You notice it only when it fails: when a block of text feels heavier than it should, when your eye loses its place jumping back for the next line, when a paragraph somehow tires you out before you have finished it. None of that is the words themselves. It is the space around them, set badly. Drag the control and watch the same three sentences become easy or exhausting to read.
Squint at the paragraph until the words blur. You want an even gray. Dark stripes mean it is too tight; pale gaps mean it is too loose.
// line length
Line length
Line length is how wide your text runs, and the way to measure it is by counting characters, not pixels. The comfortable range for reading is roughly 45 to 75 characters per line, spaces included.
Go much wider and a problem called doubling shows up. The line is so long that when your eye jumps back to the left it cannot find the next line cleanly, so it lands on the one it just read. You have felt this on a site that runs its text the full width of a wide monitor. Go much narrower and the text breaks into stubs and the rhythm of reading keeps stalling.
The fix is one line of CSS. Put a max width on your text in ch units, which are sized to the width of a character. max-width: 65ch and you are done.
Reading is a physical act. Your eyes do not glide smoothly along a line; they jump in small hops and then snap back to the start of the next line, over and over, hundreds of times a page. When the line is a comfortable width that return trip is short and your eye finds the next line without thinking. When the line runs too wide the trip back is long and uncertain, your eye lands on the wrong line, rereads it, and quietly tires you out. When the line is too narrow it snaps back so often that the words arrive in stubs and the rhythm never settles. Drag the column wider and narrower, watch the count, and notice the exact moment reading stops feeling effortless.
Wide columns and tight line height are the two that tire readers out, and they compound. Fix is one line: max-width on your text in ch units, around 65ch.
// hierarchy
Hierarchy
Hierarchy is what lets someone scan a page instead of reading every word to find the part they want. It is the difference between a wall of text and a page with an obvious shape.
It is built from three things, and the trick is that you rarely need big moves in all of them. A heading does not have to be huge and bold and spaced out. Often it just needs to be a bit bigger and a bit bolder, and the contrast does the work. Size sets the loudest signal. Weight adds emphasis without taking space. Spacing groups things, so a heading sits closer to the text it introduces than to the section above it.
The most common mistake is too many levels. If everything is emphasized, nothing is. Most pages need about three text sizes and two weights.
How people read a page
Mostly they do not. They scan.
A reader's eye hunts for the part it wants and skips the rest. Hierarchy is the difference in size and weight that tells the eye what is a heading and what is just the body. Flatten those differences and the page is a wall. Push them too far and everything shouts at once. Hit the squint button: a good hierarchy still has a shape, a flat one is a gray slab.
Squint, or hit the blur. A clear hierarchy keeps its shape; a flat one goes featureless. Most pages need about three sizes and two weights, not more.
// letter spacing
Letter spacing
Letter spacing is the gap between individual characters. The most useful thing to know about it is that body text almost never needs it touched. The font already has its spacing set by someone who knew what they were doing.
There are two honest exceptions. Big headings often look better with slightly negative letter spacing, pulled a touch tighter, because at large sizes the default gaps start to look loose. And small uppercase text, the kind used for labels, usually wants the opposite, a little positive spacing, because capital letters jammed together at a small size are hard to read.
That is the whole of it. Tighten large text a little, open up small caps a little, leave everything else alone.
large heading · wants tightening
Tighten this headline
small caps label · wants opening up
Filed under typography
// web fonts
Web fonts
Every other part of this guide is about how type looks once it is on the page. This last one is about the moment it arrives.
A custom font is a file, and it loads a beat after the rest of the page. In that beat the browser has to show something. Watch the demo: on one side the text appears in a fallback font right away and swaps to the real font when it loads, readable the whole time. On the other side the browser waits, and the reader gets a blank space until the font shows up.
That difference is one CSS property, font-display. Set it to swapand you get the readable version. And before you reach for a custom font at all, look at the system font stack, the fonts already on the reader's device. They cost nothing to load, they never flash, and they look good enough that a lot of projects do not need anything else.
font-display: swap
readable immediately
This line is waiting for its font to arrive.
real font, loaded
font-display: block
blank until it loads
This line is waiting for its font to arrive.
real font, loaded
Same final result. The only difference is what the reader saw during the wait. Press reload to replay the load.
That is the essentials. Not all of typography, but enough to make text on a page work and to know why when it does not.
If you want to go deeper, Better Web Type is a genuinely good free course, and Practical Typography by Matthew Butterick is worth a read.