Web Type

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

The evolution of digital technology

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

Disadvantages of variable fonts

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');

  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 ,

Standard (registered) axes

syntax description Non-VF equivalent
wght weight font-weight
wdth width font-stretch
opsz optical sizing font-optical-sizing
ital italicization font-style: italic
slnt slant font-style: oblique