skills.rest
Wayn-Git
Wayn-GitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-typography

Select, pair, and implement typefaces for web projects with CSS.

52|3|Updated Aug 20, 2026
Search Tags:#typography#responsive design#readability#css#font pairing#web fonts#type hierarchy
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill web-typography-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-typography
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/typograpyh
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill web-typography-wayn-git

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Choosing and implementing web typography involves many interdependent decisions — typeface selection, pairing, sizing, line length, line height, hierarchy, and font-loading performance — and getting any of them wrong makes text hard to read or slow to render. ## Core Features & Use Cases - Typeface Evaluation and Pairing: Apply technical, structural, and practical quality checks to candidate fonts, then pair faces using structural contrast, superfamilies, or same-designer strategies. - Typographic Measurement and Hierarchy: Set body size (16px+), measure (45-75ch), line height (1.4-1.8), and modular heading scales with copy-ready CSS patterns. - Responsive Type and Font Performance: Implement fluid typography with clamp(), font-display: swap, preloading, WOFF2 subsetting, and a 200KB payload budget to avoid FOIT/FOUT. - Use Case: When a user says "the text on my landing page is hard to read", run the 10-row Quick Diagnostic to score the page, identify failing rows (e.g., sub-16px body, no measure cap), and produce the corrected CSS. ## Quick Start Review the typography on my page and fix the font sizes, line length, and line height so the body text is comfortable to read.

Frequently Asked Questions about web-typography

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

FAQPage Schema
How do I choose a font pairing for a website?▼

Font pairing works by creating clear structural contrast, such as serif headlines with a sans-serif body, using one to two typefaces maximum. Safe combinations include Playfair Display with Source Sans Pro, or superfamilies like Roboto with Roboto Slab that are designed to work together.

What is the ideal line length and line height for body text?▼

Body text should use a line length of 45-75 characters (66 optimal), enforced with max-width: 65ch, and a line height of 1.4-1.8. Headlines need tighter line height around 1.1-1.25, and body font size should be at least 16px.

How do I prevent FOIT and FOUT when loading web fonts?▼

Use font-display: swap in @font-face so fallback text renders immediately, preload critical fonts with a link rel=preload tag, and subset fonts to needed characters. Keep total font payload under 200KB and prefer WOFF2 format.

Should I use system fonts or web fonts for my project?▼

System fonts cost zero payload and render instantly, making them suitable for performance-critical UI. Web fonts add brand personality but require loading strategy, fallbacks in every font-family stack, and a verified web license before shipping.

Why does my website text feel hard to read?▼

Readability problems usually come from body text under 16px, line length beyond 75 characters, line height below 1.4, or weak hierarchy contrast. Run the 10-row Quick Diagnostic to score the implementation and identify which specific rows are failing.

When should I use variable fonts instead of static font files?▼

Variable fonts replace 4-6 static weight files with a single file, reducing total payload while exposing weight and other axes via font-variation-settings. They fit projects needing multiple weights, but verify browser and glyph coverage for target languages.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
234

voice-and-tone

Define and enforce consistent brand voice across product copy.

Community
Intermediate
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
hulusi-tunchulusi-tunc
3

responsive-review

Test UI accessibility across viewports, zoom levels, and orientations.

Community
Intermediate
trobiastrobias

top-design

Create award-level web experiences with dramatic typography, custom motion, and scroll-based composition.

Community
Advanced