Text size is different in IE and Firefox

Question

Why is a text slightly bigger (wider) in IE than in Firefox? Example (on the top is how IE renders the text, bottom is FF):

Image

The text declared in CSS as Arial 16px. I know that there is a anti-aliasing in IE but it should not make the font bigger IMO. Is it the case here? It breaks my design, can I do anything about it other than decreasing the font size?

Thanks!

Answer 1

If you absolutely must have a pixel-perfect design in all browsers (not recommending it; just use images for those parts), I'd try starting with a CSS reset.

Here's a really long line of CSS that you can insert into the top of your stylesheet to "reset" the CSS. Browsers tend to use their own defaults, and if you don't account for them, things might look wacky.

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

Credit goes to Yahoo!: http://developer.yahoo.com/yui/3/cssreset/.

Answer 2

Using different types of font files (eot, woff2, woff, ttf, otf) works for me. I use https://onlinefontconverter.com/ to convert font files into types I need, also it reduces them sizes. Here's my SCSS mixin I use to switch all files into css:

@mixin font-face($name, $file-name, $weight, $style) {
  $fonts-directory: '/assets/fonts/';
  $src: $fonts-directory + $file-name;

  @font-face {
    font-family: quote($name);
    font-style: unquote($style);
    font-weight: unquote($weight);      
    src: url($src +'.eot');
    src: url($src +'.eot?#iefix')  format('embedded-opentype'),
         url($src +'.woff2')       format('woff2'),
         url($src +'.woff')        format('woff'),
         url($src +'.ttf')         format('truetype'),
         url($src +'.otf')         format('opentype');
  }
}

@include font-face('AmplitudeTF', 'AmplitudeTF-Bold', '700', 'normal');
@include font-face('AmplitudeTF', 'AmplitudeTF-BoldItalic', '700', 'italic');
@include font-face('AmplitudeTF', 'AmplitudeTF-Italic', '400', 'italic');
@include font-face('AmplitudeTF', 'AmplitudeTF-Regular', '400', 'normal');

Answer 3

One of them almost looks bolded. As suggested by Carl try and make your design more accepting of different text sizes, especially for users that crank up the text size so they can see. As for the minor differences between browsers sometimes using a css resetter can help

http://www.maxdesign.com.au/articles/css-reset/

Answer 4

Also try explicitly setting the "second part" of the font-family attribute for sans-serif, etc:

font-family: Arial, sans-serif;

If it is anti aliasing, there is no CSS setting to change this in IE. Also the operating system can have an affect on how the font is rendered, ClearType, etc.

Answer 5

Have you tried font-size-adjust

Example : font-size-adjust: 0.47;