Line Height#
The values below come from Figma for the selected brand, using Eufemia's existing CSS variable names. The Fonts & Typography guide shows the DNB scale.
Line heights are the same in light and dark mode.
Default line-height rem table#
| Pixel | Type | Rem | CSS variable / property | CSS Classname | Info |
|---|---|---|---|---|---|
| 20px | x-small | 1.25rem | --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 | |
| 24px | lead | 1.5rem | --line-height-lead | .dnb-t__line-height--lead | Same as medium |
| 24px | medium | 1.5rem | --line-height-medium | .dnb-t__line-height--medium | |
| 32px | large | 2rem | --line-height-large | .dnb-t__line-height--large | |
| 40px | x-large | 2.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 |
Responsive typography (BETA)#
NB: This feature is in beta and may be subject to change.
Wrap a section of your UI in <Typography.Context responsive> to enable typography that adapts automatically across breakpoints.
Typography components inside the wrapper, like H2, Span, P, Heading, will start using the responsive variables in the table below.
You can turn it off for a section using <Typography.Context responsive={false}>.
| CSS Variable | ← small | small → medium | medium → |
|---|---|---|---|
--responsive-line-height-x-small | 1.25rem | 1.25rem | 1.25rem |
--responsive-line-height-small | 1.25rem | 1.25rem | 1.25rem |
--responsive-line-height-basis | 1.25rem | 1.5rem | 1.5rem |
--responsive-line-height-medium | 1.5rem | 1.5rem | 1.5rem |
--responsive-line-height-large | 2rem | 2rem | 2rem |
--responsive-line-height-x-large | 2rem | 2.5rem | 2.5rem |
--responsive-line-height-xx-large | 2.5rem | 3.5rem | 3.5rem |
All --responsive-line-height-* CSS variables are scoped to typography components (P, Heading, Span, Lead, H1, H2, etc.) as of now. If you need to use them elsewhere you can use the .dnb-t class.
Code Editor Extensions#
You may be interested in installing 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) */}