FontBlend is a free, browser-based typography toolkit at fontblend.com. It helps designers, developers, and content teams pick fonts, build font pairings, check color contrast, generate type scales, and export production-ready CSS — all without an account, without uploads, and without AI guessing what looks good.
FontBlend is a 100% static website. Every tool runs entirely in your browser. Nothing you type, paste, or upload ever leaves your device. This repository exists to document the project and point you to the live tools — it intentionally contains no source code.
Website: https://fontblend.com Contact: hello@fontblend.com Report an issue or suggest a font: Open an issue on GitHub
Most font tools fall into one of two camps: galleries that show static screenshots, or generators that produce random combinations and call it a day. FontBlend takes a third path — a deterministic, designer-authored toolkit:
- Curated, not generated. Every font pairing in the library was chosen by a designer and evaluated for readability, weight balance, and real-layout use. Nothing is auto-generated.
- Live previews. Fonts are loaded and rendered in your browser, so what you see is what ships.
- Contrast scores built in. Pairings and palettes come with WCAG 2.2 AA/AAA contrast data, not vibes.
- Production-ready export. Copy-ready CSS, Tailwind config, SCSS variables, JSON design tokens, and Markdown — one click, no signup.
- Private by design. No accounts, no analytics on your work, no server-side storage. Favorites and brand kits live in your browser's local storage under the
fontblend:v1:*namespace and never leave your device.
| Page | What you'll find |
|---|---|
| Font Pairings | 50 curated font pairings with designer notes, contrast scores, and CSS export |
| Font Catalog | 38 open-source fonts (OFL / Apache licensed) with live previews, weights, and pairing suggestions |
| Typography Playground | Test any font combination on a real layout before you commit |
| Color Palettes | 14 curated color palettes, each with WCAG contrast data |
| CSS Gradients | 12 OKLCH-interpolated gradients — no muddy midpoints |
| All Tools | The full toolkit index |
- Font Pairing Generator — Walks every heading and body font in the catalog, scores each pair across six weighted factors, and returns the top six. Fully deterministic: no machine learning, no embedding models, no API calls.
- Pairing Compare — Put two pairings side by side and compare contrast, x-height balance, and mood.
- Font Matrix — Scan the whole catalog at a glance to find fonts that pair well together.
- Type Scale Calculator — Static modular scales with a choice of ratio, previewed on real text.
- Fluid Typography Generator — Fluid
clamp()-based type scales, step by step, with copy-ready CSS. - Line Height Calculator — Compute accessible line heights from font size and x-height.
- Letter Spacing Tool — Track and kern headings with live optical feedback.
- Spacing Scale Generator — Build a consistent spacing system for margins and padding.
- Type Hierarchy Preview — See how display, heading, and body sizes work together on one page.
- Vertical Rhythm Calculator — Baseline grids and rhythm-safe spacing for editorial layouts.
- Responsive Type Preview — Check how your type holds up from mobile to desktop widths.
- Readability Preview — Measure reading comfort: measure, line length, and paragraph density.
- Widows & Orphans Checker — Catch typographic orphans before your readers do.
- WCAG Contrast Checker — AA and AAA pass/fail for normal and large text, with accessible variant suggestions.
- Contrast on Images — Test text contrast directly over photos and gradients.
- Color Palette Generator — 14 curated palettes with contrast data for every pairing of foreground and background.
- Color Palette from Image Extractor — Pull a working palette out of any image, in your browser.
- CSS Gradient Generator — OKLCH-interpolated gradients with copy-ready CSS.
- Variable Font Tester — Play with weight, width, and optical size axes on every variable font in the catalog.
- OpenType Feature Tester — Toggle ligatures, small caps, alternates, and tabular figures live.
- Font Inspector — Inspect metadata, axes, and features of catalog fonts.
- Font Weight Tester — Compare weights side by side to pick the right optical balance.
- Font Fallback Previewer — See what renders when your webfont fails to load.
- Font Coverage Checker — Check which languages and glyphs a font actually covers.
- Font Size Converter — Convert between px, pt, em, rem, and physical units.
- Text Measure Tool — Find the optimal line length (in ch units) for any font size.
- Brand Kit Builder — Combine fonts, palette, and type scale into one exportable design system.
- Export Everything — CSS, SCSS, Tailwind, JSON design tokens, and Markdown from any tool.
- Design Token Diff — Compare two design-token files and see exactly what changed.
- Shareable Brand Board — Package fonts, colors, and type styles into a link you can share.
- Brand Extractor — Extract fonts and colors from any website via a bookmarklet — server-free.
- Font Embed Generator — Generate
<link>and@font-facesnippets for Google Fonts. - Typographic Poster Maker — Design a print-ready typographic poster in the browser.
- Font Stack Generator — Build resilient system-font fallback stacks.
- Typography Glossary — 25 plain-English definitions, from apex to x-height, each linked to the tool where the term matters.
- Best Fonts For… — Curated picks by use case: SaaS, blogs, portfolios, resumes, e-commerce, and more.
- Best Fonts for Websites — Web-safe picks organized by project type.
- Fonts for Logos — Wordmark-friendly fonts that stay readable at small sizes.
- Script & Handwriting Fonts — When (and when not) to use script faces.
- Font Categories Guide — Sans, serif, slab, display: what each category is actually for.
- Font Alternatives — Free, open-source substitutes for commercial fonts like Helvetica, Gotham, and Futura — with live side-by-side previews.
- Typography Books — A short, opinionated reading list.
- External Typography Tools — An honest directory of tools we don't build, evaluated for pricing and privacy.
- Blog — Practical typography articles: pairing rules, fluid type tutorials, WCAG 2.2 changes, and more.
- Kerning Game — Train your eye by fixing real kerning pairs.
- Typography Checker — Paste text and get a typographic health report.
- Text Spacing Checker — Verify your spacing meets WCAG 2.2 text-spacing requirements.
- Favorites & Scrapbook — Save fonts, pairings, and palettes locally. No account needed — data stays in your browser.
- Not an AI generator. Pairing scores come from transparent, weighted heuristics written by designers — you can reason about every recommendation.
- Not a font marketplace. FontBlend links to each font's original source and license; it never redistributes font binaries.
- Not a SaaS. There is nothing to sign up for, and there are no tiers. Every tool is free and complete.
- Not a data collector. No analytics on your work, no accounts, no server-side storage. Local storage only.
- Privacy: FontBlend has no accounts, no server-side storage, and no tracking of the fonts or colors you work with. Details in the Privacy Policy.
- Fonts: Every font in the catalog keeps its original SIL Open Font License or Apache license. See the Terms of Use.
- Accessibility: FontBlend targets WCAG 2.2 AA across all tools.
FontBlend is an independent project, built and maintained by a single owner. The source code is not open source — this repository is documentation only. That said, suggestions are genuinely welcome:
- Suggest a font or pairing: hello@fontblend.com or open an issue. Please include the font name, its license, and a short reason.
- Report a bug or accessibility issue: Contact page — we read everything and reply as soon as we can.
- Support the project: Buy me a coffee keeps the tools free and ad-light.
If FontBlend saved you time on your next project, linking to fontblend.com is the best thanks we could ask for.