font-recommendations

Recommend web-safe typefaces with CSS details and pairing guidelines.

2|Updated Feb 5, 2026
One-click install
npx skills add https://github.com/svengraziani/ui-design --skill font-recommendations
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: font-recommendations
Source: https://github.com/svengraziani/ui-design/tree/main/.claude/skills/font-recommendations
Command: npx skills add https://github.com/svengraziani/ui-design --skill font-recommendations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the guesswork in typography by providing a curated catalog of high-quality, screen-optimized fonts and proven pairing strategies for web and application design.

Core Features & Use Cases

  • Typeface Catalog: Access detailed metadata for sans-serif and serif fonts, including weights, licensing, and CSS implementation snippets.
  • Pairing Logic: Utilize expert-recommended font combinations for headlines and body text to ensure visual hierarchy and readability.
  • Use Case: When designing a new dashboard or landing page, use this skill to select a professional font stack that balances aesthetic appeal with technical performance and accessibility.

Quick Start

Use the font-recommendations skill to suggest a professional sans-serif font pairing for a new marketing landing page.

Frequently Asked Questions about font-recommendations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to choose web-safe fonts for a UI design project?

Choosing web-safe fonts for UI design involves selecting screen-optimized typefaces based on specific project types like application interfaces or marketing sites. This curated catalog provides professional recommendations along with weight availability and licensing details to ensure technical compliance.

How do I find professional font pairings for headlines and body text?

Finding professional font pairings for headlines and body text requires proven combinations that establish visual hierarchy and readability. This skill provides expert-recommended font pairings alongside CSS implementation snippets to ensure both aesthetic appeal and technical performance across web pages.

Can I get CSS implementation details and font-display best practices for web typography?

You can get CSS implementation details for web typography directly from this skill. It includes CSS snippets, font-display best practices, and letter-spacing guidelines for both sans-serif and serif fonts to ensure proper rendering and accessibility in your stylesheets.

Does this skill provide font recommendations for long-form editorial content?

Yes, this skill provides font recommendations tailored for long-form editorial content. It categorizes typefaces by project type, ensuring you select fonts that balance readability and visual hierarchy whether you are building a dashboard, a marketing site, or an editorial layout.

What typeface metadata is included for sans-serif and serif fonts?

The typeface metadata included for sans-serif and serif fonts covers weight availability, licensing information, and screen optimization details. This metadata ensures designers can select technically compliant fonts that meet accessibility and performance requirements for web design.