Typography
Fonts are handled automatically once the CSS packages dnb-ui-core or dnb-ui-basis are loaded.
Every typography HTML element, like headings and paragraphs, have a defined height
, respective line-height
so everything falls exactly into the 8 pixel grid.
You don't need to define the font-family
ever, but rather use CSS Custom Properties for font-weight, font-size and line-height.
.selector {font-weight: var(--font-weight-medium);}
The default font-weight is currently Book, alongside Demi and Medium.
The default font lining is Proportional Lining. But in some circumstances you may use, alongside with the UX designer, Tabular Lining.