LabelsEvery text style, labeled
One label per style, beside the text. The darker the dot, the bigger the type.
Chrome extensionFreev2.0.0
See the type system of any page.
FontMeter labels every text style on screen, shows which fonts actually render, finds the type scale, checks contrast and measures spacing, right on the page you are looking at.
The button runs FontMeter’s own code on this page; nothing gets installed. Same shortcut as the extension:AltShiftF
Try it
Every tool works on this page.
Pick one. FontMeter turns on and opens that tool on the text you are reading now.
Labels
Details cardEverything about one style
Font, size in px, rem and em, line height, weight, contrast and line length.
FontsWhich fonts actually render
Web font or installed, the weights in use, fallbacks and faked bold.
ScaleThe type scale, as tokens
Sizes as sm, base, lg and up, with the closest ratio. Export to CSS, Tailwind or JSON.
ContrastContrast against WCAG
Text below AA is listed, and outlined on the page with one click.
As seenThe palette the eye sees
Screen pixels grouped by how alike they look, with each color’s share of the screen.
InspectInspect and walk the DOM
Margin and padding on hover, click to pin, arrow keys to move up and down the tree.
RulerDrag to measure
Snaps to element edges. Shift keeps the line straight.
Color pickerPick any pixel
A zoomed loupe, then HEX, RGB, HSL or OKLCH and the closest CSS color.
Playground
Find the four problems in this card.
We broke this card on purpose. Turn on FontMeter and see what it reports, then compare with the answers.
Field notes · Issue 12
Why your body text feels cramped
Most cramped paragraphs aren’t caused by the font. They come from a line height copied from a heading style, a size picked by eye instead of from the scale, and grey text that looked fine on a bright monitor.
Each of these is easy to miss in a design review and easy to catch with the right overlay. Look at this card with FontMeter on, and every one of them has a label, a warning or a failing contrast ratio.
1The kicker is in faux bold
It asks for IBM Plex Mono at weight 700, but this page only loads 400 and 500, so the browser fakes the bold. FontMeter’s details card and Fonts tab flag it: “Faux bold: weight 700 not loaded, browser fakes it from 500”.
2The meta line fails contrast
Light grey #9aa0aa on white is 2.6:1, and WCAG AA asks for 4.5:1 at this size. It is the only entry under “Contrast below WCAG AA” in the Colors tab.
3The body text is off the scale
Everything else on this page sits on a 1.25 scale from 16px. The card’s 15px body text doesn’t, and the Scale tab marks it “off scale”.
4The line height is too tight
At 1.15 the lines nearly touch. The details card warns “Tight line height for body text (1.15×, aim for 1.4 or more)”.
On real websites
Tested where you will use it.
Screenshots of FontMeter 2.0 running in Chromium on public sites. We are not affiliated with these sites.
Measure, and know which font you are really seeing
Inspect pins the title and measures 641.3 px to the next heading. The card notes that the requested Linux Libertine isn’t installed, so Times renders.
Every low-contrast element, outlined
Grey #828282 on #f6f6ef is 3.54:1. One click outlines all 92 elements that use it.
What the eye sees, not only what the CSS says
“As seen” groups the screen’s pixels by how alike they look. Colors from the animated gradient have no CSS match and are marked “Not in CSS”.
Privacy
Runs on your device. Sees a page only when you ask.
Nothing leaves your browser
FontMeter has no servers and no analytics. It reads the page in the tab you turned it on for, and sends nothing anywhere.
Access on click
It can read a page only after you click its icon or press the shortcut on that tab. Navigate away and the access ends.
activeTabThree permissions
activeTab to read the page you turned it on for, scripting to add the overlay to it, and storage to remember your settings.
activeTab · scripting · storageQuestions
Good to know
Is FontMeter free?
Yes. There is no account and nothing to pay.
Which browsers does it work in?
Chrome 121 or newer, and Chromium browsers that install from the Chrome Web Store, such as Edge, Brave and Arc. Firefox and Safari are not supported yet.
Does it change the page I am looking at?
No. The overlay sits on top in its own isolated layer. While inspect, ruler or picker is on, clicks don’t reach the page, so you don’t trigger anything by accident.
Where doesn’t it work?
Browser pages such as chrome://settings, the Chrome Web Store and the built-in PDF viewer, which no extension may access. Text inside iframes isn’t analyzed yet.
How is this different from DevTools?
DevTools shows one element at a time. FontMeter shows every text style on the page at once, plus what DevTools buries: the font that actually renders, faked bold, the type scale and contrast across the whole page.
Review any page’s type in one click.
Add FontMeter to Chrome, open a page and press Alt+Shift+F.