Menu
CSS3 defines new a length unit for font-size called rem. This allow us to compute element's font-size relate to the root element (html element).
To compute the font-size more easily , we usually assume the root element's font-size is 16px, therefore the CSS usually ends up like this:
html { font-size:62.5%; } // 10px = 16px * 0.625 So, every element height with rem is relative to 10px, for example
p{ font-size : 1.4rem ;} // 14px = 10px * 1.4 I cant find why we assume we can multiply by 16px? How can we trust every browser will have the same base value of 16px? Is there is a standard description about the pre-defined 16px?
Ref
443
Set Font Size With Em The default text size in browsers is 16px. So, the default size of 1em is 16px.
Points vs. Pixels 1 pixel (px) is usually assumed to be 1/96th of an inch. 1 point (pt) is assumed to be 1/72nd of an inch. Therefore 16px = 12pt.
rem values are relative to the root html element, not to the parent element. That is, If font-size of the root element is 16px then 1 rem = 16px for all elements. If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px).
If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences. Sometimes these minor differences can have a domino effect.
The base font-size is determined by the users pre-defined preferences within the browser.
In almost every browser, 16px is the standard for proportional fonts. This can also change dependant on if the font uses serifs or is a fixed width font.
Just remember, em is relative to the element it is used on or relative to the inherited parents font-size, and is proportional to that. rem however, uses the root html elements.
For example:
html { font-size: 16px; } h1 { font-size: 2em; // 32px } p { font-size: 1em; // 16px } .someClass { font-size: .75em; // 12px } .someClass p { font-size: 2em; // 24px } .someClass p .test { font-size: 1.25rem; // 20px }<html> <h1>2em Title Text</h1> <p>Normal Element Text</p> <div class="someClass"> someClass font size <p>SomeClass with em</p> <p><span class="test">someClass p element with class test</span> </p> </div> </html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
