Line Height

Dashvar provides a few utility variables for most common line-heights. We recommend pairing a line-height with the same variable name of font-size like follows:

.selector {
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
}

The quick brown fox jumped over the lazy dog.

var(--line-height-0)

1rem

The quick brown fox jumped over the lazy dog.

var(--line-height-1)

1.25rem

The quick brown fox jumped over the lazy dog.

var(--line-height-2)

1.5rem

The quick brown fox jumped over the lazy dog.

var(--line-height-3)

1.75rem

The quick brown fox jumped over the lazy dog.

var(--line-height-4)

1.75rem

The quick brown fox jumped over the lazy dog.

var(--line-height-5)

2rem

The quick brown fox jumped over the lazy dog.

var(--line-height-6)

2.25rem

The quick brown fox jumped over the lazy dog.

var(--line-height-7)

2.5rem

The quick brown fox jumped over the lazy dog.

var(--line-height-8)

1

The quick brown fox jumped over the lazy dog.

var(--line-height-9)

1

The quick brown fox jumped over the lazy dog.

var(--line-height-10)

1

The quick brown fox jumped over the lazy dog.

var(--line-height-11)

1

The quick brown fox jumped over the lazy dog.

var(--line-height-12)

1

Interactive Example

Feel free to play with this interactive example to get comfortable with the tool.