Back to Base
Type Lab v1.0

THE VOICEOF DESIGN

Mastering the architecture of information. A deep dive into structure, scale, and optical mechanics.

01 — Structure

The Anatomy of a Glyph.

Understanding the micro-details of a letterform is the first step to mastery. Hover over the glyph to explore its DNA.

SerifBowlTerminalStem
Rg
02 — Hierarchy

Modular Scale Calculator.

Harmonious typography is math, not magic. Use a modular scale to generate consistent type sizes.

16
48.83px / 3.05rem
The quick brown foxHeading 6
39.06px / 2.44rem
The quick brown foxHeading 5
31.25px / 1.95rem
The quick brown foxHeading 4
25px / 1.56rem
The quick brown foxHeading 3
20px / 1.25rem
The quick brown foxHeading 2
16px / 1.00rem
The quick brown foxHeading 1
03 — Laboratory

Variable Playground.

400
0px
1.5

0design

"Typography needs to be audible. Typography needs to be felt. Typography needs to be experienced."

Optical Alignment

Why mathematically centered text looks wrong. Curved letters (O, C) need to overshoot the baseline to appear the same size as flat letters (H, E).

Responsive Scale

Don't just scale down. Adjust line-height (tighter on mobile headlines) and tracking (looser on small sizes) for optimal readability.

Interactivity

Type is interface. Use weight changes and color shifts to indicate interactive states without relying solely on underlines or buttons.