Typography & Typescale Extractor

Tracking since Apr 25, 2026.

Changelog

• May 2, 2026
  description

  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.

  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.

Permissions & access

Permissions

activeTabscripting

Host access

None declared

Screenshots