×

Vertical Rhythm of Text [15/16]

In Web design, there is a concept of "vertical rhythm of text". It is quite complex, so we won't go deep into it here. Let's just mention that the good vertical rhythm of text makes it more readable.

To ensure good vertical rhythm and readability with any font size, make sure to use relative units for font size, line spacing, and vertical spacing between paragraphs and headings.

In such a case, no matter how the user changes the font size, the text would remain readable and understandable. In this task, you are going to practice with relative units.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vertical Rhythm of Text</title> </head> <body> <h1>Vertical Rhythm</h1> <p>In Web design, there is a concept of "vertical rhythm of text". It is quite complex, so we won&apos;t go deep into it here. Let&apos;s just mention that the text with good vertical rhythm is more readable.</p> <h1>The Rule of Relative Units</h1> <p>To ensure good vertical rhythm and readability with any font size, make sure to use relative units for font size, line spacing, and vertical spacing between paragraphs and headings.</p> <p>In such a case, no matter how the user changes the font size, the text would remain readable and understandable. In this task, you are going to practice with relative units.</p> </body> </html>
CSS
body { font-size: 12px; line-height: 16px; } h1 { margin-top: 12px; font-size: 16px; } p { margin-top: 6px; margin-bottom: 6px; }
HTML Academy
  1. For the body tag, set font-size: 24px;. See how the lines stick together now?
  2. For body, set the line spacing to 1.3.
  3. For the heading, change the font size to 1.3em and the top margin to 0.7em.
  4. For the paragraphs, change the margins to 0.5em.
Theory Check Next