Typography is an essential part of design. While people may not notice a pleasant font that’s easy on the eyes, they definitely notice a poorly constructed or misused font. Typography is a huge area of study with hundreds of years behind it, and the modern designer has thousands of choices when choosing a typeface for a project. Knowing the basics of typography can help us making the right choice as designers.
Typography: the style, arrangement, or appearance of printed letters on a page.
Serif & sans serif
Back when all text was printed with ink, the first typography designers created serifs, or little “feet,” at the end of the letters to give the ink a place to pool and not run all over the page.
Sans serif, or “without feet” refers to typography that does not have those little details at the end of letters.
The little feet of serif fonts help us recognize letters and read with ease when reading a printed page, but all those little details actually have the opposite effect when presented on the screen. The general rule of thumb is that books are printed in serifs. Websites often use serifs for small amounts of text, but longer paragraphs should use an easy-to-read sans serif.
Typefaces can be sorted into a few categories based on their characteristics.
Roman typefaces created in the fifteenth and sixteenth centuries that emulate the style of calligraphy. (example: alegra sans)
Sharper serifs with a more vertical axis than humanist typefaces. Transitional typefaces have sharp forms and high contrast. (example: baskerville)
Very abstract and have thin, straight serif characters. There is a lot of contrast between thin and thick strokes. (example: Abril)
Egyptian / slab serif
Bold, heavy and decorative. These typefaces were popular for advertising in the nineteenth century. (example: Domine)
Humanist sans serif
A sans serif with the calligraphic line weights of humanist text but without serifs. (example: Cabin)
Transitional sans serif
Uniform, upright characters like transitional typefaces but without serifs. This category includes the famous helvetica, which has been immensely popular ever since it was introduced in 1957. (example: helvetica)
Geometric sans serif
Typefaces built with geometric forms like circles and lines. (example: comfortaa)
A type family is the organization of roman and italic typefaces into matched families. It includes: Roman - (aka the “plain” or “regular”) upright version of a typeface is referred to as the roman form. (In this case, “roman” is not capitalized.)
Italic - the version of the typeface based on cursive. It’s not just slanted text (and in fact, simple slanting a text usually looks strange and not like proper italics). Some fonts, like Quadraat, have an italic form that is not slanted at all.
Small caps - capital letters that are slightly taller than the x-height of lower case letters, making them different than simple capital letters. They flow well with lower case letters and often work well for subheads and bylines.
Bold and semi-bold - thicker versions of the typeface used for emphasis within a hierarchy. Bold and semi-bold fonts need to include an italic version too.
There are two ways that typography can approach numerals, or numbers. They can be lining, meaning they line up in columns and have the same height as capital letters. Lining numerals stand out a bit more from surrounding text due to their large x-height. The alternative is non-lining numerals, which have ascenders and descenders like lower case. They line up better when surrounded by text and often have more character to them.
Typeface vs font
The terms “typeface” and “font” are typically used interchangeably, but technically there is a difference.
A typeface is a family of fonts. Within a typeface there will be fonts of varying weights or other variations, like light, bold, condensed, italic, etc. Each of these variations is a different font. For example:
Helvetica = typeface
Helvetica bold, helvetica italic, and helvetica condensed = fonts
A useful analogy is that a typeface is like a song and a font is like a recording.
Character vs glyph
A character is a symbol with a unique function, like the letter a. It can be embodied with several glyphs, like a, a and A.
Kerning & letter spacing
Kerning refers to adjusting the spacing between a pair of letters, numerals, or punctuation so that their spacing looks correct. (For example, the letters AV need to be pushed closer together to look right). Letter spacing (or “tracking”) adjusts the spacing between all the characters in a piece of text. This is often done to headlines and logos to make them look more open and airy.
Line height is the distance between the baselines of lines of type. The term comes from the days of the printing press when printers would use thin strips of lead to create space between lines of type. A small line height can make text very difficult to read and increasing line height often allows long paragraphs of text to “breathe.”
Readability refers to legibility and the ease with which a user can identify individual letters within a typeface. While fonts that are interesting and unusual can work well for short headlines or single words, like within a logo, sentences and paragraphs demand simpler fonts that are easily readable. (yellowtail for unreadable, doses for readable)
Rhythm refers to the use of font, margin and line height to help keep a reader organized. Just like a writer would use a lined piece of paper to write, and make sure to give each character some space so that they are not on top of each other, vertical rhythm creates a guide for our text.
Wrapping it all up
Choosing the perfect typeface for a project is never easy, but knowing these basics can help. Even when you do choose a typeface, you may want to open it up a little with letter spacing or line height, and make use of the various fonts of that typeface to create hierarchy and visual interest. If there’s one thing I’ve learned from studying typography, it’s that you should never, ever use comic sans or papyrus, no matter what your project is.