I spend an unhealthy period of time on the typography in my designs, and when you’ve learn any conventional typography books, you may keep in mind “the measure.” If not, it’s merely the size of a line of textual content. However measure means greater than that, and when you perceive what it represents, it may well change how you consider format completely.
However why’s it referred to as the measure?
Earlier than desktop publishing, typesetters labored with bodily steel kind. They set strains of textual content inside a composing stick, and the width of the stick was referred to as the measure. It was actually the area you might match kind into, and all the things else on the web page — from column widths to margins and gutters — was designed round it.
measure makes studying textual content snug, whereas a foul one makes it harder.
And when the measure is right, the remainder of the format falls into place. So, moderately than permitting format to dictate the measure, doesn’t it make extra sense for the measure to tell format selections?
Turning the measure right into a customized property
In my CSS, I begin by defining a customized property:
:root {
--measure: 60ch;
}ch items are perfect for this as a result of they relate to the width of the zero (0) character in a selected font. Someplace between 60–70 characters per line is a cushty studying size, so 65 characters feels pure.
60ch is a strong place to begin, nevertheless it isn’t common. Totally different typefaces produce totally different real-world line lengths, even when the character rely stays the identical. Typefaces with a big x-height seem visually bigger, so 60ch can really feel longer than it truly is. Condensed faces make 60ch really feel too quick. Wider faces could make it really feel too lengthy. Even small monitoring adjustments stretch or compress the perceived measure.
The purpose is straightforward: deal with 60ch as a baseline, then alter by eye. As soon as the measure turns into a variable, you should use it throughout your format to maintain all the things related.
Holding textual content readable
I think most builders have used the max-width property. Though it took time to retrain my muscle reminiscence, I now use CSS logical properties, changing max-width with max-inline-size:
article {
max-inline-size: var(--measure);
margin-inline: auto;
}
That forestalls long-line syndrome, which afflicts too many web sites when seen on massive screens.
Designing multi-column textual content
Multi-column format is likely one of the most underrated CSS format instruments. As an alternative of specifying the variety of columns, defining the column width lets the browser resolve what number of columns match alongside the inline axis. The measure also can outline the widths of these columns:
article {
column-width: var(--measure);
}
When the columns’ father or mother container turns into large sufficient, a browser flows textual content into as many readable columns as will match. When there’s not sufficient area for a number of columns, the format falls again to a single column, all with out breakpoints and media queries.
Letting the measure affect a grid
The measure additionally helps me design grids which really feel related to my content material. For instance, once I’m implementing a format with a column containing long-form content material, plus one other versatile column, I can lock the textual content content material to the measure:
.format {
show: grid;
grid-template-columns: minmax(0, var(--measure)) 1fr;
}
That first column ensures that studying textual content stays snug, whereas the second adjusts to no matter horizontal area stays.
Measure-driven container queries
For years, builders realized to consider display screen sizes by way of particular breakpoints (320px, 48em, 64em, and so forth) and media queries. It’s a tough behavior to interrupt and one which, to be trustworthy, I haven’t all the time managed myself.
These numbers don’t come from content material; units outline them. They actually must be referred to as “guesspoints” as a result of we largely by no means know which numbers work for most individuals. As an alternative of dictating {that a} format switches at, say, 48em and 64em, I can let my content material resolve when a format ought to change through the use of the measure.
Measure makes a greater breakpoint. A measure-driven breakpoint, mixed with container queries, responds to textual content content material. So, when a column turns into narrower than a readable line size, a format can collapse. However when it turns into large sufficient to assist extra construction, the format can broaden.
A CSS container question checks the width of the element’s container as a substitute of a display screen or the viewport. As an example, when a element is narrower than 65 characters, I can apply particular types:
/* When the container isn't any wider than the --measure */
@container (max-width: var(--measure)) {
/* Kinds */
}My design may embrace a number of columns, maybe a wider column for the principle content material and a narrower one for supporting info:
[data-layout="yogi"] {
show: grid;
grid-template-columns: 3fr 1fr;
}If the container can’t assist a textual content column equal to the measure, this question replaces the 2 columns with a single column format:
@container (max-width: var(--measure)) {
[data-layout="yogi"] {
grid-template-columns: 1fr;
}
}This feels extra pure as a result of the composition is related to the content material moderately than the machine’s width, creating a cushty studying surroundings.
Making a measure system
Relying on the number of content material I must current, on sure initiatives, I outline a number of variations of the measure:
:root {
--measure: 60ch;
--measure-s: 55ch;
--measure-l: 80ch;
}This offers me a wide range of line lengths to be used in numerous conditions:
- Small for captions and different shorter textual content blocks
- Common for physique copy
- Giant for introductions, headings, and hero sections
When kind, spacing, and format all share the identical underlying rhythm, the outcome can really feel extra coherent and extra intentional.
Contemplating the measure can change the way you design
Once you design with the measure in thoughts, format stops being guesswork and turns into a dialog between content material and composition. Studying turns into extra snug, and the web page feels extra deliberate. It’s a small shift, however when you begin anchoring your design selections to the measure, it adjustments the way you strategy format completely.
