What kind of fonts are included in this skill?

The skill includes a mix of popular free Google Fonts like Inter, Roboto, and Open Sans, alongside premium commercial options like Proxima Nova and Graphik.

Does it provide CSS code for font implementation?

Yes, it provides exact CSS font-family snippets and a comprehensive system font stack to ensure fast, reliable defaults across all operating systems.

Does it include licensing information?

Yes, every font recommendation is labeled as either 'Free (Google Fonts)' or 'Commercial' to help you make informed decisions based on your project budget.

How does the skill help with font pairing?

It includes a dedicated pairing table that suggests specific combinations for different aesthetics, such as 'Modern + Editorial' or 'Technical + Readable'.

Can I use this for both web apps and marketing sites?

Absolutely. It contains specific guidelines for UI/Application design, marketing landing pages, and long-form blogs or articles.

Font Recommendations & Typography Guide

Name: Font Recommendations & Typography Guide
Author: svengraziani

bysvengraziani

•

Design Tools

Provides curated typeface catalogs, professional font pairing strategies, and ready-to-use CSS snippets for high-quality web typography.

The Font Recommendations skill empowers Claude to act as a typography expert by providing a structured catalog of premium and open-source typefaces. It includes detailed specifications for popular fonts like Inter, Roboto, and Merriweather, covering weights, licensing, and specific CSS font-family stacks. Whether you are building a technical dashboard, a marketing landing page, or a long-form blog, this skill offers evidence-based pairing tables and UI design guidelines—such as letter-spacing adjustments and legibility standards—to ensure your project maintains a professional and accessible visual hierarchy.

Key Features

01Pre-configured CSS snippets for system font stacks and web font integration

022 GitHub stars

03Curated catalog of top-tier sans-serif and serif typefaces with licensing details

04Specific styling rules for letter-spacing, font-display, and weight selection

05Professional font pairing tables for headlines and body copy contrast

06Typography best practices for mobile legibility and UI accessibility

Use Cases

01Creating sophisticated editorial layouts using proven serif and sans-serif pairings

02Selecting high-legibility typefaces specifically optimized for small-screen UI elements

03Defining modern CSS font stacks for new web applications or design systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add svengraziani/ui-design font-recommendations

For use in Claude.ai and ChatGPT

Download Skill