Font Size in IE versus Firefox

Alright. First let me just offer a huge thank you to Chris, your site has helped me transform from a CMS tweaker/wannabe web designer to an actual novice web designer. I have learned so much, but I know I have a lot more to learn. Thank you, thank you, thank you!

Anyway, I am tackling my first real IE irritation and apparently it is just the first in what seems to be the bane of web design. I am developing a site for a friend’s GC company. You can check it out at http://www.melidainc.com It is my first hand coded site, and I am very pleased with it, but I am having an issue with font sizes. In Firefox, the site looks pretty much the way I want it too, but in IE the fonts are larger, and it screws up my layout a little.

I am assuming it has to do with pixel sizing, but I can’t seem to find a clear answer on how to fix it. Is there not a way to have IE and Firefox render the fonts the same in both browsers? Any help would be greatly appreciated. Also, as you guys nose around my mark-up please be gentle, and I would be grateful for ANY suggestions or criticism. :mrgreen:

Sorry to say this, but there is absolutely no way you can control font sizes at the user end. Of necessity, font sizes are under user control, and the sizes also depend on various computer settings as well as browser settings. My Firefox is set to 12 pixels minimum font size, for example, because I have a high definition laptop, so the pixels are extra tiny at 120 PPI (pixels per inch).

It may seem that you can control font sizes in IE (only) by using pixel sizes, but those who need to, find out how to do it. You need to learn how to design pages that do not rely on specific sizes for text.

Internet Explorer settings are well hidden in the menu system. For testing purposes, I find the RNIB (Royal Institute for the Blind) IE Toolbar a great help:

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.