The modern design world has a seemingly endless supply of typefaces to choose from. In this article we’ll discuss the difference between typefaces and fonts, how to combine them, and what pitfalls you should try to avoid.
1. Typeface vs Font
A typeface is the name given to a collection of related fonts (which themselves are defined by their weight, style and size). The ‘Arial’ typeface consists of various different arial fonts (such as arial bold, arial bold italic, arial regular). A web page could use 3 fonts but only 2 typefaces: the 2 typefaces are Arial and Times New Roman, and the 3 fonts are Arial regular, Arial Bold and Times New Roman Regular.
Over time people have come to refer to typefaces as fonts largely due to software products using the terms incorrectly, but being aware of the difference is a useful step.
2. Typeface Classifications
Typefaces are classified by their letterforms.
Serif typefaces are named after the small decorative line or stroke attached to the end of a larger stroke, which effectively creates a visual cap at the end of the letterform.
Sans Serif typefaces don’t have the extended serifs at the end of the strokes or lines. Sans Serif is French for ‘without serifs’.
Script typefaces are based on the flowing style of human handwriting, and are primarily used for titles and heading text in western typography.
Slab Serif (or slab) typefaces are characterised by heavy block serifs at the end of the letterforms. Slab serifs were extremely popular during the 19th and early 20th centuries.
A display typeface is one which has been designed for use at a larger sizes (such as headings), as opposed to being used in standard body text. They often have a noticeable contrast between the thin and thick strokes of the letterforms.
Handwritten is a classification for any typeface that looks like it may have been written by hand.
Monospace (also referred to as mono or monospaced) typefaces contain characters that each take up the same amount of horizontal space per character.
Different classifications are often described as having their own ‘personality’ or identity. This means that they convey a particular feeling or suitability (more on this later).
3. Using A Single Typeface And Its Fonts
Using a single typeface and its fonts works well (especially on designs where you are going for a minimalist look). This style is often employed on websites for architects or fashion houses where imagery or photography may be more prominent, or on a site where short blocks of text play a larger part of the message they are trying to convey.
A simple graphic using multiple fonts in the Gilroy typeface
4. Superfamilies
A superfamily is a set of fonts that uses different typefaces. Superfamilies have one very distinct advantage – when combining two typefaces they will work well visually. Superfamilies will often have the same x-height (the height of a lowercase letter ‘x’) and matching stroke weights for the equivalent font weight or style.
A comparison in x-height between Alegraya and Alegraya Sans (both regular weight).
5. Combining Different Typefaces Which Have Different Classifications
When you combine different typefaces of different classifications it is important to find a visual complement. Although this comes through practice, there are some guidelines to follow that make this easier when starting out:
- Look at typefaces that have a similar ‘set width’ at the same font size (the set width refers to the width of a character and the associated space between letter forms).
- Look at typefaces that have a similar x-height at the same font size.
Combining the Crimson Text typeface (heading) with Lato (body copy)
6. Using A Typefaces’s Style To Convey A Message or Mood
Typefaces come with certain moods or identities. If you want a modern feel, a serif typeface with visually even widths to its characters would be suitable. Or if you want to promote strength and sturdiness you can use a slab-serif with heavy weights in the headings. Handwritten typefaces are often used when the message wishes to feel personal or caring.
Designers can also approach trying to convey an emotion through a typeface by picking a neutral looking typeface and use the fonts and weights to project the emotion of the typeface. For instance you could choose a neutral type face such as Helvetica and then approach the project by using italicised fonts or large bold headings to project strength and energy.
