Typography 101

Typography plays a huge role in not only graphic design but in the design of logos, website and interfaces, it is also one of the hardest things to get right. Below is a short introduction to the basics of typography which will help in the development of your future works. This information is collected from a number of sources including wikipedia, youtube and PSDtuts.

Typography

Introduction to Typography

Many designers are very passionate and/or opionionated in Typography as it plays such a hugh role in design. For this reason it is a very hot topic in design circles. Developing your own skills in typography will take time and it will be one of the hardest things to get right. it is best to get a solid understanding of the basics as soon as possible in your education.

What is Typography?

The following is an explanation of some common areas of typography

Typeface or font?

Designers are often unsure of the difference between these two, as they are both well used terms for the same thing. Actually, a typeface is a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Black, etc.) but a font is one weight or style within a typeface family (such as Helvetica Regular).

Typeface classifications

There are many different classifications and sub-classification on typefaces, but the most common two types you will hear of are: Serif – these typefaces are the more traditional ones. They are distinguished by a short line or finishing stroke on the end of character strokes and stems (shown in the anatomy diagram below) and; San-serif - as the name suggests, these are distinguished by their lack of any Serifs. They only became popular in the nineteenth century and are considered modern as a result.

serif and san-serif

Anatomy of Type

These are some of the basic parts of the anatomy of typography characters. There are lots more (which you can find out about here on Fonts.com) but I think it is better to start with a few first.

basics

Glyphs

What are glyphs? Most designers have noticed that there is now a Glyphs palette in most of the major software packages. The word essentially refers to all the available characters in a font from letters to numbers and all the special characters.

Kerning and Tracking

Kerning is the adjustment of the spacing between individual characters. Tracking, however, is the spacing of a group of characters. These two are often confused, but the way I remember them is that Tracking sounds like a long line of railway tracks, whereas Kerning sounds like kernal, which is an individual object.

Alignment

Generally text should be left aligned, simply because we are used to reading that way. Without good reason, only consider centering or right aligning text if it is small amount, such as a heading or caption. Also, justifying text (where it has a straight edge on both sides) should be used in moderation too. It looks nice and neat in some situations, but too much of it will make a layout look rigid. Additionally justifying in a small column size can cause irregular spacing as between words as the softare attempts to adjust your text to fit.

Measure

This refers to the length of lines of text in a paragraphy or column. Most people tend to just refer to it as column width though. Measure is an important thing to get right in typography as it can be crucial to the readability of the text. If the measure is too wide the text may be difficult to read as the eye has to move a lot more after each line is read. If it is too narrow it can also be tiring on the eye to read, as the eye is constantly moving back and forth. A narrow measure will also lead to a lot of hyphenation.

Leading

Vertical line spacing is referred to as Leading in typography and print, which is because in the old dats of printing and setting blocks of type, strips of lead were inserted between the lines according to how much space was required. Leading’s role in typography is to generate sufficient space between the lines to make it readable. As with all matters of typography, it is a balance between reading comfort and aesthetic style.

Ligatures

When parts of the anatomy of characters either clash or look too close together, they can be combined in what are called Ligatures. These can be for functional or decorative reasons depending on how obvious the clash is. Mostly this is only an issue with serif fonts although sometimes san-serifs will need ligatures to be set too.

Ligature

Hyphenation

Another one of those details you have to judge in typography. Hyphenation is not loved by designers or typographers but is considered necessary sometimes in order to prevent rag problems (there is a description of rag further on in this article). If you have use them avoid having a lot of them in a block of copy, and especially avoid having one follow another. For more information on this check out Fonts.com.

Hyphens, En-dashes and Em-dashes

Another thing that can cause confusion the use of the horizontal line characters in a font, and which is the correct one to use. It is worth knowing the difference between a Hyphen (the short one) an En-dash (the slightly longer one) and an Em-dash (the longer one). Linotype and Fonts.com have useful guides on this subject.

Grids

A Grid is a guide by which graphic designers can organise copy and images in a flexible way, whilst making this content easy to take in and understand. They can form the basis of a good typographic layout so it’s good to get into the habit of using them in your work. Try looking at examples (such as a newspaper, a brochure, or a website with a lot of text content) to see how the type has been positioned and structured. The diagram below is intended to show in a basic way how different pieces of type can be positioned on a grid, and what the main parts of a grid are called.

Grids

Find out more about grids from The Grid System, a very useful resource.

Rag

This is the uneven vertical edge of a block type, most commonly the right-hand edge, as in the case of left-aligned text. It is important to pay attention to the rag, as it can affect readability in a big way. If the rag is not very good, it can be distracting on the eye, as you read down a column. Usually it can easily be fixed by reworking the line breaks, or by editing the copy.

Rags

Widows and Orphans

If as single word or very short line is left at the end of a column it is called a Widow. Likewise if the same is left at the top of the following column this is called an Orphan. Both of these are considered bad typography as they cause distracting shapes in a block of type. They can usually be fixed easily in the same way as the rag, by reworking the line breaks in the column or by editing the copy.

Orphans and Widows

 

Inspiration

Have a look around the web and get a feel for some great typography. Not only will you find a good variety of styles, but you can also see what other people consider good type. These are some good places to start: