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.
Related
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
Right now, when I move to a mobile setting, this happens. How do I correct it?
I have tried adding <meta name="viewport" content="width=device-width, initial-scale=1"> to the header per this answer. The CSS I am currently using looks like this:
html {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #61666c;
line-height: 1.5em;
border-top: 10px solid #ECEEF1;
border-bottom: 10px solid #ECEEF1;
-webkit-text-size-adjust: none;
}
h1 {
font-size: 40px;
font-weight: 300;
}
The problem is that your line-height in the html rule is hardcoded to a specific value since you use the em units. It gets calculated at the 1.5 times the font-size of the html.
You should not supply a unit if you want it to be relative to the current font-size of each element.
So changing it in html rule to line-height: 1.5; will fix it.
So it inherits just fine, but you set it to 1.5 of 16px (usual default) so it is 24px. Then you set the font-size of the h1 to 40px which exceeds the 24px by a bit..
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%).
I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
I've also been setting a font-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
SEE FIDDLE (HTML copied below for future reference)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
</body>
</html>
Remember, you might need to hit run once or twice in Chrome to see said effect.
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?
The easiest solution that I have found is to simply change the body definition to
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
Try:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }
Seems to look better on refreshing the page :)
FIDDLE
Yes, this is a known bug in Chrome, which has been linked already.
I found
html { font-size: 100%; }
seems to work for me.
The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
The answer of Patrick is right.
We have the same issue on Android 4.4.3 WebView.
Before:
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With em and not rem, it works !
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}
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.