--- id: sm3-typeset name: "typeset" url: https://skills.yangsir.net/skill/sm3-typeset author: pbakaus domain: writing tags: ["typography-design", "text-formatting", "visual-hierarchy", "content-presentation"] install_count: 65000 rating: 4.70 (1144 reviews) github: https://github.com/pbakaus/impeccable --- # typeset > 评估并改进排版，解决通用、不一致或结构不良的问题，提升文本的可读性和视觉吸引力。 **Stats**: 65,000 installs · 4.7/5 (1144 reviews) ## Before / After 对比 ### 排版优化 ## Readme # typeset Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. ## MANDATORY PREPARATION Use the frontend-design skill — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. ## Assess Current Typography Analyze what's weak or generic about the current type: - **Font choices**: Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - Are there too many font families? (More than 2-3 is almost always a mess) - **Hierarchy**: Can you tell headings from body from captions at a glance? - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - Are weight contrasts strong enough? (Medium vs Regular is barely visible) - **Sizing & scale**: Is there a consistent type scale, or are sizes arbitrary? - Does body text meet minimum readability? (16px+) - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) - **Readability**: Are line lengths comfortable? (45-75 characters ideal) - Is line-height appropriate for the font and context? - Is there enough contrast between text and background? - **Consistency**: Are the same elements styled the same way throughout? - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - Is letter-spacing intentional or default everywhere? **CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. ## Plan Typography Improvements Consult the [typography reference](https://github.com/pbakaus/impeccable/blob/HEAD/.claude/skills/typeset/reference/typography.md) from the frontend-design skill for detailed guidance on scales, pairing, and loading strategies. Create a systematic plan: - **Font selection**: Do fonts need replacing? What fits the brand/context? - **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy - **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) - **Spacing**: Line-heights, letter-spacing, and margins between typographic elements ## Improve Typography Systematically ### Font Selection If fonts need replacing: - Choose fonts that reflect the brand personality - Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights - Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) ### Establish Hierarchy Build a clear type scale: - **5 sizes cover most needs**: caption, secondary, body, subheading, heading - **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) - **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone - **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need - **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed ### Fix Readability - Set `max-width` on text containers using `ch` units (`max-width: 65ch`) - Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) - Increase line-height slightly for light-on-dark text - Ensure body text is at least 16px / 1rem ### Refine Details - Use `tabular-nums` for data tables and numbers that should align - Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text - Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) - Set `font-kerning: normal` and consider OpenType features where appropriate ### Weight Consistency - Define clear roles for each weight and stick to them - Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) - Load only the weights you actually use (each weight adds to page load) **NEVER**: - Use more than 2-3 font families - Pick sizes arbitrarily — commit to a scale - Set body text below 16px - Use decorative/display fonts for body text - Disable browser zoom (`user-scalable=no`) - Use `px` for font sizes — use `rem` to respect user settings - Default to Inter/Roboto/Open Sans when personality matters - Pair fonts that are similar but not identical (two geometric sans-serifs) ## Verify Typography Improvements - **Hierarchy**: Can you identify heading vs body vs caption instantly? - **Readability**: Is body text comfortable to read in long passages? - **Consistency**: Are same-role elements styled identically throughout? - **Personality**: Does the typography reflect the brand? - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. Weekly Installs3.4KRepository[pbakaus/impeccable](https://github.com/pbakaus/impeccable)GitHub Stars10.2KFirst Seen2 days agoSecurity Audits[Gen Agent Trust HubPass](/pbakaus/impeccable/typeset/security/agent-trust-hub)[SocketPass](/pbakaus/impeccable/typeset/security/socket)[SnykPass](/pbakaus/impeccable/typeset/security/snyk)Installed oncodex3.4Kopencode3.4Kgithub-copilot3.4Kgemini-cli3.4Kamp3.4Kkimi-cli3.4K --- *Source: https://skills.yangsir.net/skill/sm3-typeset* *Markdown mirror: https://skills.yangsir.net/api/skill/sm3-typeset/markdown*