Overview
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.
Details
- Version1.2.0
- UpdatedApril 25, 2026
- Size16.72KiB
- LanguagesEnglish (United States)
- DeveloperWebsite
Email
support@bentrandigital.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
Typography & Typescale Extractor has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.
Typography & Typescale Extractor handles the following:
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
Support
For help with questions, suggestions, or problems, visit the developer's support site
