What is Typography?

Typography is the arrangement and styling of letters & text in a way that not only makes it readable but also visually appealing to the reader. It can be used to express certain emotions to support the message or theme of the design. For example, a decorative bubble font, which has common associations with street art/graffiti, can be used to link a design with street culture.

The image below should serve as a quick guide to some typographic terms. Additionally, these are the 4 horizontal lines along each line of text:

• Top line (AKA cap line) is the topmost solid line touching the top of the capital “T”.

• Mean line is the line below the top line. It is the dotted line touching the top of “y”.

• Baseline is the line below the mean line. It is the dotted line touching the bottom of “o”. 

• Beard line (AKA descender line) is the bottommost solid line touching the bottom of “p”.

Image: Anatomy of Typography, Image by Osman Assem (https://osmanassem.com/typography-the-anatomy-of-a-letter/)

Typeface

A typeface is a family of characters that share similar features. There are four basic typefaces:

• Serif – has short lines (“tails”) stemming at the start & end of each stroke in a letter. It is often considered traditional due to its associations with traditional mediums (e.g. newspaper), therefore, when used, it can establish a sense of formality, credibility & trustworthiness. 

• Sans Serif – lacks the decorative strokes in serif typefaces (i.e. no “tails”; sans = “no”). This makes it a modern, clean, and simple typeface with a friendly, approachable, and informal feel. 

• Script – has fluid strokes reminiscent of cursive handwriting, which can add a personal and creative touch to the design. The elegance makes it suitable for ornamental purposes. 

• Decorative/Display – are known for being unique due to their highly decorative features which makes them perfect for grabbing attention and emphasising important information. Hence, they are best used at large font sizes for titles/headings. 

Size

Size simply refers to how big the lettering is, measured in points (pt). Font/type size dictates the height, which is the distance between the top line & beard line–measured from the top of a capital “A” to the bottom of a lowercase “y”. Sizing is used to create visual hierarchy in a design by establishing the heading, sub-heading, and paragraph.

There is also x-height, which is the height of lowercase letters without an ascender or descender (which should be the same height as a lowercase “x”, thus the name). It is the distance between the mean line & baseline (in the image above, the 2 dotted lines between the top line and beard line) 

Alignment

Alignment is the positioning of lines of text within a paragraph. There are 4 types of alignment: 

• Align to Left – the left of the paragraph is aligned along the left margin, making it straight on the left but jagged/uneven down the right. It is the most common type of alignment, especially in Western countries which read from left to right. 

• Centre Text – the vertical line runs down the middle of the paragraph, leading to an even amount of text on either side of this invisible line. This causes a jagged edge down both sides as it is not aligned to either margin.

• Align to Right – right of the paragraph is aligned along the right margin, making it straight on the right, but jagged down the left.  

• Justify Text – the paragraph is aligned along both the left & right margin, creating a nice straight edge down both sides. However, in order to achieve this without using hyphenations at the end of a line, the spacing between words will have to be automatically adjusted, causing each line to have different spacing which can make it hard to read (especially if the words become too close to each other).

Format

In typography, format relates to a combination of different typographic features that contributes to a specific appearance. This includes font size, typeface, styling (e.g. bold, italic, underline), and spacing.  

Spacing

Spacing refers to the vertical or horizontal distance between letters, words, and lines of text. This involves:

• Tracking – adjusts space between letters equally throughout a whole word

• Kerning – only adjusts the distance between 2 letters (e.g. commonly used to increase the space between “r” and “n”, as “rn” paired together may look like an “m” from a distance)

• Leading / Line-height – how lines of text are spaced vertically, measured by the distance between baselines.