Typography & Typescale Extractor di Ben Tran
Extracts typographyExtracts typography and generates a design system document. and generates a design system document.
Metadati estensione
Screenshot
Informazioni sull’estensione
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.
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.
Voto 0 da 0 revisori
Permessi e dati
Raccolta dati:
- Lo sviluppatore dichiara che questa estensione non richiede la raccolta di dati.
Ulteriori informazioni
- Link componente aggiuntivo
- Versione
- 1.2.0
- Dimensione
- 21,72 kB
- Ultimo aggiornamento
- 17 giorni fa (23 apr 2026)
- Categorie correlate
- Licenza
- Licenza MIT
- Informativa sulla privacy
- Consulta l’informativa sulla privacy per questo componente aggiuntivo
- Cronologia versioni
- Etichette
- Aggiungi alla raccolta