skills.rest
trobias
trobiasCOMMUNITY
Explore all skills by this author →
Website𝕏@tobiasnwnGitHub

web-typography

Select, pair, and implement web typefaces with CSS for readable, performant typography.

Updated Aug 28, 2026
Search Tags:#typography#responsive design#readability#css#font pairing#variable fonts#web fonts
One-click install
npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill web-typography-trobias
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-typography
Source: https://github.com/trobias/portfolio-nextjs-v2/tree/main/.agents/skills/web-typography
Command: npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill web-typography-trobias

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Choosing and implementing typefaces for the web involves trade-offs between readability, brand personality, and font-loading performance that are easy to get wrong, resulting in cramped text, invisible hierarchy, FOIT flashes, and bloated font payloads. ## Core Features & Use Cases - Typeface Evaluation and Pairing: Systematic quality checks covering x-height, counters, kerning, character-set completeness, and proven serif/sans pairing strategies with contrast rules. - CSS Implementation Patterns: Ready-to-use @font-face declarations, font-display strategies, variable font setup, system font stacks, OpenType features, and fluid type scales built with clamp(). - Performance and Diagnostics: A 10-point scoring rubric and quick diagnostic table covering body size, measure, line height, font payload under 200KB, fallbacks, and 200% zoom resilience. - Use Case: When redesigning a blog, use this Skill to pick a serif/sans pairing, generate the fluid clamp() type scale, configure font-display: swap with preloaded WOFF2 subsets, and verify the result against the diagnostic checklist. ## Quick Start Ask the assistant to evaluate and improve the typography of your web page, including font pairing, sizes, line height, and loading performance.

Frequently Asked Questions about web-typography

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

FAQPage Schema
How do I choose and pair typefaces for a website?▼

Start with the body text workhorse, then add contrast through structure (serif plus sans), weight, or era. Limit yourself to one or two typefaces, and prefer superfamilies like IBM Plex or same-designer pairs when uncertain.

How to implement fluid responsive typography in CSS?▼

Use clamp(min, preferred, max) with viewport units, for example font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem). This scales type smoothly between viewports without media queries while preventing extreme sizes.

What font-display value should I use for web fonts?▼

Use font-display: swap for body text so fallback text renders immediately, avoiding FOIT. Display or headline fonts can use block briefly, and optional works when performance is the top priority.

Does variable font support work in all browsers?▼

Variable fonts have roughly 95% browser support and can replace four to six static weight files with one WOFF2 file. Declare the weight range in @font-face and use standard font-weight values within that range.

Why does my web text feel hard to read?▼

Common causes are body text under 16px, line length beyond 75 characters, line height below 1.4, or weak hierarchy contrast. Set max-width: 65ch, line-height 1.5-1.7, and test at real sizes on actual devices.

How do I reduce web font loading time and file size?▼

Subset fonts to needed Unicode ranges with pyftsubset, serve WOFF2 only, preload one or two critical fonts, and keep total payload under 200KB. Loading only the weights you actually use also cuts size significantly.

Related Skills

Explore More Design & Creative Skills→
AngusatgithubAngusatgithub

voice-and-tone

Define voice attributes and tone guidelines for brand communication.

Community
Basic
lvhuanidlvhuanid

frontend-design

Transforms UI style requirements into production-ready frontend code with design tokens and accessibility.

Community
Advanced
vmitsarasvmitsaras

accessibility-validation-planner

Plans accessibility validation covering semantics, keyboard, focus, screen readers, and automated checks.

Community
Intermediate
mike-coulbournmike-coulbourn
37

brand-typography-systems

Automate brand typography system design with typeface selection and modular scales.

Community
Advanced