How Typefaces & its Pairing important in Design Process ?

Overview

Not only color palette but selecting typefaces play an important role to create look and feel of your design. Once selected, pairing typefaces come into the scene. Pairing right fonts for your design makes it attractive and appealing.

Typeface Categories

There are 4 main categories:

1. Serif
2. Sans Serif
3. Decorative
4. Script

1) Serif

A small decorative flourish at the end of the stroke of a character or letter is known as serif. Serif fonts are easier to read in print than sans-serif. Serif fonts are almost bracketed but not all. Garamond, Abril Fatface, etc. are serif fonts.

Usages:

1. In Print: Serif fonts are commonly used in print such as magazines, books, etc. as they are readable and legible.
2. In Web: Serif fonts are worthwhile in headings, main body heading, and documents which are purposely used for print.

Classification:

1. Old Style: It is the style inspired by Renaissance calligraphy to replace Blackletter style of type. It normally has left leaning curve axis with weight stress at about 8’o clock and 2’o clock. e.g. Garamond
2. Transitional: Emerged in the mid-18th century, these are the fonts that represent a transition between old and didone fonts. They have a contrast between thin and thick strokes and strokes have vertical stress. e.g. Baskerville, Times New Roman,etc.
3. Didone(or Modern): Emerged in late 18th century, these are the fonts that have greater contrast between thin and thick strokes and strokes have vertical stress plus a ‘ball’ shaped curve. e.g Bodoni, Playfair Display, etc.
4. Slab Serif: Gained popularity in the 19th century, these fonts have less variation or difference in stroke width. Strokes are rectangular in shape. Often used for posters and in small print. e.g Rockwell Font

2) Sans Serif

Characters or letters that don’t have a stroke at the end are known as sans-serif.’ Sans ‘ means without. Sans serif fonts emit simplicity, modernity, and minimalism. Helvetica, Futura, etc. are sans-serif fonts.

Usages:

1. In Print: Sans serif fonts are used in newspaper headlines, photo captions, etc.
2. In Web: Sans serif fonts are worthwhile in headings and normal text.

Classification:

1. Grotesque: Emerged in early 19th century, represents the first design of sans serif. The strokes appear to be squarish bowls in design. ‘g’ letter usually has a loop in it while ‘R’ has curved leg and ‘G’ is usually spurred. Cap height and ascender height of letters are generally same. e.g Franklin Gothic
2. Neo-Grotesque: Neo-grotesque a.k.a transitional sans serif came after grotesque.They are simple in appearance and has limited width variation. These fonts are easier to use for body text. e.g. Helvetica.
3. Humanistic: Humanistic fonts are a mixture of Roman inscriptional letters and calligraphy. These fonts have higher variation in strokes, are clear and easily read. e.g. Frutiger
4. Geometric: As the name says these fonts are based on geometric shapes. Emerged in 1920 Jakob Erbar was the first geometric typeface. Recent typefaces include Avenir, Gotham, etc.

3) Decorative

Fonts that are decorative in nature and are eye-catching fonts. Avengeance Mightiest Avenger, Badaboom, etc. are decorative fonts.

Usage:
Mostly used in large headings in posters, sign boards, etc. to attract the attention of the user.

4) Script

Fonts that imitate historical or modern handwriting are script fonts. Playlist Script, Carolina Mountains, etc. are script fonts

Usage:
Mostly used in invitations and greeting cards.

Pairing

1) Concordance or similarity:

The design is concordant when you use single typeface over the entire project. If your design is simple you can opt for this pairing. As these fonts belong to the same family they share same characteristics which go well together. For e.g you use bold font for heading, medium font for sub-heading and regular font for normal text. Some of the typefaces are Futura, Corporative, etc.

A superfamily can contain both serif and sans serif typefaces. For e.g Droid contains Droid Sans, Droid Serif, and Droid Sans Mono.

2) Contrast:

A contrasting design is when you pair two different typefaces that are different from each other .i.e. combining serif and sans serif typeface. A simple trick for this is to use serif for heading and sans serif for body text or vice versa. Good usage of contrast makes your design eye-appealing.

Below are some points to look upon

1. Styles: Using fonts with different styles makes your design looks good. for e.g. using a condensed style for heading and italic for text.
2. x-height and width: x-height is the height of lowercase x and width is the wideness of a character.
3. Weight: Using different weights of a typeface is used to establish visual hierarchy.
4. Form or shape of a character: Look at ‘o’ in more than one font. Some ‘o’ are of geometric shape, some are rounded, some are condensed, etc.
5. Color: Some colors suit well in contrast while some don’t.

3) Conflict

Conflict design arises when two different fonts have almost same similarities.To avoid conflict use different typefaces that match with each other and maintain the hierarchy.
In the below image you can identify it by looking at character ‘e’ as both the fonts are Geometric sans serif type.

Conclusion

I hope this blog has given you some idea about how to pair right typefaces for your design. It all depends on your concept. There are many typefaces available on the web and are increasing too, just try to pair typefaces that matches with your design. General suggestion is not to go with more than 3 typefaces in your design.