Lumist Type Extractor door Ben Tran

Replicating clean web typography is about more than just copying a font name—it is about understanding the mathematical scale, weight hierarchy, and relative line-heights that hold the design together.

Lumist Type Extractor is an on-demand developer utility that parses the active tab's computed typography properties. It scans the page for major heading tags (H1–H6) and body text, extracts their font families, weights, and font sizes, and calculates their relative, unitless line-height ratios.

With a single click, you can bridge these extracted values directly into your local, modular-scale workspace at lumist.app/type to test them inside live layout mockups and generate responsive CSS sizes.

Key Features:

• Typography Scraper: Reads computed font families, font weights, and layout sizes directly from the webpage.
• Line-Height Calculator: Converts absolute pixel line-heights into relative, unitless ratios for scalable CSS.
• Workspace Integration: Bridges the active tab's typography properties directly to your local sandboxed lumist.app workspace.
• On-Demand Activation: The extension remains dormant until clicked. No background scripts run, and your browsing history is never tracked.
• Privacy-First: Operates strictly client-side. No tracking code, no server transmission, and no data collection.

How to Use:

1. Navigate to any webpage whose typography you want to study.
2. Click the Lumist Type Extractor icon in your toolbar.
3. Review the computed typography list (rem, px, weights, and sample text).
4. Click "Open in Lumist Type" to load the dominant typography structure into your local workspace.