Typography & Typescale Extractor par Ben Tran
Extracts typographyExtracts typography and generates a design system document. and generates a design system document.
MĂ©tadonnĂ©es de lâextension
Captures dâĂ©cran
Ă propos de cette extension
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.
Noté 0 par 1 personne
Autorisations et données
Collecte de données :
- Le dĂ©veloppeur indique que cette extension nâa pas besoin de collecter de donnĂ©es.
Plus dâinformations
- Liens du module
- Version
- 1.2.0
- Taille
- 21,72Â Ko
- DerniĂšre mise Ă jour
- il y a 23 jours (23 avr. 2026)
- Catégories associées
- Licence
- Licence MIT
- Politique de confidentialité
- Lire la politique de confidentialité de ce module
- Historique des versions
- Ătiquettes
- Ajouter Ă la collection