Typography & Typescale Extractor by Ben Tran

Reverse-engineer any website’s typography in a single click.

Stop digging through messy DevTools panels just to figure out what font sizes a website is using. Typography & Typescale Extractor automatically scans the active webpage, identifies the primary text elements (H1-H6, paragraphs, buttons, and links), and generates a beautifully formatted design system document right in your browser.

Whether you are building a brand guide, conducting competitor analysis, or looking for design inspiration, this tool does the heavy lifting for you.

✨ Core Features:

► Smart DOM Traversal: Ignores hidden SEO tags and invisible elements, extracting only the typography that is actually visible on the screen.

► Automatic REM Conversion: Dynamically calculates the root font size of the host website and converts pixel values into responsive rem scales.

► Live Visual Preview: Renders the exact font family, weight, and line-height using real sample text scraped directly from the page.

► Contrast-Aware Rendering: Automatically detects light text on dark background images and adjusts the preview contrast so the results are always readable.

► Clean & Minimal UI: Presents the data in a beautiful, structured grid inspired by professional typography tools.

🔒 Privacy First

This extension runs 100% locally in your browser. It does not track your browsing history, it does not use background tracking scripts, and no data is ever sent to external servers.