Skip to content
Site volume
Colourway

Components

FittedLine

Fits one display line to its slot; the first paint is the CSS clamp and the reserved height never changes.

Import from@maxgrits/overprint-react/fitted-line
On this page

Example#

Look of this example

Built to be tested

Live render of examples/fitted-line/basic.tsx

Usage#

Use a fitted line for one short display line that should fill its slot exactly: a poster word, a stat in a card, a splash title. The first paint uses the CSS clamp and a server estimate, so nothing jumps; the client fitter then sets the exact size, and the reserved height never changes.

  • One line, a few words. Display voices carry three words at most (D-D3); headings that wrap are PageHero or SectionHead.
  • Below its floor. If the words cannot fit at the role's floor, the fitter goes smaller rather than wrapping or spilling, and warns in development.
  • Readers' text spacing (WCAG 1.4.12) makes it refit, so a reader's settings never push it out of its box.

Anatomy#

Built to be tested

The parts of examples/fitted-line/basic.tsx, numbered:
  1. SlotReserves its height from the first paint..mk-fitted-line
  2. WordsSized to fill the slot's width..mk-fitted-line-ink

Volume#

The fitter is reading layer; the display role it sizes grows weight and scale from Press, and the line refits to match.

  • Quiet

    Built to be tested

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    Built to be tested

    The site default. Art on its own plates, one display moment per view.

  • Press

    Built to be tested

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Built to be tested

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Three words or fewer, the kind of line that works on a poster: "Built to be tested".
  • Never a sentence with a full stop in the middle.

Do and don't#

Do

Built to be tested

Three words, sized to the slot.

Don't

Every website we build is tested on real phones before launch

A sentence squeezed to a whisper.

A fitted line shrinks long text until it is too small to be display type. Long copy belongs in a heading that wraps.

Accessibility#

  • The words are ordinary text in the element you render (<h1 /> for a page title).
  • Fitting only shrinks the words inside the height the first paint reserved, so there is no layout shift.
  • A non-standard voice holds at most three words (D-D3); a dev warning says so.

Props#

PropTypeDefaultDescription
children requiredstringnoneThe words (a non-standard voice holds at most 3, D-D3).
typeRoleFittedRoledisplayThe type role (default `display`). Named `typeRole`, never `role`, so it cannot read as an ARIA role (D-N79).
voice"condensed" | "standard" | "wide"none
maxLines1 | 2 | 31Lines the slot allows (default 1).
estimatenumbernoneThe line's width in em at its role and voice (`fitEm(text, typeRole, voice)` from `@maxgrits/overprint-react/art`, on the server): one-line slots then print the estimated fit on first paint, before hydration. P1.
renderRenderProp<span>Default `<span>`; a page title passes `<h1 />`.
classNamestringnone
styleCSSPropertiesnone

Generated from FittedLineProps in packages/overprint-react/src/reading/fitted-line/fitted-line.tsx.

Tokens#

System tokens (3)

Its own properties (2)

  • --mk-fit-em
  • --mk-fit-size

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.9.024 October 2026

  • Minorfonts, reactType: the server advance table (anybodyWidthEm, fitEm, estimateFit, FIT_CUTS in ./art), which sizes SFX bursts within 1.5 % of the browser and gives FittedLine an estimate for its first paint. Read the whole entry

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry
  • PatchreactFittedLine refits when its words' box changes (a reader's text spacing), goes below its role's floor before it wraps, and never spills. Read the whole entry