Typography & Typescale Extractor 作者: Ben Tran
Extracts typographyExtracts typography and generates a design system document. 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.
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.
由 1 位評論者給出 0 分
權限與資料
更多資訊
- 附加元件網址
- 版本
- 1.2.0
- 大小
- 21.72 KB
- 最近更新
- 22 天前 (2026年4月23日)
- 相關分類
- 授權條款
- MIT License
- 隱私權保護政策
- 閱讀此附加元件的隱私權保護政策
- 版本紀錄
- 新增至收藏集