Font Size for DNB
For details about what values Typographic elements 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 |
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-font-size-x-small | 0.8125rem | 0.875rem | 0.875rem |
--responsive-font-size-small | 0.875rem | 1rem | 1rem |
--responsive-font-size-basis | 1rem | 1.125rem | 1.125rem |
--responsive-font-size-medium | 1.125rem | 1.25rem | 1.25rem |
--responsive-font-size-large | 1.25rem | 1.625rem | 1.625rem |
--responsive-font-size-x-large | 1.625rem | 2.125rem | 2.125rem |
--responsive-font-size-xx-large | 2.125rem | 3rem | 3rem |
All --responsive-font-size-* CSS variables are scoped to typography components (P, Heading, Span, Lead, H1, H2, etc.) as of now. If you need to use them elsewhere 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 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.125rem = 18px (in Ui theme) */}
Fallback font-size
If no specific font-size is defined, we still use 1rem as the basis. This is because we use the basis font-size for many other layout related purposes.