# Designesy — /labs/cadence Canonical page: https://www.designesy.org/labs/cadence --- ## 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 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 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-review ``` ## Review 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. - [Lab One · Poise — Restrained interaction: motion, sound, reduced motion](https://www.designesy.org/labs/poise) - [Lab Two · Takt — Interface feel: radii, press scale, hit areas, stagger](https://www.designesy.org/labs/takt) - [Design system contract — Tokens, interaction, takt, cadence, acoustics, verification](https://www.designesy.org/contracts/design-system) - [Use Kit One · Design Review — Eight dimensions, portable agent prompt](https://www.designesy.org/kits/design-review) - [Lab Four · Acoustics — Interaction sound: nineteen cues, nineteen roles, Cuelume v0.2.2](https://www.designesy.org/labs/acoustics)