Which fonts are included in the recommendations?

The skill includes popular sans-serif fonts like Inter, Roboto, and Proxima Nova, as well as high-quality serifs like Merriweather, EB Garamond, and Crimson Pro.

Are there tips for improving typography performance?

The skill includes best practices such as using 'font-display: swap' to avoid invisible text and using system stacks to reduce layout shifts.

Can it help me choose fonts for specific project types?

Absolutely. It includes specific guidelines for UI/App design, marketing landing pages, and editorial blogs to ensure the font matches the use case.

Does it include font pairing advice?

Yes, it features a dedicated pairing table that suggests combinations of headline and body fonts to achieve specific styles like 'Modern,' 'Technical,' or 'Classic'.

Does this skill provide CSS code for font implementation?

Yes, it provides specific font-family CSS snippets for every recommended typeface and a robust system font stack for safe defaults.

Professional Typography Guide

Name: Professional Typography Guide
Author: svengraziani

bysvengraziani

•

Design Tools

Provides a curated catalog of premium and open-source typefaces with CSS snippets, pairing strategies, and design best practices.

The Font Recommendations skill is a comprehensive typography reference designed to help developers and designers make informed visual choices within Claude Code. It features a structured directory of high-quality sans-serif and serif fonts, complete with CSS implementation details, weight availability, and licensing information. Beyond a simple list, it provides expert guidance on font pairing for different contexts—such as UI applications, marketing sites, and long-form blogs—while offering technical tips for optimizing legibility and performance through CSS.

Key Features

01Curated catalog of top-tier sans-serif and serif typefaces with technical specs.

02Ready-to-use CSS snippets for font stacks and system-safe defaults.

03Licensing guidance for both free (Google Fonts) and commercial typography.

042 GitHub stars

05Professional font pairing tables for headlines and body copy.

06Optimization rules for legibility, letter-spacing, and web performance.

Use Cases

01Establishing accessible font pairings and CSS stacks for editorial content.

02Defining a consistent typography system for a new web application or brand.

03Finding high-performance alternatives to system fonts for better UI/UX.

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

Key Features

01Curated catalog of top-tier sans-serif and serif typefaces with technical specs.

02Ready-to-use CSS snippets for font stacks and system-safe defaults.

03Licensing guidance for both free (Google Fonts) and commercial typography.

042 GitHub stars

05Professional font pairing tables for headlines and body copy.

06Optimization rules for legibility, letter-spacing, and web performance.

Use Cases

01Establishing accessible font pairings and CSS stacks for editorial content.

02Defining a consistent typography system for a new web application or brand.

03Finding high-performance alternatives to system fonts for better UI/UX.

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