A living variable typeface

Graphem.

One typeface. Every voice. Scroll, and the letters bend along five axes, live, driven entirely by CSS.

scroll to bend the letters ↓

A typeface used to be a fixed thing. Graphem is a range, a single file that can be a whisper or a shout, a machine or a hand.

wght

Weight

From hairline to black. The workhorse axis, and the loudest.

Weight

300min → max on scroll1000

slnt

A real slant cut into the design, not a synthetic italic.

Slant

0°min → max on scroll−15°

CASL

Linear to casual: the letters loosen their collar and warm up.

Casual

linearmin → max on scrollcasual

MONO

Proportional to monospaced, morphing live along one axis.

Mono

propmin → max on scrollmono

CRSV

Roman to cursive: single-storey a and g swap in as it climbs.

Cursive

romanmin → max on scrollcursive

Pangram · every letter, once

The quick brown fox jumps over the lazy dog.

wght

a320

a460

a600

a760

a900

the whole voice

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789&@?!.,;:

The making of

Built with one font and no pictures.