Does CSSpeek show the actual font family being rendered or the stack?

Both. CSSpeek displays the full font-family stack declared in CSS and highlights which font the browser actually resolved to render the text — so you know when a fallback is kicking in.

What units does CSSpeek use for font size?

CSSpeek reports computed pixel values. If the source CSS uses rem, em, or clamp(), you'll see the final pixel value the browser resolved, plus the original declared unit when available.

Can I see letter-spacing and font-weight too?

Yes. The typography panel includes font-weight, letter-spacing, text-transform, and text-decoration in addition to family, size, line-height, and alignment.

Does it handle variable fonts?

Yes. For variable fonts, CSSpeek shows the applied axis values (weight, width, slant) as resolved by the browser.

Why is the font-size different from what I wrote in my stylesheet?

The browser resolves relative units (rem, em, %) using the element's context. CSSpeek shows the computed pixel value — the number the browser actually rendered with — which is what design specs usually care about.

Typography, fully decoded.

CSSpeek resolves the computed typography for any element. No chasing inheritance through ten stylesheets, no guessing which font the browser actually rendered.

Add to Chrome — Free

What you'll see

Font Size: 72px
Font Family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
             "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Line Height: 72px
Text Align: center
Color: rgb(17, 24, 39)

Computed values, not declared ones

CSS typography inherits. A paragraph picks up font-family from its parent, font-size from its own rule but expressed in rem from the root, and color from whatever ancestor set it last. Chasing that cascade by hand is tedious and error-prone.

CSSpeek sidesteps the hunt by showing you the browser's final answer: computed font-family, pixel-resolved size, absolute line-height. The numbers that actually rendered on screen.

Font stack resolution

System font stacks like ui-sans-serif, system-ui, sans-serif resolve differently on different platforms — San Francisco on macOS, Segoe UI on Windows, Roboto on Android. CSSpeek shows the declared stack and indicates which family the browser selected on your machine. That alone has saved many cross-platform bug investigations.

Why it matters

Match a design spec: verify line-height and font-size down to the pixel.
Diagnose layout shifts caused by font fallback when a webfont fails to load in time.
Identify a site's font stack when you see something you want to learn from.
Teach CSS: students can see how rem and em resolve in real pages.

Text color and contrast

Typography is more than size and spacing — color is legibility. CSSpeek shows the resolved color value alongside the rendered font, giving you the numbers you need to check contrast against the background.

Typography: frequently asked questions

Does CSSpeek show the actual font family being rendered or the stack?: Both. CSSpeek displays the full font-family stack declared in CSS and highlights which font the browser actually resolved to render the text — so you know when a fallback is kicking in.
What units does CSSpeek use for font size?: CSSpeek reports computed pixel values. If the source CSS uses rem, em, or clamp(), you'll see the final pixel value the browser resolved, plus the original declared unit when available.
Can I see letter-spacing and font-weight too?: Yes. The typography panel includes font-weight, letter-spacing, text-transform, and text-decoration in addition to family, size, line-height, and alignment.
Does it handle variable fonts?: Yes. For variable fonts, CSSpeek shows the applied axis values (weight, width, slant) as resolved by the browser.
Why is the font-size different from what I wrote in my stylesheet?: The browser resolves relative units (rem, em, %) using the element's context. CSSpeek shows the computed pixel value — the number the browser actually rendered with — which is what design specs usually care about.