Skip to content

Line Height

Default line-height rem table

PixelTypeRemCustom PropertyInfo
18pxx-small1.125rem--line-height-x-small
20pxsmall1.25rem--line-height-small
24pxbasis1.5rem--line-height-basisBody text
32pxmedium2rem--line-height-mediumH2
40pxlarge2.5rem--line-height-largeH1 small
56pxx-large3.5rem--line-height-x-largeH1

Additional line-height em table

PixelTypeEmCustom PropertyInfo
16pxxx-small--em1em--line-height-xx-small--em
24pxbasis--em1.333em--line-height-basis--em*

* If we sum 1.33333333333*18 we get 24. Browsers do round CSS values, so we do not need all the decimal numbers for now.

How to use the line heights (CSS)

/* I have a default height */
.dnb-p {
line-height: var(--line-height-basis); /* 1.5rem = 24px */
}