Web Typography
技能 已验证 活跃Select, 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.
功能
- 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
使用场景
- 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
非目标
- Overall UI design systems (delegated to refactoring-ui)
- Dramatic typographic experiences (delegated to top-design)
- Graphic design beyond web typography
安装
请先添加 Marketplace
/plugin marketplace add wondelai/skills/plugin install skills@wondelai-skills质量评分
已验证类似扩展
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Presentation Styling
100关于表示中的 CSS 类、组件模式和语法高亮显示的知识
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
99当用户希望设计、重新设计、塑造、批评、审计、打磨、澄清、提炼、加固、优化、改编、动画化、着色、提取或以其他方式改进前端界面时使用。涵盖网站、登陆页面、仪表板、产品 UI、应用外壳、组件、表单、设置、入职流程和空状态。处理用户体验审查、视觉层次、信息架构、认知负荷、可访问性、性能、响应行为、主题化、反模式、排版、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边缘情况、i18n 以及可复用的设计系统或令牌。也适用于需要从平淡变得更大胆或更令人愉悦的设计，需要变得更安静的醒目设计，对 UI 元素的实时浏览器迭代，或应该感觉技术上非凡的雄心勃勃的视觉效果。不适用于仅限后端或非 UI 任务。
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.