Variable type foundry · Est. this afternoon

The shape of a letter, in motion. One font can be a whole family, if you let it move.

The idea

One font. A thousand voices.

A variable font is not a single weight. It is a continuous space of possibilities: weight, width, optical size, slant and more, all living in one file. This whole page uses five of them, and not a single image. Everything you see is a letter, set live in your browser.

The dimensions

Four axes to bend a letter

Weight
wght

Weight

From hairline to heavy black, one continuous dimension.

Width
wdth

Width

Condensed to extended, the letters breathe wider.

Optical
opsz

Optical size

Fine detail for headlines, sturdier shapes for text.

Slant
slnt

Slant

A true italic angle, dialed in by the degree.

The specimens

Five faces, moving

Scroll each specimen. The axes animate as it passes, so you read the typeface's whole range in one gesture.

Fraunces
opsz · wght · SOFT · WONK

Fraunces

A high-contrast display serif with a wonky soul.

Drawn by Undercase
Bricolage
opsz · wght

Bricolage Grotesque

A contemporary grotesque that refuses to sit still.

Drawn by Mathieu Triay
Big
wght

Big Shoulders

Condensed, industrial, built for a Chicago winter.

Drawn by Production Type
Roboto
wght · wdth · opsz · slnt · GRAD

Roboto Flex

Thirteen axes. The variable font as playground.

Drawn by Font Bureau

Your turn

Set the type yourself

Handgloves

Roboto Flex, driven live. Drag an axis.

The collection

In the drawer

  1. 01Frauncesopsz · wght · SOFT · WONKUndercase
  2. 02Bricolage Grotesqueopsz · wghtMathieu Triay
  3. 03Big ShoulderswghtProduction Type
  4. 04Roboto Flexwght · wdth · opsz · slnt · GRADFont Bureau

Set in motion.

No canvas, no video, no images. Just five open variable fonts and a handful of CSS animations. Here is exactly how it was made.