Tutorial :How to make text look the same in IE and Mozilla?


So, there are 2 issues here:

  1. why does it look different (on IE it is bolder, more anti-aliased)

  2. how do I make the Mozilla rendering look like the IE one and what impact does this solution have (I am looking for minimal changes, so solutions such as - flash, silverlight or using images are out of the question)


Not exactly a "minimal change" but certain fonts and sizes look better/more consistent than others. I couldn't say which combinations off the top of my head but I have noticed that some fonts render a lot more bold at 16px than at 15px for example. Experiment and you might find something you can live with. Alternatively try feeding a different font-weight to IE using conditional comments.


IE looks different because it is using "Clear Type" for rendering the fonts, even if it is not enabled system-wide in Windows. This is not something that you as a web page server can control, but rather is up to the client machine and browser.

If you want Firefox to look similar on Windows, go to Display Settings -> Appearance -> Effects -> "Use the Following Method to Smooth Edges of Screen Fonts" and select "Clear Type". This should apply the same font smoothing effect to Firefox. But as I said, that's up to the end-user, not you the server of web pages.

This site gives a good comparison of font rendering on different browsers.


You can't unless you can convince Microsoft to use Mozilla's rendering engine, or the other way around. So unless you use your 'out of the question' solutions it ain't going to happen. Font rendering is out of the control of a web designer..


I know you mentioned Flash is out of the questions but have you considered sIFR.

It degrades nicely for non-flash browsers and look the same on supporting browsers.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »