Typographic Scale
An interactive table for exploring proportional relationships and octave ratios across the full typographic scale.
This table maps z0a tokens to sizes using the Perceptual Design System’s tritonic modular scale. The notation itself is scale-agnostic, and future versions of this table may allow custom base units and alternative mapping functions while keeping the same relationship and octave-ratio exploration.
Click a row to select a key and reveal its octave ratios in the Octave Ratio column.
Selected key: z0a
| Step | Octave Ratio | EM Size(4dp) | Point Size(1dp) | Pixel Size(4dp) | Name | Example |
|---|---|---|---|---|---|---|
| a10 | 10.0794rem | 121.0pt | 161.2699px | M | ||
| a9 | 8:1 | 8.0rem | 96.0pt | 128.0px | M | |
| a8 | 6.3496rem | 76.2pt | 101.5937px | M | ||
| a7 | 5.0397rem | 60.5pt | 80.6349px | M | ||
| a6 | 4:1 | 4.0rem | 48.0pt | 64.0px | M | |
| a5 | 3.1748rem | 38.1pt | 50.7968px | M | ||
| a4 | 2.5198rem | 30.2pt | 40.3175px | M | ||
| a3 | 2:1 | 2.0rem | 24.0pt | 32.0px | Heading 1 | M |
| a2 | 1.5874rem | 19.0pt | 25.3984px | Heading 2 | M | |
| a1 | 1.2599rem | 15.1pt | 20.1587px | Heading 3 | M | |
| z0a | 1:1 | 1.0rem | 12.0pt | 16.0px | Body | M |
| z1 | 0.7937rem | 9.5pt | 12.6992px | Small | M | |
| z2 | 0.63rem | 7.6pt | 10.0794px | M | ||
| z3 | 1:2 | 0.5rem | 6.0pt | 8.0px | M | |
| z4 | 0.3969rem | 4.8pt | 6.3496px | M | ||
| z5 | 0.315rem | 3.8pt | 5.0397px | M | ||
| z6 | 1:4 | 0.25rem | 3.0pt | 4.0px | M | |
| z7 | 0.1984rem | 2.4pt | 3.1748px | M | ||
| z8 | 0.1575rem | 1.9pt | 2.5198px | M | ||
| z9 | 1:8 | 0.125rem | 1.5pt | 2.0px | M | |
| z10 | 0.0992rem | 1.2pt | 1.5874px | M | ||
| z11 | 0.0787rem | 0.9pt | 1.2599px | M | ||
| z12 | 1:16 | 0.0625rem | 0.8pt | 1.0px | M |