What is line length? Line length refers to the length of a container holding multi-line text. The “multi-line” aspect is crucial because if the start of a line is too distant from the end of the previous line, readability suffers. This can lead to users mistakenly rereading lines and losing their place.

Fortunately, the Web Content Accessibility Guidelines (WCAG) provide a clear rule: no more than 80 characters per line (40 for Chinese, Japanese, or Korean). This can be easily implemented using character (ch) units:

“`css
width: 80ch;
“`

The width of 1ch corresponds to the width of the number 0 in the chosen font, so the exact width depends on the font.

Setting the optimal line length

While 80 characters per line is the maximum, aiming for that number isn’t necessary. A study by the Baymard Institute found that 50-75 characters per line is optimal, considering that shorter lines mean more lines and more chances for reading mistakes.

Responsive design must also be considered, so setting a minimum width like min-width: 50ch isn’t advisable for small screens. Instead, use the clamp() and min() functions:

– clamp(): Sets a fluid value relative to a container with minimum and maximum constraints.
– min(): Chooses the smallest value from a list.

Using min(), one argument is 93.75vw. Assuming the container spans the viewport, this equals 300px at 320px width (allowing for 20px spacing) and 1350px at 1440px width. If 50ch is smaller, min() resolves to that value.

“`css
min(93.75vw, 50ch);
“`

Next, clamp() takes minimum, preferred, and maximum values to set line length. For the minimum, use the min() function. For the maximum, use 75ch. The preferred value is up to you.

“`css
width: clamp(min(93.75vw, 50ch), 70vw, 75ch);
“`

You can also use min(), max(), and calc() in these arguments for more nuance. If the container feels too narrow or wide, adjust the font-size.

Fit text to container (with JavaScript)

To fit text to a container, often seen in headings, Chris wrote about it in 2018, using JavaScript or jQuery. However, SVG can be used with known viewBox values, requiring only 3-5 lines of JavaScript.

“`css
h1.container {
width: 100%;
font: 900 1em system-ui;
color: hsl(43 74% 3%);
text {
fill: currentColor;
}
}
“`

“`javascript
const svg = document.querySelectorAll(“svg”);
svg.forEach(element => {
const bbox = element.querySelector(“text”).getBBox();
element.setAttribute(“viewBox”, [bbox.x, bbox.y, bbox.width, bbox.height].join(” “));
});
“`

Fit text to container (pure CSS)

For a pure-CSS method, Roman Komarov’s fit-to-width hack is complex but impressive. It involves duplicating text for calculations, using container queries, and scaling visible text’s font-size.

fit-to-width text
fit-to-width text


fit-to-width text

“`css
.text-fit {
display: flex;
container-type: inline-size;
–captured-length: initial;
–support-sentinel: var(–captured-length, 9999px);
& > [aria-hidden] {
visibility: hidden;
}
& > :not([aria-hidden]) {
flex-grow: 1;
container-type: inline-size;
–captured-length: 100cqi;
–available-space: var(–captured-length);
& > * {
–support-sentinel: inherit;
–captured-length: 100cqi;
–ratio: tan(atan2(var(–available-space), var(–available-space) – var(–captured-length)));
–font-size: clamp(1em, 1em * var(–ratio), var(–max-font-size, infinity * 1px) – var(–support-sentinel));
inline-size: var(–available-space);
&:not(.text-fit) {
display: block;
font-size