Font Size
For details about what values Typographic elements do use, have a look at the Fonts & Typography documentation.
Default font-size rem table
| Pixel | Type | Rem | CSS variable / property | CSS Classname | Info |
|---|---|---|---|---|---|
| 14px | x-small | 0.875rem | --font-size-x-small | .dnb-t__size--x-small | Do not use for texts |
| 16px | small | 1rem | --font-size-small | .dnb-t__size--small | Fallback |
| 18px | basis | 1.125rem | --font-size-basis | .dnb-t__size--basis | Default size |
| 20px | medium | 1.25rem | --font-size-medium | .dnb-t__size--medium | |
| 26px | large | 1.625rem | --font-size-large | .dnb-t__size--large | |
| 34px | x-large | 2.125rem | --font-size-x-large | .dnb-t__size--x-large | |
| 48px | xx-large | 3rem | --font-size-xx-large | .dnb-t__size--xx-large |
Code Editor Extensions
You may be interested to install an Eufemia code editor extension that allows you to quickly auto complete the correct font-size.
Additional font-size em table
| Pixel | Type | Em | Custom Property | Info |
|---|---|---|---|---|
| 16px | basis--em | 1em | --font-size-basis--em |
How to use the sizes (CSS)
/* I have a default size */.dnb-p {font-size: var(--font-size-basis); /* 1.125 = 18px */}
Fallback font-size
If no specific font-size is defined, we use still 1rem as the basis. This is due to the fact that we use the basis font-size for many other layout related purposes.