3.1 Typography techniques

Typography is the art and technique of arranging type so that written language is legible, readable and visually appealing. Typography techniques are the deliberate methods a designer uses to choose, size, space, align and style letters to communicate a message and create a mood. Good typography makes a design easy to read and gives it personality; poor typography makes even a strong layout fail.

Example: a signwriting and branding shop in Rongo redesigned a hardware store's shopfront using one bold condensed typeface for the name and a clean sans serif for the product list, so the sign could be read clearly from across the road.

3.1.1 Definition

A typography technique is a planned way of handling type to control how text looks and reads. It covers the selection of typefaces, the setting of size, weight and spacing, and the arrangement of text on the page or screen.

Key terms

• Typeface: a family of letter designs sharing a common style, for example Helvetica or Times New Roman.
• Font: one specific style and size within a typeface, such as Helvetica Bold 12 pt; in digital work the terms are often used loosely.
• Glyph: any single character or symbol in a font, including letters, numerals and punctuation.
• Baseline: the invisible line on which most letters sit.
• x-height: the height of lowercase letters such as x, measured from the baseline.
• Ascender and descender: parts of letters that rise above the x-height (b, d, h) or drop below the baseline (g, p, y).
• Cap height: the height of capital letters.
• Serif: the small stroke at the end of a letter's main strokes.

Anatomy of type in practice

Understanding letter anatomy lets the designer judge legibility. A typeface with a large x-height reads better at small sizes on screens and packaging; a typeface with long ascenders and descenders gives an elegant feel suited to invitations and luxury brands.

3.1.2 Types of techniques

The following techniques are used together in every graphic design project.

Typeface selection and classification

Designers choose type according to its classification and the message.

• Serif: traditional, trustworthy, good for long printed text, for example Garamond and Georgia.
• Sans serif: modern, clean, clear on screens and signs, for example Helvetica, Arial and Open Sans.
• Slab serif: heavy block serifs that look strong and bold, for example Rockwell, used in posters.
• Script: imitates handwriting, used for invitations and logos, for example Brush Script.
• Display or decorative: unusual designs for headlines only, never for body text.
• Monospace: every character has the same width, used for code and technical documents, for example Courier.

Hierarchy

Hierarchy uses differences in size, weight, colour and position to show the reader what to read first, second and third. A poster may have a large headline, a medium sub-heading and small body text.

• Size contrast: headings noticeably larger than body text.
• Weight contrast: bold against regular or light.
• Colour contrast: an accent colour for key words.
• Position: important text at the top or optical centre.

Kerning

Kerning is the adjustment of space between two specific letters to remove awkward gaps, for example between A and V in "AVENUE". It is essential in logos and large headings.

Tracking (letter spacing)

Tracking adjusts the spacing evenly across a whole word or line. Loose tracking gives an airy, premium look to uppercase headings; tight tracking saves space but reduces readability if overdone.

Leading (line spacing)

Leading is the vertical distance from one baseline to the next. Body text normally uses leading of about 120% to 145% of the font size, for example 10 pt type on 12 pt to 14 pt leading.

Alignment

• Flush left (ragged right): the most readable for body text in English.
• Centred: suitable for short headings, invitations and certificates.
• Flush right: used sparingly for captions and special layouts.
• Justified: even edges on both sides, common in newspapers, but can cause rivers of white space if not hyphenated.

Font pairing

Font pairing combines two or at most three typefaces that contrast but harmonise, such as a serif heading with a sans serif body. Pairing typefaces that are too similar looks like a mistake.

Expressive typography

Expressive typography shapes, distorts, layers or animates letters so that the type itself becomes an image, as in posters, album covers and motion graphics.

Other techniques

• Case: uppercase for short emphasis, sentence case for readability.
• Text on a path: text following a curve, used in badges and seals.
• Drop caps: an enlarged first letter opening an article.
• Contrast and colour: dark text on a light background with adequate contrast for readability.