Media
1 item
Description
Read the real typography of any element. Resolved font, weight, size, line-height, tracking, colour. Copy as CSS or Tailwind. Type Inspector tells you what a typeface on a web page actually is - not what the stylesheet asked for. Every other inspector echoes the font-family stack back at you. A stack like Inter, "Helvetica Neue", Arial, sans-serif tells you nothing about which of those four the browser actually picked. Type Inspector walks the stack, tests each family against the fonts genuinely available to the page, and shows you the one that is really rendering - with the rest of the stack listed underneath so you can see what was skipped and why. HOW IT WORKS Click the toolbar icon to switch inspect mode on. Hover any element and a readout appears next to your cursor. Click to freeze the panel so you can work with it. Click the icon again, or press Esc, and the overlay removes itself completely. WHAT IT SHOWS - The rendered font family, resolved rather than guessed - The full declared stack, with the rendering family marked and unavailable families flagged - Weight as a number and a name, e.g. 600 - Semibold - Style, and font-variation-settings on variable fonts - Size in px and rem - Line height in px and as an unitless ratio - Letter spacing in px and em - Text transform, text align, and font stretch when set - Colour as hex, with the alpha percentage when translucent - A type-scale ratio: the element's size divided by the root font size COPY IT OUT Pin the panel and you get two buttons. Copy as CSS produces a clean, correctly formatted declaration block with no-op declarations stripped out. Copy as Tailwind produces the equivalent utility classes, using the default scale where a value matches and arbitrary-value classes where it does not, so the result is always exact. BUILT TO STAY OUT OF THE WAY The overlay lives in a shadow root with a full style reset, so a page's own CSS can never bleed in and distort the readout - it renders identically on a CSS reset and on the most hostile stylesheet you can find. It never inspects itself, and it unbinds every listener when you switch it off. PRIVACY Type Inspector has no servers, no analytics, and no network access of any kind. It reads computed styles in the page and shows them to you. Nothing is stored and nothing is transmitted. It only runs on a tab after you click the icon on that tab.