What Do You Know About Type?
By: Chinwe Uzegbu
Tags: Women In Tech, Typography, UI Design, Graphics, UX Design

What Do You Know About Type?

Photo by Brett Jordan on Unsplash

Typography is all around us. It plays an important role in every form of media — whether you are designing a brand identity, a book, a website, or a brochure. It is so important, that it can even be a matter of life and death. How? You might ask. One great example of this is the use of type in highway signage.

Which of these highways signs would you take more seriously?

Highway signage makes use of the letterform in the image on the left because it is easy to read even at 60 miles an hour. It is also legible from a sufficient distance so the driver can read it in time to make quick decisions, even under the worst conditions.

But what exactly is Typography?

Typography is the art of arranging text in a way that is clear, legible, and visually appealing to the user.

Font vs. Typeface

A typeface is the collective name of a family of related fonts eg. Roboto, while fonts refer to the different weights, widths and styles that make up a typeface e.g. Roboto medium, Roboto light, Roboto italic, etc. Each variation of typeface is a font. Simply put, font is what you use while the typeface is what you see.

Classification of typefaces

The three most prevalent classifications are:

Serif: Serifs have letters with little extenders, also known as “feet” at the end of each stroke. They are a good choice for projects involving lengthy texts — books, newspapers and magazines — because they are easy to read. Examples are Times New Roman, Courier, Georgia, Garamond, etc.

Sans-serif: These have letters without the little extenders found in serif typefaces. San-serif is French for without serifs. Popular examples are Helvetica, Avant-Garde, Arial, etc.

Script: These are designed to capture the artistry of traditional hand lettering and calligraphy, usually as if written by a pen, brush or marker. They are best for small amounts of text, like titles and headers, because of their decorative nature. Examples are Brushscript, Lobster, etc.

Some important terms in typography

Font weight: This refers to the heaviness of the strokes in a typeface. However, it is often used as a general term for any style: italics, bold, small caps, condensed, etc.

Font size: This refers to how large the characters displayed on a screen or printed page are and is measured in points. One point is equal to 1/72 of an inch. The optical size is mainly decided by the x-height and this is why a typeface with a large x-height appears bigger than a typeface with a small x-height at the same point size.

Tracking: This refers to the overall spacing between characters. It adjusts the spacing evenly across the whole word or block of text.

Kerning: This is the spacing between specific characters. Unlike tracking, it adjusts the space between two characters at a time. Designers use kerning to adjust the spacing between characters in fonts that are unevenly spaced.

Leading: This is also known as line spacing and is the vertical spacing between lines of texts.

Alignment: Text can either be aligned to the left, right or centre. It can also be justified, creating seamless edges on both sides of the block of text. When designing an interface, it is good practice to align to the left, because this helps improve readability, especially in left-to-right cultures (Western). However, in right-to-left cultures (Hebrew, Arabic), the reverse is the case. Center alignment works best for headings and buttons and justified text is best for editorial design.

Hierarchy: This is the principle of arranging elements to show their order of importance. It is used to guide the reader’s eye to whatever is most important by making use of different levels of emphasis.

How to choose fonts

Choosing the right font is important because it gives the viewer an impression of your message before they even begin to read it. For example, fonts can appear to be friendly or aggressive, masculine or feminine. So as a designer you should ensure you choose the font that best expresses the message you want to send. Good use of font will always enhance and intensify the meaning of the text.

How to combine fonts

When combining fonts, less is more. A good practice is to stick to one or two fonts per project. When combining two fonts, there are essentially two ways to go about it:

The first way is to combine two different fonts within the same typeface e.g. a bold font for heading and its medium counterpart for body text. To ensure there is enough contrast, you should skip weights — don’t use the weight that follows immediately after e.g. Bold and semibold. The second way is to combine fonts from different typefaces that contrast with one another: You know how they say opposites attract? This is very true when combining fonts. You should never combine fonts that are similar in features, instead, go for fonts that have visible differences e.g. sans-serif and serif fonts.

The theory of typographic relativity

This is how typographic elements interact with one another. Typographic elements exist in relation to one another and must be balanced in size, weight, position and orientation. There must be a balance among colours, styles and other factors in order to clearly communicate your message.

Breaking the rules

“One difference between a good designer and a great designer is that a good designer knows and follows all the rules, while a great designer understands all the rules so well that they know when to successfully break them”. These words have been playing in my head since my last design class with visual designer, Caleb.

Like any other field, typography has its convention and rules, and it is important to know and follow these rules as a new designer. But you should also know that these rules are malleable and not stringent; with the right techniques, they can be successfully bent to create the desired outcome. After all, some of the most wonderful and effective designs completely violate design rules. So as you become more comfortable with typography, don’t be afraid to break some of these rules. Be bold!