Line height in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property line-height control?

The line-height property controls the vertical space between lines of text, making text easier to read by adjusting spacing.

beginner

How do you set a line height that is 1.5 times the font size?

You can set it using line-height: 1.5;. This means the space between lines is 1.5 times the font size.

intermediate

What is the difference between using a unitless number and a length value (like px) for line-height?

A unitless number (e.g., 1.5) multiplies the font size to set line height and scales with font size changes. A length value (e.g., 24px) sets a fixed height that does not scale with font size.

intermediate

Why is it better to use a unitless line-height for responsive design?

Because a unitless line-height scales automatically with the font size, it keeps text spacing consistent on different screen sizes and zoom levels.

beginner

What happens if you set line-height to a very small value like 0.5?

The lines of text will be very close together, which can make the text hard to read and look cramped.

What does line-height: 2; mean?

A The line height is fixed at 2 rem

B The line height is 2 pixels

C The line height is twice the font size

D The line height is half the font size

line-height: 2; means the space between lines is 2 times the font size, making lines more spaced out.

Which is better for scaling text on different devices?

A Using a unitless number for line-height

B Using a percentage for line-height

C Using a fixed pixel value for line-height

D Not setting line-height at all

A unitless number scales with font size, making text spacing consistent on different screen sizes.

If you want tight text lines, which line-height value would you choose?

A 1.5

B 0.5

C 1

D 3

A value like 0.5 makes lines very close, creating tight spacing.

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

A 1.2 to 1.4

B 1

C 2

D 0.8

Most browsers use a default line height around 1.2 to 1.4 for readability.

Which CSS property affects the vertical space between lines of text?

A text-indent

B word-spacing

C letter-spacing

D line-height

line-height controls vertical spacing between lines.

Explain what the CSS property line-height does and why it is important for text readability.

Think about how text looks when lines are too close or too far apart.

Describe the difference between setting line-height with a unitless number versus a fixed length like pixels.

Consider what happens when font size changes on different devices.