Typography - Basics

Your printers best friend is also the best kept secret on the web. What is this typography you ask? Well, I'm afraid its a little more involved than using your spell check and graphs. In this tutorial we will take a look at a few of the basics of typography.

Before we open up those empty Photoshop files and dig in lets go over a few things we should know.

Leading
Leading refers to space between lines of text. In photoshop this is changed in your Character Window. An increase in leading is suggested if using bold lettering, longer lines of text, type below 8 points and if your page feels to dark. A decrease in leading is suggested for type faces with long descenders. Leading is typically set to 120% of your character size (ie. 10 point text and a 12 point lead).

 Line Length
An often discounted aspect of typography on the web is your line length. If your lines of text are to small it will appear to be choppy and hard to read. The opposite for long lines of text, the eye has trouble following and keeping its place on the page. 45-75 characters is a good range to stay in per line of text. Adhering to this structure also makes it more dramatic when you break away.

Ok, time to open up Photoshop and try an example. I will be using one of the images located on the side of our pages.

Open a picture or create a new file. I will be using the picture on your left for my example, right click and download the picture if you wish to work on it (203 x 526 pixels) or use your own.

We have a good picture, we have weaved elements from our design into the picture and now we are ready to make our bold statement. The typography of the piece is what makes it stand out and catch the users eye.

I started by adding in keywords softly into the background of the image (Google, Yahoo and MSN to coincide with keywords our user would like to see). I added these in a 30pt New Baskerville with opacity set to 60%.

I then emphasized a large META tag standing out in our red background color in 60pt Bodoni MT.

Finally using a variety of text sizes and varients I added the line "If a website is left alone on the internet, no one hears it." I used the same New Baskerville font for the entire saying but varied the character spacing, font size and other attributes such as italics and bold type to make this image really stand out. I added a few radical items like combining the A and W, turning the 'is' upside down and angling the ONE in a stairstep.

Use these variances from your normal type to really make your key statements stand out!

The image on the right is the final image after the above additions. Try a few of your own changes and see what you can come up with.

Looking to read more about typography? Try the following links:
Web Typography Tutorial
Creepy Typography

Also be sure to check back soon for more advanced uses of typography in Photoshop.