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 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 Installs2.3KRepositorypbakaus/impeccableGitHub Stars9.6KFirst Seen2 days agoSecurity AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled oncodex2.3Kopencode2.3Kgemini-cli2.3Kgithub-copilot2.3Kcursor2.2Kkimi-cli2.2K