LAB
Prompt detailNO. 49[ CREATIVE PRODUCTION LAB ]
Home/Index/Build a clear UI typography hierarchy

Build a clear UI typography hierarchy

Refine existing UI typography into a role-based scale with reading, language, fallback and zoom checks while preserving its identity.

Recipe typeUI design
Output formatEvidence + role scale + reading checks
DeliverablesHierarchy / language / fallback / zoom
Version1.0
01 / Description

Refine existing UI typography into a role-based scale with reading, language, fallback and zoom checks while preserving its identity. A compact direction to help the next screen feel deliberate, specific, and easy to remix.

02 / Prompt
Refine the typography hierarchy of an existing Web interface into reusable role specifications. Preserve confirmed brand faces and visual identity; do not rebuild a component system from a screenshot.

INPUT
Required: [page materials: screenshots, text structure or code; purpose, readers and main reading task]
Required: [real copy: representative headings, body, labels, supporting text and numbers]
Optional: [existing rules: families, weights, type tokens, font assets and license information; protected choices]
Optional: [environment: languages, width ranges, light/dark surfaces, reading or dense operational context]
Optional: [deliverable: typography specification; or explicitly requested minimal implementation in supplied code]

METHOD
1. Confirm reading tasks and evidence. Ask up to three blocking questions and wait; mark other gaps [to supply]. Distinguish source/computed styles, screenshot observations and visual estimates. Images cannot identify exact fonts, sizes, weights or contrast. Claim no inspection of unavailable pages.
2. Define only needed roles: primary/secondary headings, body, labels, supporting information and data. Explain scan order, combining size, weight, space and tone. Name roles by purpose and keep repeated roles consistent across pages. Do not invent a size for every element or fix hierarchy by endlessly enlarging headings.
3. Propose a small role scale: family/fallback, weight, size/unit, line height, tracking, measure and paragraph rhythm. Preserve confirmed faces; label use of existing available fonts as an assumption where unknown. Never guess commercial font rights. Assess ordinary Web body text from 1rem/16px, explaining exceptions for dense supporting roles; this is not a universal WCAG font-size threshold. For Latin prose, 45–75ch is a useful starting range. Tune Chinese to actual characters per line, punctuation and reading density; ch does not count Chinese characters. Avoid one line-height ratio for every role.
4. Check genuine long headings, localization expansion, numbers/units, narrow containers, 200% zoom and user font preferences. Preserve essential content and semantic heading order. Tune light-on-dark weight, tracking and leading to the actual face. Use tabular numbers or code fonts only when useful; add no second family without a distinct role. Report contrast only with precise colors and actual measurement; estimated screenshot colors cannot prove compliance.
5. Define font loading/fallback rules: load needed weights only, allow text to appear and account for metric differences. Without assets/runtime, provide proposals rather than promising no layout shifts. If implementation is requested, reuse existing tokens/styles and give minimal code with locations; otherwise give specifications only. Separate performed and proposed checks; do not claim the upstream detector ran.

DELIVER IN ORDER
A. Current evidence: location / role / issue / reading impact / confirmed, observed, estimated or proposed.
B. Role table: role / purpose / family/fallback / weight / size / leading / tracking / measure / cross-page rules; label proposed values.
C. Hierarchy and wrapping examples using the supplied real copy; address long text, Chinese/other languages, data, zoom and dark surfaces.
D. Font resource/implementation guidance; code only if requested. Do not download fonts or change branding without instruction.
E. Verification matrix: scenario / action / expected / actual / unverified reason, covering long copy, target languages, zoom and font fallback.

BOUNDARIES
Typography and reading hierarchy only. No whole-page redesign, full component extraction, brand palette or responsive navigation redesign. Without rendering and measurement, claim no accessibility or font-performance pass.

Independent site adaptation of Paul Bakaus / Impeccable, typeset (Apache-2.0). Retains role hierarchy, reading rhythm and font delivery; adds standalone specification, Chinese-language considerations and evidence boundaries. Excludes command engine, platform references and detector: https://github.com/pbakaus/impeccable/blob/d631a8827f99414d2b6daba4ef08b7f8701751d7/skill/reference/typeset.md .
03 / Negative prompt
guessed font identities as facts, arbitrary per-element sizes, unrequested brand changes, guessed font licenses, ch treated as Chinese character count, clipped essential copy, disabled zoom, unmeasured contrast or performance claims
04 / Generation settings
Recipe typeUI typography
Output formatEvidence + role scale + reading checks
DeliverablesHierarchy / language / fallback / zoom
Version1.0