The typography cheat sheet — part 1

A comprehensive guide to never-ending typography terminology

Type Terminology — Part 1

The Dunning–Kruger effect applies almost perfectly to anyone learning about typography, at first you feel like you know everything and you think you so why bother learning more, but as your knowledge increase, your confidence level goes down until you finally realise how little you really know. Typography uses a lot of terms that you might not even be aware they exists to only confuse you even further, how practical and useful learning them is, is arguable, but nonetheless if you chose to learn this craft in depth, it can be overwhelming, so to make my life and your easier I’ve created this post to be used as a typography terminology cheat sheet.

I am by no means and expert in the field, this are personal notes I’ve been using to remind myself what each term means as I discover new ones, please feel free to suggest new terms to be added in the comments below.


Typeface

Term used to refer to the whole family that embodies a set of letters and characters. For example, Papyrus is a -great- typeface.

Font

A specific typeface of a certain body weight and size. For example, Avenir Bold 15pt would be a font.

Point

The standard unit of measure in typography. Like most typography related terms, a “point” has roots in the physical print process so its size varied from 0.14 to 0.4mm since its introduction in the 18th century. In a digital publishing world it has been established that 1pt equals 0.3528mm, so a 12pt font would have a height of roughly 4.2mm. This unit is used to measure the font size, spacings, kerning and other items on a -mostly printed- page. In CSS the abbreviation is “pt”, eg: 15pt.

Pica

A pica is another unit of measure in typography, one pica roughly equals 12pt. All design specific applications like Indesign or Photoshop understand the “pica” unit, although it is most commonly used for layout purposes in newspapers, magazines, newsletters, and ad design used to represent fixed horizontal measurements like column width.

Character

As Unicode states a character is “the smallest component of written language that has semantic value”. “A character refers to the abstract meaning rather than a specific shape -see glyphs-”, a type designer does not crate new characters, it creates new ways of representing those characters -glyphs-. Each alphabet has a defined number or characters, these include letters, numbers and grammatical punctuations like comas and full stops as well as other forms of written communication that do not necessarily equate to letters, examples of these are Chinese and Japanese characters. Fun fact, emojis are now officially recognised as characters by Unicode. For those coders out there, characters are the HTML of text and glyphs are the CSS.

Glyph

A specific visual representation of generally one character, glyphs define how a characters -the content- look like. The opposite can also be true, one single character can be repressed through multiple glyphs.

Two different representations of the same character with value U+1F341

Ligature

Two or more characters that are combined to create one single glyph. This is font specific and mostly used on proportional type fonts -see bellow-. Most ligatures occur to make the letters more visually appealing on the page, one of the most common ones in the English language is the “fi” and “fl” ligature, the user types in two different letters but only one glyph is created so to the eyes of the computer it counts as only one character.

Pitch

Unit used to measure the width of a glyph, and therefore refers to the amount of characters used per inch, abbreviated cpi. Fonts can either have a fixed pitch or a proportional pitch.

Proportional Font

A font that does not have a fixed pitch, in other words, a font that contains characters and spacings of different widths. IBM Plex Sans would be an example of a font with a proportionate pitch.

Mono Spaced Font

A font that has a fixed pitch, in other words, a font where all of the characters have the same width and spacings. IBM Plex Mono is an example of a mono-spaced font.

Kerning

The space between each glyph in a piece of text. Not all letters have the same distance between them, for example the letters “B” and “I” have different dimensions and therefore will also have a different kerning. Can easily be confused witch the pitch, which determines the width of each individual character, instead, kerning refers to the space between those characters.

Tracking

Unlike kerning, tracking refers to the space between characters in a group, like a word, and not between each character. The tracking is not dependant on the how each character fits next to each other.

Tracking doesn’t really exist on Sketch though…

Serif Fonts

Serif fonts are those that have added ornaments at the end of strokes in the form of tales and knobs. It is common that serif fonts have variable stroke widths.

Examples of Serif fonts

Sans-Serif Fonts

Sans-Serif fonts do not have the extending features at the end of each stroke called “serif” like serif fonts do. Wikipedia does a better job than I could at explaining the origins of the term: “The term comes from the French word sans, meaning ‘without’ and ‘serif’ of uncertain origin, possibly from the Dutch word schreef meaning ‘line’ or pen-stroke.”

Examples of Sans-Serif fonts


🚀 Thanks for reading. I’m a UX designer and an Industrial Design student at Loughborough University. Follow me and join me on this crazy journey where I’ll talk about art, design and technology.