Lesson 3 of 8

Line length and line height

Goal

Text that's easy on the eyes

01

Explanation

What spoils long reading most isn't the typeface, it's line length. The longer the line, the harder it is for the eye to find the start of the next line when it jumps back.

A comfortable length is between 45 and 75 characters. The ch unit measures by character width directly, so you can write max-width: 65ch.

Line height is written without a unit. line-height: 1.7 means the line is 1.7 times the font size, whatever that size is, so it scales with each element's font. The larger the font, the less line height it needs, which is why headings get a smaller line height than paragraphs.

02

Your task

Give the paragraphs a maximum width and a line height of 1.6 or more, and give the heading a smaller line height than that.

Checks

5 checks
  1. The paragraph has a maximum width
  2. The paragraph is no wider than about 75 characters
  3. The paragraph's line height is 1.6 or more
  4. The heading's line height is less than the paragraph's
  5. The width is written in ch
03

Hints

0/3
Track lessons0 of 8 done

Learn to scale headings, choose the right units, and set line length and text direction, because text is what people read most in any interface.

Beginner level, 8 lessons, 1.5 hours in total.

index.html
Preview
index.html100%
–/5

Press “Run and check” to grade your code.

5 checks listed under “Your task”.

Track lessons0 of 8 done

Learn to scale headings, choose the right units, and set line length and text direction, because text is what people read most in any interface.

Beginner level, 8 lessons, 1.5 hours in total.