---
title: 'Font Size'
version: 0.0.0-development
generatedAt: 2026-09-03T13:34:44.375Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Font Size for 

For details about what values Typographic elements use, have a look at the
[Fonts & Typography](/quickguide-designer/fonts#typographic-elements) documentation.

## Default `font-size` **rem** table

| Pixel                                 | Type       | Rem                                        | CSS variable / property | CSS Classname            | Info                            |
| ------------------------------------- | ---------- | ------------------------------------------ | ----------------------- | ------------------------ | ------------------------------- |
| {GetPropAsPx('--font-size-x-small')}  | `x-small`  | **{GetPropValue('--font-size-x-small')}**  | `--font-size-x-small`   | `.dnb-t__size--x-small`  | Do not use for texts            |
| {GetPropAsPx('--font-size-small')}    | `small`    | **{GetPropValue('--font-size-small')}**    | `--font-size-small`     | `.dnb-t__size--small`    | [Fallback](#fallback-font-size) |
| {GetPropAsPx('--font-size-basis')}    | `basis`    | **{GetPropValue('--font-size-basis')}**    | `--font-size-basis`     | `.dnb-t__size--basis`    | Default size                    |
| {GetPropAsPx('--font-size-medium')}   | `medium`   | **{GetPropValue('--font-size-medium')}**   | `--font-size-medium`    | `.dnb-t__size--medium`   |                                 |
| {GetPropAsPx('--font-size-large')}    | `large`    | **{GetPropValue('--font-size-large')}**    | `--font-size-large`     | `.dnb-t__size--large`    |                                 |
| {GetPropAsPx('--font-size-x-large')}  | `x-large`  | **{GetPropValue('--font-size-x-large')}**  | `--font-size-x-large`   | `.dnb-t__size--x-large`  |                                 |
| {GetPropAsPx('--font-size-xx-large')} | `xx-large` | **{GetPropValue('--font-size-xx-large')}** | `--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](https://webkit.org/blog/3709/using-the-system-font-in-web-content/)
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 keeps DNB basis text at 18px.
If the user changes the system text size, all `rem`-based text and layout scale
proportionally. Place it after the viewport meta tag and before stylesheets to
avoid a visible layout change.

```tsx
import { TextScaleHeadScript } from '@dnb/eufemia/shared/TextScaleScript'
```

```tsx
<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)`](https://drafts.csswg.org/css-env-1/#text-zoom)
environment variable and
[`<meta name="text-scale" content="scale">`](https://drafts.csswg.org/css-fonts-5/#text-scale-meta).
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](/uilib/usage/first-steps/tools/#code-editor-extensions) 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` | **{GetPropValue('--font-size-basis--em')}** | `--font-size-basis--em` |      |

## How to use the sizes (CSS)

```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.