Web Typography
Skill Verified ActiveSelect, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", or "typographic scale". Also trigger when choosing between system fonts and web fonts, optimizing font loading performance, or designing readable long-form content layouts. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.
To empower users to make informed decisions about web typography, ensuring readability, aesthetic appeal, and optimal performance for their projects.
Features
- Typeface selection and evaluation criteria
- Typeface pairing strategies and examples
- CSS implementation for body text, headlines, and UI
- Responsive typography using fluid scaling (clamp())
- Web font performance optimization techniques
- Guidance on type hierarchy and measurements
Use Cases
- Selecting typefaces for a new website project
- Improving the readability of existing web content
- Pairing fonts for a brand's visual identity
- Implementing responsive typography that adapts to screen size
- Optimizing web font loading for better performance
Non-Goals
- Overall UI design systems (delegated to refactoring-ui)
- Dramatic typographic experiences (delegated to top-design)
- Graphic design beyond web typography
Installation
First, add the marketplace
/plugin marketplace add wondelai/skills/plugin install skills@wondelai-skillsQuality Score
VerifiedSimilar Extensions
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Presentation Styling
100Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior
Ui Ux Pro Max
100UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.
Impeccable
99Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Epic Design
99Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.