Line height and leading in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does line-height control in CSS?

It controls the vertical space between lines of text, making text easier to read by adjusting spacing.

beginner

In Tailwind CSS, what does the <code>leading-6</code> class do?

It sets the line height to 1.5 times the font size, increasing space between lines for better readability.

intermediate

Why is adjusting line height important for accessibility?

Proper line height improves readability for all users, including those with visual impairments or reading difficulties.

intermediate

How does Tailwind CSS naming for line height relate to CSS values?

Tailwind uses leading-{size} classes where sizes map to numeric line-height values like 1, 1.25, 1.5, etc.

beginner

What is the difference between leading-none and leading-normal in Tailwind?

leading-none sets line height to 1 (no extra space), while leading-normal sets it to about 1.5, which is easier to read.

What does the Tailwind class leading-tight do?

A Increases font size

B Adds margin between paragraphs

C Sets line height to a smaller value for tighter text lines

D Changes text color

leading-tight reduces the space between lines, making text lines closer together.

Which Tailwind class sets line height to about 1.5 times the font size?

A leading-none

B leading-normal

C leading-loose

D leading-snug

leading-normal is the default line height around 1.5, good for readability.

Why should you avoid very small line heights in text?

A It affects image quality

B It increases page load time

C It changes font style

D It makes text harder to read

Small line heights cause lines to crowd, making reading difficult.

Which Tailwind class would you use for very spaced out lines?

A leading-loose

B leading-snug

C leading-none

D leading-tight

leading-loose increases line height for more space between lines.

What is the default line height in most browsers if not set?

A 1.5

B 2

C 1

D 0.5

Browsers usually default to about 1.5 for comfortable reading.

Explain how line height affects text readability and how Tailwind CSS helps control it.

Think about the space between lines and how Tailwind names these classes.

Describe the difference between leading-none, leading-normal, and leading-loose in Tailwind CSS.

Consider how tight or loose the lines appear with each class.