Codecademy Logo

Typography in Visual Design

Typefaces vs. Fonts

The term typeface refers to an entire family of fonts, such as Helvetica, Futura, or Times New Roman. While font historically referred to a specific size and weight of that typeface, such as “Helvetica Bold 12 pt,” today, the terms “font” and “typeface” are often used interchangeably.

The Helvetica font family in 36 pt size, with various weights of the Regular and Oblique styles of the typeface.

Body Text in Print and Web Design

Neutral sans-serif typefaces, such as Helvetica, are most commonly used for body text in clean web design. Serif typefaces, such as Times New Roman, are typically used for body text in print.

Serif Type

Serif, or Roman, typefaces are named for the serifs, or small decorative lines or strokes, that adorn the longer strokes on the characters. They tend to look more traditional or classic, and are commonly used for print body copy.

Examples of serif typefaces Times New Roman, Baskerville, and GFS Didot.

Sans-Serif Type

Sans-serif, also known as gothic or grotesque, typefaces do not have serifs, tend to have less stroke variation than serif typefaces, and are used to convey simplicity and modernity. They are commonly used for body copy on screens.

Examples of sans serif typefaces Helvetica, Futura, and Univers LT Std.

Monospace Type

Monospace typefaces include letters that occupy the same amount of horizontal width (as opposed to other typefaces that are considered variable width). These are usually used in terminals and text editors for writing code, but are not considered as legible as other typefaces for regular body copy.

Examples of monospace typefaces Courier New, Lucida Console, and Inconsolata.

Script Type

Script typefaces emulate handwriting or calligraphy and can range from formal to casual. These typefaces are best reserved for headings, titles, logos, and decorative elements, and can be very difficult to read at smaller sizes.

Examples of script typefaces Zapfino, Pacifico, and Calligraffiti.

Decorative or Display Typefaces

Decorative or display typefaces are specialty typefaces that don’t fall into the above categories and often have unique design elements. These typefaces are often fun and distinctive, but not legible at small sizes or suitable for body copy. They are commonly used in posters and commercial printing.

Examples of display typefaces Cooper Black, Titan One, and Audiowide.

Font Families

A font family is a typeface that includes a large number of styles and weights designed to work well together so you can balance variety and consistency.

The Helvetica font family in 36 pt size, with various weights of the Regular and Oblique styles of the typeface.

Body Copy vs. Headings and Logotype

Fun, funky, and decorative fonts should be limited to titles, headings, and logos, while more legible fonts should be used for body copy. Within a font family, light or regular font weights are likely more appropriate for body copy while bold or black weights work well for headings and logotype.

Font Weight

The weight of a font refers to how bold or thick the font will be. In the most basic terms, we may consider using a font with a regular or bold weight. Some typefaces or font families also include a spectrum of weights ranging from 100 (thin) to 900 (black), with the highest weight offering the highest level of emphasis.

Roboto in Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, and Black weights, progressing from the thinnest to the boldest font weight.

Font Style

The style of a font includes italic fonts, which slant to the right and may appear more like a scripted version of a font. Italics can be used for emphasis or to stylize information like book or movie styles, but should generally be used sparingly.

A sans-serif font, Roboto, in italic style, slanted to the right

Spacing for Type

Properly spaced type increases legibility, creates hierarchy between items on a page, and creates balance through the presence of white space. Designers should consider line spacing, letter spacing, and paragraph spacing.

Designing Scannable Text

When formatting type, consider that many people will skim and scan the content, or might be seeking specific information. To make text easier to skim, consider breaking long text into sections, adding concisely worded headers, emphasizing important text in bold, and using bulleted lists instead of blocks of text for lists of items.

Copy about designing scannable text, as a single paragraph or multiple paragraphs with a heading, bolded points, and a bulleted list.

Text Alignment

Left alignment is generally considered most legible for body copy. Center alignment is sometimes used in designs with limited text. Justified alignment may be used in contexts where text is formatted in multiple columns. Right alignment for text is uncommon in interface design and should be used sparingly.

An overview of left-aligned, right-aligned, center-aligned, and justified text alignment.

Learn more on Codecademy