Sorry, this thing won't scale well below 1000px viewport width.
If you want to continue, just click anywhere.

Compositor is a typographic system for the web. Using vertical metrics, compositor trims the line-gap above and below text elements, realigns the glyphs to the baseline and implements space and size constraints that adhere to a baseline-grid rhythm.

  • Font Size: Any font-size is allowed. The text's bounding box is rounded to the nearest grid row, above the cap-height.
  • Leading: In compositor, leading specifies the space between lines of text, unlike baseline-to-baseline in traditional typography.
  • Measure: The line-width in `ch` units.
bounding boxline-heightCompositorascendercap-heightx-heightdescenderbaseline

The compositor algorithm is also available as an experimental implementation in tailwind-compositor. ReactJS version coming soon in raster-ui.