All geek questions in one place

Is the default font size for each browser 16px? What for?

CSS3 defines a new length block for font-size called rem . This allows us to compute the font-size element related to the root element (html element).

To make font-size easier to calculate, we usually assume that the root font-size element is 16px , so CSS usually ends like this:

 html { font-size:62.5%; } // 10px = 16px * 0.625

So, each element height with rem is 10px , for example

 p{ font-size : 1.4rem ;} // 14px = 10px * 1.4

I can not find why we assume that we can multiply by 16px ? How can we trust that every browser will have the same 16px base value? Is there a standard description of predefined 16px ?

Link

+6
source share
1 answer

The font-size base is determined by predefined user preferences in the browser.

In almost every browser, 16px is the standard for proportional fonts. This may also vary depending on whether a serif font or a fixed-width font is used.

In most projects, I usually set the html element to use the px value instead of the % or em/rem value only so that all browsers, screens and devices have the same font size and that the elements on the page have the same sizes and proportions.

Just remember that using em takes font-size parents in proportion to this, while rem uses html root elements

For instance:

 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>
+9
source

Source: https://habr.com/ru/post/984840/

More articles:


All Articles