Typography for Beginners - Everything You Wanted to Know

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

By Tim Trott | Graphic Design Tutorials | February 27, 2016
1,027 words, estimated reading time 4 minutes.
Graphic Design

This article is part of a series of articles. Please use the links below to navigate between the articles.

  1. Graphic Design Tutorial for Beginners - What is Graphic Design?
  2. Graphic Design Elements & Principles Every Designer Should Know
  3. Colour Theory for Graphic Designers - Tips and Inspiration
  4. Typography for Beginners - Everything You Wanted to Know
  5. Adobe Photoshop for Beginners - Learn How to Use Photoshop
  6. How to Create Web Designs in Photoshop - PSD Templates
  7. Introduction to Adobe Illustrator for Graphic Designs
  8. Tracing Artwork in Adobe Illustrator Using Pen Tools
  9. How to Create Effective Logo Designs with Examples
  10. An Introduction to Graphic Design with Adobe InDesign
  11. Introduction to the Printing Process - From Digital to Print

Typography is an art form in itself. Words are around us everywhere we look. Somebody has designed the way that text looks, the typeface, alignments, colours, spacing and so on. Typography is important to convey a message. The message is not only contained within the words but the way those words are presented. In the same way that colour does, a typeface can evoke an emotional response.

A message can be friendly

A message can be aggressive

A message can be traditional

A message can be modern

A message can be feminine

A message can be masculine

It is the designer's responsibility to choose the correct typeface to best present the message. Good typographic design should go unnoticed.

Typeface vs Font
A font is a family of typefaces. For example, Franklin Gothic is a font which contains the typefaces Franklin Gothic Book, Franklin Gothic Medium, Franklin Gothic Demi, Franklin Gothic Heavy and so on.

Good typographic layouts should work together and flow. They should be balanced in size, shape and weight. Everything should be in proportion and fit together.

Basic Forms of Typography

There are several basic forms of typography. These are determined by certain characteristics of the typeface. A few examples are shown below.

Serif

Sans-Serif

Script

Serif fonts are more traditional fonts and are identified by the short lines, or finishing strokes at the line ends. The angles, thickness and widths can vary and they are small.

Examples of Serif Fonts:

  1. Georgia

  2. Times New Roman

  3. Palatino Linotype

Sans-Serif fonts have a more modern feel to them. As the name suggests these fonts are without the serif lines.

Examples of Sans-Serif Fonts

  1. Arial

  2. Impact

  3. Tahoma

The diagram below highlights the difference between serif and sans-serif fonts.

Difference between Sans-Serif (left) and Serif (right) fonts. Notice the trailing lines from the edges of letters highlighted yellow.
Difference between Sans-Serif (left) and Serif (right) fonts. Notice the trailing lines from the edges of letters highlighted yellow.

Script fonts are based on handwriting or cursive script. These are primarily decorative fonts where each letter is attached. They can be tricky to use effectively due to the large swashes, or flourishes.

Weights and Styles in Typography

The weight of a font is specified by how thick the lines making up the letters are. They can be light, thin, regular, medium, bold, heavy and black.

There are generally three styles used in typography. These are italic, oblique and small caps. Italics and Obliques are often confused and thought of as the same thing. They are not. Obliques are slanted versions of the regular characters. Italics are slanted, but they are unique font character sets with their unique properties.

Letter Form Characteristics

All fonts and typefaces have unique characteristics. The combination of characteristics determines how well the fonts work with each other, or if they clash.

Anatomy of Typograhy
Anatomy of Typograhy

The most important characteristics are :

  • Baseline - this is an imaginary line upon which all the letters sit.
  • Median - This is the height of the lower-case characters.
  • Cap Height - This is the distance from the baseline and the top of the capital letters
  • Kerning - This is the distance between two specific letters.
  • Font Size - This is the distance in points from the top of the tallest ascender to the bottom of the lowest ascender. Within this distance, however, the median height can change. This is why some fonts look completely different in spacing and size even though they have the same font size.
  • Leading - This is the vertical distance between each line

Picas, Points and Inches

In typography, fonts are measured in points. A point is a tiny fraction of an inch. In one inch there are 6 picas. Each pica is made from 12 points, so there are 72 points in an inch. A font set at 72 points will measure one inch when printed.

Combining Type

Combining types is an important concept. Font combinations should complement each other and work in harmony. Using too many fonts creates a confusing mess and visual blur. Sometimes it's best to choose a typeface with lots of different variations, but when you need to choose different typefaces, follow these tips:

  • Select similar historical periods with different features - i.e. two modern fonts or two traditional fonts. Don't mix a calligraphic font with a modern font.
  • Consider opposite typefaces - one traditional and one friendly.
  • Typefaces with similar body height can work well as long as the styles are contrasting.

Contrast and Mood are two important concepts as well.

Contrast relies on combining typefaces based on weight is a straightforward way of creating typographic contrast. The role of weight plays an important role in determining contrast.

 

Combining typefaces
based largely on weight
is a straight-forward way
of creating typographic contrast

 

If you are just using one typeface, then multiple weights will work very well to provide contrast and emphasis.

 

Multiple weights of a
single typeface will also
combine effortlessly

 

The final method is style and decoration. Generally, these are regular or italic fonts. You can mix in weights as well.

 

You can create contrast
within a typeface by
using different styles

 

The mood is vital to the way typefaces combine. Mood can be anything from formal to casual, fun to serious, modern to classic or anything in between. This can be a minefield as some fonts have different properties which can clash despite having different or similar heights and spacings.

5 Rules For Better Typography

  1. Concentrate on how the Body Text looks. This is because there is more body text than anything else. It takes the most space on the page. Start the project by making the body text look good, then worry about the rest later.
  2. Point Size - 10-12 points for body text or 15-20 pixels on the web. Remember that not all fonts look the same size at a given size you may need to adjust to compensate.
  3. Line Spacing - 120 - 145% of font size.
  4. Line Length - 45-90 characters per line.
  5. Font Choice - Use professional fonts - avoid Comic Sans!
Was this article helpful to you?
 

Related ArticlesThese articles may also be of interest to you

CommentsShare your thoughts in the comments below

If you enjoyed reading this article, or it helped you in some way, all I ask in return is you leave a comment below or share this page with your friends. Thank you.

This post has 1 comment(s). Why not join the discussion!

We respect your privacy, and will not make your email public. Learn how your comment data is processed.

  1. RO

    On Wednesday 22nd of June 2016, Roger said

    Great work here, very informative and comprehensive. The letter form characteristics were particularly interesting as I came here to learn what is kerning. Keep up the good work :)