Use CSS To Improve Your Typography - Verticle Rhythm

Use CSS to improve your typography - Verticle Rhythm

 

A baseline grid is the foundation for consistent typographic rhythm on a page. It allows the readers to easily following the flow of the text, which in turn increases readability. A continuous rhythm in the vertical space keeps all the text on a consistent grid so that proportion and balance are retained throughout the page, no matter the type size, leading or measure.

 

To keep a vertical rhythm in CSS, you want the spacing between elements and the line-spacing (leading) to equal the size of the baseline grid. For example, lets say you’re using a 15px baseline grid, meaning that there are 15px between each baseline. The line-spacing would be 15px and the space between each paragraph would also be 15px. Here is an example:

 

1 body {

2 font-family: Helvetica, sans-serif;

3 font-size: 12px;

4 line-height: 15px;

5 }

6

7 p {

8 margin-bottom: 15px;

9 }

 

This allows each paragraph element to align with the grid, keeping the vertical rhythm of the text.