Web Typography
Skill Verifiziert AktivSelect, 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.
Funktionen
- 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
Anwendungsfälle
- 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
Nicht-Ziele
- Overall UI design systems (delegated to refactoring-ui)
- Dramatic typographic experiences (delegated to top-design)
- Graphic design beyond web typography
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add wondelai/skills/plugin install skills@wondelai-skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Presentation Styling
100Wissen über CSS-Klassen, Komponentenmuster und Syntaxhervorhebung in der Präsentation
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
99Verwenden Sie dies, wenn der Benutzer ein Frontend-Interface entwerfen, neu gestalten, formen, kritisieren, prüfen, polieren, klären, destillieren, härten, optimieren, anpassen, animieren, einfärben, extrahieren oder anderweitig verbessern möchte. Deckt Websites, Landingpages, Dashboards, Produkt-UI, App-Shells, Komponenten, Formulare, Einstellungen, Onboarding und leere Zustände ab. Umfasst UX-Bewertung, visuelle Hierarchie, Informationsarchitektur, kognitive Last, Barrierefreiheit, Leistung, responsives Verhalten, Theming, Anti-Patterns, Typografie, Schriften, Abstände, Layout, Ausrichtung, Farbe, Bewegung, Mikrointeraktionen, UX-Texte, Fehlerzustände, Randfälle, i18n und wiederverwendbare Designsysteme oder Tokens. Verwenden Sie es auch für langweilige Designs, die mutiger oder ansprechender werden sollen, laute Designs, die leiser werden sollen, Live-Browser-Iterationen an UI-Elementen oder ambitionierte visuelle Effekte, die technisch außergewöhnlich wirken sollen. Nicht für reine Backend- oder Nicht-UI-Aufgaben.
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.