Name the rungs before you set a line. Display, title, body, meta, and chrome each get a size, a weight, and a tracking. Display can be large and tight. Title is smaller and still a heading. Body is the reading size, and a full line of it stays near forty-five to seventy-five characters. Meta is quieter than body. Chrome is small and tracked open, because it labels a control. Making the headline bigger is not a ladder. It is one face at three sizes, and every line still shouts.
The left plate is that shortcut: the same face at 48, 32, and 18, same weight, same tracking, no job named. The right plate names the five rungs. Body is the size you would read. Chrome is as small as meta, and open tracking is what separates them.
How to check it
- Point at each text style and name its rung. If two styles differ only by a few pixels of size, they are one rung, and one of them should be removed.
- Count a full line of body. It should land near forty-five to seventy-five characters. A line that grows with the window has no measure.
- Read the chrome against the title. The tracking should be open enough that the label does not look like a tiny heading. If the tracking matches the title, the label is pretending.
.display {
font-family: Georgia, "Iowan Old Style", serif;
font-size: 2rem;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.15;
}
.title {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
}
.body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
max-width: 65ch;
}
.meta {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.4;
}
.chrome {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
}