I spend an unhealthy period of time on the typography in my designs, and in the event 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 could change how you consider format completely.
However why’s it known as the measure?
Earlier than desktop publishing, typesetters labored with bodily steel kind. They set traces of textual content inside a composing stick, and the width of the stick was known as the measure. It was actually the area you would match kind into, and all the pieces else on the web page — from column widths to margins and gutters — was designed round it.
measure makes studying textual content comfy, whereas a foul one makes it tougher.
And when the measure is right, the remainder of the format falls into place. So, slightly 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 snug studying size, so 65 characters feels pure.
60ch is a stable place to begin, nevertheless it isn’t common. Completely different typefaces produce totally different real-world line lengths, even when the character depend 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 brief. Wider faces could make it really feel too lengthy. Even small monitoring modifications stretch or compress the perceived measure.
The purpose is easy: deal with 60ch as a baseline, then modify by eye. As soon as the measure turns into a variable, you need to use it throughout your format to maintain all the pieces related.
Preserving 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 stops long-line syndrome, which afflicts too many web sites when seen on giant screens.
Designing multi-column textual content
Multi-column format is without doubt 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 huge 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 comfy, whereas the second adjusts to no matter horizontal area stays.
Measure-driven container queries
For years, builders realized to consider display 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 sincere, I haven’t all the time managed myself.
These numbers don’t come from content material; gadgets outline them. They actually needs to be known as “guesspoints” as a result of we principally 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 by utilizing 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 huge sufficient to help extra construction, the format can develop.
A CSS container question checks the width of the part’s container as an alternative of a display or the viewport. For example, when a part 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)) {
/* Types */
}My design may embrace a number of columns, maybe a wider column for the primary content material and a narrower one for supporting info:
[data-layout="yogi"] {
show: grid;
grid-template-columns: 3fr 1fr;
}If the container can’t help 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 slightly than the system’s width, creating a snug studying atmosphere.
Making a measure system
Relying on the number of content material I have to 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 several 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
If 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 comfy, and the web page feels extra deliberate. It’s a small shift, however when you begin anchoring your design selections to the measure, it modifications the way you strategy format completely.
