skills.rest
HafidJoss
HafidJossCOMMUNITY
Explore all skills by this author →
GitHub

web-typography

Select, pair, and implement web typefaces with CSS, fluid sizing, and font-loading optimization.

Updated Jul 8, 2026
Search Tags:#typography#responsive design#readability#css#font pairing#font loading#web fonts
One-click install
npx skills add https://github.com/HafidJoss/Lummy --skill web-typography-hafidjoss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-typography
Source: https://github.com/HafidJoss/Lummy/tree/main/agent/skills/web-typography
Command: npx skills add https://github.com/HafidJoss/Lummy --skill web-typography-hafidjoss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Choosing and implementing web typography is error-prone: body text set too small, lines running too long, clashing font pairings, and slow font loading that causes FOIT or layout shift. This Skill provides a systematic framework for evaluating, pairing, and implementing typefaces so text is readable, performant, and hierarchically clear. ## Core Features & Use Cases - Typeface Evaluation and Pairing: Quality checklists covering x-height, counters, kerning, character-set completeness, plus proven pairing strategies (serif + sans, superfamilies, same-designer) with contrast rules. - CSS Implementation Patterns: Ready-to-use @font-face setups, font-display strategies, variable font axes, system font stacks, OpenType features, and fluid clamp() type scales. - Performance and Responsiveness: Font subsetting with pyftsubset, preloading, WOFF2 formats, a 200KB payload budget, and responsive line length/height guidance. - Use Case: A developer building a content site asks for a readable article page. The Skill recommends an 18px body at 1.6 line-height with a 65ch max-width, pairs Source Serif Pro headings with a sans body, and ships preloaded subsetted WOFF2 fonts with font-display: swap. ## Quick Start Ask the assistant to review your page's typography and recommend a font pairing, fluid type scale, and font-loading setup using the web typography guidelines.

Frequently Asked Questions about web-typography

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

FAQPage Schema
How do I choose the right font size and line height for body text?▼

Set body text at 16px minimum, preferably 18px for reading-heavy pages, with line height between 1.5 and 1.7. Keep line length under 75 characters using max-width: 65ch, and use tighter line heights (1.1-1.25) for headlines.

How do I pair two typefaces for a website?▼

Pair typefaces with clear structural contrast, such as a serif headline with a sans-serif body, and limit yourself to one or two faces. Safe options include superfamilies like IBM Plex or same-designer pairs like PT Sans and PT Serif.

How do I prevent FOIT and slow web font loading?▼

Use font-display: swap so fallback text renders immediately, preload critical fonts with a link preload tag, and serve subsetted WOFF2 files. Keep total font payload under 200KB and consider a variable font to replace multiple static weights.

What is fluid typography with CSS clamp()?▼

Fluid typography uses clamp(min, preferred, max) so font sizes scale smoothly with the viewport instead of jumping at breakpoints. For example, font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) scales body text from 16px to 20px.

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

System font stacks load instantly with zero payload and suit performance-critical or utilitarian interfaces. Web fonts add brand personality but require fallback stacks, subsetting, and font-display configuration to avoid rendering delays.

Why does my text look bad on Windows but fine on Mac?▼

Rendering differences usually come from font hinting quality and platform rasterizers. Test typefaces at actual use sizes on Windows, check font-smoothing settings, and prefer well-hinted fonts like Inter or Source Sans Pro for cross-platform consistency.

Related Skills

Explore More Design & Creative Skills→
DeiblerDeibler
8

legibility-typeface-and-size

Select typefaces and font sizes for legible UI, body, code, and display text.

Community
Intermediate
djkloopdjkloop

typeset

Optimizes website and app UX with CSS-based font-size and weight recommendations.

Community
Intermediate
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
inbharataiinbharatai
22

typography-guide

Select and pair typefaces, establish type scales, and generate CSS typography systems.

Community
Basic