Font Guides

Learn Typography.
Design Better.

In-depth guides on font identification, pairing, licensing, and web performance. Written for designers, developers, and brand builders.

The short version: how to pick and use fonts well

1. Identify before you imitate

When a design catches your eye, start by finding out what typeface it actually uses. Crop a clean, high-contrast piece of the text — ideally a single word with clear letterforms — and run it through the image font identifier. Look at the distinctive letters first when judging matches: the lowercase a and g, the uppercase R's leg, and the t's terminal reveal more about a typeface than any other glyphs. If the top match isn't exact, one of the ranked alternatives usually captures the same voice.

2. Know what the categories are for

Serifs (Lora, Merriweather) carry tradition and long-form readability; their strokes guide the eye along a line of text, which is why books still use them. Sans-serifs (Inter, Work Sans) read as modern and neutral, and hold up at small screen sizes. Display and script faces are seasoning, not the meal: use them for headlines and logos at large sizes, never for paragraphs. Monospace faces belong in code and in designs that want a technical voice. If you only remember one rule: body text needs a workhorse, headlines can take a personality.

3. Pair by contrast, not similarity

Two fonts that are almost alike fight each other; two fonts that are clearly different cooperate. The reliable recipe is one distinctive headline face plus one quiet text face — a geometric sans over a humanist serif, or a slab serif over a neutral grotesque. Keep it to two families (three at the absolute most), and create hierarchy with weight and size inside each family before reaching for another font. When in doubt, pair within a superfamily (like IBM Plex Sans and IBM Plex Serif), which was designed to agree.

4. Check the license before you ship

Free-to-download is not the same as free-to-use-anywhere. Fonts under the SIL Open Font License — which covers everything on Google Fonts and everything in our Browse library — can be used in personal and commercial work, embedded on websites, and bundled in apps. Commercial fonts are licensed per use: a desktop license doesn't automatically cover your website, and a web license is usually priced by pageviews. Check the license terms on the foundry's site before a client project ships, not after.

5. Load web fonts without slowing your site

Every font weight is a file the visitor downloads, so load only the weights you actually use — usually 400 and 700. Add font-display: swap so text renders immediately in a fallback font, preconnect to your font host, and consider a variable font when you need many weights: one file covers the whole range.

6. The mistakes that give beginners away

A few habits mark a design as amateur faster than anything else. Setting body text below 16px on the web. Using pure black text on pure white, which vibrates on screens — soften one of them. Centering long paragraphs, which forces the eye to hunt for each new line's start. Stretching or squeezing a font instead of choosing a condensed or extended cut. Letting line length run past 75 characters, or squeezing line height under 1.4 for paragraph text. And trusting a font's default letter-spacing at very large sizes — headlines almost always want slightly tighter tracking. Each of the guides below expands one of these topics into a practical, example-driven walkthrough.

Tutorial

Font Finder From Image: The Complete Guide

Step-by-step guide to getting accurate font matches from logos, screenshots, photos, and packaging using FontFinder.

12 min read
Typography 101

Serif vs Sans-Serif: When to Use Which

Learn the fundamental difference between serif and sans-serif fonts and the golden rules for choosing the right style for your project.

6 min read
Branding

Best Fonts for Logo Design in 2025

The top 20 fonts used by world-class logo designers, with examples from global brands and tips on why they work.

7 min read
Web Design

Web Font Performance: Load Fonts Without Slowing Your Site

Techniques to load web fonts fast — font-display, preconnect, subset loading, and variable fonts for minimal performance impact.

5 min read
Advanced

Variable Fonts Explained: One File, Infinite Styles

What variable fonts are, how they work, which axes you can control, and when to use them over static fonts.

6 min read
Legal

Font Licensing Explained: Free, OFL, Commercial & Web

Understand the different types of font licenses — SIL OFL, freeware, desktop, web, app, and ebook — before you use any font commercially.

5 min read
Tutorial

How to Identify a Font Used in a Brand Logo

Tips for getting accurate results from logo images: crop technique, contrast adjustment, and what to do when results differ.

4 min read
Resources

Best Free Font Alternatives to Popular Paid Fonts

A curated list of the best free look-alike fonts available in our database — matching the style of well-known typefaces without the price tag.

6 min read