Why would browser text be larger on a particular browser/machine?

Question

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.

Answer 1

Three possibilities:

1. The user has changed their DPI settings for their machine. In some versions of Windows this manifests as changing fonts to "Large" or "Very Large";
2. The user has changed their default font in their browser (from, say, Tahoma/12 to Tahoma/16 in Firefox); or
3. The user has disabled CSS/HTML font sizing in their browser. This is an accessibility setting. Some people also use it for when they have, say, 1920x1200 resolution on a 15" laptop and some Web weenie has set font sizes on their Website to 8 pixels high.

Answer 2

This is perhaps a stupid question, but has the user inadvertantly changed their browser's font size? In IE6 onwards, holding down CTRL and scrolling the mousewheel forwards/backwards will increase/decrease font sizes.

Answer 3

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.

Answer 4

On IE7 there is a zoom level and a text size. The most likely scenario is that they've changed one of these settings inadvertently. Have them click the "Page" button and look at the "Zoom" and "Text Size" settings.

Answer 5

As 2 other answers have suggested, the DPI settings may be giving you trouble. I have found that mixing pt,ex,em with px sizing can be a real challenge once you consider DPI settings and different browser default fonts.

So now I just use px for font sizes. Most of the problems go away.

P.S. Don't force that single user back to the regular DPI. I willing to bet that they are older, need reading glasses and the new high res monitor they got was harder to read because the print was so small. Someone adjusted the DPI and now the fonts are the same size as the old monitor, so now they really do like the new monitor better. The problem now is some web pages are messed up. That's where you come in.

Another thing you might want to look at when changing monitors from a CRT to flat screen is the digital font smoothing setting. Fuzzy characters become sharper. Fortunately, This does not affect your web pages.

---

Addendum - to address point raised by MaxVT

MaxVT makes some excellent points in his answer. Context certainly matters.

My answer was a bit lazy and incomplete. The reason I use px is because of the inconsistency across browsers. To my way of thinking, specifying a point size should specify the physical size of the character to the user on the device he is using, but in practice it does not.

For example, suppose you font-family: cursive; font-size: 11pt

In most browsers under windows, this defaults to the much maligned MS-Comic font. IE7 decided to use some other default and that font seems smaller and less readable in the same point size. The same can be said of Arial vs. Verdana fonts. Specify the same point size, and your whole layout changes. Throw in DPI settings on setup and it is chaos.

The dots-per-inch (DPI) setting is a bit of an anachronism. Your monitor or phone has a fixed DPI. You can only change it if you get a new monitor or phone. Having a dialog box to change the DPI is there only because the device does not report to the operating system what the DPI is. It's an imperfect world.

So I leave you with this suggestion - use px for now to specify the font size, but only use it once. Make all other sizes relative to your base font.

Then, when you have to port everything over to the latest BlackBerry or iPod that does a better job of everything, switching from 11px to 11pt will be easy. And test out your software so it does look nice as you boost the font size.

Answer 6

Sorry, bobince and Diogenes, but I must disagree with you in the strongest way possible in regard to not using pt sizes and always using pixels:

A designer wanting a font size to be relative to the default size specified in browser or OS settings, which should be the standard, should use % or em. A designer wanting an absolute size (on screen) should use pt to keep the font size constant regardless of the screen's DPI setting, and here's why:

Modern laptops and mobile devices' screens have much denser pixels than desktops', up to approximately 150dpi of natural (default) resolution compared to the desktop's 72. Medical and other specialized screens go even higher. And the user has the ability (if not always the knowledge) to raise or lower the logical dpi to customize the display according to his preferences and sight ability.

Any image or text sized in pixels will be too small to read on a dense-dpi device, making your good-sighted users struggle and rendering any users with less than perfect sight unable to read the text. More importantly (and one can argue if this is correct behavior or not), some browsers do not resize pixel-sized text even when the user commands it, making the situation unfixable.

Unlike paper medium, where position to the precision of 100ths of an inch is possible and everyone reading a designer's work sees the same-sized paper, the diversity of devices used to access the Net invalidates the entire concept of pixel-perfect design, which looks good only on the one device it was targeted at. The point of the design on the Web is to make the site accessible to the target audience, which usually should be as large as possible and would be using a range of devices and settings.

Operating systems are already going there with vector UI elements or, at the least, large source bitmaps that are scaled smoothly. So should you, forgetting about the arbitrary unit of measure called "the pixel" and making your designs compatible with the widest array of access devices possible.

---

Addendum - to additional points raised by Diogenes

Unfortunately, the real-world situation with DPI awareness (and thus with proper support for pt-sized text) in currently popular operating systems is, for the lack of a stronger printable word, a clusterfail, as summarized by the CSS-Discuss Wiki:

Unfortunately, most computers don't know [the display's DPI], so the browsers don't either... In the absence of this knowledge, operating systems and browsers typically just make assumptions, and these assumptions are usually wrong.

So, while in theory points would be the best unit for fixed text, in practice using them today produces inconsistent results in many OS/browser/screen configurations. Thus designers often have to give up and revert to pixels to achieve fixed font sizes. Personally, I use percentages and ems, avoiding fixed sizes altogether.

The CSS-Discuss archives have a great summary of the font sizing issues, and numerous links to details and various approaches.