Letterforms over time

“By writing directly into a mechanical form rather than a manuscript (as we’re doing right now) the writer would be working closer to the nature of the multiplied result, and through an increasing awareness and gradual mastery of the form’s new limitations and possibilities *the writing itself would evolve;* the shorter the distance between the raw material of words and their processed output, the more entwined the content and form from the outset. This line of thinking was more famously expounded by Benjamin in his 1936 essay ‘The Work of Art in the Age of Mechanical Reproduction,’ which more broadly argues that an authentic, pertinent art is the result of engagement with the latest technological innovations.” — Dexter Sinister: Letter & Spirit

A Brief history

The evolving concept of a type family

• 1500s Venetian type paired Roman & Italic letterforms styles — Aldus Manutius is known for his work in typography
• 1900s Bold weight is paired for emphasis
• Superfamilies designed for specific purposes, i.e. Cheltenham, 1903
• Series designed as variations on a theme, i.e. Univers, 1957
• Concept of Metafont, 1982
• The Stroke, 1985 and the Noordzij Cube and a digitized demo is a theoretical model that indicated how a designer could think about shapes, the degrees of change: a design space.

The evolution of digital technology

• Bi Sheng in China invents “movable type” in 1040 from a material similar to porcelain. Wang Zhen is credited with the introduction of wooden movable type, a more durable option, around 1297.
• Johannes Gutenberg invents “movable type” pieces from lead, tin, and antimony, with the Gutenberg Bible in 1398.
• Hot Metal Typesetting
• Photo typesetting (Cold)
• Typewriters
  • Typewriter/Typefaces
  • IBM Selectric had a ball that could be interchanged to modify the font on a typewriter.
• Bitmap Fonts
  • Digi Grotesk, 1968
  • Susan Kare, fonts and icons
  • Zuzana Licko
• Vector Fonts
  • Adobe Postscript, 1985 (bezier curves)
  • Apple Truetype, late 1980s (quadratic curves)
  • Matthew Carter’s Georgia, 1993 and Verdana, 1996
• Multiple Master, 1991
  • Adobe Multiple Masters. Multiple Master
  • Multiple Master Specs
• Open Type, 1997
  • Microsoft’s Open Type format allowed for variations
• SVG and Color font support
  • Unicode Emoji, 2010—
• Variable Fonts: Open Type Format, v.1.8, September 14, 2016
  • Read the specs

Variable Fonts

A single font file contains many different variations of a typeface, instead of having a separate font file for every width, weight, or style. This format was developed in collaboration by Adobe, Apple, Google, and Microsoft.

Advantages of variable fonts

• Font loading
  • HTTP requests
  • KB of data (depends on character set and design space)
• Purer expression of type design process
• Options

Disadvantages of variable fonts

• Lack of support
• Souless clone armies

Variable Fonts and CSS

The properties of variable fonts can be set by CSS, as with any other CSS property. You can serve a variable font in the same way as any other typeface; although currently there are still few commercially available variable fonts.

@font-face {
  font-family: 'Magmatic';
  src: url('../fonts/MagmaticVF.ttf') format('truetype-variations');
}

p{
  font-family: 'Magmatic', sans-serif;
  font-variation-settings: 'wght' 200,'wdth' 600; 👈
}

The font-variation-settings is the CSS propety for variable fonts. - Values for multiple axes, are separated by ,

• Each axes is in in between '', with the value after it
• Standard axes for variation are in lowercase, custom axes are in uppercase.

Standard (registered) axes

• Read a caveat for italics