Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Line Height

Control, control, control—you must be power-mad! Yes indeed, you can control the vertical space in between lines of text.

Line height in typography is called leading. Unlike letter spacing where the measurement you use is added to or subtracted from the default measurement, line height is taken literally by the browser.

That means if you code a line height of 3 pixels it will narrow the space in between lines to the point where the lines overlap because the normal line height is greater than three pixels.

Here’s how to add the line-height property to your style sheet rules:

body {line-height: 24px;}

By the way, if you set the line-height to zero, the text turns into a big blob of black, or whatever your text color is. Someone could copy and paste the blob into a text editor though, and read the message even though it's not readable on the page.

NOTE	Changing the line height may not work in some content management systems, such as WordPress. Fortunately, it’s not something we need to do very often.

Below are examples of line height in use.

This example has a line height of 26 pixels. This is a filler sentence. This is another filler sentence. Are you still reading about filler sentences? Wow, you are one dedicated individual.

This example has a line height of 20 pixels. Would you like to see different filler sentences than were used in the first example? Well it's your lucky day, because this is not the same bunch of filler sentences. This is a whole new bunch of filler sentences. Lucky, lucky you!

This example has a line height of 14 pixels. It's a little crowded in here, isn't it? It could be worse. Take a look at the end of this tutorial and see what a line height of zero pixels looks like. Copy and paste the colorful blob into a text editor to see my secret message to you. :)

In case you didn't read that last line-height example, copy and paste the black blob below into a text editor and read my secret message to you.

Secret message: You are a life artist. Each day is your canvas. Paint the best picture you can each day and your life will be a work of art. Thank you for visiting my site. May your every day be better than the day before.

Line Height

NOTE

Essentials

Drawing Board

Notices

Sample Graphics