Intro to Typography

People often use the terms "typeface" and "font" interchangeably, but they stand for different things. A typeface is a set of characters of the same design, including letters, numbers, punctuation marks, and symbols. A font presents a variation of a typeface. In other words, fonts of a similar design are grouped into typefaces. For example, when we talk about Helvetica or Times New Roman, we're talking about typefaces. Helvetica Bold 12 point is a font.

Understanding the varieties of typefaces available, the moods they can create, and what they’re each suitable for is key to using type effectively to create exceptional user experiences.

Serif typefaces include slight decorative strokes (called serifs) at the end of letters. They’re one of the oldest types of fonts, dating back to the 1470s and Nicolas Jenson’s Roman Type.^[1]

Serifs are very traditional and were originally popularized by early print magazines. Because of their rich history and long-standing usage, they can give users a feeling of class, romance, and sophistication. They’re excellent for a product or brand that wants to create a trustworthy, reliable, and even formal image.

Sans-serif typefaces are, quite literally, without serifs. This means they do not include decorative strokes at the ends of the letters. While they come across as quite modern, the first sans-serif typeface was Caslon Egyptian, designed in 1816 by William Caslon IV.^[2] They became popular in print advertising and are often thought to be more readable on-screen than serif typefaces, though this is widely debated.

The most popular sans-serifs are Arial, Helvetica, and Tahoma, which are compatible with almost any device — although some might say they lack personality.

Script typefaces originate from handwriting and calligraphy and are most commonly seen in design elements like logos. Think of the Coca-Cola logo as an example.

Many script typefaces can be challenging to read, made worse by the fact that many schools don't teach cursive anymore. That's why they don't work well in large blocks of text or at small sizes.

Slab serif typefaces shook up the typography world when they emerged in the 19th century with their bold, sturdy look. They are thick, strong, and can feature either rounded or angular serifs. Slab serifs were commonly used in early newspaper advertisements, as their blocky shapes stood out more than traditional serif or sans-serif typefaces.

One downside of slab serifs is that they can be difficult to pair with other typefaces due to their heavy, block-like forms, which may overpower surrounding text. They are also generally best suited for shorter text, such as headlines or titles.

Display typefaces are diverse. They can be used for a wide range of occasions since they draw inspiration from various typefaces and font styles. They first appeared during the Industrial Revolution and were originally used most often in posters and commercial printing.^[3]

Display typefaces are characterized by their unique and distinctive design, tailored to grab attention and convey a specific mood or message. In modern UX design, you’ll commonly see display typefaces in headlines and titles. They’re generally unsuitable for body copy as they can be hard to read at small sizes.

Letters in monospaced typefaces each occupy the same amount of horizontal space — think of typewriters or MS-DOS. This contrasts with other kinds of typefaces, where each letter has its own proportional spacing, based on the actual width of the character.

Monospaced typefaces are easier to scan than proportional typefaces. They're often used for things like code because they can make it easier to spot mistakes. But overall, they have lower readability than proportional typefaces.

Common monospaced typefaces include Courier, Courier New, Apercu Mono, or Space Mono.

Similar to script typefaces, a handwriting typeface mimics a person’s handwriting. They’re generally very casual typefaces and should be used only for creative flair. Handwriting typefaces are perfectly suited to represent a person’s signature such as signing off on an email newsletter.

These typefaces grew in popularity in the mid-20th century, as phototypesetting techniques came on the market in the early 1950s.^[4] They were largely used in advertising design through the 1970s.

A font is a specific implementation of a typeface, meaning it includes a particular style (like bold or italic), weight, and size.

For example, Helvetica Bold 12pt is a font (a specific style, size, and weight of the Helvetica typeface).

Early fonts were individual sets of metal types that were handset to print pages. Since they were cast in metal, each size and weight necessitated a separate set of characters called sorts.

Font weight refers to the thickness of a stroke on a given typeface. Fonts range from thin (also called hairline or light) to black (heavy), with a lot of weights in between. In CSS, font weights are set anywhere between 100 (thin) and 900 (black). The most commonly seen weights are bold and regular.

There are diverse font variations that lend distinct emphasis and character to text. Out of them, the most common ones include:

• Regular fonts: These are the most emotionally neutral fonts and are generally the default for most typefaces. They're in between thin and bold fonts, making them suitable for large text passages that require a lot of reading.
• Bold fonts: These are characterized by their thicker strokes, creating emphasis and highlighting important information. They are often used for headings, subheadings, and key phrases to grab attention.
• Italic fonts: These fonts lean slightly to the right, adding a sense of style and differentiation to the text. They can convey emphasis, provide a distinctive look, or indicate foreign words or titles.

System or desktop fonts are designed to be installed on your computer and can be used in applications available on your device, like Figma or Photoshop. System fonts usually have .otf and .ttf extensions, which are simply file formats that describe how the font looks and behaves.

The advantages of system fonts include:

• Faster loading
• No need for access to external resources to load a font
• No need to add any CSS tweaks to make fonts look right for certain browsers because they're already on most devices.^[5]

Web fonts, on the other hand, are loaded from the web and used in websites. They are applied through a simple CSS rule called @font-face. Web fonts often come in formats like WOFF, EOT, or SVG, which are designed to work well in browsers.

Web fonts allow designers to create a richer, more custom look for a webpage, but they can slow down loading times and require some CSS setup.^[6]