Proportion system
Typography
Nine type steps, each a half golden ratio above the last, with leading and tracking derived from the same ratio.
Typefaces
Satoshi sets headings and the wordmark. Inter sets everything else. There are no other typefaces. Satoshi ships in two weights, 500 and 700, and Inter is used at 400 and 600.
Formula
A full golden step per level is too large for an interface: from a 16 px body it jumps to 26 px and then 42 px. Half a step keeps the ratio and gives usable sizes. With the body as step 0:
Two steps up is one golden ratio, so every second step has the same relation as neighbouring Fibonacci numbers. Space between lines gets looser as type gets smaller and tightens towards solid as type grows. The leading is a multiple of the size:
At the body size this is exactly phi, 1.618. As n grows it falls towards 1. Large type is also tracked in slightly, and small type out:
89 is a Fibonacci number, and it keeps the largest display size at about minus 0.036 em.
The scale
Each row is set in its real size, leading and tracking.
Stars at 21 lux
Stars at 21 lux
Stars at 21 lux
Stars at 21 lux
Stars at 21 lux
Stars at 21 lux
Stars at 21 lux
Stars at 21 lux
Stars at 21 lux
Computed values
| n | Raw | Size | Leading | Line box | Tracking |
|---|---|---|---|---|---|
| -2 | 9.889 | 10 | 2 | 20.0 | 0.0043em |
| -1 | 12.578 | 13 | 1.786 | 23.2 | 0.0024em |
| 0 | 16.000 | 16 | 1.618 | 25.9 | 0.0000em |
| 1 | 20.352 | 20 | 1.486 | 29.7 | -0.0031em |
| 2 | 25.889 | 26 | 1.382 | 35.9 | -0.0069em |
| 3 | 32.931 | 33 | 1.3 | 42.9 | -0.0119em |
| 4 | 41.889 | 42 | 1.236 | 51.9 | -0.0182em |
| 5 | 53.283 | 53 | 1.186 | 62.9 | -0.0262em |
| 6 | 67.777 | 68 | 1.146 | 77.9 | -0.0364em |
Rules
- Use only these steps. Body copy is step 0. Do not pick an in-between size.
- Body is Inter, headings are Satoshi. Steps 2 and up are headings and use Satoshi 700. Steps below 2 are Inter.
- Leading and tracking come with the step. Never set them independently; use the pair in the token.
- A heading is at least two steps above the text it introduces. That keeps the golden relation between heading and body.
- Measure is 76 characters. That is the upper end of comfortable reading. Cap prose with the measure token, in characters, never in pixels.
- Respect platform text scaling. Sizes are multiples of the 16 px unit and follow the user's setting, in rem on the web and sp in Flutter. Layouts must survive 200 percent.
Usage
<!-- Tailwind: size, leading and tracking come together --><h2 class="font-heading text-s4">Tonight’s sky</h2><p class="text-s0">Cloud cover is 12 percent after midnight.</p>/* the equivalent plain CSS */h2 { font-size: var(--text-s4); line-height: var(--text-s4--line-height); letter-spacing: var(--text-s4--letter-spacing);}@theme static { --text-s-2: calc(var(--u) * 0.625); --text-s-2--line-height: 2; --text-s-2--letter-spacing: 0.0043em; --text-s-1: calc(var(--u) * 0.8125); --text-s-1--line-height: 1.786; --text-s-1--letter-spacing: 0.0024em; --text-s0: calc(var(--u) * 1); --text-s0--line-height: 1.618; --text-s0--letter-spacing: 0em; --text-s1: calc(var(--u) * 1.25); --text-s1--line-height: 1.486; --text-s1--letter-spacing: -0.0031em; --text-s2: calc(var(--u) * 1.625); --text-s2--line-height: 1.382; --text-s2--letter-spacing: -0.0069em; --text-s3: calc(var(--u) * 2.0625); --text-s3--line-height: 1.3; --text-s3--letter-spacing: -0.0119em; --text-s4: calc(var(--u) * 2.625); --text-s4--line-height: 1.236; --text-s4--letter-spacing: -0.0182em; --text-s5: calc(var(--u) * 3.3125); --text-s5--line-height: 1.186; --text-s5--letter-spacing: -0.0262em; --text-s6: calc(var(--u) * 4.25); --text-s6--line-height: 1.146; --text-s6--letter-spacing: -0.0364em;}import 'dart:math' as math;import 'package:flutter/painting.dart';/// Astr type scale: golden-ratio half-steps from a 16 sp body.////// For step n (-2 to 6):////// size(n) = round(16 * phi^(n/2))/// leading(n) = 1 + phi^-(1 + n/2) (a multiple of the size)/// tracking(n) = -(phi^(n/2) - 1) / 89 (em)////// Two steps are one golden ratio. The constants mirror the `--text-s*`/// values in `scale.css`/// (`--text-s-2` is [sNeg2], `--text-s-1` is [sNeg1]). Flutter measures letter spacing in logical pixels,/// so [style] multiplies the tracking by the size.////// Satoshi is for headings and the wordmark (steps 2 to 6), Inter for body/// text (steps -2 to 1).abstract final class AstrType { static const double phi = 1.618033988749895; static const double sNeg2 = 10; static const double sNeg1 = 13; static const double s0 = 16; static const double s1 = 20; static const double s2 = 26; static const double s3 = 33; static const double s4 = 42; static const double s5 = 53; static const double s6 = 68; /// Line height as a multiple of the size, indexed by `n + 2`. static const List<double> leading = <double>[ 2, 1.786, 1.618, 1.486, 1.382, 1.3, 1.236, 1.186, 1.146, // ]; /// Tracking in em, indexed by `n + 2`. static const List<double> tracking = <double>[ 0.0043, 0.0024, 0, -0.0031, -0.0069, -0.0119, -0.0182, -0.0262, -0.0364, // ]; /// Sizes in ascending order, indexed by `n + 2`. static const List<double> sizes = <double>[ sNeg2, sNeg1, s0, s1, s2, s3, s4, s5, s6, // ]; /// The exact formulas, for checking the constants. static double sizeOf(int n) => (16 * math.pow(phi, n / 2)).roundToDouble(); static double leadingOf(int n) => (1 + math.pow(phi, -(1 + n / 2))).toDouble(); static double trackingOf(int n) => (-(math.pow(phi, n / 2) - 1) / 89).toDouble(); /// Text style for step [n]. Steps 2 and up default to Satoshi. static TextStyle style(int n, {String? fontFamily}) { final int i = n + 2; final double size = sizes[i]; return TextStyle( fontFamily: fontFamily ?? (n >= 2 ? 'Satoshi' : 'Inter'), fontSize: size, height: leading[i], letterSpacing: size * tracking[i], ); }}