6.4 #Helpers.Measure Measure
The Measure Helper constrains an element’s inline-size (width, in horizontal writing modes) to a reasonable line length.
The default style sets the max-inline-size of the block to 66 characters∗, but there are narrow and wide variants for differing cases.
The narrow variant is useful in mobile design when the user might want to zoom in on text. Reading text with too large a measure on mobile devices requires a lot of horizontal scrolling back and forth. Inversely, the wide variant is useful for large type when you might not want the text to wrap as often.
Because the block is capped at a character length, this style is responsive to font-size. The bigger the font, the larger the line length can be before the text wraps. Try adjusting your browser’s font size to see the effects.
- author
- Chris Harvey
- updated
If the measure is too short, the reader’s eyes have to dart back and forth more often, causing fatigue. If the measure is too long, the reader is more likely to lose track of the previous line.
If the measure is too short, the reader’s eyes have to dart back and forth more often, causing fatigue. If the measure is too long, the reader is more likely to lose track of the previous line.
If the measure is too short, the reader’s eyes have to dart back and forth more often, causing fatigue. If the measure is too long, the reader is more likely to lose track of the previous line.
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Measure.css"/-->
<p class="h-Measure [modifier class]">If the measure is too short, the reader’s eyes
have to dart back and forth more often, causing fatigue. If the measure is too long,
the reader is more likely to lose track of the previous line.</p>_h-Measure.less, line 7