Responsive typography
Responsive typography
Today the title scale snaps between three fixed values — mobile, tablet (≥ 768), desktop (≥ 1200). This POC replaces those hard cuts with a singleclamp() curve that flows continuously with the viewport, while pinning the designed endpoints so nothing shifts at the anchors. Resize the window to feel the difference; toggle the brand in the nav to see the other ramp.
Old vs new — titles
Left: the current .tng-text-title, which jumps at 768 and 1200. Right: .tng-responsive-title, the same tier, fluid. Watch the left column step and the right column glide.
Current (snaps)
Aa
The new GR Yaris
Engineered for the road ahead
Specifications and pricing
Responsive (fluid)
Aa
The new GR Yaris
Engineered for the road ahead
Specifications and pricing
is-4 (h1):font-size: clamp(3.8rem, 2.982rem + 2.182vw, 5.6rem);Floors and ceilings reference the existing tokens, so the extremes stay pixel-identical to today; only the middle interpolates.
The scales don't fit a common ramp
Both brands are bespoke, hand-tuned ramps — irregular step ratios, ten tiers, and they disagree on both values and on where they break (Toyota steps up mostly at 768; Lexus stays flat until 1200). No single off-the-shelf modular scale reproduces them. What does fit is a per-tier clamp() pinned to each designed endpoint.
Toyota — title ramp (px)
| tier | mobile | tablet | desktop | fluid range |
|---|---|---|---|---|
| is-1 | 96 | 176 | 176 | 96 → 176 |
| is-2 | 64 | 128 | 128 | 64 → 128 |
| is-3 | 40 | 64 | 64 | 40 → 64 |
| is-4 | 38 | 48 | 56 | 38 → 56 |
| is-5 | 32 | 40 | 40 | 32 → 40 |
| is-6 | 28 | 34 | 34 | 28 → 34 |
| is-7 | 24 | 24 | 28 | 24 → 28 |
| is-8 | 20 | 20 | 20 | 20 (flat) |
| is-9 | 18 | 18 | 18 | 18 (flat) |
| is-10 | 16 | 16 | 16 | 16 (flat) |
Lexus — title ramp (px)
| tier | mobile | tablet | desktop | fluid range |
|---|---|---|---|---|
| is-1 | 128 | 128 | 256 | 128 → 256 |
| is-2 | 96 | 96 | 160 | 96 → 160 |
| is-3 | 40 | 40 | 80 | 40 → 80 |
| is-4 | 32 | 32 | 56 | 32 → 56 |
| is-5 | 28 | 28 | 44 | 28 → 44 |
| is-6 | 24 | 24 | 32 | 24 → 32 |
| is-7 | 22 | 22 | 28 | 22 → 28 |
| is-8 | 20 | 20 | 24 | 20 → 24 |
| is-9 | 14 | 14 | 16 | 14 → 16 |
| is-10 | 12 | 12 | 14 | 12 → 14 |
Fewer variants? — a proposal
Collapsing three breakpoint columns into one curve makes near-duplicate tiers visible. A conservative merge — consecutive tiers whose size step is under 15% — trims only a few; the bigger question, do we need ten?, is a design call, not something a threshold should make. Illustrative, not a decision — designers own the final ramp.
Toyota: 10 tiers → 7 proposed — is-1, is-2, [is-3 + is-4], is-5, is-6, is-7, [is-8 + is-9 + is-10]
Lexus: 10 tiers → 8 proposed — is-1, is-2, is-3, is-4, is-5, [is-6 + is-7], is-8, [is-9 + is-10]
Body — gentle, not aggressive
Body is fixed today. Making it fluid is a new behaviour, so it gets a small range (≈ 13% lift) with arem floor — so browser zoom and a user's font-size preference still scale it. Display type flexes a lot; body flexes a little.
Current (fixed)
Body 5 — the quick brown fox.
Body 6 — the quick brown fox jumps over the lazy dog.
Responsive (gentle)
Body 5 — the quick brown fox.
Body 6 — the quick brown fox jumps over the lazy dog.
Beyond the viewport — container-aware
clamp() on vw is still tied to theviewport. The same heading placed in a narrow sidebar and a wide main column renders at the same size — even though one has far less room. With cqi (container-query units) type responds to itscontainer instead. Below, one class (.tng-cq-title) in three different container widths — at a single viewport:
Narrow
Medium column
A full-width hero container
This is the direction, not the drop-in: cqi type needs acontainer-type context on every consuming layout, so the viewport-clamp() classes above are the adoptable step, and this is where CDS is headed.
Implications
- QA / pixel tests. Snapshots pinned to breakpoint widths (768, 1200) assume discrete values. Fluid type has no plateau there — the size at 768 is whatever the curve says. Tests should assert theendpoints (≤ 375 and ≥ 1200, which are unchanged) and sample a midpoint, not treat breakpoints as pixel-exact.
- Mid-range drift. The endpoints match today exactly; the tablet range differs. Lexus (flat until 1200 now) grows earlier; Toyota (near-desktop at 768 now) is smaller mid-range. That drift is the point — no hard snap — but it's what pixel tests will flag first.
- Accessibility. Because the clamp keeps a
remterm, type still responds to a user's font-size preference — something the current px-per-breakpoint scale doesn't do. - Fewer, calmer variants. One curve per tier replaces three breakpoint cells, and the overlap analysis opens the door to collapsing the ten title tiers.