Skip to content

Font Size

For details about what values Typographic elements do use, have a look at the Fonts & Typography documentation.

Default font-size rem table

PixelTypeRemCustom PropertyInfo
14pxx-small0.875rem--font-size-x-smallDo not use for texts
16pxsmall1rem--font-size-smallFallback
18pxbasis1.125rem--font-size-basisDefault size
20pxmedium1.25rem--font-size-medium
26pxlarge1.625rem--font-size-large
34pxx-large2.125rem--font-size-x-large
48pxxx-large3rem--font-size-xx-large

Code Editor Extensions

You may be interested to install an Eufemia code editor extension that allows you to quickly auto complete the correct font-size.

Additional font-size em table

PixelTypeEmCustom PropertyInfo
16pxbasis--em1em--font-size-basis--em

How to use the sizes (CSS)

/* I have a default size */
.dnb-p {
font-size: var(--font-size-basis); /* 1.125 = 18px */
}

Fallback font-size

If no specific font-size is defined, we use still 1rem as the basis. This is due to the fact that we use the basis font-size for many other layout related purposes.