Geometric Harmony: The Modular Scale

A design system is only as strong as its underlying logic. In the Espalier system, we reject the use of "magic numbers" for font sizes. Instead, we utilize a Modular Scale—a series of values derived from a single base number and a consistent mathematical ratio.

By combining this scale with our fluid scaling curve, we ensure that the relationship between a caption and a headline remains proportional, whether viewed on a mobile device or a high-density desktop monitor.

The Core Ratio: The Major Third ( $1.25$ )

Espalier is built on a Major Third ratio ( $1.25$ ). Starting from our base size of $1 rem$ ( $16 px$ ), each subsequent step is calculated by multiplying the previous value by $1.25$ .

This specific ratio was selected because it provides a "balanced" hierarchy—distinct enough to guide a user's eye through a SaaS interface without the aggressive, "marketing-heavy" contrast of larger ratios like the Golden Ratio ( $1.618$ ).

Token	Geometric Step	Intentional Role
`--esp-type-tiny`	$Base / {1.25}^{2}$	Fine print, metadata, and captions.
`--esp-type-small`	$Base / 1.25$	Secondary UI labels and supporting text.
`--esp-type-normal`	$1 rem$	The Anchor: Primary body copy.
`--esp-type-medium`	$Base \times 1.25$	Section titles and subheaders.
`--esp-type-huge`	$Base \times {1.25}^{4}$	Primary H1 display headings.

Vertical Rhythm: Dynamic Leading

Typography is not just about size; it is about the "breathable" space between lines. Readability studies indicate that human eyes require different Line Heights (Leading) depending on the size of the text:

Body Text (Small/Normal): Requires "loose" leading (typically $1.4 \times$ to $1.6 \times$ the font size) to prevent lines from blurring together during long-form reading.
Display Text (Big/Huge): Requires "tight" leading (typically $1.1 \times$ to $1.2 \times$ ). Because large letters have more "visual weight," standard line heights create gaps that look unintentional and broken.

Tracking: Perceptual Spacing

As text scales upward, its perceived Letter Spacing (Tracking) must also be adjusted.

Headings: Large type often looks too "airy." We apply a subtle negative tracking (e.g., -0.02em) to bind the characters together for impact.
Captions: Very small type can suffer from "ink bleed" (or pixel blurring). We apply a subtle positive tracking (e.g., 0.05em) to ensure character clarity.

Challenge the Assumption: "Static Scales are Predictable"

A common assumption in early design systems was that fixed pixel sizes ( $14 px$ , $18 px$ , $24 px$ ) were safer because they were predictable. We challenge this. Static scales break the visual hierarchy the moment a viewport shrinks. A $48 px$ headline that looks great on desktop becomes a usability disaster on mobile.

For a defensible architecture, use the Espalier Trellis: a modular scale locked within a fluid curve.

Implementation in Lit Elements

In our component architecture, we avoid hard-coding these variables. Instead, components consume "Role Tokens."

/* Component Implementation */
:host {
  font-size: var(--esp-type-normal);
  line-height: 1.5; /* Loose leading for body copy */
}

h1 {
  font-size: var(--esp-type-huge);
  line-height: 1.1; /* Tight leading for display type */
  letter-spacing: -0.02em; /* Tight tracking */
}