Website development and design blog, tutorials and inspiration

Typography

Learn the basics of typography, one of the staples of graphic design

By , in Graphic Design

Typography

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

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 in order 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

There are several basic forms in 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:

• Georgia

• Times New Roman

• 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

• Arial

• Impact

• 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

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 entirely unique font character sets with their own 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 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 type is an important concept. Font combinations should compliment each other and work in harmony. Using too many fonts creates a confusing mess and visual blur. Sometimes its best to choose a typeface with lots of different variations, but when you need to choose different typefaces, follow these tips:

  • Select similar historical period 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 straight forward 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, this is regular or italic fonts. You can also 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 to Become a Better Typographer

  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 point 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!

Last updated: 2017-06-20

Further Reading
Comments
  1. Roger
    Roger

    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 :)

Leave a Reply

Your email address will not be published.