ex
How tall a lowercase x is in the current font.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 1+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 1+ |
| Firefox Android | 4+ |
| Safari | 1+ |
| Safari iOS | 1+ |
Formula 1ex = x-height of the element's font (0.5em if it cannot be determined, as the specification has it)
How it works
1ex is how tall a lowercase x stands above the baseline in the font the element uses, a quick stand-in for how large lowercase text looks. In IBM Plex Sans, the font of this site, it is 0.516em, a little over half, and a face with a smaller x-height gives a smaller ex at the same font-size.
That is the difference from em. An em follows the number written in font-size, while ex follows the shape of the letters: at 100px, three different families gave an em of 100px each and three different values of ex. A mark sized in ex stays in proportion to the lowercase text in each font. Use it for the one thing it measures: a mark that has to stop where the lowercase letters stop, such as an inline arrow drawn in CSS or the box behind a highlighted word.
The browser has to read the x-height from the font. Chromium takes it from the font’s OS/2 table, and from the x glyph when the table has no value. A font with neither is a different matter. The specification says to assume half an em. Chromium does not, and the number depends on the operating system: on Linux, Chromium 156 gave the ascent itself, 0.8em for a font with an ascent of 0.8em and 0.9em for one with 0.9em, while on macOS the same fonts gave 0.533em and 0.6em. A font that has an x glyph is not affected.
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.
| Unit | Measured | Share of the font size |
|---|---|---|
1em | ||
1ex | ||
1ch | ||
1cap | ||
1lh |
The same as a table
| Unit | Measures |
|---|---|
1em | The font size of the element. |
1ex | How tall the letter x is in this font. |
1ch | The width of the digit zero in the font. |
1cap | The height of a capital letter in the font. |
1lh | The 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
An inline mark that should stop where the lowercase letters stop.
Watch out
At one font-size the x-height differs from font to font, so 1ex is a poor bridge across a font stack. If the intended font fails to load, every ex value changes with the fallback.
.inline-icon {
inline-size: 2ex;
block-size: 2ex;
}