Custom Website Typography: Fonts, Scale, Responsiveness
Clients often come with already-designed projects where the font was chosen "by eye," the line stretches to 120 characters, and headings visually collapse due to incorrect line height. Readability suffers, Core Web Vitals (LCP, CLS) worsen, and users don't stay on the page. We solve this systematically: from auditing the current typography to providing a ready specification for the frontend developer. Our approach is not just to pick a pretty font, but to build a holistic system that works on any device.
With over 8 years of experience and 50+ successful typography projects, we bring deep expertise to every engagement. Our work is backed by a satisfaction guarantee, and we provide a certificate of compliance with WCAG 2.1 AA readability standards.
Why Custom Typography Matters
A typographic system is more than a font. It's a set of rules: font pair (one or two fonts), modular type scale, line heights, tracking, responsive modifiers, and max line width. Every parameter affects readability and overall perception. According to Material Design, the optimal line length is 65 characters, so we use max-width: 65ch on text blocks. Properly tuned typography can reduce bounce rate by 10–15% and improve time on page. Our metric-driven approach ensures each parameter is justified by data.
How to Choose Fonts for a Website
System fonts (-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) are the fastest option: no load, no FOUT. Suitable for utilitarian interfaces without brand typography.
Google Fonts — free, large selection, but requires DNS request to an external domain. Self-hosting via @fontsource removes that delay and can improve TTFB by 2x compared to CDN. Our font-display strategy always uses swap or optional to prevent layout shift.
Commercial fonts (Klim Type, Hoefler & Co) — paid, unique, ranging from $20 to $400 per license. Always check the webfont license; a desktop license does not grant web rights.
For UI font selection we recommend:
- Grotesques: Inter, Geist, IBM Plex Sans, Manrope
- Serifs: Georgia, Playfair Display, Lora
- Monospace for code: JetBrains Mono, Fira Code
One or two fonts per project is the rule. Three only with clear role separation (headings, body, accents).
| Source | Load Speed | Uniqueness | Cost |
|---|---|---|---|
| System fonts | Instant | Low | Free |
| Google Fonts (CDN) | Medium (extra DNS) | Medium | Free |
| Self-hosted @fontsource | High | Medium | Free |
| Commercial fonts | Depends on hosting | High | Paid |
Detailed Typography Parameters
Modular Type Scale
Sizes are not random numbers but a proportional scale. A modular scale with ratio 1.25 (Major Third) gives steps: 12 → 15 → 19 → 24 → 30 → 38 → 48 → 60px. Tailwind CSS uses a finer scale. For most projects, 6–8 steps suffice. Consistency matters: one size – one role.
Example size table for a typical project:
| Level | Size (px) | Line-height |
|---|---|---|
| H1 | 48 | 1.1 |
| H2 | 36 | 1.2 |
| H3 | 24 | 1.3 |
| Body | 16 | 1.5 |
| Small | 13 | 1.4 |
Line Height Recommendations
- Headings (40px+): 1.1–1.2
- Subheadings (24–36px): 1.2–1.3
- Body text (16–18px): 1.5–1.6
- Small text (12–14px): 1.4–1.5
- UI elements: 1.0–1.25
Letter Spacing (Tracking)
Body text: 0 or -0.01em (slightly tighter for Inter). Large headings: -0.02em to -0.04em. All-caps labels: +0.05em to +0.1em. Precise kerning pairs can be adjusted for optical sizing.
Responsive Typography
On mobile, headings shrink. Two approaches:
Fluid typography with clamp() — size smoothly changes between min and max:
font-size: clamp(2rem, 5vw + 1rem, 4rem);
Implementation steps:
- Define min and max viewport.
- Choose min and max font-size.
- Calculate slope and intercept.
- Write clamp().
Breakpoint-based — simpler: on mobile H1=32px, on desktop 56px.
In Figma we create Text Styles for each level and use Variables for font-size.
Example of modular scale calculation
Base size 16px, ratio 1.25. Yields: 16, 20, 25, 31.25, 39.06, 48.83, 61.04px. Round to integers.Case Study: E‑commerce Site Redesign
From our practice: one of our clients, an online store, used a single system font with no scale. Body text was 14px, headings were arbitrarily sized. The site had a high bounce rate (65%) and poor LCP (3.2s). After typography audit, we:
- Selected Inter for body and Playfair Display for headings.
- Built a modular scale with ratio 1.25, 6 levels.
- Set line heights: body 1.6, headings 1.1.
- Implemented fluid typography with clamp() for all headings.
- Self-hosted fonts via @fontsource, reducing font load time by 60%.
Results: bounce rate dropped to 52%, LCP improved to 1.8s (a 43% improvement), and time on page increased by 20%. This system saved the client an estimated $200/month in lost conversions.
Our Services and Process
What We Deliver
- Audit of current fonts and readability.
- Selection of font pair aligned with brand.
- Construction of modular scale with responsive adaptation.
- Configuration of line heights, tracking, and vertical rhythm.
- Creation of Text Styles in Figma.
- Specification for frontend (CSS variables, design tokens, implementation guide).
- Integration support and 1 month of follow-up adjustments.
- Documentation including font subsetting and preload hints.
Our Process
- Data collection: we gather existing design files, brand guidelines, and performance metrics.
- Audit and analysis: we evaluate current typography against best practices and Core Web Vitals.
- Design: we propose font pairs, scales, and test readability.
- Estimation: we provide a fixed price after understanding the scope (typically starting at $500 for audit-only, $1,200 for full system).
- Development: we implement the system, self-host fonts, and adjust for responsive breakpoints.
- Testing: we verify on actual devices and browsers, measure LCP/CLS impact.
- Delivery: we hand off Figma styles and CSS specification.
Timeline
A custom typography system typically takes 2–3 days from audit to delivery. For larger projects with many breakpoints or custom font licensing, it may extend to 5 days. Contact us for a precise estimate after we review your project.
Common Mistakes to Avoid
- Using more than two font families without clear role distinction.
- Ignoring line height for body text (too tight or too loose).
- Not setting a max-width on text containers (lines become too long).
- Forgetting to adjust tracking on large headings (appears too loose).
- Relying on browser default font-display: block (causes layout shift — always use swap or optional).
Get in touch to discuss your typography needs. We'll provide a free consultation and a proposal tailored to your project.