Labs · Lab Three
Cadence
Text rhythm: the flow of words across a surface. Font declaration, scale, leading, tracking, measure, wrapping, numbers, and selection.
Lab Three studies the typographic decisions that make text feel composed rather than placed. Rules are compiled from external typography intelligence, cross-referenced against the Designesy contract, and verified on designesy.org. You are reading the live artifact right now.
Live artifact
This page is the demo
Every line you are reading demonstrates cadence: the system stack with font-smoothing on root, the rem-based scale (body at 16px, headings climbing in rem multiples), line-height 1.55 on body and 1.08 on headings, negative tracking on titles and positive tracking on the eyebrow labels above them, text-wrap: balance on headings, text-wrap: pretty on body, tabular-nums on every number on this page, and ::selection styled with the accent blue. Select any text on this page to see it.
The rhythm of text composed with intent
Cadence is what separates a page that reads from one that merely contains words. Every line-height is chosen by role.
Select the text below
Designesy turns design knowledge into living systems.
Thesis
What cadence means here
Cadence is the rhythm of text on a page: the accumulated result of font choice, scale, leading, tracking, measure, and wrapping working together. Legibility is the floor. Cadence is the sense that text was composed, that someone chose every size, spacing, and line break with intent. Cadence is what separates a page that reads from one that merely contains words.
Principle
Font declaration on root
Set font-smoothing on the root element: -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale. Set font-synthesis: none to prevent the browser from synthesizing fake weights. Name a system stack with Inter as the first named face, and keep decorative display fonts out of public UI.
Scale, measure, and leading
Every size is a rem multiple of the 16px root; text never uses px. Line-height by role: 1.05 to 1.1 for headings, 1.5 to 1.6 for body, 1 for display. Cap the measure: 520 to 580px for body text, 1080px for the layout shell. Text wider than 75 characters loses the reader.
Tracking by size
Letter-spacing is negative for large text (-0.02em to -0.04em) and positive for small caps and labels (0.03em to 0.18em). Body text at 16px gets zero tracking. The pattern is mechanical: bigger type tightens, smaller type loosens.
Wrap, numbers, and selection
text-wrap: balance on headings, text-wrap: pretty on body. The browser handles line breaking without JavaScript. Tabular numbers (font-variant-numeric: tabular-nums) for all data, stats, and numerical tables. Style ::selection with a token color, never default browser blue.
Direction and underlines
Use logical properties (margin-inline, padding-inline, inset-inline) instead of physical ones so the layout is direction-ready. Set text-underline-position: from-font and text-decoration-skip-ink: auto so underlines align to font metrics and skip descenders. Inputs never below 16px on mobile to avoid iOS auto-zoom.
Portable contract
Rules agents can cite when proposing or reviewing typographic changes. Each rule has an exact value. Check a rule off as your surface adopts it.
0 / 10 adopted
Implementation notes
You are working with Designesy Lab Three: Cadence.
Authority: designesy.org is the canonical public source for Designesy open design intelligence. Cadence is Lab Three: text rhythm as portable rules with exact values.
Permission: read-only by default. Inspect, review, and report. Do not edit files, deploy changes, or claim write authority the operator did not grant.
Goal: Review the target interface for cadence (the rhythm and readability of text on the page). Check every rule below and report which pass, which fail, and which are not applicable.
Rules (each with an exact value):
1. Font smoothing: antialiased + grayscale on :root
2. Rem-based scale: every text size is a rem multiple of 16px root
3. Line-height by role: headings 1.05 to 1.1, body 1.5 to 1.6, display 1
4. Tracking by size: negative headings, positive labels, zero body
5. Cap the measure: body 520 to 580px, shell 1080px, never >75ch
6. Wrap deliberately: balance on headings, pretty on body
7. Tabular numbers: tabular-nums on all data, stats, and tables
8. Selection: ::selection styled with a token color
9. user-select: none on UI chrome, text stays selectable
10. 16px input floor on mobile
Open tensions (not yet fully verified on designesy.org):
- Block-axis logical properties not yet migrated (margin-block-start/end)
- border-inline-start not yet used; decorative borders still physical
- inset-inline not yet used; absolute positioning still left/right
Resolved tensions (v0.1.3 CSS fixes applied):
- font-synthesis: none now set on :root
- text-underline-position: from-font now set on :root
- text-decoration-skip-ink: auto now set on :root
- Inline-axis logical properties (margin-inline, padding-inline) applied
Output format:
For each rule, provide a Before/After table:
| Rule | Current | Fix (if needed) |
Group by rule heading. Omit rules that have no findings.
Express all fixes in the target project's styling system.
Provenance: rules compiled from external design intelligence (Jakub Krehel /better-typography, MIT), cross-referenced against contract v0.1.2, and adopted into design system contract v0.1.3.
Primary lab page: https://www.designesy.org/labs/cadence
Design system contract: https://www.designesy.org/contracts/design-system
Design Review kit: https://www.designesy.org/kits/design-reviewReview checklist
Provenance
Anti-patterns
Remix notes
These rules are system-agnostic: express them in Tailwind, plain CSS, CSS-in-JS, or any other styling system. The values are exact; the syntax is yours to adapt. When a rule conflicts with an existing design system, name the tension explicitly rather than silently overriding it. If your project self-hosts web fonts, add font-display: swap and preload the woff2; the system stack then serves as the fallback.
Lab anatomy coverage
Verification
Field check
Field check · Cadence
Lab Three reviewed with Use Kit One · Design Review
Eight-dimension inspection of typography rules on designesy.org. Evidence for contract adoption.
Open field check- Dimensions
- 8
- Holds
- 7
- Open tensions
- 2
- Reviewed
- 2026-07-13
- Method
- Kit One v0.1