All in One 586: Getting Creative With “The Measure”

I spend an unhealthy amount of time on the typography in my designs, and if you’ve read any traditional typography books, you might remember “the measure.” If not, it’s simply the length of a line of text. But measure means more than that, and once you understand what it represents, it can change how you think about layout entirely.

But why’s it called the measure?

Closeup photo of a hand holding a metal type template for lettering. — Photo: Wilhei, via Wikipedia (CC BY 3.0)

Before desktop publishing, typesetters worked with physical metal type. They set lines of text within a composing stick, and the width of the stick was called the measure. It was literally the space you could fit type into, and everything else on the page — from column widths to margins and gutters — was designed around it.

A good measure makes reading text comfortable, while a bad one makes it more difficult.

A heading and three paragraphs of text in white against a black background. — An uncomfortable measure makes reading more difficult. See this example in my lab.

And when the measure is correct, the rest of the layout falls into place. So, rather than allowing layout to dictate the measure, doesn’t it make more sense for the measure to inform layout decisions?

Turning the measure into a custom property

In my CSS, I start by defining a custom property:

:root {
  --measure: 60ch;
}

ch units are ideal for this because they relate to the width of the zero (0) character in a chosen font. Somewhere between 60–70 characters per line is a comfortable reading length, so 65 characters feels natural.

60ch is a solid starting point, but it isn’t universal. Different typefaces produce different real-world line lengths, even when the character count stays the same. Typefaces with a large x-height appear visually larger, so 60ch can feel longer than it really is. Condensed faces make 60ch feel too short. Wider faces can make it feel too long. Even small tracking changes stretch or compress the perceived measure.

The point is simple: treat 60ch as a baseline, then adjust by eye. Once the measure becomes a variable, you can use it across your layout to keep everything connected.

Keeping text readable

I suspect most developers have used the max-width property. Although it took time to retrain my muscle memory, I now use CSS logical properties, replacing max-width with max-inline-size:

article {
  max-inline-size: var(--measure);
  margin-inline: auto;
}

A heading and three paragraphs of text in a white contained in a narrow column against a black background. — Well considered measure makes reading more comfortable. See this example in my lab.

That prevents long-line syndrome, which afflicts too many websites when viewed on large screens.

Designing multi-column text

Multi-column layout is one of the most underrated CSS layout tools. Instead of specifying the number of columns, defining the column width lets the browser decide how many columns fit along the inline axis. The measure can also define the widths of those columns:

article {
  column-width: var(--measure);
}

A heading and three paragraphs of text in white against a background and split into two equal-sized columns. — The measure can define multi columns widths. See this example in my lab.

When the columns’ parent container becomes wide enough, a browser flows text into as many readable columns as will fit. When there’s not enough space for multiple columns, the layout falls back to a single column, all without breakpoints and media queries.

Letting the measure influence a grid

The measure also helps me design grids which feel connected to my content. For example, when I’m implementing a layout with a column containing long-form content, plus another flexible column, I can lock the text content to the measure:

.layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) 1fr;
}

A heading and three paragraphs of text in white against a black background on the left next to an image of a woman in a cowgirl hat and denim shirt staring directly ahead. — The measure also creates grids which feel connected to content. See this example in my lab.

That first column ensures that reading text remains comfortable, while the second adjusts to whatever horizontal space remains.

Measure-driven container queries

For years, developers learned to think of screen sizes in terms of specific breakpoints (320px, 48em, 64em, and so on) and media queries. It’s a hard habit to break and one which, to be honest, I haven’t always managed myself.

Those numbers don’t come from content; devices define them. They really should be called “guesspoints” because we mostly never know which numbers work for most people. Instead of dictating that a layout switches at, say, 48em and 64em, I can let my content decide when a layout should change by using the measure.

A heading and three paragraphs of text in white against a black background on the right. An image of a woman in cowgirl hat and denim shirt is staring straight ahead on the left.

Measure makes a better breakpoint. A measure-driven breakpoint, combined with container queries, responds to text content. So, when a column becomes narrower than a readable line length, a layout can collapse. But when it becomes wide enough to support more structure, the layout can expand.

A CSS container query checks the width of the component’s container instead of a screen or the viewport. For instance, when a component is narrower than 65 characters, I can apply specific styles:

/* When the container is no wider than the --measure */
@container (max-width: var(--measure)) {
  /* Styles */
}

My design might include multiple columns, perhaps a wider column for the main content and a narrower one for supporting information:

[data-layout="yogi"] {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

If the container can’t support a text column equal to the measure, this query replaces the two columns with a single column layout:

@container (max-width: var(--measure)) {
  [data-layout="yogi"] {
    grid-template-columns: 1fr;
  }
}

This feels more natural because the composition is connected to the content rather than the device’s width, creating a comfortable reading environment.

Making a measure system

Depending on the variety of content I need to present, on certain projects, I define several variations of the measure:

:root {
  --measure: 60ch;
  --measure-s: 55ch;
  --measure-l: 80ch;
}

This gives me a variety of line lengths for use in different situations:

Small for captions and other shorter text blocks
Regular for body copy
Large for introductions, headings, and hero sections

When type, spacing, and layout all share the same underlying rhythm, the result can feel more coherent and more intentional.

Considering the measure can change how you design

When you design with the measure in mind, layout stops being guesswork and becomes a conversation between content and composition. Reading becomes more comfortable, and the page feels more deliberate. It’s a small shift, but once you start anchoring your design decisions to the measure, it changes how you approach layout entirely.