Home   /   Information Design   /   Typography

Typography

Source: http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/

A 20 Minute Intro to Typography Basics

Typography plays a big role in graphic design and can be one of the hardest things to get right. My aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.

 

A Basic Introduction to Typography

Typography

Typography plays a big role in graphic design and many designers are very passionate or opinionated about it. For this reason it is a very hot topic in design circles.

Developing your own skills in typography will take time and it can 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 and career. However, it is a complex subject with a massive amount of detail which cannot be explained in just one article. So my aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.

So What is Typography?

Typography is an art form that has been around for hundreds of years. Words and text are all around us every day in almost everything we do. In every piece of type you see, somebody has considered how the letters, sentences and paragraphs will look in order for it to be read by us, or make us feel a certain way when we look at it. Sometimes it is done well, others not. Often it is us graphic designers who are the ones deciding how it will look, in our brochures, our logos, our websites and so on. The better we are at this, the more effective our designs will be.

Good typography comes from paying attention to tiny details as this can make the difference between graphic design work that is just acceptable or really good. There is more to it than just choosing fonts and making copy look good though – it is also about making things legible and readable (some of most basic functions of good typography) as well as making layouts look good in an aesthetic way.

Typographic basics

The following is an explanation of some common areas of typography.

Typeface or font?

Let’s get this one cleared up straight away! 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 of 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; Sans-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.

Classification

Anatomy

These are some of the basic parts of the anatomy of typographic 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.

Anatomy

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 kernel, 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 a 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 software attempts to adjust your text to fit.

Measure

This refers to the length of lines of text in a paragraph 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 days 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 sans-serifs will need ligatures to be set too.

Ligatures

You can find out a lot more about ligatures on Fonts.com and Adobe’s Layers Magazine.

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 to 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 try reading this page onFonts.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.

Grid

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

Rag

This is the uneven vertical edge of a block of 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 very 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.

Rag

Widows and Orphans

If a 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.

Widows and Orphans

Keep learning more

Once you have digested these basics I have outlined, there is a huge amount of good quality typographic reference material online to help you learn more and improve your skill and judgement. Below is a collection of useful links to get you started.

Recommended reading

Two of the main international font companies both have some very good resource sections aimed at helping you master basic typography:

Inspiration

Have a look around on 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:

Terminology

If you want to find out more about typographic terminology or just want to look up a word, these are useful websites:

General articles

These are some articles with general tips for improving your typography:

Web typography

If you are interested in reading about using typography in websites, try these useful resources: