Support » Theme: Twenty Twelve » font-size: 87.5% causes slightly narrower page in IE9

  • Twenty Twelve uses

    html {
    	font-size: 87.5%;

    as a base for the rem based widths. The default width is set in rem and px as a fallback, like this:

    .site {
    		margin: 0 auto;
    		max-width: 960px;
    		max-width: 68.571428571rem;
    		overflow: hidden;

    68.571428571rem (960 / 14) makes the page div 960px wide in Chrome, Safari and Firefox, (with additional 40px padding on both sides). But in IE9, which supports rem as a unit, as far as I can tell it is only 955.4px wide (and the padding is 39.71px). It seems like font-size: 87.5%; do not result in the same px dimensions in IE9 as in the other browsers.

    Maybe it is just my installation of IE9 that is acting up… can anyone else confirm that this is happening?

Viewing 10 replies - 1 through 10 (of 10 total)
  • I have two independent Twenty Twelve sites (on the same server) with identical Child Themes (other than their names and locations), and having them side-by-side in two IE tabs on one of my machines sometimes shows one site slightly different from the other, and that happens more on that one machine of mine than on any another. Then on top of that, the developer who recently went through everything to make Twenty Twelve look as good as possible in all browsers while remaining “mobile first” seems to me to believe perfection is not possible there. So yes, I would be a bit suspicious of IE, but my own experience suggests you might never really know.

    The 87.5% font-size applied to the html element on line 481 of the style.css file in the Twenty Twelve theme seems to not just affect the size of the font, but of the entire page! I have tested it in Chrome, IE, Firefox, Opera, and Safari, and it functions the same in all of them. Deleting the style (lines 481-483) results in the page and all of its content (text, images, etc.) rendering significantly larger.

    I am baffled as to how this could be. Is it that I just don’t understand a css convention whereby a font-size applies to a page? I can’t imagine that this is so. Or is there somewhere else in the stylesheet where it tells it to base the page size on the html font-size attribute? Is this normal. Or does this WordPress theme have some funky JavaScript somewhere causing a page zoom based on the html font-size?

    I don’t know what to do.

    alancoughlin: That’s because Twenty Twelve uses rem based widths. It is somewhat explained in the beginning of style.css, there’s also a link to this page which says:

    CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.

    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.

    For example, consider this part from style.css:

    body .site {
    		padding: 0 40px;
    		padding: 0 2.857142857rem;
    		margin-top: 48px;
    		margin-top: 3.428571429rem;
    		margin-bottom: 48px;
    		margin-bottom: 3.428571429rem;
    		box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

    Modern browsers supports rem and therefore the paddings and margins are affected by the font-size on the html element.

    I understand now. After reading your explanation, I plugged in 25% and studied the result a little closer. Upon further examination, I see that there were a few items that did not scale down – the logo and a couple of fonts I specified in pixels.

    So now that I know that things are functioning as they ought and that it is predictable and a reasonable system, my question becomes, why 87.5%. Shouldn’t the base for all measurements be 100%? Then numbers would be meaningful; a 960-pixel-wide layout would be 960 pixels wide. It seems like anything other than 100% would be confusing and result in extra work at every stage of development. Am I still missing something?



    Forum Moderator

    No – because the theme is responsive and “responds” to a range of different screen sizes. Hence all widths have to be in % as the actual screen size remains a potentially infinite variable.

    Now, to address your issue.

    I did notice an ever so slight shift to a smaller page width from Chrome to IE9, though only a couple of pixels. I plugged in a few numbers and determined that there is only a shift at percentages that include fractions of an integer, and that IE9 always rounds down. Even 87.9% displays the same as 87%, but 88% is different. See if that accounts for the discrepancy you observed.

    alancoughlin: I think 87.5% was choosen to make the base font size the same as 14px. 100% would make that 16px (since that is default i most browsers).

    Yeah, about my original issue, I’ve concluded that font-size: 88%; is the way to go for IE 9, so I serve it conditional to IE 9.

    I don’t know if it works for everyone, but it solved my problems.



    Forum Moderator

    Any & value scales the font relative to the screen size once any inheritance values are taken into account. The variations between browsers that you are seeing are the results of the maths applied by the various rendering engines (Gecko/Webkit/IE). They all apply % values very slightly differently – which can be the downside of responsive design.

    Thanks Adrian!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘font-size: 87.5% causes slightly narrower page in IE9’ is closed to new replies.