Font scale hook
The typographic scale is loosely based on the Major Third (1.250) typographic scale.
While these functions and hooks exist to get precise font sizing and associated line-height, we still highly recommend using the
EuiText and EuiTitle components as wrappers of your content instead.useEuiFontSize() hook
Font sizing is provided through this React hook (or function version) and not the global theme. It returns both the font-size and line-height for the provided scale.
The quick brown fox jumped over the blue moon to catch a snail
tsx code block:css` ${useEuiFontSize('l')} `
useEuiFontSize().fontSize
To use precisely only the font-size value, you will still use the same hook (or function) to grab the individual property via the returned object.
The quick brown fox jumped over the blue moon to catch a snail
tsx code block:css` font-size: ${useEuiFontSize('xs').fontSize}; `
We strongly recommend using relative (rem or em) units instead of px when possible
Relative font units respect configured browser default font sizes, which some users may set to larger than than the 16px default due to, e.g. visual impairment, monitor size, or personal preference. Read more on accessible text resizing.
Font units
The font sizing function also supports three main units for font size and line height: rem | px | em, with rem being default for all EUI components.
Sample | Function | Font size | Line height |
|---|---|---|---|
Sample The quick brown fox jumped over the blue moon to catch a snail | Function
| Font size 0.6429rem | Line height 1.1429rem |
Sample The quick brown fox jumped over the blue moon to catch a snail | Function
| Font size 0.7857rem | Line height 1.1429rem |
Sample The quick brown fox jumped over the blue moon to catch a snail | Function
| Font size 0.8571rem | Line height 1.4286rem |
Sample The quick brown fox jumped over the blue moon to catch a snail | Function
| Font size 1.0000rem | Line height 1.7143rem |
Sample The quick brown fox jumped over the blue moon to catch a snail | Function
| Font size 1.1429rem | Line height 2.0000rem |
Sample The quick brown fox jumped over the blue moon to catch a snail | Function
| Font size 1.4286rem | Line height 2.0000rem |
Sample The quick brown fox jumped over the blue moon to catch a snail | Function
| Font size 1.7143rem | Line height 2.2857rem |
Sample The quick brown fox jumped over the blue moon to catch a snail | Function
| Font size 2.1429rem | Line height 3.1429rem |