Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Effect of !important declaration when sizing (fonts) with rem

Effect of !important declaration when sizing (fonts) with rem


UPDATE: Please note that I am seeing this issue only in Chrome (latest version). Everything seems to be fine in Firefox.

By definition:

The rem unit is relative to the root—or the —element. That means that we can define a single font size on the element and define all rem units to be a percentage of that.

Let me explain my situation with an example...

Relevant CSS:

html {
    font-size: 87.5%;

body {
    font-size: 17px;
    font-size: 1.21428571rem;

code {
    font-size: 14px !important;
    font-size: 1rem !important;

I am using the !important declaration to override the font-size of inline code.

The thing is, I noticed that the font-size of code blocks is much smaller than 14px, most probably 12px. But if I remove the !important declaration and set the font-size on a specific code element (styling a specific inline code element), the fonts-size is nice and fine at what appears to be 14px.

Does you have any idea as to how !important declarations may affect sizing in rem's? (Especially considering in my case.)

Problem courtesy of: its_me


Okay, the issue was with (1) font-family not defined for code and pre blocks, which meant Chrome and other webkit browsers chose some monospace font that appears smaller (2) line-height was smaller (almost equal to the font-size).

Fixing these two has solved the problem.

I have no idea why Chrome Dev Tools Web Inspector's "Computed Style" shows 11px as the font-size (also applies to any webkit browser, including Safari). I can confirm that it's showing the wrong value because by changing the font to Arial I could easily tell that it's 14px.

Also, after setting the font-family on code and pre blocks, Chrome now shows the correct computed font-size value.

Solution courtesy of: its_me


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Effect of !important declaration when sizing (fonts) with rem


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription