Font size in all browsers

Submitted by ionut on 13/05/2011

Having problems with font sizes in some browsers? Here's the deal...

Resizing fonts is very useful when creating web pages, but sometimes the output is not as expected in all browsers, especially Internet Explorer. Why? Because IE doesn't agree resizing with pixels like other browsers: e.g.

div {font-size:25px;}
h4 {font-size:14px;}

they work perfectly in all browser but not in IE. Internet Explorer uses em units. So,
1em equals 16px

This looks pretty simple after all, but unfortunately IE is a little more pretentious. Using em units is not enough to display your resized fonts in IE. You need to combine percent and em units to obtain the same size like in all the other browsers! Here's how it works: First set a default (percent) font size for the body tag of the html document --> body {font-size:100%;} then resize the font for the other tags using em units --> div {font-size:25px;} This is how to get the same font-size in all browsers!

See more about lengths in CSS here

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Refresh Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.