Unit Rulebook

Type a unit, or a word from its description.

    rex

    How tall a lowercase x is in the font set on the root element.

    Use with a fallbackBaseline: newly available since January 2026

    First version with support, from MDN browser data
    BrowserSince
    Chrome111+
    Chrome Android111+
    Edge111+
    Firefox147+
    Firefox Android147+
    Safari17.2+
    Safari iOS17.2+

    Formula 1rex = the value of ex on the root element

    How it works

    1rex takes the x-height from the root element’s font instead of the font of the element it is written on. A card set in a serif and a toolbar set in a sans-serif get icons of the same height with 1.2rex, where ex would give two sizes. It does for the x-height what rch does for the width of a zero.

    Unlike rem, which depends only on the root’s size, rex depends on the root’s font family as well. Changing font-family on html changes every rex on the page, even when the size stays put.

    Reach for rex when a rhythm of small details should be uniform across the page and not follow whichever font a component chose. For marks that should follow the neighboring text, use ex.

    Try it

    Measure the font-relative units

    Pick a font and a size. The page measures 1em, 1ex, 1ch, 1cap and 1lh in that font, here, in your browser.

    UnitMeasuredShare of the font size
    1em
    1ex
    1ch
    1cap
    1lh
    The same as a table
    What each font-relative unit measures
    UnitMeasures
    1emThe font size of the element.
    1exHow tall the letter x is in this font.
    1chThe width of the digit zero in the font.
    1capThe height of a capital letter in the font.
    1lhThe line height of the element.

    What changes it

    Moves with
    • the reader's text size
    • page zoom
    • the font in use
    Stays put under
    • the window size
    • the query container
    • phone toolbars
    • the writing mode

    Reach for it when

    Small marks that must share one height across components set in different fonts.

    Watch out

    Where the unit is unknown the browser throws the declaration away. Write a rem value first and the rex line after it, so older browsers keep the first one.

    Example Browsers without rex keep the first line.
    .icon {
  block-size: 1rem;
  block-size: 2rex;
}
    • exHow tall a lowercase x is in the current font.
    • rchThe zero-digit width, measured in the font of the root element.
    • rcapCapital-letter height as the root element's font draws it.

    MDNSpecification