Can anyone explain this behavior to me?
https://codepen.io/anon/pen/BrRpeB
I don't understand how the computed font-size is larger for the inner <span> element than the outer <code> element...
:root {
font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span, code, div { font-size: 1.6rem; }
<code>Outer <span>inner</span> outer</code>
REM as I'm sure you know stands for root em, and em's are based on the font-size of the parent element. Since the font size for each element in your example is a percentage, as in a percentage of the element size, the differently sized elements cause different font sizes to be produced. If your original root font-size was a set amount like pixels, the result would be elements containing the same sized font, such as the code snippet below.
:root {
font-size: 16px; /* font-size 1em = 10px on default browser settings */
}
span, code, div { font-size: 1.6rem; }
<code>Outer <span>inner</span> outer</code>
Related
As per the MDN article on the font-size article:
In order to calculate the em equivalent for any pixel value required, you can use this formula:
em = desired element pixel value / parent element font-size in pixels
But this does not seem to apply when the child has a different font-family than the parent. The linked MDN article does not mention anything about the font-family being of concern. Here is a quick example:
#container {
font-size: 18px;
font-family: serif;
}
#child {
font-family: monospace;
font-size: 1em;
}
<p id="container">
Container text
<span id="child"> and child</span>
</p>
You can check in DevTools that #child has a computed font-size of 18px whereas its #parent has a computed font-size of 16px. This is unexpected because font-size: 1em; should be a 1x multiplier over the parent's font-size, so both of them should have the same font-size of 18px.
Question: Why does 1em not give the same font-size as that of the parent? If em would not work, what alternatives do I have to set the font-size of child as a multiple of the font size of the parent?
Yeah, suppose the font-size of the <body> of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).
So you want the size to be 16px then you divide desired font-size with parent font-size (for your case parent font-size is 18px).
em = 16/18 (which will be 0.88888888888em)
#container {
font-size: 18px;
font-family: serif;
}
#child {
font-family: monospace;
font-size: 0.88888888888em;
}
<p id="container">
Container text
<span id="child"> and child</span>
</p>
I can set my <p> tags to a certain text size. But when It's set i want to be my <h2> to be 20% bigger.
Is this even possible? If yes, could you guys please help me a little bit on my way?
This is what i tried:
h2, .h2 {
font-size: #font_size + px * 25%;
Thanks in advance.
Armando
Yes, you can use rem units for this.
The rem unit looks at the font size of the html or root element. So if you define your html unit size, you can scale your other font sizes based on that.
It looks like this:
html { font-size: 10px; }
body { font-size: 1.2rem; } /* 12 px */
h2 { font-size: 2rem; } /* 20px */
More information can be found here:
http://snook.ca/archives/html_and_css/font-size-with-rem
Keep in mind this is supported from IE9 and up:
http://caniuse.com/#search=rem
In my application I set the text size like this:
html {
font-size: 58%;
font-family: Arial, Helvetica, sans-serif;
/* font-size: 1.5rem; */
}
body {
font-size: 1.5rem;
}
This results in this size of font when I inspect some text:
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
However I tried this:
html {
font-size: 58%;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5rem;
}
Now the result is much larger text.
Can someone help explain to me should I use the HTML element or the BODY element to set my base font size. Note that all of the application sets everything in rem units. I just want to do this the correct way so it will adapt well also to different media sizes later on.
When you set it for the body, 1.5rem means 1.5 times the font size of the html, which is 1.5 * 58% = 87%.
In the second case, the way CSS works is the last-declared value for a property is used and the previous are discarded (rather than multiplied as the case with different elements). In other words html { font-size: 58%; font-size: 1.5rem; } is the same as html { font-size: 1.5rem; } which is the same as font-size: 150%.
Font-sizing with rem units will modify font-size declared on the html element, so you should set your desired base font size in html. Declaring it on body will work in simple cases, but using rem to change font-size on lower elements (divs, etc) will base off the html value anyway, which would get confusing.
What happens in your first example is the following:
You set your font-size to 58 %, if the default size would be 16px then 58 % of that is 9.28px.
Next you set your font-size to 1.5rem in your body selector, which basically means that u scale 9.28px with 150 % (9.28 * 1.5 = 13.92) And there you have your 14px.
In your second example your second font-size (1.5rem) will override your first declaration of font-size (58%) making your font-size 1.5rem out of default (normally 16px), this should make you end up with 24px.
What I usually do is to set my font-size to 62.5% (58% in your case) in my html tag selector, and then in my body I just set it to 100% (which means 100% out of 62.5%).
How do I set my default text size so that i can transfer my text sizes for px's to em's?
On This thread, it was explained that em's work as a scale and therefore my text will be an appropriate size on mobile, but how do I set my default text size so that I can set my em sizes?
How do I set the measurement that I'm scaling by using em's?
You can set default text size for the document on the body element.
body {
font-size: 100%;
}
This will set the base font size to 100% - approximately 16px in most browsers. You can then assign font-sizes in relation to this.
For example:
h1 {
font-size: 2em; // This will render at 200% of the base font so around 32px
}
small {
font-size: .5em // This will render at 50% of the base font size
}
Remember though that these are relevant to their parent though, so putting a <small> element within a <h1> will mean that the small element will render at 50% of that of its parent - in this case back to the base font size... confusing right?
To counteract this I would use rem rather than em (there's also nothign wrong with using pixels for fonts). rem units always refer to the parent element - so .5rem will always be 50% of the base font size, regardless of the parent size.
Hope that helps.
set your body in percent and the rest in ems:
body { font-size:62.5%}; // this means 10 px
div { font-size:2em} // this will be 20px
p { font-size:1em} // this will be 10px
and so on...
Generally I set the body size to a fixed pixelage and then em the rest:
body {
font-size: 14px;
}
p {
font-size: 1em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
This gives a p size of 14px, h1 of 28px, h2 of 25px.
Equally if you want to use whatever size the browser uses just use:
body {
font-size: 1em;
}
Set Font Size With Em
h1 {font-size:2.5em;} // 40px/16=2.5em
h2 {font-size:1.875em;} // 30px/16=1.875em
p {font-size:0.875em;} // 14px/16=0.875em
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
Hey guys, I am trying to work out the calculation.
How do we get 14px for body and 24px for h1?
When html is given a font size as a percentage, it is calculated based on the font size preference set by the user in their browser options. This is usually 16px as a "standard" across browsers, but of course it may vary based on the user's own settings.
62.5% of 16px is 10px, giving html an absolute font size of 10px. From there, it should be easy to work out the sizes for body and h1.