HTML and Font Size

One way that people can access a web page is using a web reader which reads out the content of the page to them. Where that is done then any information included in the web site relating to fonts is completely ignored since spoken words don't have fonts.

This is just one of the aspects of the way that the web works that helps to make it clear that the information about the fonts your page should use when it is displayed are not a part of the content. As such the information about the fonts to use should be specified in the CSS for your page and not in the HTML.

Having made that decision we now need to consider how to allow for our visitors changing the size at which the text in our page displays in order to ensure that they can change the text size and that if they do that it will not break our page layout. If it were not for browser bugs there wouldn't be as great a problem in getting this to work but there are a couple of bugs in some versions of Internet Explorer that need to be taken into account in order to get this working correctly.

The first of the bugs is that some versions of IE do not allow text sized in pixels to be resized. To avoid this bug we need to avoid the use of pixels for the sizes of anything in our page that involves text or which needs to be able to resize with the text. In practice this means that pixels should only be used to define borders and images.

The second IE bug relates to how relative sizes for elements nested one inside another are calculated. To get some versions of IE to behave the same way as other browsers we need to apply a font size to the body tag using a percentage. It doesn't really matter what percentage you use since all you are doing is setting a base font size for your page that is going to be different depending on the screen resolution in use by your visitors (something that you don't really know). As the most common resolution at one time gave a default font size of 16 pixels a lot of people started using 62.5% making the incorrect assumption that it would allow them to specify sizes in em that are exactly 10 times the size in pixels. While that will be true for some of their visitors it will not be true for all visitors and so that percentage is no more appropriate than any other.

Having done this we now just need to specigy all of the other sizes in our page using either em or percentages. The difference between these two choices when we apply them to elements other than text depends on whether we want the containers in our web page to resize themselves primarily in response to changes in the browser viewport size (%) or whether we want them to resize relative to the text (em).

Just about all browsers contain an option in the View menu for enlarging or reducing the size of the text content of the web page so providing an in page solution is not really required. If you do decide to provide your own in page option then the way to do it is to set up a small piece of JavaScript that interacts with the stylesheet to update the percentage being applied to the body tag. That way all of the text content in the web page will be resized together in the same way that it would be from the browser menu.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow