Typography Basics

An essential part of being a professional designer is delivering a great message that connects with people. This is nearly impossible if no one can read it, or the message isn’t clear. That is why knowing and understanding typography is important for any professional designer. To understand typography, you have to understand typefaces and the parts and pieces they are made up of.

Anatomy

To understand typefaces and how to classify them, you have to understand the terminology of typography. Every part of a letter has a name and plays an important role in the consistency of a typeface. Below, you will find the elements commonly found in almost all typefaces.

Some of the elements shown above require more information to help you understand how type works. The following terms help with a typeface’s style and consistency.

x-height- This refers to the height from the base line to the top of your lower case letters, such as e, or o. X-height can have a drastic influence over what a typeface looks like. A low x-height can make the ascenders look elongated. A high x-height can make the letter appear to be taller or elongated.

Ascender- The part of a letter that extends above the x-height of a letter. You will find these on the letters b, d, h, etc.

Descender- This is the part of a letter that goes below the baseline. These are found in letters such as g, j, q, p, etc.

Stem- This is either a vertical or diagonal stroke. The thickness in a stem may vary depending on the typeface. This is one of the key elements that has a big impact on style.

Shoulder- Shoulders are found on letters such as n and m. Different typeface styles will have different shoulders of varying widths, shapes, and heights.

Ligatures– Ligatures are a big part of professional typography. A ligature is used to combine 2 letters to make them more visually appealing. They tend to interrupt the flow of letters normally, but using ligatures combines letters such as ff, ft, and fi. They fit tighter together and look more professional.

Classification

Serif

Serif typefaces have serifs throughout the letters, especially the stems. (Refer to the diagram in the previous section. They can be varying degrees of widths and thicknesses.

Sans Serif

Sans serif by definition means without serifs. Made typically for screens, sans serif typefaces are easy to read at small sizes.

Slab Serif

Slab serif typefaces have slabs in place of delicate serifs. Slab serifs can be varying widths and thicknesses.

Brush

Brush typefaces are meant to emulate hand-written lettering created with brushes. This type of typeface creates an organic feel.

Script

Script typefaces are wispy and elegant and are generally used for formal documents, wedding invitations, and other special occasions. Avoid using script typefaces in large bodies of text, because the swirls and embellishments will typically run together, making an already difficult-to-read typeface nearly illegible.

Handwriting

Handwriting typefaces are meant to create a personal feel to a design by emulating or utilizing human handwriting. Inconsistency isn’t such a big deal with this type of typeface because it mimics imperfection to begin with.

Old Style (Gothic)

Gothic or black-letter typefaces are meant to resemble typefaces of old-style lettering from centuries past. Gothic typefaces are generally difficult to read and are used mainly for specific purposes, or to achieve an old world look and feel in a design.

Leading- The space between one line of text and the next. The general rule is to use the current font-size and add 10-20% to that in order to reach the minimum leading value for your text. The more space between your lines of text, the easier it will be to read. It also gives the appearance of being more luxurious and upscale.

Kerning- Kerning is the space between two letters in a body of text. Sometimes, typefaces need to be adjusted, especially when the typeface creates too much space between 2 letters. This commonly happens between sets of letters, such as A and V, A and T, T and o, etc. the way that the letters line up, our eyes see more space and we group together the wrong letters, or we don’t include all of them when reading. This impairs reading and slows us down.

In the example above, there is too much space between the T and o, the o and m, the second m and the other o, the second r and the o after it, and the o and w. I decreased the kerning between these letters to create a tighter fit. Notice the before and after images and how the word looks much more unified.

Tracking

Tracking does the same thing, but it is used across multiple letters in a row. Kerning is used more often, because designers like to craft each word, letter by letter, making sure entire words are fine-tuned.

Conclusion

Typography is important to any designer. The right typeface and type structure can deliver the right message without confusion. The right type structure and typeface reinforces the message and solidifies the design, unifying words and imagery to maximize impact.

James George is a graphic design and web design expert, living in Knoxville, Tennessee. He is an expert in Print design, Adobe software, and web design, including HTML, CSS, and Wordpress. Visit his blog, Creative Beacon or his personal portfolio site and blog, G Squared Studios.

It was great to see an article on typography! I started out setting type at a time when kerning and a thorough knowledge of fonts was actually important. With the current emphasis on websites and apps, much of the beauty of fonts seems to be slipping away. Thanks for offering this tutorial!

Thanks Kate! I am really glad that you like it. There are some people that are still concerned with type on website and apps. Have you heard of some of the new jQuery plugins for type? They give you a lot of control over typography and kerning for the web. Thanks for your comment!

Newest Blog Entries

The Californian artist has created a series of these pencil drawn illustrations. Each one is drawn around the purposely placed coffee stain and they became so popular that Asmann now has prints of some...

Although according to the Guardian there is no roll-out date yet for this wonderful new passport, Neue Design Studio are now working with Norway’s National Police Directorate to implement passport security requirements. The Norwegian...

Sign up for our newsletter!

We will send you the latest graphic design news and information directly to your inbox. Whether it be an announcement of a new design related event or the latest publication of a book, you will be informed!