Skip to content

Font Size

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-mediumLead
26pxlarge1.625rem--font-size-largeHeading
34pxx-large2.125rem--font-size-x-largeHeading
48pxxx-large3rem--font-size-xx-largeHeading

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.