Type Spector

About

Type Spector is a lightweight Chrome extension for designers, frontend developers and QA engineers who need to quickly inspect and test typography on any webpage — without opening DevTools.

How it works
Activate Type Spector and color-coded overlays appear across every text element on the page, showing font size, line height, weight, family and letter spacing at a glance. Switch to Hover Mode to keep the page clean — just hover any text to see its typography details in a floating tooltip.

Live Editor
The tooltip isn't just for reading — you can edit values directly. Change font size, swap the font family, adjust weight or letter spacing and see the result live on the page instantly. Click to pin the tooltip open while you experiment. Press Escape or click outside to close.

Features
• Overlay mode — see all text elements labeled at once
• Hover mode — clean inspection, one element at a time
• Live editor — edit font size, line height, weight, family and letter spacing directly in the tooltip
• Pin tooltip — click any element to lock the tooltip open for editing
• Copy CSS — copy all typography properties to clipboard in one click
• Reset — restore original values at any time
• Filter layers — toggle Font Size, Line Height, Font Weight, Font Family and Letter Spacing independently
• Ignore selectors — exclude icon fonts, navbars or any element from overlays
• Dark & Light mode — switch the popup to match your workflow

Color legend
🔵 Indigo — Font size
🟢 Green — Line height
🟠 Orange — Font weight
🟣 Purple — Font family
🩷 Pink — Letter spacing

Perfect for design QA, checking font consistency across a live site, verifying typography matches design specs, and quickly testing how different sizes or weights look in context.