How to avoid problems with too large or too small fonts on a web page? Here, I’ll describe why it happens, that a text on a web page sometimes appears too small or too large, how a web master can avoid it, and what common user can do if he or she encounters such an issue. HTML and CSS offer many units, which can be used to specify font size: pixels (px), points (pt), picas (pc), centimeters (cm), millimeters (mm), inches (in), percentages (%), special units (em, ex), named sizes (large, small, x-small, etc.) (See the following MSDN articles for reference: “CSS Length Units Reference” and “font-size Attribute”) Similar units can be used to specify other sizes on a web page, such as some text block width or height. As you can see, it’s a wide choice, but which one to select? Unfortunately, many web masters use pixels. I guess, it is due to pixels is a natural and most clear unit when dealing with computer graphics. However, it is the worst choice for an HTML page in most cases! The thing is that users have different monitors. And the size of a single pixel may be different, because it depends on monitor technology and display mode. That’s why the same text of specified pixel size may look rather different for different users. For example, the most wide spread now 19" LCD displays with 1280x1024 resolution have really huge pixels. (typical size is 0.294mm) That’s why text looks gnarly on them. Typical 17" LCD usually has the same resolution, but because its screen is smaller, its pixels are much smaller too (typical size 0.264mm). 20" LCD screen is only a bit larger than of 19" one, but typically has much better resolution of 1600x1200. So, its pixel size is much smaller too than on 19" one. (0.255mm even a bit less than on 17" one!) So, suppose you are a web master and you are working on a common 19" LCD. If you specify font size in pixels, you should know that the same text will look sufficiently smaller for a user using 20" LCD. And the text looking good for you may appear too small for anther user. But it seems many webmasters know nothing about this issue. Points (as well as millimeters, inches and other similar units) is a bit better. It makes possible for Windows to take into account the issue with pixel size described above and display text of the same size in a similar way on different monitors. The problem is that it requires the special system parameter called “DPI resolution” to be specified correctly. (DPI means “dots per inch”, that is how many pixels fits into one inch.) Current technology doesn’t allow determining it automatically. So, user needs to specify it manually. Unfortunately, many novice users know nothing about this feature. They often complain on small fonts on quality high resolution monitors. However, if DPI resolution is specified correctly, fonts are displayed in correct size and look much smarter than on low resolution monitor. But if you specify font size in pixels, DPI parameter is ignored and your page will be unable to take an advantage or high resolution monitors. Most probably it will look poor on them. So, points are a bit better than pixels, but they are a poor choice too. Why? Because not only computer hardware may differ, all the people are different too! Someone may prefer larger fonts to read it easier and someone may prefer smaller fonts to see more text at once. So, user should be able to change font size according to his own preferences. Fortunately, Internet Explorer offers such a feature. User can change font size easily using “View ==> Text Size” menu, or a special toolbar button I guess you have a question. If absolute units are so poor, why does Internet Explorer supports them? The answer is simple: there are many special cases where this feature appears to be very useful. Sometimes it is worth to disallow font scaling to ensure that web page will look just in certain way. For example, if you need to display some text over a picture, so that it should fit inside it, you will certainly use pixels. Another example is a page for printing. If it contains some common article, it is worth to use scalable font, to allow user select the way how it would look after printing. But suppose you are designing some kind of a formsheet, which should exactly fit on a standard A4 paper. In such case your choice will be points. Note that pixels unit is not suitable here, because different printers have different DPI resolutions. This difference is much greater than between different monitors. That’s why I told much about points above, in spite I have said that it’s a poor unit in most cases. Absolute units are a very helpful feature if used in a proper place. But it becomes a trouble if used improperly. Unfortunately, it’s a common situation when software developers use their best to make as more powerful features as possible, but users fail to use them properly. So, few developers prefer opposite way. They restrict using some features, which they think may be used improperly. As for me, it is much worth and causes troubles for experienced users. Now you can see, webmaster should always specify font size on a web page using relative units: percents or named sizes (such as small, large, x-large …), except some special cases. Unfortunately, too many webmasters fail to follow this simple rule. This makes problem for some users, whose hardware or personal preferences differ with web masters one. User can overcome this problem using Internet Explorer accessibility feature, but unfortunately it is very inconvenient to use. IE Surfgear add-on offers a better solution. It adds a special button on Internet Explorer toolbar. Hitting it resets all font sizes on a page which are specified in absolute units. It does not affects relative font sizes, it does not change picture sizes like scaling tools in alliterative web browsers and it affects only one window unlike accessibility option. And at last, IE Surfgear is freeware! |
. The issue is that this setting affects only those fonts, which size was specified in relative units: percents, em/ex units and named sizes (large, small, etc.). Other units mentioned above: pixels, points, millimeters and so on are called absolute because user cannot affect them. So, you should always use just relative units, because it makes possible for a user to select that font size which makes your page look the best for him.