I really googled a lot but I can't find a clear answer. I want to use rem which according to the specs
The rem unit is relative to the root—or the html —element.
So my question is:
Does the <html> tag's font-size attribute override the browser's default font-size?
Is it reliable to set my element's rem based on that assumption?
e.g. Some users from China have set their browser's default font-size to 12px, while the users from Europe usually have 16px. I want my designs to scale correctly for both. If the <html> tag contains this setting it would be relatively easy to do scalable designs using rem.
I may not have understood your question completely, in which case I apologise.
Anyway, I hope this helps.
1rem is equal to the font size of the html element. No matter if your stylesheet assigns a font-size to html or not.
So for example, if a user has 15px for a default font size, then a stylesheet saying
div {font-size:2rem}
will display all divs with a font size of 30px.
If, on the other hand, you have this for a stylesheet
html {font-size:12px}
div {font-size:2rem}
then 1rem will be 12px, and all divs will display at 24px, regardless of the user's default font settings.
html {font-size:12px;}
div {font-size:2rem;}
This is normal size text
<div>This is a div</div>
So if you want 1rem to remain at the user's preferred size, but still want to display most of the website at a size of your choice, the trick is to not change the font size for html, but only for body.
body {font-size:12px;}
div {font-size:2rem;}
This is normal size text
<div>This is a div</div>
Disclaimer: If you do change the html font size in your stylesheet, the user settings for "minimum font size" may mess things up.
Also note that you will only see the difference between these two snippets if your own default font size is not 12px!
Related
I have some HTML pages with custom fonts and in order to let it looks nicer I usually sized up the text using css, but as I look through the document they said em is the x times of the original font size and I think great this is what I'm going to use but as I use it, it came out result like below:
* {
font-size: 1.5em;
}
<h1>
Header
</h1>
<p>
Paragraph
</p>
Notice that the result it's showing is that h1 and p is almost the same size except h1 is thicker and darker, but why will this happened isn't 2em meant 2x larger than original text? Why the h1 scales down and p scales up?
P.S. In order to let the result shown properly I set the font-size to 1.5em instead of 2em or it'll be too large
When you set the font-size in em you are setting it relative to the font-size of the parent element.
Since both elements have the same parent element, they get the same font-size.
The differences are due to them having different values for other properties (such as font-weight).
You are not setting it relative to the font-size it would have had without that style rule. The Cascade doesn't work like that.
as I look through the document they said…
Do not trust W3Schools! They are frequently wrong.
Look at the official specification:
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)
You are correct. It scales it based on the font size of the parent element.
Be sure you have declared what that original size is for your body section in the css.
You might also right-click on your elements and click "inspect" in your browser. This will reveal what styles are being applied. You might have some font-weight that is being applied to the headers
When should I use rem over px? I see a lot of articles saying that I should use REM to respect the user preferences, but the examples always says about font size, not the about the whole style - margin, padding, border, width, height, etc. Took this article of SO as example: Should I use px or rem value units in my CSS?
ALL the answers are saying about the font-size, ok, I get it, rem is better for font-size, but what about the other styles? I see that bootstrap uses px to the container class, to the col-* class, is there a reason for that?
I'm creating this site that overwrites the default styles of Bootstrap, should I overwrite the places where it uses px with pxs or should I use rem?
Thank you.
Before you go into what unit of css you should use. You must have a understanding of the units themselves. Because you are the only one who knows what styling you want for your site e.g. (static, dynamic/responsive). Only you can decide which unit to use. So in order to make the decision, first learn about the types of css units and their advantages. Here is the w3school link explaining all units like em, rem etc.
https://www.w3schools.com/cssref/css_units.asp
Now coming to your point specifically, rem as defined is the font-size set for the root element that is <html>. By default the font-size of the <html> root element is 100% which equals to 16px as set by the browser. It can be changed in the browser setting or you can override it in css with html {font-size: 20px}. Whatever the font-size set of the html tag will equal to 1rem.
Now, You can use rem for padding and margin etc but it is not recommended because e.g. you have set the rem values of padding and margins and widths etc for your site where your browser default font-size is set to 16px. So it all looks well and adjusted but what if a user who is browsing your site has set their default font-size of the browser to 25px. That will break your site's design. So that is why for responsive sites, the units %, vw/vh are mostly used. As for the px unit. They are their to help set static values so that you fix the size rather than have it readjust.
So now you know what size you want to keep your website's. You can use the units as needed.
Hope this helps you in your understanding and again, try understanding the theory itself before taking in opinions of others on that theory. :) Happy coding.
I want to create a page using only "em" for font size.
The page is going to have a grid (tiles) with each cell having one image with some text above and below the image. The images are all in 200px X 200px in size. The Grid Cell would be somewhat larger than the image to accommodate the text areas.
How should I go about setting the height and width of the Div and Img tag, given that I want to rely only on "em" and not "px" for font size.
em is a relative unit of measurement that inherits its value from the font size of the parent element, so to apply consistent widths to your img elements using em you'll need to define a font size somewhere in your document structure using a measurement in px and inherit from that.
For reference's sake, where 1em equals 16px, an image with a width of 200px would be 12.5em wide- 200 / 16.
You'll want to specify your own measurement in px at least once in any case to ensure cross-browser compatibility. Not every browser uses the same default font size and it's possible that users have manually changed the default font size of their browser. If you rely on defaults, you very likely won't get consistent results, and it will be detrimental to your grid design.
We have a number of divs on a page containing text. The text is explicitly set to a certain font-size via CSS. In some circumstances the font-size is increasing without our intervention. It seems to be related to the length of the text in the DIVs. i.e. once it gets to a particular size adding a character increases the font-size, removing it again reduces the font-size.
We haven't got any fancy libraries included to scale the font.
In chrome dev tools it shows the variation in the font set via CSS, and then the computed size here:
Why does the font go from 16px to 19.555555px? What are we missing?
thanks!
I want to convert the font-size property value from percent to pixel
lets say I have this html code
<div style="font-size: 180%;">
link
</div>
How to find the equivalent value for font-size: 180%; in pixel?
Thanks
There is no simple answer as font sizes in percents are relative to font size of parent block. I find it easiest to do by hand, manually adjusting the font size pixel by pixel in Firebug.
This may be somewhat tricky to do automatically. Font-size percentages are done against a base value, and that base value is the parent block's font size. This means that font size changes are nested like this:
<div style="font-size: 16px;">
This text has size 16px.
<div style="font-size: 150%;">
This text has size 150% * 16px = 24px.
<div style="font-size: 150%;">
Because this div is nested, the base value is now 24px.
font-size: 100% would mean 24px type.
So the size of the text here is 150% * 24px = 36px.
</div>
</div>
</div>
And that means that there's almost certainly no easy solution.
If you can be absolutely sure that you don't have any places where percentages are nested (as in my example above) you can simply replace all of the percentages with the base font size multiplied by the percentage.
If you do have a lot of different pages though, you probably can't rely on that. In that case, you're going to have to do some HTML/CSS parsing and go through all of your pages, calculating font sizes for each and every element to get it all right. There's not an easy solution, unfortunately.
I need to ask though, why do you need to do this? As long as you declare a base font size for the page in pixels (in the body tag), there's going to be no functional difference between percentage font sizes and absolute font sizes. If you have a font declaration like this for your body:
body {
font: 100% font1, font2;
}
then just replace it with:
body {
font: 16px font1, font2;
}
And unless you have some very unusual requirements, it'll work just as well as replacing all of the font size declarations for the whole page.
(16px is the near-universal default font size for web browsers.)