Fonts

What This Skill Does

The Fonts skill empowers your AI agent to act as a professional typography consultant. It enforces design standards that improve readability, accessibility, and professional aesthetic across web interfaces. By leveraging proven rules for font selection, hierarchy, and browser rendering, the skill prevents common pitfalls like poor legibility caused by improper line height, incorrect font weight, or performance-taxing loading strategies. It ensures that your typography creates a harmonious visual system that guides the user effectively through your content.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal:

clawhub install openclaw/skills/skills/ivangdavila/fonts

Use Cases

• Web Design Optimization: Automatically audit existing CSS to identify and fix poor typography choices, such as inadequate line lengths or improper use of display fonts in body copy.
• Performance Tuning: Optimize font loading strategies by suggesting proper subsetting, WOFF2 usage, and font-display: swap implementations to minimize layout shifts.
• UI/UX Auditing: Generate CSS code blocks for system font stacks that provide a native, zero-latency appearance while ensuring consistent fallback behavior across different operating systems.
• Design Systems: Establish global font-pairings and spacing rules to maintain hierarchy in complex web applications.

Example Prompts

1. "Analyze my current CSS typography settings and suggest adjustments to improve readability for body text on mobile devices."
2. "I am using 'Abril Fatface' for my paragraphs; why does this look messy and what text-based alternative would you recommend for better legibility?"
3. "Help me create a CSS font-family stack that uses system fonts for maximum performance and include the correct preloading tags for my headers."

Tips & Limitations

Typography is subjective, but readability is objective. Always prioritize the 45-75 character line length rule, as exceeding this range creates visual strain. Avoid decorative fonts for body text; if you cannot distinguish between two fonts at a glance, simplify your design by using a single family with varying weights. Remember that thin weights (under 400) often struggle with screen rendering on Windows machines, so bump your base weight for cross-platform stability. Always use text-wrap: balance for headings and text-wrap: pretty for body paragraphs to avoid the dreaded 'widow' or 'orphan' scenarios where a single word occupies a lonely line. Finally, performance is non-negotiable: favor WOFF2 and leverage font-display: swap to ensure that content is always accessible to the user, even before the custom font files have completed their download.