# Line Height

In CSS, the `line-height` property controls the leading (`led-ing`). Leading refers to the vertical distance from the baseline of one line to the baseline of the next.

**Format**: `.ds-u-leading--[lead|base|heading|reset]`

<EmbeddedExample>
  <section class="example-list">
    <article>
      <code class="ds-u-margin-bottom--1">.ds-u-leading--lead</code>
      <div class="ds-u-leading--lead">{loremIpsumGenerator('l')}</div>
    </article>
    <article>
      <code class="ds-u-margin-bottom--1">.ds-u-leading--base</code>
      <div class="ds-u-leading--base">{loremIpsumGenerator('l')}</div>
    </article>
    <article>
      <code class="ds-u-margin-bottom--1">.ds-u-leading--heading</code>
      <div class="ds-u-leading--heading">{loremIpsumGenerator('l')}</div>
    </article>
    <article>
      <code class="ds-u-margin-bottom--1">.ds-u-leading--reset</code>
      <div class="ds-u-leading--reset">{loremIpsumGenerator('l')}</div>
    </article>
  </section>
</EmbeddedExample>

## Guidance

### Accessibility

> Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between `1.5` to `2` allows them to start a new line more easily once they have finished the previous one. &mdash; [WCAG 2.1 Compliance Techniques](https://www.w3.org/WAI/WCAG21/Techniques/css/C21)