Text Properties & Font-Relative Units

Adjust Font Size

Balanced & Pretty Text Wrapping

text-wrap: balance creates visually balanced headings by distributing words across lines. This is widely supported in modern browsers, but is computationally intensive and cannot be used on properties more than 6 lines long. For this reason, it is best used in asides, headings, and other short text blocks.
text-wrap: pretty improves body copy by avoiding widows, orphans, and awkward breaks by balancing the last three lines. This in effect is the balance property but only applied to the end of a paragraph, making it much less demanding and useful for all types of text. However, support for this codex is still rolling out, and it should be use with mindfulness.

This is a long heading demonstrating balanced wrapping for multi-line titles. Because it is widely supported, this should appear roughly evenly across nearly all browsers.

This paragraph uses text-wrap: pretty to avoid unpleasant line breaks and create smoother reading flow across multiple lines of text. Since this sin't as widely supported, it is more likely to fallback to default rendering. Fortunately, if its not supported, it will naturally fallback to regular text wrapping, which usually looks fine, if a bit uneven.

Drop Caps with initial-letter

initial-letter applied to ::first-letter creates a drop cap by raising the first letter across multiple lines, mirroring print media. You can set how many lines tall the letter is, and optionally, how many lines it sinks below the first line.

The quick brown fox jumped over the lazy dog.

Notice how this text automatically shifts to accommodate the cool dropcap letter?

Safari ships -webkit-initial-letter, Chrome and Edge support the unprefixed property, and Firefox does not support it at all yet. Ensure the paragraph still reads normally when the drop cap does not render, and include both declarations to support maximum compatibility, such as in the following code block:

p::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

Clamping Text to a Line Count

Truncating a card description to a fixed number of lines uses a four-declaration pattern:

.card-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

All four declarations are required: -webkit-box and its vertical orientation establish the context, -webkit-line-clamp sets the line count, and overflow: hidden applies the ellipsis. The prefixed version remains the reliable choice across browsers.

The ch Unit & Line Length

ch is based on the width of the "0" glyph. In proportional fonts it approximates measure, while in monospace fonts it equals exact character count. When using it in conjunction with max-width, you can set approximately how many characters wide a line should be.

This paragraph is constrained to 65ch, a classic readable line length for body text. Resize the page or change the font size to see how the measure adapts. Generally, a line of text should always be set to between 45-70ch wide. This is because if the line width is too short, your eye has to jump a lot, while if the line is too long, your eye will lose track of which line to jump back to. 65ch is the classic value, balancing readability with preventing text from running unnecessarily long, though dense text or text with large fonts may want to be a bit smaller (commonly 60ch). Both 65ch and 60ch are a good value for most use cases, while smaller values might be used with particularly large text, long text bodies, or asides.

The ch unit has universal browser support and is especially reliable for code blocks and terminal-style layouts where monospace fonts make ch equal to exact character count.

The ex Unit

ex equals the x-height of the current font, the height of a lowercase x. While not used often, it can be useful when you need to size or align elements to the lowercase letterforms rather than the full font size, such as matching an inline icon to the visual height of surrounding text.

Vertical Rhythm with lh and rlh

lh equals the computed line height of the current element, and rlh equals the line height of the root element. Spacing blocks by these units keeps margins aligned with the baseline grid.

Use lh to space relative to an element's own text, and rlh to align everything to a shared root rhythm. Both units are supported in current Chrome, Edge, Firefox, and Safari.