Wordmarks and Typography

Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. Typography involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages. In short, typography is what brings the text to life.

Typography can be dated back to the 11th century (as covered in semester 1), during the innovation of movable type. Before the digital age, typography was a specialised craft associated with books and magazines, and eventually public works. The first example of typography can be seen in the Gutenberg Bible, which kick-started a typography revolution in the west. The style of type used in the Gutenberg Bible is now known as Textura and can be found in the font drop down menu on major desktop applications today.

The Importance of Typography

Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the product’s overall tone. Typography should guide and inform your users, optimise readability and accessibility, and ensure an excellent user experience.

Differences in Fonts and Typefaces

Untitled

A typeface is the name given to a group of fonts in different weights and sometimes with different style sets. A font is one of these sub-categories of the font family. The graphic above lays it out pretty clearly.

There are three basic kinds of typeface: serif, sans-serif, and decorative. To keep the interface uncluttered and streamlined, a good designer will never use more than three fonts*—* and keep decorative fonts to a minimum. Most UI designers will pair serif fonts with sans-serif fonts, such as putting main body text in a serif font and putting your title in a sans-serif font, or vice-versa.

Kerning

Kerning makes certain combinations of letters, for example, WA, MW, TA, and VA fit together better when they typically sit awkwardly together due to their shape.

Text that looks good at smaller point sizes (such as in a paragraph on a magazine page) may look awkward at larger sizes - like an article headline or a billboard. This is because smaller text sizes need more space between letters to maintain legibility. Therefore, if you don’t manually adjust the kerning when scaling up a typically smaller body font, you can be left with an awkward, unappealing look.