Html – Why would browser text be larger on a particular browser/machine

csshtml

On a website I made, one person sent me a screenshot which shows that my subtitle font is too large.

  • I've checked the site on two machines (Vista) with FF, IE6, IE7, IE8, Safari/win, opera/win.
  • I can increase the font size of the browser, but the subtitle stays the same size (since it is 8pt as shown below) which is what I want (so it doesn't extend under the logo).
  • It checks out fine on 34 browsers screenshots at http://browsershots.org.

What could be causing the font to be larger on this one person's machine (windows XP, IE7). He says "all other websites look fine". Is there something about Windows XP that enables the operating to change the font size in browsers, etc.? Or perhaps a problem with arial/italic on Windows XP?

Here is the CSS for it:

#subtitle {
    position: absolute;
    top: 78px;
    left: 40px;
    width: 738px;
    text-align: right;
    font-size: 8pt;
    font-style: italic;
    font-family: arial;
}

ANSWER:

I changed "8pt" to "10px" and it works now for him. I assume that he had changed the DPI on his machine.

Best Solution

You used ‘pt’ as a size unit. Don't do that. The CSS ‘physical units’ (pt, mm, in...) only make sense for physical output (ie. a print stylesheet).

On-screen, points are mapped to pixels using the system's ‘dpi’ setting, which can vary arbitrarily across machines. Macs/Windows/Linux all default differently, and can be reconfigured. Many Windows users increase the dpi setting in order to resize the fixed-point-size system dialog box (shell) font.

If you must use non-relative units for some text, the unit you want is ‘px’.

There are other reasons font sizes can change (eg. different font availability, minimum font size settings, deliberate font zooming), which is why you should never completely rely on them being what you expect, but this is almost certainly the cause in this case.

Related Question