Font scale

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.

Value unit to show in table

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Function ↦	Font size ↦	Line height ↵
Sample The quick brown fox jumped over the blue moon to catch a snail ↦	Function ✄𐘗 js code block: ✄𐘗useEuiFontSize('xxxs') ↦	Font size 0.6429rem ↦	Line height 1.1429rem ↵
Sample The quick brown fox jumped over the blue moon to catch a snail ↦	Function ✄𐘗 js code block: ✄𐘗useEuiFontSize('xxs') ↦	Font size 0.7857rem ↦	Line height 1.1429rem ↵
Sample The quick brown fox jumped over the blue moon to catch a snail ↦	Function ✄𐘗 js code block: ✄𐘗useEuiFontSize('xs') ↦	Font size 0.8571rem ↦	Line height 1.4286rem ↵
Sample The quick brown fox jumped over the blue moon to catch a snail ↦	Function ✄𐘗 js code block: ✄𐘗useEuiFontSize('s') ↦	Font size 1.0000rem ↦	Line height 1.7143rem ↵
Sample The quick brown fox jumped over the blue moon to catch a snail ↦	Function ✄𐘗 js code block: ✄𐘗useEuiFontSize('m') ↦	Font size 1.1429rem ↦	Line height 2.0000rem ↵
Sample The quick brown fox jumped over the blue moon to catch a snail ↦	Function ✄𐘗 js code block: ✄𐘗useEuiFontSize('l') ↦	Font size 1.4286rem ↦	Line height 2.0000rem ↵
Sample The quick brown fox jumped over the blue moon to catch a snail ↦	Function ✄𐘗 js code block: ✄𐘗useEuiFontSize('xl') ↦	Font size 1.7143rem ↦	Line height 2.2857rem ↵
Sample The quick brown fox jumped over the blue moon to catch a snail ↦	Function ✄𐘗 js code block: ✄𐘗useEuiFontSize('xxl') ↦	Font size 2.1429rem ↦	Line height 3.1429rem ↵

𐘂𐘂