CODEWITHSUNDEEP
cssfont-size
its_me
its_me

Reputation: 11338

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 <html>—element. That means that we can define a single font size on the <html> 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.)

Upvotes: 0

Views: 3663

Answers (2)

its_me
its_me

Reputation: 11338

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.

Upvotes: 1

JaredMcAteer
JaredMcAteer

Reputation: 22536

First off !important is lazy coding and dangerous to maintainability. It's toxic and breaks the nature of CSS (the Cascading portion). Avoid it at all costs.

Second:

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

Might as well be written:

code {
    font-size: 1rem !important;
}

The second rule overrides the first (again, the Cascading nature of CSS)

rem stands for root em, which is the font-size of the top level element (i.e., html)

and what your rule is saying 1 x the em of the html element, with is 87.5% of the browser default.

EDIT:

Your <p> tags have a font-size of 100% inherited from the parent element which is eventually inherited from body and body has a 1.2142857rem which is roughly 17px This is why you're seeing a difference in font sizes, which is also exacerbated by the the difference of monospace and sans serif fonts.

Upvotes: 2

Related Questions