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.
Related
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>
I am doing a coding test for a potential job and want to get the calculations correct and wondering if someone knows of a tool online i can use to convert the pixel sizes requested in the brief based on the framework body and html sizes its using...
Defaults im using:
html {
font-size: 62.5%
}
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222
}
I think using em's is much cleaner and a better way of setting font sizes etc... as then have mentioned what sizes i need to use for a few things in pixels but not sure how i can convert the requests PX into EM's based on the above im setting in the framework.
Fonts sizes:
Base: 16px
Small: 14px
Heading: 21px
So for example i wanted to create the heading
h1 {
font-size: 1.8em; /* for example: but the correct em what would relate to 21px */
}
I found this useful tool: http://pxtoem.com/ - however know sure it would calculate correctly as only allows you to select size for body but think the 62.5% set in HTML would be adjusting the set body size at 62.5% correct?
I have done some calculations and worked out for this to be the best solution for defining sets and converting them easily for anyone that this answer might help.
CSS Base:
html {
font-size: 62.5%; /* 1rem = 10px on default browser settings (16px) */
}
body {
font-size: 16px; /* setting PX unit for browsers that dont support rem below */
font-size: 1.6rem; /* default to be used, browsers that dont support REM will use PX above */
line-height: 1.5;
font-family: sans-serif; /* used current font-family used on live website */
color: #283533;
}
The em unit is relative to the font-size of the parent, which causes the compounding issue. 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.
I am in this case defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
As you will notice i have defined both px and rem in this example
font-size: 16px;
font-size: 1.6rem;
But why? well it's a fall-back for any older browsers that don't support rem but this method, the conversions are a lot easier to work with as i am sure you will agree... example:
8px = 0.8rem;
10px = 1rem;
14px = 1.4rem;
26px = 2.6rem;
Hope this is a great answer for anyone else wanting to accurately work with such sizing conversions
I have an odd issue... When im comparing two elements on a website I have coded on my server compared to a tumblr site I created on their server, there is a 2px font size discrepancy.
both sites have this code:
<body>
<h1>Text</h1>
I have no font sizes set anywhere but both body css codes are:
body {
font-family: Arial;
font-size: 100%;
color: #000;
background: #FFF;
width: 4100px;
padding: 0;
margin: 0;
}
and both h1 codes are:
h1 {
font-size: 100%;
font-weight: normal;
margin: 0.67em 0 0.67em 0;
}
for whatever reason, the tumblr site has a 2px font size difference (smaller). is there any known reason why?
EDIT
I've added a base font size of 16px to both html attributes, however there still seems to be about a 2px difference. Some links to the sources:
Server:
http://goo.gl/PfyQ6r
Tumblr:
http://goo.gl/5gDfp4
Tumblr's global.css file as AR7 noted is set to 14px, the default html font size in most browsers is 16px but is also user definable.
html, body {
font-family: "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
font-weight: 400;
line-height: 1.4;
font-size: 14px;
font-style: normal;
color: #444;
}
Your question code example sets the body font-size as inherited from its parent (html) at 100%. If you did not specify the html font-size it would inherit the browser's defined default font-size to 100%.
Font size by default is 16px I believe and is usually defined in the body.
Popular frameworks like bootstrap have the font size set as 14px in the body.
That's probably why there's a difference because the default font size is what is used when you specify 100%. Tumblr's own css files, which are completely unrelated to yours, specify it as 14px by default.
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