Mobile Type

How the type scale adapts on touch devices.
Desktop scale
1.067 — Minor Second
1.125 — Major Second
1.200 — Minor Third
1.250 — Major Third
1.333 — Perfect Fourth
1.414 — Augmented Fourth
1.500 — Perfect Fifth
1.618 — Golden Ratio
Adjust the scale on touch devices. Off = mobile matches desktop exactly.
Body floors to 16px and the whole ladder lifts with it, keeping the full desktop ratio. Nothing is pinned — the display tier stays large and dramatic.
Astryx inputs already jump to 16px under @media (pointer: coarse) to block mobile zoom-on-focus. Flooring body to match keeps text and inputs on one scale.
Desktop
Display 142
Astryx
Display 235
Astryx
Display 329
Astryx
Heading 124
The quick brown fox
Heading 220
The quick brown fox
Heading 317
The quick brown fox
Heading 414
The quick brown fox
Heading 512
The quick brown fox
Heading 610
The quick brown fox
Body14
The quick brown fox jumps over the lazy dog
Large17
The quick brown fox jumps over the lazy dog
Label14
The quick brown fox jumps over the lazy dog
Supporting12
The quick brown fox jumps over the lazy dog
Code14
const theme = defineTheme()
MobileBase floored 14 → 16px
size = round(16 × 1.2^step)
Display 148 +6
Astryx
Display 240 +5
Astryx
Display 333 +4
Astryx
Heading 128 +4
The quick brown fox
Heading 223 +3
The quick brown fox
Heading 319 +2
The quick brown fox
Heading 416 +2
The quick brown fox
Heading 513 +1
The quick brown fox
Heading 611 +1
The quick brown fox
Body16 +2
The quick brown fox jumps over the lazy dog
Large19 +2
The quick brown fox jumps over the lazy dog
Label16 +2
The quick brown fox jumps over the lazy dog
Supporting13 +1
The quick brown fox jumps over the lazy dog
Code16 +2
const theme = defineTheme()
Real components
Desktop
Newv2.4 · Design system
ASTRYX · TYPOGRAPHYScaleType that scales

Design at every scale

One type scale, tuned for touch.
Astryx gives your team a shared visual language with flexible tokens, accessible components, and a type scale that responds to every device — from a dense desktop table to a phone in one hand.

What's included

Capability-based mobile adaptation
Readable 16px input floor
Zero desktop change
Ada LovelaceMaintainer
npm install @astryxdesign/core
Mobile
Newv2.4 · Design system
ASTRYX · TYPOGRAPHYScaleType that scales

Design at every scale

One type scale, tuned for touch.
Astryx gives your team a shared visual language with flexible tokens, accessible components, and a type scale that responds to every device — from a dense desktop table to a phone in one hand.

What's included

Capability-based mobile adaptation
Readable 16px input floor
Zero desktop change
Ada LovelaceMaintainer
npm install @astryxdesign/core