How to Identify Fonts, Weights, and Sizes on Any Webpage
Typography inspection guide · 3 min read
Typography sets the tone and aesthetic of every digital product. When you see a website with beautiful typography pairings, you shouldn't have to open DevTools, navigate deep into the “Computed” tab, and search for font-family.
Why Typography Detection Matters for UI Designers
Knowing the exact typeface is only half the battle. Good typography inspection reveals the full typographic stack: primary headings (H1/H2), body weights (400, 500, 600), line heights, and letter spacing (tracking).
1-Click Font Extraction with ChromaPick
ChromaPick parses all loaded web fonts (including Google Fonts, Adobe Fonts, and self-hosted woff2 files) and outputs an organized breakdown of every font family and weight combination in use.
Extract typography & colors instantly
Add ChromaPick to Chrome and start inspecting type styles in seconds.
Add to Chrome — FreeFont detection is included on the free tier. Pro ($10 one-time) unlocks unlimited extractions plus the full palette, gradient, and code-export toolkit.
Related guides
- How to Extract Color Palettes from Any Website — pair type with color.
- How to Extract Design Tokens from Any Website — the full token pipeline.
- How to Create Figma Color Variables — bring it all into Figma.