The Vibeary — round-up

Best typography tools for the web

Typography carries more of a design's quality than any other single decision, and the web makes it awkward: variable fonts, fluid scales, subsetting, licensing and fallback metrics all sit between you and a page that reads well. This shelf gathers the tools that remove that friction — scale calculators that give you a fluid clamp() ramp, pairing tools that show real pairings rather than random combinations, variable-font playgrounds for exploring axes before you commit, and the free typeface libraries worth trusting for commercial work.

What earned a place

Solves a real production problem: scale, pairing, loading or licensing
Shows the type at realistic sizes rather than as specimens only
Free, or free for the part that matters
Licensing is stated clearly where fonts are involved

24 picks from the library

01
Astrotypes
Curated font pairings for Astro with one-command install via the Astro Fonts API, Tailwind or plain CSS.
Why it made the list: Font pairing plus install CLI aimed at Astro — rare and immediately useful.
TypographyMITMichael Andreuzza (@michael-andreuzza)astrotypes.com
02
Better Web Type
Free seven-day email course plus articles on web typography: modular scales, pairing, vertical rhythm and typeface anatomy.
Why it made the list: Structured typography curriculum for developers, delivered in ten-minute daily doses
TypographyfreemiumMatej Latin (@matejlatin)betterwebtype.com
03
Bunny Fonts
Drop-in privacy-respecting replacement for the Google Fonts API with an identical URL structure and no tracking.
Why it made the list: One-line find-and-replace fixes the GDPR problem with Google Fonts.
TypographyfreeBunnyCDNfonts.bunny.net
04
Butterick's Practical Typography
Complete typography manual written as a hypertext book, with opinionated rules on measure, spacing, and type choice.
Why it made the list: Free, blunt and rule-based; the 'typography in ten minutes' summary ends arguments
TypographyfreeMatthew Butterick (@mbutterick)practicaltypography.com
05
Dev Fonts
Side-by-side comparison of monospace coding typefaces rendered in a real code sample with ligature toggles.
Why it made the list: Compares coding fonts in actual code, which foundry specimens never do.
TypographyfreeGafidevfonts.gafi.dev
06
Fluid Type Scale Calculator
Open-source clamp-based type scale generator with configurable ratios, naming, rounding and direct CSS or Sass export.
Why it made the list: More export control than Utopia and fully open source; good for token pipelines.
TypographyMITAleksandr Hovhannisyanfluid-type-scale.com
07
Font Playground
Experimental interface for variable fonts with novel axis controls, letting you explore designspace beyond simple sliders.
Why it made the list: Rethinks the variable-font UI itself; a research project you can actually use.
TypographyfreeWenting Zhangplay.typedetail.com
08
Font Style Matcher
Side-by-side tool for matching a web font's metrics to a fallback font to eliminate layout shift on load.
Why it made the list: Kills font-swap layout shift, a Core Web Vitals problem with almost no tooling
TypographyfreeMonica Dinculescu (@notwaldorf)meowni.ca
09
FontDrop
Browser font inspector that reads glyph coverage, metrics and OpenType data from a dropped file with no upload.
Why it made the list: Made by working type designers; shows the details other inspectors skip.
TypographyfreeViktor Nübel & Ulrike Rauschfontdrop.info
10
Fonts In Use
Archive of typography in the wild, indexed by typeface, industry and format, with editorial notes from type experts.
Why it made the list: Deep, expert-annotated type archive; research-grade compared to Pinterest boards.
TypographyfreeSam Berlow, Stephen Coles & Nick Shermanfontsinuse.com
11
Fontshare
Free-for-commercial-use typeface library from Indian Type Foundry, with variable fonts and full family downloads.
Why it made the list: Foundry-quality families for free, with variable versions most free libraries lack.
TypographyfreeIndian Type Foundryfontshare.com
12
Fontsource
Self-hostable npm packages for open-source fonts, including variable and subset builds, so you avoid third-party font CDNs.
Why it made the list: Kills the Google Fonts CDN dependency with one install. Quietly essential.
TypographyMITFontsourcefontsource.org
13
FontSpark
Rapid-fire font discovery that shows one random typeface at a time so you judge by feel instead of scrolling a grid.
Why it made the list: Breaks the paralysis of infinite font lists with a deliberately narrow interface.
Typographyfreefontspark.app
14
Future Fonts
Marketplace selling typefaces while still in progress at reduced prices, with free upgrades as the family develops.
Why it made the list: Buy weird type early and cheap; the catalogue is unlike any other store.
TypographypaidFuture Fontsfuturefonts.xyz
15
Garden of Flowers
Archive of pictorial typography from the 1600s to 1900s: printers' flowers, ornamental borders, rule pictures and compositional type experiments.
Why it made the list: Centuries of ornament nobody has mined; a bottomless source of decorative marks
TypographyfreeHeikki Lotvonen (@hlotvonen)garden-of-flowers.heikkilotvonen.com
16
HandDrawnFont
Browser font creator and SwiftUI package that draws letters from real pen strokes, keeping original stroke order and timing.
Why it made the list: Handwriting from an Apple Design Award app, not a traced typeface.
TypographyunknownJip van der Velde (@jipvandervelde)handdrawn.software
17
Indestructible Type
Small open-source foundry producing carefully drawn free typefaces, each with full documentation of its design intent.
Why it made the list: One person, a handful of families, craft level far above the free-font average.
Typographyopen-sourceOwen Earlindestructibletype.com
18
Justif
JavaScript library bringing Knuth-Plass line breaking, hyphenation, optical margin protrusion and microtypography to web text.
Why it made the list: Book-grade justification on the web; browsers still cannot do this natively
Typographyopen-sourceLyall Cooper (@lyallcooper)justif.lyall.co
19
Libre Fonts by Womxn
Curated index of libre typefaces designed by women and non-binary type designers, with direct source links.
Why it made the list: A collection axis no other font directory has; surfaces genuinely unseen work.
Typographyopen-sourcedesign-research.be
20
Modern Fluid Typography Editor
Visual editor for fluid type that graphs the clamp curve as you drag, making the math visible instead of guessed.
Why it made the list: Graphs the interpolation curve, which is the part everyone gets wrong blind.
Typographyfreemodern-fluid-typography.vercel.app
21
Modern Font Stacks
Fifteen curated CSS font-family stacks using only system-installed typefaces, with per-stack Unicode coverage tables and live previews.
Why it made the list: Zero-download typography with documented Unicode coverage — the fastest possible type layer.
TypographyfreeDan Klammer (@danklammer)modernfontstacks.com
22
Pimp My Type
Typography site with font reviews, pairing articles and video breakdowns aimed specifically at UI designers and developers.
Why it made the list: Type criticism written for screen interfaces rather than print, which is rare
TypographyfreemiumOliver Schöndorfer (@glyphstories)pimpmytype.com
23
The Good Line-Height
Single-purpose calculator that derives a fluid, size-aware line-height instead of a fixed unitless multiplier.
Why it made the list: Fixes the one typographic bug that survives in almost every design system
TypographyfreeJesse Rosenbergerthegoodlineheight.com
24
The League of Moveable Type
The original open-source type foundry, still shipping well-hinted free webfont families with proper licensing.
Why it made the list: Pre-dates Google Fonts and still has families you won't see everywhere.
Typographyopen-sourceThe League of Moveable Typetheleagueofmoveabletype.com

Questions

How do I build a fluid type scale?: Pick a base size and ratio for mobile and desktop, then interpolate with clamp() so sizes scale with the viewport. Several calculators here output the CSS directly.
Are free fonts safe for commercial projects?: Open licences such as OFL are, but always read the licence with the file. Each gem page lists the licence where the source states it.

All round-ups Search all gems Newest additions