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.
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, 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.