🔠 Typography
Classifying Fonts

Updated at 2017-07-10 19:08

Classifying typefaces is equally hard as classifying art.

Fonts can be divided into classes. Font classification can be done by character style, character width or emotion they give.

Character style: serif, sans-serif, script, display. Character width: proportional, monospaced, narrow, wide. Emotion: formal, informal, classic, modern, dramatic, neutral.

Usually fonts are divided by character style. Most widely used is sorting by character style because font emotion can be affected with effects and character width doesn't tell a lot about the font itself.

# Some Examples
Times New Roman is proportional formal serif font.
Verdana is proportional modern humanist sans-serif font.
Helvetica is proportional neutral neo-grotesques sans-serif font.
Consolas is monospaced neutral neo-grotesques sans-serif font.
Goudy Old Style is proportional classic old serif font.

Serif Fonts

Serif fonts have fine details that help to separate characters. Those details are called serifs, those extra lines on characters. Two main differences between different types of serif fonts are how the serif lines look and the stroke width contrast. Serifs fonts are more popular in print because a block of serif text is faster to read as characters have more distinct differences. On the down side, they require high point density as they have very fine details. On digital media, using serif fonts requires a good quality font.

Modern Serif Fonts: Thin serifs and high contrast between thick and thin strokes.

Usage: headlines Emotions: structured, clear, elegant Context: arts, culture Fonts: Didot, Bodoni, Computer Modern

Transitional Serif Fonts: Medium serifs and medium contrast between thick and thin strokes. Called transitional because between old and modern.

Usage: body text Emotions: strong, stylish Context: legal, academic Fonts: Baskerville, Times New Roman, Georgia

Old Style Serif Fonts: Thick serifs and low contrast between thick and thin strokes.

Usage: body text Emotions: classical, traditional Context: historical Fonts: Caslon, Adobe Jenson, Goudy Old Style

Slab Serif Fonts: Thick serifs and close to no contrast between thin and thick strokes. Characters are block-like.

Usage: headlines Emotions: authoritative, friendly Context: marketing, promotional Fonts: Rockwell, Courier, American Typewriter

Sans-serif Fonts

Sans-serifs lack the fine details of the serif fonts. Sans-serifs are more popular on digital media because they don't need high point density. The main difference between different types of sans-serif fonts is the stroke contrast.

Humanist Sans-serif Fonts: High contrast between thin and thick character strokes. Most legible sans-serif so they are very popular on the web. Usually modern characters e.g. two-storied a-character.

Usage: body text Emotions: contrast, dynamic Context: government, educational, finance Fonts: Gill Sans, Frutiger, Tahoma, Verdana, Optima, Lucide Grande

Grotesque Sans-serif Fonts: Medium contrast between thin and thick character strokes. Usually transitional e.g. three-storied a-character.

Usage: headlines, body text Emotions: stable Context: family business Fonts: Franklin Gothic, Akzidenze Grotesk

Neo-grotesque Sans-serif Fonts: Low contrast between thin and thick character strokes. Require a lot of white space and hard to use in branding as they have little personality. Usually traditional e.g. three-storied a-character.

Usage: headlines Emotions: unassuming, modern Context: technology, transportation Fonts: MS Sans Serif, Arial, Helvetica

Geometric Sans-serif Fonts: No contrast between thin and thick character strokes. Constructed from basic geometrical shapes like circles or squares. Usually modern characters e.g. two-storied a-character.

Usage: headlines Emotions: strict, objective, universal Context: science, architecture Fonts: Futura, Erbar, Eurostile

Script Fonts

Script fonts try to mimic handwritten text. You should never use scripts for body text. They focus on personality and branding, not readability. Usually used for making message appear personal.

Formal Script Fonts: Mimic old handwritten letterform.

Usage: headlines, annotation Emotions: formal, safe Context: legal, business Fonts: Kuenstler Script, Snell Roundhand

Casual Script Fonts: Mimic modern handwritten letterform.

Usage: headlines, annotation Emotions: casual, friendly Context: referrals Fonts: Mistral, Brush Script, Comic Sans.

Display Fonts

Display fonts are attention drawing typefaces. All fonts that cannot be generalized as serif, sans-serif of script are display fonts. Sometimes script fonts are also grouped with display fonts. Display fonts are never suitable for body text and rarely for headings. Usually only used in logos and branding where extra personality is required.

Usage: logos, headlines Fonts: Broadway, Arnold Böcklin, Banco, Exocet