Paste CSS rules or computed-style JSON from your browser to detect the font sizes used on a webpage. The tool converts rem, em, percent, pt, and px values into a practical pixel table, then shows line-height, font weight, and color so designers, marketers, and developers can audit typography without guessing.
This font size detector is designed for real website audits. Paste a CSS block, inline style sample, or the JSON copied by the browser snippet. It does not fetch private pages or bypass site security; instead, it gives you a clean way to analyze text styles you can already inspect.
| Selector | Declared size | Computed px | Line height | Weight | Color |
|---|
Open the website you want to audit and copy the relevant CSS rules, inline styles, or computed style values from DevTools. If you need live-page data, use the browser snippet on a page you are allowed to inspect, then paste the copied JSON here.
Most websites use a 16px root size, but design systems sometimes change it. Set the base value before analyzing so rem, em, and percent declarations convert to realistic pixel values.
Review the selector, declared size, computed pixels, line-height, weight, and color together. This makes it easier to spot inconsistent headings, oversized buttons, weak body text, and mismatched responsive styles.
Searchers for a font size detector usually want a quick way to understand how text is styled on a real webpage, not another generic font identifier.
Check whether hero headings, subheads, buttons, pricing cards, and FAQ text follow a consistent scale. The result table makes unusually large or small text easier to notice.
Design handoff often mixes rem, em, percent, and px values. This tool converts those units into one comparable pixel view so designers and developers can talk about the same size.
Paste desktop and mobile CSS samples separately to compare how font sizes change across breakpoints. It is useful before deciding whether a layout needs stronger mobile typography rules.
Font size alone rarely explains readability. Keeping line-height, weight, and color beside each rule helps you diagnose why a section feels cramped, heavy, faint, or visually inconsistent.
These workflows answer different questions. Use the font size detector when the key issue is CSS sizing rather than naming the typeface.
Paste style samples and get a table of declared sizes, computed pixels, line-height, weight, and color. It is focused on auditing typography scale and readability.
Best for: checking font size on a website from CSS or computed styles
A font finder is better when you have an image and need the probable typeface name. It cannot reliably tell you the exact CSS font-size used by a live page.
Best for: identifying a font from an image
DevTools can reveal exact computed styles for a single element. This page helps when you want to paste several samples and compare them in a simpler table.
Best for: deep inspection of one element at a time
Many searches for font size detector are different from searches for what font is this. The user is not always trying to name Helvetica, Inter, or a brand typeface. They may need to know whether a headline is 48px, whether body text is 16px or 18px, or whether a button uses a smaller size than the design system expects. This page keeps that intent separate from image-based font recognition by focusing on CSS font-size values and computed pixel output.
A clean typography audit needs more than a screenshot. When you rebuild a landing page, compare a competitor layout, or check a marketing site before launch, the size scale matters: h1, h2, body text, captions, navigation, buttons, and card labels should feel intentional. Paste a sample from each section and the tool gives you a compact table you can share in a design QA note or implementation checklist.
CSS font sizes are often written in rem, em, percent, pt, and px. Those units are not interchangeable unless you know the base size and context. A 1.25rem subtitle might equal 20px on a normal root, while 125% depends on the inherited size. By setting the base pixel value and reviewing computed output, you can make safer decisions before changing a stylesheet or creating a responsive type scale.
Inspect the text with your browser, copy the CSS rule or computed style, and paste it into this font size detector. The tool reads font-size declarations, converts common units into pixels, and keeps line-height, weight, and color beside each result.
No. A static web tool cannot safely bypass cross-origin restrictions, private pages, login walls, or site security. The reliable workflow is to inspect a page you can access, copy the CSS or computed-style JSON, and analyze it here.
Declared size is the original CSS value, such as 1.25rem or 14px. Computed px is the approximate pixel value after conversion. The conversion uses the base font size you choose, so set it to match your website when possible.
Yes. It converts rem and em values using the base pixel size field. This is most accurate for rem. For em values, the true browser value can depend on the parent element, so treat the result as a practical audit estimate unless you paste computed browser JSON.
Readability depends on more than size. A 16px paragraph can feel cramped with low line-height, too faint with low contrast, or too heavy with a bold weight. Showing these values together helps you diagnose typography problems faster.
Use this page when you need CSS font size and related style values from live website text. Use the image font detector when you only have a screenshot, logo, or flattened image and need the probable font name.