--- name: Typography & Spacing Scale type: source status: anchor depends_on: [foundation/typography] propagates_to: [aleris-tokens.css, aleris-design-governance.md] open_questions: [OQ-09, OQ-10] last_verified: 2026-03-21 --- # Typography & Spacing Scale — Aleris Design Tokens ## Status Conceptual framework with concrete starting values. Ready to test in Figma and validate against existing Aleris interfaces. --- ## The Problem With the Current Scale The existing Figma type scale (14, 16, 18, 20, 22, 24, 32, 40) is too linear in the middle. The steps 18→20→22→24 are all within 6px of each other — differences that are barely perceptible without direct comparison. h3 at 20px and body at 18px have only 2px separation, which is not a functional hierarchy. A type scale needs visible contrast between levels to create hierarchy that works at scanning speed — not just when you hold two lines next to each other. --- ## Modular Scale as Shared Foundation A modular scale uses a base value and a ratio to generate a sequence of harmonious proportions. The key insight (Tim Brown, Robert Bringhurst): the same scale can drive typography, spacing, and layout — creating coherence not through identical values but through shared mathematical relationships. The principle: one ratio, applied to a base value, generates every measurement in the system. Change the base, everything scales proportionally. Change the ratio, the entire character of the system shifts. ### Choosing the Ratio Golden ratio (1.618) creates dramatic jumps — too aggressive for a healthcare UI where hierarchy should be clear but calm. The top of the scale explodes past what Aleris interfaces need. **Perfect fifth (1.5)** is the recommendation. It produces visible hierarchy without drama. The intervals feel deliberate, not theatrical. This matches Aleris's brand character: precision, professionalism, warmth — not impact or spectacle. ### Choosing the Base 18px body text. This is the current body size, it works well for healthcare readability, and it aligns with accessibility best practice (minimum 16px, 18px preferred for sustained reading). --- ## The Type Scale Base: 18px. Ratio: 1.5 (perfect fifth). Values rounded to nearest pixel. ``` Token Computed Rounded Usage ───────────────────────────────────────────────────── type.xs 12.0 12 Captions, metadata, timestamps type.sm 13.5 14 Labels, helper text, small UI elements type.body 18.0 18 Body text, default type.h3 27.0 27 Section headings type.h2 40.5 40 Page-level headings type.h1 60.75 60 Primary titles (communicative surfaces) ``` Scale logic: - 18 ÷ 1.5 = 12 (xs) - 18 ÷ 1.33 = ~14 (sm — half-step, see note below) - 18 × 1 = 18 (body) - 18 × 1.5 = 27 (h3) - 18 × 1.5² = 40.5 → 40 (h2) - 18 × 1.5³ = 60.75 → 60 (h1) ### Notes on the Scale **No h4.** The scale produces body→h3→h2→h1 with sufficient contrast at each step. A fourth heading level exists only if the math generates it — and Aleris interfaces don't need it. Three heading levels plus body is enough for both communicative and instrumental surfaces. **sm is a half-step.** 14px sits between xs (12) and body (18) outside the pure 1.5 ratio. This is intentional — labels and helper text need a size that's clearly smaller than body but not as reduced as captions. Pragmatism over mathematical purity. **h1 at 60px is for communicative surfaces.** On instrumental surfaces, h1 may not be used at all — h2 (40px) likely serves as the largest size. The surface temperature system determines which part of the type scale is in play, not just the individual token values. **Body text weight matters as much as size.** At 18px, the difference between regular (400) and medium (500) weight is a more effective hierarchy tool than the difference between 18px and 20px. Consider weight as part of the composite type tokens, not just size. --- ## The Spacing Scale Same base (18px expressed as spacing unit), same ratio (1.5), aligned to 4px grid. ``` Token Computed Aligned (4px) Usage ────────────────────────────────────────────────────────── space.3xs 4 4 Minimum gap, icon padding space.2xs 8 8 Tight element spacing, inline gaps space.xs 12 12 Related element spacing space.sm 16 16 Default component padding space.md 24 24 Section spacing within components space.lg 36 36 Between components space.xl 48 48 Between sections space.2xl 72 72 Major section breaks space.3xl 96 96 Page-level spacing (communicative surfaces) ``` Scale logic: - Core progression follows 1.5 ratio: 8 → 12 → 18 → 27 → 40 → 60 - Aligned to 4px grid: 8 → 12 → 16 → 24 → 36 → 48 → 72 → 96 - 4px added at bottom as minimum unit ### How Typography and Spacing Relate The scales share a ratio, not identical values. This creates proportional harmony: the jump from body to h3 (1.5×) has the same *feel* as the jump from space.sm to space.md (16→24, also 1.5×). The eye perceives these as belonging to the same system even though the absolute values differ. Practical rule: **spacing above a heading should be proportional to the heading's visual weight.** A h2 (40px) gets space.lg (36px) above it. A h3 (27px) gets space.md (24px) above it. The spacing grows with the type, because both follow the same ratio. --- ## Relationship to Surface Temperature The type and spacing scales provide the raw material. Surface temperature determines how that material is used: **Communicative surfaces** use the full range of the type scale (including h1 at 60px) and the generous end of the spacing scale (space.xl, space.2xl, space.3xl). Typography breathes. Spacing is generous. The scale's proportions create visual rhythm. **Instrumental surfaces** use a compressed range of the type scale (body through h2, rarely h1) and the tighter end of the spacing scale (space.2xs through space.lg). Information density increases. The same proportional relationships hold, but at reduced absolute values. This means surface temperature can be partially expressed through which *slice* of the shared scale is in active use — not through separate scales. --- ## Composite Type Tokens Individual size tokens are primitives. In practice, text styles are composites: ``` type.body: font-family: 'Museo Sans', Arial, sans-serif font-size: 18px font-weight: 400 line-height: 1.5 (27px — note: this is the next step on the type scale) letter-spacing: 0 type.h3: font-family: 'Museo Sans', Arial, sans-serif font-size: 27px font-weight: 600 line-height: 1.33 (36px — aligns with space.lg) letter-spacing: -0.01em type.h2: font-family: 'Museo Sans', Arial, sans-serif font-size: 40px font-weight: 600 line-height: 1.2 (48px — aligns with space.xl) letter-spacing: -0.015em ``` Note how line-heights at each level map to values in the spacing scale. Body line-height (27px) = the h3 font size. h3 line-height (36px) = space.lg. h2 line-height (48px) = space.xl. This is the modular scale doing its job — the numbers resonate across dimensions. --- ## Implementation Path 1. **Set up in Figma as variables.** Primitive number tokens first (the raw scale values), then composite type style tokens that reference them, then spacing tokens. 2. **Test against three real screens.** Pick one communicative (e.g. a patient guide page), one instrumental (e.g. a booking interface), and one transitional (e.g. MyAleris where both modes appear). Validate that the scale creates sufficient hierarchy in each context. 3. **Export as JSON/CSS custom properties.** The same token file should work as Figma variables, Tailwind config values, and Claude Code context. One source, multiple outputs. 4. **Document why, not just what.** Each token should carry its rationale: "space.md is 24px because it's the 1.5× step above the component padding base (16px), aligned to 4px grid." --- ## Design Decision Record **Decision:** Perfect fifth (1.5) ratio with 18px base for both typography and spacing. **Why:** Golden ratio is too aggressive for healthcare UI — creates unnecessarily large display sizes and dramatic jumps. Perfect fifth gives clear hierarchy with calm proportions. 18px body text is the current standard and meets accessibility requirements. **Decision:** No h4 heading level. **Why:** Three heading levels (h3, h2, h1) plus body text cover all actual use cases in Aleris interfaces. A fourth level would exist only because the math produces it, not because the design needs it. **Decision:** Spacing scale aligned to 4px grid rather than pure 1.5× progression. **Why:** Sub-pixel rounding creates visual inconsistency. 4px grid ensures crisp rendering across devices and aligns with industry standard (8px grid with 4px half-step). The proportional relationship is preserved even when individual values are rounded. **Decision:** Line-heights mapped to spacing scale values. **Why:** When line-height at one type level equals a value that appears elsewhere in the system (as spacing, as another type size), the layout develops an internal resonance. This is the practical payoff of a modular scale — measurements echo each other across dimensions. **Decision:** Surface temperature expressed partly through which slice of the shared scale is active. **Why:** Avoids maintaining two separate scales. The underlying mathematics stays the same; communicative surfaces use the full range while instrumental surfaces use a compressed range. Consistency in the system, variation in application. --- ## Open Questions - Does Museo Sans render well at 27px, or does it need optical adjustment? Some fonts have sizes where hinting produces suboptimal results. Test on actual screens. - Should the spacing scale also apply to the 8px grid gutters, or should grid be an independent system? (Hypothesis: grid gutters should use spacing tokens, not independent values.) - How does the scale behave responsively? A 1.5 ratio at mobile viewports may need to compress to 1.33 (perfect fourth) to avoid oversized headings on small screens. - Is 60px h1 actually needed, or does h2 at 40px serve as the practical ceiling? If 60px is only used on campaign landing pages, it might belong outside the core token set. ## References - Tim Brown, "More Meaningful Typography" (A List Apart, 2011) — foundational article on modular scales for web - Robert Bringhurst, *The Elements of Typographic Style* — the typographic tradition modular scales draw from - modularscale.com — Tim Brown & Scott Kellum's calculator tool - CodyHouse spacing system — example of unified type+spacing using shared em-based unit - Nathan Curtis / EightShapes — "start with color and type, but expand to cover the myriad concerns of a design language"