locked
IE9, X-UA-Compatible and font kerning RRS feed

  • Question

  • Hello! Sorry if I am asking an obvious question, but I am getting rather confused about the various rendering modes that IE9 offers, and I am looking for the “best practice” that I should use for my site.

    I am changing the stylesheets for an intranet web site, and I would like them to work in the latest versions of the major browsers. I don’t care about supporting IE8 or below, since IE9 is my organization’s standard. I would still like the site to work on the latest Firefox and Chrome, in case the organization switches to them one day.

    The page that I have created to test my new stylesheet displays absolutely fine in Firefox and Chrome. It also displays fine in IE9, except for the rounded corners. To get the rounded corners I can use the “<meta http-equiv="X-UA-Compatible" content="IE=9" />” tag, but this has a side effect on the screen fonts. The spacing between letters in my 12px Verdana becomes noticeably tighter, and the text looks less nice (rather ugly, actually). Without the meta tag, the rounded corners are gone, but the fonts looks normal.

    I have read about the different font rendering method used by IE9, but I wonder if there is any way I can ensure some consistency among the browsers. And generally speaking, should I have that meta tag on my pages at all? Why wouldn’t my IE9 use the latest rendering method by default anyway?

    Thank you for any hints!

    Friday, April 13, 2012 6:39 PM

All replies

  • Hi,

    What other shims are you using? JQuery, cufon? jQuery corners plugin. ensure you are using the latest versions... see bugs.jQuery.com

     

    correct... there is no need for x-ua meta tags.... standards is standards.... most companies though have legacy intranet webs that still require IE7 emulation and have "Display Intranet sites in Compatibility View"... set... use x-ua IE=Edge for future proofing untill your legacy intranet webs are updated to standards rendering.

    When comparing web browsers it is important to use the same default settings.... some website developers will use a reset.css file to set the default fonts and font sizes.... however you also need to set the default fonts and sizes of the browser. Compare the default font settings in each of the browsers you are testing with. Ensure also that you are using the default IE Accessibility settings.. (uncheck "Ignore fontsizes specified on web pages", "Ignore font styles specified on web pages"

    Be careful of the Font families you use.... some like Helvical are not supported by MSIE browsers. If a font is not installed on a machine, browsers will fall back to either the next font family or the browsers defaults... (as set on the Fonts button on Internet Options)


    Rob^_^

    Friday, April 13, 2012 7:29 PM
  • Thanks for helping me again! I am trying to avoid jquery or any other library at this point, because I am having hard time sorting out my own bugs :-). Once I have a clean working design I am going to look at the other tools if additional functionality is needed. The only library I have to use is CSS3 PIE because of the corners problem.

    You are right - I have checked and found out that in my organization intranet sites are set to use the compatibility view (IE7 view, to be exact). This explains why removing the meta tag restores the fonts and kills the rounded corners (if there is no CSS3 PIE). In this scenario, what would you recommend to do about the X-UA-Compatible tag? I see three possibilities: 1) not to use it at all and make sure that the site looks acceptable in both compatibility and standards modes; 2) set it to IE=9 to override the organization's default; or 3) set it to "IE-edge" and always use "the latest and the greatest". Personally I tend towards the first one, although it is more work.

    As for the fonts, it seems that IE9 really renders them differently (uglier) than the earlier IEs and the other browsers. I don't know what parameters IE9 is using to determine kerning etc., but the rendering appears to depend on the monitors. On my PC at home the text is much more readable than in the office. I still have hope that Microsoft adjusts the algorithm before my company switches the compatibility mode off :-)

    Friday, April 13, 2012 9:36 PM
  • Hi,

    Use the x-ua meta tag IE=Edge to over-ride the "Display intranet sites in compatibility View"... this ensures all IE versions will use the most standards compliant mode they are capable of... and allows your other existing intranet sites to still be rendered as IE7. You do not need the x-ua meta if you are targeting the public at large on the internet unless you have IE7 specific markup and style rules and do not have the time or resources to correct the markup errors and style rule hacks (see quirksmode.org). There are covenants.... how a web browser parses and renders web pages also depends upon the Document Type Declaration used and the css rules used... so IE7 or 8 do not understand border-radius.... but IE9 does... even though you feed them the same markup with the same document type declaration....

    It is highly recommended that you use the (x)html5 dtd...

    <!doctype html>

    so that all web browsers will use the latest (but yet to be ratified) standards.

    shims like jQuery provide a js framework that helps developers overcome these limitations by providing wrapper functions that omphiscate the complexity of coding for different browsers and different browser versions.... the jQuery corners plugin actually uses VML for IE8 and earlier and uses the proprietry -moz, -webkit or -geko proprietry border-radius rules for earlier versions of these browsers.

    As for fonts.... you are probably seeing the effects of "Windows Clear Type".

    First ensure that your windows display drivers are up-to-date.... usually they are offered as optional updates in Windows Updates (Start>Windows Updates>Optional Updates)

    Then go to the Clear type tuning web site - http://www.microsoft.com/typography/ClearType/tuner/tune.aspx (your users will have to do this themselves... you may want to put this link on your company's help page.... use Group Policy to configure the Help>Online Support url to your company's help page)

    Since you are targeting an intranet site and know the OS and browser versions of your visitors... choose a font family(s) that you know your site visitors will have on their machines.

    or

    Do not use font-family rules in your stylesheets or inline styles.... web browsers will fall back and use their defaults or the users Accessibility preferences.

    see http://www.microsoft.com/typography/fonts/default.aspx for listings of the fonts distributed with Windows 7


    Rob^_^

    Saturday, April 14, 2012 1:33 AM
  • Correction,

    The Clear type tuner can be found on Window7 machines at

    Start>Control Panel>Appearance and Personalization (Personalization in the control panel menu)>Adjust Clear Type Text


    Rob^_^

    Saturday, April 14, 2012 4:59 AM
  • Thank you, you've been a great help. I do have <!doctype html> at the top of my documents and will add the "IE-edge" line now. It's just that I have read some articles where people warn against the "edge" setting in the fear that one day Microsoft comes up with a bugged "state-of-the-art" standards mode.

    I have also used jQuery and Prototype on some of my pages in the past for visual effects and AJAX, but have never relied on them to ensure consistency among browsers. In the intranet environment with IE as the standard browser I had the luxury of not caring about cross-browser compatibility too much :-) This may change now, as I start converting my old classic ASP pages into ASP.NET MVC3, which encourages jQuery heavily. Also, since I am targeting intranet, I am sure what fonts my users have installed, and I am using pretty standard Verdana and Arial anyway.

    You are right, the font effects I am seeing are linked to (un)ClearType. I have played with the tuner, but honestly it did not improve much in the office. I'll need to test the site more on different monitors. Thanks again for your answers!

    Saturday, April 14, 2012 9:48 AM
  • Here is a screenshot showing the difference in font rendering between IE8 and IE9 on my office monitor. As you can notice, even the color of the text looks different. The typeface is 12px Verdana, black.

    Saturday, April 14, 2012 11:16 AM
  • the latest version of Ie usually has changes/improvements...there were windows updates that included font updates... I could not tell you which particular KB.

    Rob^_^

    Saturday, April 14, 2012 8:51 PM