Accessible line height for headings (h1, h2, h3, etc)

Question

We are working on making our product's typography WCAG accessible.

This is what MDN says regarding the line-height:

Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

Technically they mention only main paragraph content "p" tag.

Our question is:

What line-height value should we use for headings and buttons? Should we use at least "line-height: 1.5" for headings, buttons, and other text elements as well, or just for "p" tags?

Is line-height value smaller than 1.5 accessible for H1 and other headings?

Answer 1

We found the answer:

Use a minimum value of 1.5 for line-height for main paragraph content.

Headings aren't the main paragraph content, so line-height doesn't have to be 150% to be accessible.

In most cases, headings are just 1-3 lines of text. We checked many references and made several mocks to check how it looks and found that smaller line-height (1.35) for headings works better. Because heading fonts are much bigger and line-height of 150% creates extra whitespace that makes it too spread apart.

Answer 2

This will matter your typeface choices usually. The 1.5 comment isn't a bad general guideline if you're unsure as it will gauge your choice in font size. Another way to do it is to use your type size and line width to determine a line height that people can comfortably read. The larger the type size and line width, the larger the line height should be. For running/body text, that’s usually around 1.4-1.65, headings at around 1-1.3, and captions or short lines at around 1.3. Lines that are leaded too tightly or loosely can diminish readability by making it harder for the eye to know where to return to when the line breaks.