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.

This Post is Day 20 of our Graphic Design Session. Creative Sessions

A Basic Introduction to 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.



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 but I think it is better to start with a few first.



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.


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.


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.


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.


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.


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


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 on

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 have useful guides on this subject.


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.


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


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.


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:


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:


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:

This Post is Day 20 of our Graphic Design Session. Creative Sessions
Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Web Design
    Getting the Hang of Hanging PunctuationGrand motel text effect
    Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web... until now. We’ll take a look at the value of hanging punctuation and how you can partially implement it using a little JavaScript and a CSS rule which has been around for years.Read More…
  • Design & Illustration
    27 Must-Have Typefaces for Graphic Designers27 400x400
    This article explores 27 typefaces that will serve as a solid foundation for your typeface library. Take what you will from my suggestions. More importantly, learn from them and use that knowledge to build a typeface library that works for you!Read More…
  • Web Design
    A Web Designer's Typographic BoilerplateB
    I like to use a typography.css in my projects; a separate file which houses all the basic structural typographic styles I'll need. A lot of what's found within it is obvious stuff (heading sizes, for example) but it also contains less obvious things which I don't want to forget. Let's work our way through the checklist..Read More…
  • Web Design
    How to Establish a Modular Typographic ScaleScale retina
    Possibly the most obvious typographic question in the hands of a designer is "which typefaces should I use?" The second question, one which rarely gets the kind of attention it ought, is "at what sizes should I set my type?" Establishing a modular scale is the best way to determine typographic sizes, in fact, it can help with laying out measurements and proportions across your whole page layout.Read More…
  • Web Design
    Design Theory
    Typography Basics for DevelopersDsfd typography retina
    Typography is a fundamental element in any design that you work on. The main reason we have websites in the first place is to display information, and for that information to be consumed by users who come across it. While there may be many other elements to a website, at the core is content. That content needs to be easily read, digested, understood and having a solid typographic base will only help with that.Read More…