See exactly which fonts any website uses — font family, weight, size, line-height, and letter-spacing — without digging through DevTools. Identify typography in one click and copy the full CSS.
Typography is responsible for roughly 95% of web design. The fonts a website uses define its personality, readability, and professional feel more than almost any other design element. Identifying fonts on websites you admire is a fundamental skill for anyone working in web design, and doing it efficiently makes a real difference in your workflow.
Traditionally, identifying a web font meant right-clicking, choosing 'Inspect,' navigating to the computed styles panel in DevTools, and searching for font-family — then repeating for every text element you're curious about. If the site uses Google Fonts, you might recognize the name. If it uses a commercial font from a foundry you're not familiar with, you'd need to search further to find where to purchase or license it.
A font identification extension shortens this to a single click. Point at any text element and immediately see the complete typography stack: font family, weight, size, line-height, letter-spacing, and color. The best tools also show fallback fonts so you understand the full font-family declaration.
Font family is the obvious starting point, but the supporting properties matter just as much. Font weight — many designers underestimate how weight affects readability and visual hierarchy. Using 400 vs. 450 vs. 500 for body text creates noticeably different reading experiences. Line-height — this is arguably more important than font size for readability. A line-height of 1.5-1.7 for body text is generally optimal, but it depends on the font's x-height and intended reading context.
Letter-spacing is often overlooked but critical for headings, where slightly negative tracking tightens large text for a more polished look. Font-size — check what units the site uses (px, rem, em, clamp()) as this reveals their responsive typography approach.
Regular font identification builds your typographic vocabulary. Over time, you'll start recognizing popular choices like Inter, Geist, Satoshi, or Berkeley Mono on sight. You'll develop opinions about which fonts work for which contexts — editorial, SaaS, e-commerce, documentation. This pattern recognition is invaluable for making faster, more informed typography decisions in your own work.
Identifying a font is just the first step — before using it, check its license. Google Fonts are free. Fonts from foundries like Klim, Commercial Type, or Hoefler&Co require purchased licenses. Some fonts you identify may be custom or proprietary. A good font identifier helps you figure out what a font is; licensing research is the necessary next step.
Get instant page analysis on every site you visit. One-click install, no signup required.
Install Atoms for Chrome