Choosing a font

Work through three questions in order. Where will it run?A 14px label on a phone in sunlight has different needs from a 60px landing headline or a printed poster. Screen work wants tall x-heights, open apertures, and hinting; display work rewards personality.

What must it cover? Count the weights you actually use (most products need 400, 500, 600, and one 700), the scripts (Latin only? Cyrillic? Arabic?), and the special cases — tabular figures for prices, a mono sibling for code samples. A family that covers everything you need beats a prettier one that doesn't.

What should it feel like? This is the brand question. Neutral (Inter), technical (Space Grotesk), editorial (Fraunces), warm (Manrope). Write three adjectives for your product, then audition fonts against them with your own copy — never with the specimen paragraph.

Two families are usually enough; three is the practical maximum. The reliable recipe is contrast in exactly one dimension: a serif for reading with a sans for interface, or a loud display face for headlines with a neutral text face underneath. Faces that differ in every dimension fight; faces that differ in none blend into mush.

Build hierarchy with weight and size before you reach for another family — a single variable family at 400/500/700 covers most products. When you do pair, match the x-heights (mismatched x-heights read as a mistake at every size) and test on real devices, not scaled-down desktop screenshots.

The pairings page lists curated heading-plus-body combinations from the catalog, and every font's page shows its similar and alternative families.

A variable font is one file that spans an axis — usually weight (100–900), sometimes width or optical size. You get every weight for roughly the download cost of two static ones, and intermediate weights (a true 550) when your scale needs them.

For interfaces, prefer families that ship a variable build or at least 400/500/600/700 statics. Weight is your strongest hierarchy tool after size; a family with one weight forces you into fake-bold territory, which renders poorly. For code, a mono family with a 400 and a 700 is usually enough.

Optical size (the opsz axis) is worth knowing: the face subtly adjusts contrast and spacing for the size it is set at. Fraunces is a good example — its display sizes are dramatically different from its text sizes, from the same file.

Web fonts are a performance budget line like any other asset. Ship WOFF2, subset to the scripts you use, and set font-display: swapso text renders in the fallback immediately instead of sitting invisible.

Choose a fallback with similar metrics (x-height, width) to reduce layout shift when the web font lands, and preload only the one or two files used above the fold. Self-hosting (what the install snippets on each font page give you) removes a DNS + connection round trip versus a third-party CSS payload and makes the request count visible in your own waterfall.

Each font page on this site ships copy-ready snippets — HTML link tags, CSS@import, @font-face for self-hosting, and npm packages where the family publishes one.

Keep text contrast at 4.5:1 for body copy and 3:1 for large text. The typeface itself is rarely the contrast problem — thin weights on busy backgrounds are. When a font offers a 300 weight, treat it as a display luxury, not a body option.

Respect user motion and size settings: size text in relative units so browser zoom and system scaling work, and never put information in a decorative face a user must read under time pressure. Verify zero/one, capital-i/lowercase-L, and O/zero legibility in any face used for codes, identifiers, or prices — monospaces exist largely to solve this.

Finally, check script coverage against your actual audience. A beautiful Latin face with tacked-on Cyrillic glyphs can render inconsistent weight and rhythm between scripts; families designed across scripts (IBM Plex, Noto, Rubik) are the safe multilingual pick.

Every font in this catalog is free to use, but the licenses differ in ways that matter when you embed, modify, or redistribute.

SIL Open Font License (OFL)

The most common. Use in any product, embed freely, modify for internal use. The one rule: if you redistribute a modified version, it must also be OFL and carry a different name. Reserved Font Name clauses mean you can't ship a renamed-but-identical copy.

Apache License 2.

Effectively the same freedoms for your use, with an explicit patent grant and NOTICE file requirements if you redistribute. Common for Roboto-adjacent Google families.

UFL and custom

Ubuntu Font License (Ubuntu family) and a few custom terms. Always readable, rarely restrictive for product use — but read them before bundling into an app you distribute, where "embedding" terms bite.

The practical rule: using a font in a website or app is almost always fine; redistributing the files (bundling in a desktop app, shipping in an SDK, forking the design) is where the license text earns its keep. Each font page names its license; when in doubt, the family page on Google Fonts or the foundry's site has the authoritative text.

The site is built for exactly this workflow. Filter thegallery by category, weight, or source; open a font to see it set in itself with pairing suggestions and copy-ready install snippets.

Put candidates in the compare tray andview them side by side with your own sample text — the fastest way to settle a shortlist. Theplaygroundrenders any font inside realistic surfaces: blog, docs, SaaS, shop, chat, and article layouts, plus a phone mockup, so you see the face doing real work instead of posing on a specimen card.

Everything you favorite or collect is stored locally in your browser — no account, no tracking — and can be exported as a file or link and imported on another machine from thecollections page.