ex unit
The ex unit is based on the x-height of the current font. It is a niche text-relative unit that can align sizing more closely to lowercase letter height.
Overview
The ex unit is based on the x-height of the current font. It is a niche text-relative unit that can align sizing more closely to lowercase letter height.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.ex | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.inline-icon {
width: 1ex;
height: 1ex;
vertical-align: middle;
}
.superscript {
font-size: 0.8ex;
}Live demo
Use cases
Typography fine-tuning
Adjust small layout relationships when lowercase letter height is more relevant than full font size.
Font-aware details
Use ex for nuanced sizing in editorial or text-heavy interfaces with carefully chosen typefaces.
Cautions
- ex varies significantly across fonts, so portability is weaker than with more common relative units.
- Prefer em or rem unless x-height specifically matches the design problem.
Accessibility
- Text-relative units can help responsive typography, but uncommon units require extra testing.
- Verify readability and zoom behavior across fallback fonts and platforms.
Related links
Powered by web-features