Typography & Typescale Extractor

Extracts typography and generates a design system document.

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. Version 1.2.0 — Security & Performance Update ► Security Hardening: Transitioned UI rendering logic from innerHTML to HTML5 <template> node cloning. This update effectively eliminates XSS (Cross-Site Scripting) vectors by ensuring all extracted text is handled as literal text nodes. ► Performance Optimization: Improved DOM manipulation efficiency by utilizing native element cloning, reducing the overhead of HTML parsing during complex webpage extractions.