Line Height for DNB
For details about what values Typographic elements do use, have a look at the Fonts & Typography documentation.
Default line-height rem table
| Pixel | Type | Rem | CSS variable / property | CSS Classname | Info |
|---|---|---|---|---|---|
| 18px | x-small | 1.125rem | --line-height-x-small | .dnb-t__line-height--x-small | |
| 20px | small | 1.25rem | --line-height-small | .dnb-t__line-height--small | |
| 24px | basis | 1.5rem | --line-height-basis | .dnb-t__line-height--basis | |
| 28px | lead | 1.75rem | --line-height-lead | .dnb-t__line-height--lead | Unique line-height for <Lead>. |
| 32px | medium | 2rem | --line-height-medium | .dnb-t__line-height--medium | |
| 40px | large | 2.5rem | --line-height-large | .dnb-t__line-height--large | |
| 56px | x-large | 3.5rem | --line-height-x-large | .dnb-t__line-height--x-large | |
| 56px | xx-large | 3.5rem | --line-height-xx-large | .dnb-t__line-height--xx-large | Same as x-large |
Code Editor Extensions
You may be interested to install an Eufemia code editor extension that allows you to quickly auto complete the correct line-height.
Additional line-height em table
| Pixel | Type | Em | Custom Property | Info |
|---|---|---|---|---|
| 16px | xx-small--em | 1em | --line-height-xx-small--em | |
| 24px | basis--em | 1.333em | --line-height-basis--em | * |
* For example: if we sum 1.33333333333*18 we get 24. Browsers do round CSS values, so we do not need all the decimal numbers for now.
How to use the line heights (CSS)
/* I have a default height */.dnb-p {line-height: var(--line-height-basis); /* 1.5rem = 24px (in Ui theme) */}