Advanced Web Typography Tutorial

We’ve blogged about typography in some of our past posts if this topic is of interest.

Leading

Leading is measured from baseline to baseline of type and is also known as the space between lines of type. This can be manipulated in your css stylesheet like so:

.title{
	line-height:1.5em;	
}

Tracking

Tracking is the space between each letterform. This can be changed with css as well:

 .title{
	letter-spacing:.1em;
}

Kerning

Kerning adjusts the space between a specific pair of letters. For kerning on the web, I use the plugin lettering.js. It can be found at http://letteringjs.com/. This plugin is pretty simple to initiate, and will help to fine-tune the typography on your site. Download the jquery library and link it in the footer of your index.php file.

<!--jQuery--> 
<!--Load JQuery Library-->  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

Download the plugin and place it in your js folder, then link that file in your index.php.

<!--Kerning-->        
<script src="js/jquery.lettering-0.6.min.js" type="text/javascript"></script>

This plugin is supposed to be used sparingly, so don’t try to micromanage the type in large paragraphs. It is best to apply it to titles and featured sections of your site.

Then you assign ids to each letter you want to kern.

 <script type="text/javascript">
	        $(document).ready(function() {
		        $(".title").lettering();
		});
</script>

In your stylesheet you can specify a left or right margin for that specific letter.

<p class=”title”>I am a <span id=”char1”>k</span>erning machine!</p>

then in CSS:

#char1{
margin-left:1.3em;
}

One tool that will help you kern more quickly is kern.js. Go to http://www.kernjs.com/ to install the bookmark. Then while viewing your site you can activate the plugin and manually drag your letters around. When you think it looks good copy the css they made for you and the changes will be applied to your site!

Bonus: Typography Glossary

Another great resource is the Typography Glossary that goes over all the key element of typography and will make you sound like a typography super expert.