Hi Product Hunt! 👋 I'm the maker of FontMeter. I'm a frontend developer, and the question I ask most when I look at a site is "what is that font, and what size?" DevTools answers it one element at a time, and it doesn't tell you when the font you asked for isn't the one that's rendering. So FontMeter shows the whole type system at once: • A label beside every text style on screen (never on top of the text), and a panel listing every style on the page • The fonts that actually render: fallbacks, faked bold or italic, fonts that failed to load • The type scale as tokens, with the closest modular ratio, exported to CSS, Tailwind or JSON • WCAG contrast for every style, plus the colors your screen really shows (it reads pixels, so gradients and images count) • Inspect, a snapping ruler and a color picker for the rest It's free, has no account and no servers, and only runs on a tab when you turn it on. You don't have to install anything to try it: fontmeter.dev runs the extension's own code on itself. Click any "Show me" button and it opens on the page you're reading. There's even a card with four typography mistakes planted for it to find. I'd love to hear what you check first when you inspect a site, and what you'd want FontMeter to measure next.

FontMeter

Font sizes, real fonts and contrast, right on the page

Font sizes, real fonts and contrast, right on the page