6 minute read

My notes on typography as a complete newbie

Sources

Thеsе notes are a summary of these videos:
The Ultimate Guide to Typography | FREE COURSE - YouTube
Typography for Developers Tutorial - Full Course - YouTube

Where to look for fonts:
Fonts - Envato Elements
Browse Fonts - Google Fonts
Adobe Fonts | Explore unlimited fonts

Other interesting resources:
Text Rendering Hates You - Faultlore

Definition

Typography is the visual component of the written word.

Purposes of typography:

  • Utility: text should be legible, clear
  • Emotional connection: create the right vibe of your product (imagine getting bills in Comic Sans)

Typography vs Lettering:

  • Typography — working with pre-made letter system like typefaces and fonts to create layouts
  • Lettering — crafting letterforms for a single use and purpose (also see Calligraphy)

Short history

Roman inscriptional capitals — describe monuments and buildings
12th century: Black letter — gothic style calligraphy script used by monks
15 - 16th centuries: Roman typefaces became popular because blackletter was hard to read
18th century: serif fonts
Industrial revolution: start of design experiments. Magazines and promotion materials. Slab serif.
Late 1920: Futura (sans serif), Gill Sans
1950s, Switzerland: Helvetica typeface quickly came in use in every form of printing.
Computer revolution: many experiments with design.

Basic terms

Typeface — fonts with a common design, characters that share common features (Roboto)
Font — particular set of properties of a typeface (Roboto light 48pt)

Cap height — the height of the capital letters.
Baseline — the invisible line upon which letters rest.
X-height — the height of the lowercase letter, excluding descenders and ascenders.
Descenders and Ascenders — downward / upward part of a letterform (often a vertical stroke) that extends above the x-height.

Serifs — projections that finish off the main strokes of a letter. They can sometimes add legibility as they help the reader to follow the letter forms.

In UE:
Font family (font asset) — typeface
Typeface — font weight

Classification

Serif

Serifs are small feet at the end of a stroke on the letter. Characters used to be created by chiseling on stone. Serifs help the reader follow the letter forms.
Books, magazines, newspapers.

  • Humanist (1460s) — strong calligraphic influence, diagonal stress, lower strokes contrast. (Sorts Mill Goudy)
    Whereas recognition of the inherent dignity
  • Old style (15th - 18th Century) — serifs slightly rounded, slightly inclined. Characters have a diagonal stress. Low contrast between thick and thin strokes. (Goudy Bookletter)
    Whereas recognition of the inherent dignity
  • Transitional (18th Century) — sharper serifs, vertical stress, higher strokes contrast. (Baskerville)
    Whereas recognition of the inherent dignity
  • Modern / Didone (Late 18th Century) — flat and straight serifs, vertical stress, much higher strokes contrast. (Bodoni)
    Whereas recognition of the inherent dignity
  • Slab Serif (Early 19th Century) — heavy and squared serifs, vertical stress, uniform stroke. (Graduate)
    Whereas recognition of the inherent dignity

These typefaces can be used as body copy as they are easy to read (except Slab serif)

Sans Serif

Sans comes from French, meaning “without”. So Sans Serif means Without Serifs

  • Grotesque (1900’s) — slight contrast between strokes, open aperture gap (a and e), double story on “g” (Bw Glenn Sans, Bricolage Grotesque)
    Whereas recognition of the inherent dignity
  • Neo Grotesque (later in the 1900s) — uniform stroke, close aperture gap, single story “g” (Helvetica, Physis, Work Sans)
    Whereas recognition of the inherent dignity
  • Humanist — calligraphic influence, Roman style proportions, slight strokes contrast, slight stress, wider aperture, double story “g” (Tahoma, Gill Sans Nova, Cabin)
    Whereas recognition of the inherent dignity
  • Geometric — little to no stroke contrast, rectangles and circles, typically vertical stress (Futura, Geo)
    Whereas recognition of the inherent dignity

Sans Serifs aim high legibility at long distance and in body copy.

Script

These are based on the flow of cursive handwriting and not suitable for body copy. Can be used for display texts, headlines, titles or very short copy.

  • Formal — elegant, inspired by 17th and 18th century handwriting. Each character includes an endtail for fluidity. Exaggerated flourishes (Bickham Script Pro 3, Petit Formal Script)
    Whereas recognition of the inherent dignity
  • Casual — inspired by word brush strokes in the 20th century. More relaxed and friendly compared to formal scripts (Castinos, Damion)
    Whereas recognition of the inherent dignity

Calligraphic

Imitates brush and nib strokes, staying contemporary (Bilow, Great Vibes)
Whereas recognition of the inherent dignity

Handwriting

Informal (Summer, Kalam)
Whereas recognition of the inherent dignity

Blackletter / Gothic

High contrast between strokes, specific appearance (UnifrakturCook)
Whereas recognition of the inherent dignity

Display / Decorative

These fonts don’t really fit into any of the previous categories. Not suitable for body copy, often experimental. Tattoo and graffiti can be included in this category (Monoton)
Whereas recognition of the inherent dignity

Type Families

The idea behind type families is that characters within the family would share a common DNA with slight distinctions. Having such a wide range of typeface weights gives us the ability to create hierarchy staying minimalistic.

  • Font Weight — from ulta light to extra black
  • Style / Italic — true italic (more calligraphic) or oblique (less calligraphic, slight slant)
  • Proportion — width of a character in relation to its height; from condensed to wide. Pretty rare.

Legibility

A reader’s abitity to recognize one character from the next.

Legibility is affected by:

  • X-Height — height of the lowercase character in proportion to the capital’s. The taller the X-Height, the more legible the typeface tends to be.
  • Character Width — condensed or extended characters are harder to read.
  • Weight — very light or heavy weight are extremely hard to read.
  • Design Trades — should be more or less neutral, nothing too quirky
  • Stroke Contrast — can reduce legibility. Heavy weights and small contrast results in extra hard to read text, especially in small point size.
  • Serif — serifs are believed to enhance legibility.

Not all fonts designed to be legible. Consider:

  • Content
  • Length
  • Audience

Readability

The arrangement of words in order to make written content flow in a clear, simple, and easy to read manner.

  • Type Size — between 12 and 14 pixels for body copy
  • Type Case — UPPERCASE is hard to read, use Sentence Case for body copy
  • Line Space or Leading — rule of thumb is to have a letting value between 1.25 and 1.5 times greater than the font size
  • Line Length or Column Width. Too narrow — too much eye jumping; too wide — hard to follow. Normal amount is 45 - 70 characters per line
  • Kerning and Tracking

    Kerning — amount of space between specific pairs of characters (e.g. We)
    Tracking — space between a group of letters in a block of text. Example. Useful when working with all caps or heavier weight fonts.

  • Color and Contrast.

Choosing fonts

Step Zero: Check brand guidelines if you have any.

Long Copy / Body Copy:

  • Serif
    Personality: Traditional, formal, practical, serious. Legible.
  • Sans Serif
    Personality: Clean, minimalistic, contemporary, sleek.
  • Slab Serifs
    Personality: bold, quirky, sometimes modern.
    Use only for short body copy or display.

Display:

  • Scrips, handwritten and calligraphic
    Personality: organic, warm and a personal touch.
    Can be anything from casual to formal.
    Use only for short display as they are illegible.
  • Display (obviously)
    Actually, anything that doesn’t fit in the categories above.

Font combination

  • Easy way: use a single font family. Use different weights, sizes, and colors to create hierarchy.
  • Keep it minimal: combine only 2 to 3 different fonts.
  • You may try combining display with serif or sans serif.
  • Fit your fonts into the context of a project.
  • Combine fonts from the same Designer.
  • Try font duos

Font file types

PostScript (.pfb)

  • Developed by Adobe in the 1980s
  • 2 files needed: for printing and for rendering
  • Not cross-platform
  • 220 glyphs

TrueType (.ttf)

  • Developed by Apple and Microsoft in the early 1990s
  • Used a hinting process to generate outlines for better readability
  • 65k glyphs

OpenType (.otf)

  • Developed by Adobe and Microsoft in the late 1990s
  • Supports Unicode
  • 65k+ glyphs and multiple languages
  • Cross platform

Scalable Vector Graphic (.svg)

  • Derived from OpenType
  • Extra properties: colors, transparency
  • Supports animations

Variable Fonts (OpenType Font Variations)

  • OpenType format developed jointly by Google, Apple, Microsoft, and Adobe
  • Supports animations

FontsMeme