* Measure

Single Column Page

Remember, 45 to 75 as the number of characters per line works well, with the mid sixties being ideal.
Use a couple of asterisk symbols to measure that. What you want is for one asterisk to be on a line and for the second one to be on the broken line, the next line.

Multi-column Page

If you’re working with multiple columns, you can shoot for the 40 to 50 range.

White Spaces

When laying out type, you’ll want to make sure the text block has the necessary amounts white space of around it.
A good place to start when figuring out a nice measure for a block of text is to multiply the font-size by 30

If font-size: 20px then the proper width: 600px approximately.

Line Height

Line-heights can range from 1.35 to 1.85

The number 1.5 or 1.6 tend to be a good starting place for the line-height of your body text.

Heading

As heading font size increases, the line-height should decrease.
Example:

h1 { line-height: 1.1 }
h2 { line-height: 1.2 }
h3 { line-height: 1.3 }

Baselines & Vertical Rhythm

It is the balance of spacing and arrangement of text on your site’s pages.
A website that will guide you create good vertical rhythm is: www.basehold.it

The number in the URI of basehold.it represents how many pixels apart each baseline is, which corresponds to the line-height of the body text.

Example:

body { font-size: 1.25em; }           /* which equals to 20px */
p    { line-height: 1.6 }             /* 1.6 x 20px = 32px */

Therefore, this is what you should import:

www.basehold.it/32

As you can see, the line-height of paragraphs should be utilized to set up vertical rhythm on a page.

How to do it

1. Apply the baseholdit CSS file
2. Body text should be sitting on the baseline in a consistent way.
3. Adjust the line-height, margin and padding values of your heading elements and other text elements in the HTML document until you achieve harmony.
4. Paragraph text must return to its rhythm after a non-paragraph element is introduced.

It’s okay if a heading breaks rhythm a bit. What’s most important is that the paragraph text returns to its rhythm after that element is introduced.

Separating Paragraphs

You can separate each paragraph from the other by adjusting the values of their margins, paddings or even text-indent.

p + p {
  text-indent: 1.5em;
}