A better eye for type.
Practical guides, thoughtful details, and a little inspiration.
For everyone who’s ever asked, “what font is that?”
What font is that? How to identify the font on any website
Four reliable ways to find out what font a website uses, from a one-click extension to browser DevTools, plus what to do when the text is an image.
How to see every font a web page uses
List every font on a web page with the Network panel, Firefox’s Fonts tab, a short console snippet or one click, and learn how to read the result.
You found the font. Here is how to get it (legally)
Found a font on another website? Work out which of five cases you are in and the legal way to get it: Google Fonts, Adobe Fonts, a license or a free match.
How to find a font with Chrome DevTools (and the faster way)
Find the exact font on any page with Chrome DevTools: the Computed tab, Rendered Fonts, the Network panel and @font-face rules. Plus a one-click shortcut.
How to find the font size, weight and line height of any text
Read the exact font size, weight, line height and letter spacing of any text on a website, and convert the pixel values into rem, em and a ratio.
How to tell if a site uses Google Fonts, Adobe Fonts or its own files
Check whether a website loads its fonts from Google Fonts, Adobe Fonts, its own server or the device, using view-source, the Network panel or one click.
How to identify a font from an image or screenshot
Find the font in a picture: check whether the text is really an image, prepare a clean crop, run an image identifier, and compare candidates letter by letter.
Copy any website’s typography as CSS, Tailwind or SCSS
Read a text style from any website with DevTools, clean it up, and rewrite it as portable CSS, Tailwind classes or SCSS variables. Or copy it in one click.
Why your font looks different: CSS font stacks and fallbacks explained
Learn how browsers choose a font from your CSS stack, why web fonts fail to load, how to debug it in DevTools, and how to build a fallback that barely shifts.
How to find what font a website uses in Firefox, Safari and Edge
Step-by-step ways to identify a website’s font in Firefox, Safari and Edge with the built-in developer tools, plus which browsers can run Font Inspector.
How to check text contrast on a live website
Check whether text on a live page meets WCAG contrast: the ratios to aim for, where Chrome and Firefox DevTools show them, and the cases the numbers miss.
Can I use a font I found on another website? Font licensing in plain English
What desktop, web and app font licenses allow, how open source and “free for personal use” fonts differ, and a checklist for a font you found online.
Are Google Fonts really free for commercial use?
Yes. See what the Google Fonts licenses allow for logos, print, apps and client work, the few things they forbid, and how to check any family’s license.
Google Fonts and GDPR: when and how to self-host
Why embedding Google Fonts sends visitor IP addresses to Google, what the 2022 Munich ruling said, and how to self-host the fonts and verify the result.
How to pair fonts (without overthinking it)
A practical method for pairing fonts: give each typeface a job, pick one clear contrast, test on real content, and study pairings on sites you admire.
Line height and letter spacing: the invisible difference
How to set line height and letter spacing in CSS: unitless values, ranges for body and headings, line length, WCAG text spacing and how to inspect it.
Variable fonts, explained one axis at a time
What variable fonts are, the five registered axes and their CSS properties, a correct @font-face setup, font-variation-settings pitfalls, and how to spot one.
Build a typography scale that feels like a system
Build a type scale: pick a base size and a ratio, compute the steps in rem, make headings fluid with clamp(), and ship it as CSS or Tailwind tokens.