#Line Height for DNB

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

#Default line-height rem table

#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}>.

All --responsive-line-height-* CSS variables are scoped to typography components (P, Heading, Span, Lead, H1, H2, etc.) as of now. If you need to use them elsewhere you can 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 line-height.

#Additional line-height em table

* For example: 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 (in Ui theme) */
}