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 |
Why text can be larger on iOS#
On iPhone and iPad, Eufemia follows the user's system text-size setting. This means that text may not have exactly the same pixel size as it does on macOS or other desktop platforms.
At the default text-size setting, the difference is:
| Platform | Root size (1rem) | DNB basis size (1.125rem) |
|---|---|---|
| Most desktop browsers | 16px | 18px |
| Safari on iOS | 17px | 19.125px |
Safari does not apply the iOS setting to ordinary web font sizes automatically.
Eufemia therefore uses Apple's Dynamic Type
Body text style
as the root font size. This allows text to grow or shrink when the user changes
the system setting.
Root-relative layout values follow the changed root size too. Test layouts with larger accessibility text sizes and avoid fixed heights around text.
Why not force the size to 18px?#
A fixed root size of 16px would make DNB's 1.125rem basis text exactly 18px. It would also stop the text from following the user's iOS text-size setting.
Why not use a smaller Apple text style?#
Apple's Subheadline style is 15px at the default setting, which would make
DNB's basis text 16.875px instead of 18px. It also follows a different Dynamic
Type scaling curve. This would make iOS smaller than desktop by default and
change the difference at larger accessibility sizes. It would also reduce all
root-relative layout values.
Optional JavaScript root scaling#
At the default iOS text size, this opt-in script uses the normal 16px root, so DNB basis text is 18px. It only sets the root font size when the user changes the system text size. Text and layout then scale together. If the user returns to the default setting, the script restores the original root size.
Place the script after the viewport meta tag and before stylesheets to avoid a visible layout change.
import { TextScaleHeadScript } from '@dnb/eufemia/shared/TextScaleScript'
<head><meta name="viewport" content="width=device-width, initial-scale=1" /><TextScaleHeadScript />{/* stylesheets */}</head>
Pass the page's CSP nonce to TextScaleHeadScript when required.
Client-rendered applications can use TextScaleClient, but server-rendered
pages may show a layout change during hydration. Without the script, the root
is 17px and DNB basis text is 19.125px at the default iOS setting. Text still
follows the user's system text-size setting.
The longer-term option is the standard
env(preferred-text-scale)
environment variable and
<meta name="text-scale" content="scale">.
These are not yet supported by Safari.
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.