Leading and Kerning
Typographic Control
Using CSS

Using CSS allows you to control Kerning and Leading by adjusting the line-height and the letter-spacing.

Leading

Leading is the spacing between lines while Kerning is the spacing between letters. If you want to make your font more readable you can adjust the CSS default spacing between lines. The default is 120% of the type size. Let's see this in action.

Leading Example 1: Line-height: 120%

This is a small font with the line-height set to 120%. The default is 120% of the type size. So, the line height here will be the same as the default. This text is easy to read for those with perfect vision.

Leading Example 2: Line-height: 140%

This is a small font with the line-height set to 140%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.

Leading Example 3: Line-height: 150%

This is a small font with the line-height set to 150%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.

Example 2: Line-height: 140%

Copy and paste (or type) this in your blog or Web page.

It will look like this.

This is a small font with the line-height set to 140%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.

The CSS style sheet code would look something like this.

p {line-height:140%;}

Kerning

Kerning is the spacing between letters. Adjust the kern for headlines, subheadings, or other special effects. If you want your letters spaced tighter than normal you can adjust the CSS spacing between letters using a negative number. Let's see this in action.

Kerning Example 1: Letter-spacing -1px

This is a line of large text with the letter-spacing defined as -1px.

You can decrease the kern by specifying a negative number for the letter spacing.

Copy and paste (or type) this in your Blog or Web page.

It will look like this.

Your Text Goes Here. The text will be tighter than usual.

The CSS style sheet code would look something like this.
p {letter-spacing:-1px;}

Kerning Example 2: Letter-spacing 4px

The letter-spacing here is 4px

Copy and paste (or type) this in your Blog or Web page.

It will look like this.

YOUR TEXT GOES HERE

CSS Leading and Kerning

The line-height and letter-spacing can be specified in your external style sheet, internal style, or inline as demonstrated.

For the h1 heading tag we can control the word-spacing between each word in the style sheet like this.
h1 { word-spacing: 1.1em }