Skip to content
Bernardo Fernandez

EXPERIMENT · 2025

Typeset.

An interactive typography playground

Context

Typography decisions are usually made in static mockups, sampled at one size and one weight. The relationships that actually matter — how a fluid scale behaves at real widths, how two typefaces pair at paragraph sizes — are invisible until implementation, when changing them is most expensive.

The problem

Rendering dozens of live type samples in the DOM at interactive framerates is a performance problem; sharing a finding without accounts or storage is a product problem.

My role

Concept, design and development.

What made it technically interesting

Many live text samples updating per frame thrash layout in the DOM — the previews had to stay at 60fps while still using real font files.

A fluid scale is a function of viewport width; showing it as one number hides the curve that actually decides whether it works.

The tool needed to be shareable with zero backend, zero accounts and zero storage.

Decisions

Canvas over DOM for the previews
Dozens of live samples updating per frame thrash layout in the DOM. Canvas rendering keeps interaction at 60fps while the text still comes from real font files.
The URL is the save button
The entire state serializes into the query string — sharing a finding costs nothing and the tool needs no accounts or backend.

Result

  • A tool I use on every project where type is part of the interface.
  • A public demonstration that interaction design and typography are engineering disciplines, not decoration.

What I learned

Build the tool your judgment needs. Nothing teaches a craft faster than making it measurable.

Have a project in this space?

Let's talk about it