Find the absolute font-size of a relative font-size

Question

I use em as units for my fonts in combination with body {font-size:12px} (an absolute number, can be 20px or 14px...)

That works fine, but if I have multiple nested things, like

h4{
font-size:2em;
}
h4 span{
1.6em;
}
.parent_elementofthespan span.superspan{
font-size:1.3em;
}
.basecamp3rdpartyclass h4.span{
font-size:1.9!important;
...

Now, things get pretty complicated in calculating the actual absolute font-size of .parent_elementofthespan span.superspan for example.

Is there any chance of "seeing" the absolute font-size within a tool or something besides calculating it manually?

Answer 1

In Chrome Dev tools

F12 > Elements > Computed > font-size

A value in pixels will be displayed.

Answer 2

You should use rem unit wherever possible.
rem is relative to :root font size (html element in HTML but it could be <svg> or in other cases) so no hard calculations! In a nutshell, it's em without the cascade and 95% of the time it's what you need in your CSS.
Its compatibility is IE9+.

---

CSSViewer (a Firefox/Chrome extension) is way faster for checking font sizes (and other typographical properties like font weights and line heights, also color) on elements one after another than DevTools/Inspect.

• Chrome extension
• The original Firefox extension (has worked flawlessly for years BUT last update was 9 years ago: it may not work on Firefox 57+ coming in a few days :( RIP)