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
Bastardica
Browser foundry that mixes, stretches and squishes OpenType fonts via ligature tricks, running fully local with Pyodide and fontTools.
Why it made the list: Makes Times New Bastard-style cursed fonts in seconds without uploading anything.
TypographyfreeMitPitt (@MitPitt)bastardica.mitpit.com
03
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
04
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
05
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
06
C64 Keyboard Font
Photo-based reconstruction of the lettering on classic Commodore 64 keycaps, shipped as desktop fonts, a webfont, editable outlines and a specimen.
Why it made the list: Authentic retro keycap type traced from real photos, public domain under CC0.
Typographyopen-source@szabadkaigithub.com
07
Composite Font Studio
Browser tool for InDesign-style composite fonts: pair CJK and Latin faces, match size, baseline and weight per character class, then export CSS, app code or merged TTF/OTF/WOFF2.
Why it made the list: Solves CJK and Latin mixing properly, down to per-weight tuning and real font files for Figma.
TypographyMIT@charlie5188charlie5188.github.io
08
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
09
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
10
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
11
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
12
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
13
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
14
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
15
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
16
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
17
Furifont
Japanese font built on Source Han that draws furigana above kanji itself via ligatures, so readings appear anywhere custom fonts work, with no JavaScript.
Why it made the list: Furigana as a plain font file is a genuinely clever ligature hack; you can even build your own.
Typographyopen-sourceAnthony Fu (@antfu)furifont.antfu.me
18
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
19
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
20
GenZui
Free GenZui Serif and Sans fonts from Noto JP, adding hentaigana, historical kana and Unicode 18 glyphs.
Why it made the list: Japanese type with rare historical kana that stock Noto simply does not ship.
TypographyMITmkpoli (@mkpoli)genzui.mkpo.li
21
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
22
Harshpreet Hand
Handwriting font built by Claude Code from 120 pages of college notes, with three rotating variants per letter, two weights and a documented photo-to-font pipeline.
Why it made the list: A real, usable handwriting font plus the full recipe for making your own with an agent.
TypographyMIT@harshpreet931harshpreet931.github.io
23
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
24
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

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