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.
评分 0(1 位用户)
权限与数据
更多信息
- 附加组件链接
- 版本
- 1.2.0
- 大小
- 21.72 KB
- 上次更新
- 1 个月前 (2026年4月23日)
- 相关分类
- 许可证
- MIT 许可证
- 隐私政策
- 阅读此附加组件的隐私政策
- 版本历史
- 添加到收藏集