Design

Basics of Typography for Web Designers

By August 8, 2017 No Comments
Basics of typography

Just starting to learn about graphic design or typography? Working with a designer and want to sound really smart? Trying to polish your website design? Then this blog post is for you! I’ll outline the basics of typography for web designers that you can use to build a cohesive brand identity in web.

Serif and Sans-serif Fonts

Let’s start off easy. If you know anything about the basics of typography, you probably know the difference between serif and sans-serif fonts. As you can see below, serif fonts have little ticks (those are the serifs) at the ends of the letters. Sans-serif fonts lack these (“sans” means “without”).

Basics of Typography: Serif vs. sans-serif fonts

When should I use serif and when should I use sans-serif font?

If you’re creating print material, such as a book, newsletter, or newspaper, you’ll likely want to use a serif font for your body copy. Because we’re used to reading the shapes of words as a whole, serifs help us to find the shapes of words more quickly. This is why the text in books usually uses serif fonts.

For digital media, it’s mostly up to you. Several studies have been done on which font type is easier to read digitally, and most find that there is no difference when the fonts are simple and straightforward (ornate fonts do take longer to read). If you’re looking for a font pairing for your website design, check out our blog post: Typography Basics: Pairing Fonts for the Web.

Leading, Tracking and Kerning

Leading

When you increase leading, you are increasing the space between lines of text. You might know leading by a different name: line spacing. You have probably had the most experience with this in Microsoft Word documents, where you can set the line spacing to be single, double, or somewhere in between.

To adjust leading in CSS, you would use the line-height property:

p{line-height:100%;}

You can also adjust leading in Photoshop in the Character panel:

Basics of Typography: Leading in Photoshop

Tracking

Tracking adjusts the space between letters in a font. Unlike kerning (see below), tracking applies the same amount of space between each letter. Adding tracking can really add some personality to the fonts in your designs. For some real-world examples, check out this post on creating a logo for the web.

In CSS, you can adjust tracking with the letter-spacing property:

p{letter-spacing:2px;}

In Photoshop’s Character panel, you can adjust tracking like so:

Basics of Typography: Tracking in Photoshop

Kerning

Kerning controls the space between two individual letters. This is very similar to tracking in that you are adjusting space, but you are doing it to individual letters rather than applying the same amount of space to each letter. Kerning is mostly used while designing a font, logotype, or poster headline.

There isn’t a way to adjust kerning with CSS, but you can use javascript libraries such as lettering.js to get the job done.

To adjust kerning in Photoshop:

Basics of Typography: Kerning in Photoshop

Side note: I found this fun little game called KernType where you can try to kern letters in a word given to you and see how well you do it. Give it a try! A little bit of practice adds up to have a better eye for composition and kerning your own headlines.

Want more?

Typography is an important part of design, and having some technical background can help you be more informed about the choices you make in your work. If you want to learn more than the basics of typography, fonts.com has a “Fontology” section on their site where you can learn a ton about fonts, including font history, how to effectively use fonts, and more.

 

Free Download: Website Planning Checklist

Do you have a website game plan for 2017?

Leave a Reply