Chrome font size loads large and then reduces - html

I'm using em units in my site's CSS. When I load a page of the site in Chrome, all the text will load in a very large font size. If I resize the browser window or load the developer console, the font size will then revert back to the 'correct' size. Sometimes if I flick through pages on the site, it will do the same or behave erratically (starting off large, sometimes starting off normal size).
I cannot replicate this in Safari or Firefox, so thinking it must be an issue in the way Chrome is interpreting my CSS or my em units.
Any ideas on why this is happening? If I remove all the em units and use px then it works fine (which perhaps is a solution but doesn't help me understand em).
(Using: Chrome 32, Macbook Air, OS 10.8.5, a custom Wordpress theme).
Some CSS:
body {
margin: 0 auto;
color: #404040;
font-family: sans-serif;
font-size: 1.6rem;
line-height: 1.5;
padding: 1em; }
(if I use font-size:16px here it will work fine, but then what's the point of em / rem)

I had the same problem as you actually. I recently started using rem instead of em and it is much better since you don't have to worry about nested elements, such as list items, multiplying the value. However, I noticed that the font was loading too large and then resizing.
In my CSS, I originally had reset the font using this:
html {
font-size: 62.5%;
}
You're probably already aware why, but this just means that 1em would equal 10px. I then had font-size: 1.4rem in the body to set the base font size to 14px.
To fix the issue you mentioned:
Try setting your html font-size to 10px, not a percentage value, and then use rem from then on. Seems to be working for me anyway.

CSS3 introduces a few new units, including the rem unit, which stands
for "root em".
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.
You can try font-size: 1.6em; /* EM not REM */ but anyway it might not works as far as 1em is equal to the current font size.
You might use px instead or set px in body and use em after.

Needs more info. A live URL would be appreciated.
Can not reproduce using just this code:
body {
margin: 0 auto;
color: #404040;
font-family: sans-serif;
font-size: 1.6rem;
line-height: 1.5;
padding: 1em; }
http://jsfiddle.net/wZD4n/

Related

How to correctly work out briefed px to em with body and html preset sizes

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

how to fix relativeness of `em` scale in css?

since em length scale is relative to the current font size, this problem arose.
I want the border-width of many elements to be one eighth of my normal font width. By normal I mean when the html document has the least necessary parts and just a text written in my font. My font is mono.
You can see how it looks:
When I just write border-width: 0.125em;, borders will not have the same width.
I don't want to use px because I want to produce the same width on very compact displays.
What should I do?
You can use calc(1rem / 8) to get 1/8th of 1rem or use 0.125rem. Using rem will reference the document's base font size instead of whatever em is throughout the document.
div {
font-family: monospace;
border: 0.125rem solid black;
}
<div>foo</div>

How to prevent mobile devices to scale font size

On our website we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <td> tags, are rendered in the same size.
However, when rendering the website on a mobile device, the font size of the texts within the <td> tags shrinks. See below. We tried to set
html {
-webkit-text-size-adjust: none;
}
but this only helps with the problem on the mobile safari and opera browser. Using the tips from this website, we added
#media (max-width: 960px) {
td {
font-size: 20pt;
}
}
to the css, but this now miraculously only works for one of our phones held tilted sideways, not in portrait.
How do we prevent the font-size within the table cells to be scaled down?
What Olli and JStephen said, but I also had to add text-size-adjust: none;
html,body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
You were most likely looking for this:
Include the following <meta> tag in the document's <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
It helped me with the same problem.
Maybe if you also add body to the css like this:
html,body { -webkit-text-size-adjust:none; }
Resource: iPhone/iPod - prevent font-size-changing
I know this is an old post, but I came across it and found the answer that worked for me is just an extension to Olli's. There are more css styles you have to add to support other browsers:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
I had originally put everything in table cells which worked on my nexus, but my samsung phone was still randomly deciding which text to scale and which to keep the set size. I set 13px to everything on the page and it was the only font size styling I did. This was the only way I was able to fix it on all the devices I have.
First of all, font-size should be set relative to a default-value that is defined by the html selector, in case of repsonsive formatting.
For example:
html {
font-size: 100%;
}
h1 {
font-size: 2em;
}
td {
font-size: 1.25em;
}
The reason for this is that different platforms use different default values for 100%. E.g. desktops use 16px but mobile browsers often use 24px.
If you define the font-size of one of your elements to an absolute value, it will not scale with the rest of the items that have been assigned no value or a relative value; thus resulting in this behaviour.
The best solution to this problem: use relative font-sizes with em, rem or even % as the unit, istead of the absolute font-sizes with pt or px as the unit.
Edit for more background on the different default font-size on different platforms:
Because each platform has its own use-case, its own average screen size, average reader-to-screen distance, average DPI-value for its screen and (most important of all) a different viewport width, font-sizes aren't equally legible on each of those platforms if set to a fixed size. That's why the browsers define the default size to something different, as to optimise the experience for the user on that specific platform.
Sure, you could ignore this and keep setting all your font-sizes to something fixed, but that's going against the flow and breaking the user experience. Instead, try to make peace with this fact and be sure that it all scales properly.
Edit2: To warn you about the usage of em vs rem: using em will inherit the parent value and multiply it by the value of the font-size you define in your current element, while using rem will always be based on the value that is set in the root element instead of the parent element. So the following code will result in the following absolute values:
HTML:
<html>
<...>
<body>
<div>
<p>..</p>
</div>
</body>
</html>
CSS:
html {
font-size: 100%; /* we agree on 16px for this example */
}
div {
font-size: 1.25em; /* add a quarter of 16, so 20px is the actual value */
}
p {
font-size: 0.8em; /* subtract a fifth of the value of the parent element: 20 * 0.8 = 16 again */
font-size: 0.8rem; /* subtract a fifth of the value of the root element: 16 * 0.8 = 13.8 (will be rounded by browser to 14) pixels */
}

Font size inconsistancy between browsers on mac

In the following example, it's a navigation bar. Its elements are variable in width, the sum of their width is the width of their container, ul element.
The issue is, each element has the same width on all windows browsers, the sum of their width is 379px. But on mac each browser seems to render the font slightly different, causing the width to either increase or decrease, thus the last element wrap to the second line.
<html>
<head>
<style>
body {margin:0;padding: 0;}
ul {margin:0;padding:0;list-style-type: none;}
.nav {
width:379px;
}
.nav li {
float: left;
margin: 5px;
padding: 20px;
background-color: #0099ff;
color: white;
font-family: Arial;
font-size: 16px;
}
</style>
</head>
<body>
<ul class="nav">
<li>asdf</li>
<li>qwer</li>
<li>test 1</li>
<li>testing test</li>
</ul>
</body>
</html>
The question is, how to guarantee each element's width on all browsers by just specifying the font size.
Setting a fixed-width div plus padding size is tricky when working with text. It's unlikely you'll be able to get a string to render exactly the same size on all major browsers and platforms. Though you can get pretty close; here are some suggestions.
Specify px values rather than pt or em. Such text will render at the same size regardless of device resolution, and will still scale properly when zooming in and out
Use a very common font, or a web font. You can use Font Squirrel to strip down a version of a specific font you'd like to use
Explicitly set the font-smoothing method
Use a computed CSS property to offset the letter-spacing by a fraction based on the amount the resulting div width differs from the target. This will be accurate, but also complex and less compatible
Use JavaScript to do the above calculation instead, resulting in more compatible code
Render some PNGs beforehand, or server-side at runtime
Here's some sample code illustrating one way to get a more consistent cross-platform Arial text render.
html, body {
font-family: Arial, sans-serif;
font-size: 13px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
First of all, validate your HTML. You have some issues there, like a missing DOCTYPE. I also recommend HTML5BOILERPLATE to get a lot of normalization done.
Next: why do you make the width dependant on the font size? Wouldn't it be better to make the font size static and set a certain static width to your elements?
If you are scared that this behaviour will lead to reading problems on small sceens (mobile devices), you should read about responsive layouts. They make use of media queries to use alternative CSS based on certain rules.
If you can't get it work, it would be fairly simple to load a .png of the text with a transparent background.

Inaccurate rem units in Opera12 and IE9

Although I'm not new to the idea of responsive design I have experienced a very troublesome thing...
I have decided to completely move to rem units, but I still follow 62.5% rule (I have used it with em).
So for starters:
html {
font-size: 62.5%;
}
I assume that 1rem = 10px (I know it's not always true, but hey, it's for me to ease math a little bit, for browser it's still relative right?)
Horror starts in Opera (12.12 both linux and win version, where default font-size is set to 14px and 16px respectively).
header nav ul li a span {
padding: 1.8rem 2.7rem 3rem 0;
font-family: 'sawasdeebold', sans-serif;
font-size: 2rem;
line-height: 3rem;
letter-spacing: -0.3rem;
display: block;
}
As You can see part of my navigation is let's say "pixel perfect" thanks to using rem units. Under linux page is a little bit narrower (that's no problem the font is smaller so 1rem represents less pixels). However everything in nav scales badly if default size is changed to something else than 14px... Under Windows the same is true for 16px... The whole scaling idea just doesn't work. I don't need every pixel to match, but it looks ugly...
The similar problem appears under IE9, but this time is the logotype where:
header h1 a {
margin: 1.8rem 0 0 1.6rem;
width: 46.2rem;
height: 10.1rem;
background: transparent url(../static/img/logotype.jpg) 0 0 no-repeat;
background-size: 46.2rem 20.2rem;
text-indent: -5000px;
display: block;
}
header h1 a:hover {
background-position: 0 -10.1rem;
}
Even though I set logotype's height and the exact size for its background, on hover, the background is positioned 1px too low...
Aside of these problems I have one, general question.
Is it POSSIBLE to create "pixel perfect" layouts with rem units?
I haven't even touched media queries yet and I want to know if it's worth my effort...
BIG THANKS guys!
So... I have switched back to em untits. Except few (minor) glitches in IE9 (which are well known subpixel problems) everything is perfect in ALL browsers. Moreover, as before rem issue, I have no problem with media queries which also use em units. Sadly, it seems that rem units are not yet stable enough to use them across existing web browsers. Case closed...
If you're wishing to continue use 1rem = 10px have you tried –
html {
font-size: 10px;
}
instead of
html {
font-size: 62.5%;
}
does this solve the issue?