Unitless values for lin-height

Firsty a line height concept definition:

In CSS, when you assign an unitless value to line-height you are dinamically calculating the line height based on the element´s font size. If you set line-height: 1.2 you are setting the line height to 120% of the base font size.

Line height settings in Figma follows this approach.

For example, mdm recommends a minimum value of 1.5 (150%) for line-height for main paragraph content to improve accesibility.

As the font size gets larger, reduce the line height

So if the gap between lines helps user read, for a 24px heading can be better a line heading of 1.3 and for the body text of 16px a line height of 1.5 or 1.6.

Unexpected behaviour of using rem and em

Relative values like rem or em are used to scale with the user agent´s font size. But with line-heigt may lead to unexpected behaviour.

html {
	font-size: 16px; /* default user agent font size */
}

body {
	font-size: 1rem; /* 16px */ 
	line-height: 1.5rem; /* computed height: 24px (1.5 * 16px) */
}
h1 {
    font-size: 4rem; /* computed height: 24px (inherited) */
}
p { 
	font-size: 2rem; /* computed height: 24px (inherited) */ 
}

A better approach

:root {
	--text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
}

html,
body {
	font-size: var(--base);
    line-height: 1.5;
}

h2 {
    font-size: var(--text-2xl);
    line-height: 1.4; /* 24px font, 1.4 line-height = 33.6px */
}
h3 {
    font-size: var(--text-3xl);
    line-height: 1.35; /* 30px font, 1.35 line-height = 40.5px */
}
h4 {
    font-size: var(--text-4xl);
    line-height: 1.3; /* 36px font, 1.3 line-height = 46.8px */
}
h5 {
    font-size: var(--text-5xl);
    line-height: 1.25; /* 48px font, 1.25 line-height = 60px */
}