| name | web-typography |
| description | Select fonts, create type pairings, and choose icon libraries for web apps. Provides a decision workflow for typography choices based on app type, brand tone, and technical constraints. Covers free fonts (Google Fonts, Fontshare), type scales, font loading, and icon library selection. Use when starting a new webapp, choosing fonts, picking a typeface, creating font pairings, setting up a type scale, selecting an icon library, or when the user asks about typography, fonts, icons for a web project. Triggers include 'choose fonts', 'font pairing', 'typography for', 'pick a typeface', 'type scale', 'icon library', 'which icons', 'which font', 'tipografia', 'fontes para'. |
Web Typography
Select fonts, type pairings, and icon libraries for web apps through a structured decision workflow.
Decision Workflow
Step 1: Identify app type
Ask or infer from context:
| App Type | Typography Priority |
|---|
| SaaS / Dashboard | Data density, numeric clarity, readability at small sizes |
| Marketing / Landing | Visual impact, personality, clear heading/body hierarchy |
| Documentation | Long-form readability, code block integration |
| E-commerce | Scannability, trust, premium feel for campaigns |
| Portfolio / Creative | Personality, visual distinction, memorable type |
| Corporate / Enterprise | Professionalism, trust, accessibility |
Step 2: Determine brand tone
- Neutral/Professional → Inter, Geist, Source Sans 3
- Friendly/Modern → DM Sans, Plus Jakarta Sans, Manrope
- Premium/Editorial → Serif headings (Playfair Display, Instrument Serif) + sans body
- Technical/Developer → Geist, Space Grotesk, JetBrains Mono for code
- Playful/Creative → Cabinet Grotesk, Syne, Epilogue
Step 3: Pick from quick-start combos
| App Type | Heading | Body | Icons | When to use |
|---|
| SaaS (safe default) | Inter 600 | Inter 400 | Lucide | Proven, neutral, works everywhere |
| SaaS (modern) | Geist 600 | Geist 400 | Lucide | Next.js ecosystem, web-native feel |
| SaaS (friendly) | Plus Jakarta Sans | DM Sans | Phosphor | Startup, product-led growth |
| Marketing | Playfair Display | Inter | Lucide | Premium, authoritative |
| Marketing (bold) | Bebas Neue | Open Sans | Remix | High-impact hero sections |
| Docs | Inter 600 | Inter 400 + Fira Code | Lucide | Industry standard (Tailwind, Vercel) |
| E-commerce | Playfair Display | Montserrat | Phosphor | Luxury/fashion/lifestyle |
| Portfolio | Syne | Satoshi | Phosphor | Tech-creative studios |
| Corporate | Source Sans 3 | Source Sans 3 | Lucide | Mature, trustworthy, wide language support |
For deeper exploration of all available fonts and pairings, read references/font-catalog.md.
Step 4: Select icon library
| Need | Library | Why |
|---|
| General purpose (default) | Lucide (1,600+ icons) | Best balance: count, consistency, tree-shaking, community |
| Weight variation / design system | Phosphor (1,500+ base, 6 weights) | Map icon weight to typography weight systematically |
| Maximum coverage | Tabler (6,000+ icons) | Largest free MIT set, good for complex admin UIs |
| Tailwind ecosystem | Heroicons (292 icons, 4 styles) | Small but impeccable, by Tailwind Labs |
Match icon stroke to font weight: Regular (400) text pairs with 1.5-2px stroke icons (Lucide default, Phosphor Regular). Bold (600-700) text pairs with filled/solid icons.
For full comparison of all libraries, read references/icon-catalog.md.
Step 5: Implement type scale
Use Major Third (1.250) as default ratio. Adjust for app type:
| Ratio | Name | Best for |
|---|
| 1.125 | Major Second | Dense dashboards, admin panels |
| 1.200 | Minor Third | Compact apps, data-rich interfaces |
| 1.250 | Major Third | Most web apps (recommended default) |
| 1.333 | Perfect Fourth | Marketing sites, editorial |
CSS custom properties with fluid sizing
:root {
--fs-xs: clamp(0.64rem, 0.6rem + 0.15vw, 0.7rem);
--fs-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
--fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
--fs-xl: clamp(1.35rem, 1.15rem + 0.85vw, 1.563rem);
--fs-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 1.953rem);
--fs-3xl: clamp(1.95rem, 1.5rem + 1.75vw, 2.441rem);
--fs-4xl: clamp(2.4rem, 1.75rem + 2.5vw, 3.052rem);
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: ;
: ;
: -;
: ;
}
Step 6: Font loading
- WOFF2 only — 97%+ support, best compression
- Self-host or Fontsource —
npm install @fontsource-variable/inter
font-display: swap for body, optional for display headings- Preload 1-2 critical files —
<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>
- Variable fonts over multiple static files
- Subset to Latin + Latin Extended-A for 90%+ size reduction
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-variable.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
Fallback stack: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
Step 7: Icon implementation
Default pattern — npm with tree-shaking:
import { Home, Settings, User } from 'lucide-react';
<Home size={20} strokeWidth={1.5} />
For prototypes/landing pages, CDN is fine:
<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>
References
- references/font-catalog.md — Full inventory of 40+ free fonts by category, curated pairings by app type with rationale, trending fonts 2025-2026. Read when exploring options beyond the quick-start combos.
- references/icon-catalog.md — Detailed comparison of 8 icon libraries (counts, styles, formats, pros/cons), icon-typography weight matching rules, SVG vs icon font analysis, implementation patterns by project type. Read when selecting or comparing icon libraries.
