i-typeset_skill

Overview

This skill improves typography across products by fixing font choices, hierarchy, sizing, weight consistency, and overall readability. It turns default, generic text into intentional, polished type that supports brand personality and clarity. Before running, it requires the i-frontend-design Context Gathering Protocol and may require teach-impeccable if no design context exists.

How this skill works

I inspect font families, weight usage, and whether defaults like Inter/Roboto/Arial are masking brand voice. I evaluate hierarchy, type scale, line-length, line-height, contrast, and consistency. From that audit I produce a systematic plan: font selection, modular type scale, weight roles, spacing rules, and loading strategy. Finally I provide concrete CSS/token recommendations and verification checks for readability, accessibility, and performance.

When to use it

• When text feels generic, inconsistent, or mismatched to brand personality
• Before a redesign or when consolidating multiple products under one system
• When headings, body, and captions are hard to distinguish at a glance
• If web fonts cause layout shift or page performance issues
• When body text is smaller than 16px or line-length is uncomfortable

Best practices

• Run the i-frontend-design Context Gathering Protocol first; use teach-impeccable if no context exists
• Limit to 1–2 font families and 3–4 weights; load only weights you use
• Establish a modular scale (e.g., 1.25 or 1.333) with 5 sizes for caption→heading
• Use rem for body sizes, clamp() for large marketing headings, and fixed rem scales for dense app UIs
• Set comfortable line-length (45–75 chars / max-width: 65ch) and appropriate line-height (body 1.5–1.7)

Example use cases

• Standardizing typography across multiple internal apps and marketing sites
• Fixing a brand site where headings and body sizes are visually similar
• Reducing CLS by switching font loading to font-display: swap and metric-matched fallbacks
• Creating a type token system (--text-body, --text-heading) for a design system
• Adjusting typography for dark-mode readability and WCAG contrast compliance