Line-heights that fit

Line-heights in the Delphinus Design System are set as a sum of rem- and em-sizes. A rem-size is fixed, whereas an em-size is proportional to the font-size. Combining rem and em values hence makes line-heights scale with font-size in a relationship that is not fully proportional. That is, larger fonts have proportionally smaller line-heights.

Furthermore line-heights can be set with two different rem+em-values:

• Multiple lines: The default line-height used for body text.
• Single line: A slightly more compressed line-height used for text strings that usually do not wrap on multiple lines, e.g. headers and labels. Using this line-height ensures that the element is perceived as a single, cohesive object, even in the case of wrapping onto more than one line.

Why is this important?

Say we have an element showing various dates applying to a vacancy.

Consisting of two words the labels may potentially wrap onto two lines, e.g. on a small screen or in a narrow grid column. If we were to use only one, our default line-height, the result would be like shown first below.

Visually it almost seems like there are not two, but three individual objects: "Expected", "Startdate" and "15 Sep". Setting the more compressed line-height for the label, the result is like the second box below. Now "Expected startdate" visually seem like a single coherent object - exactly as it does when there's room enough for it to stay on one line.