Too often do we see text on web pages overlay other text or disappear altogether, not to say anything of other related frustrations. Mostly, the reason is that the authors have not sufficiently realised that their text is seen by people with different eyesights, different browsers, different user controls and settings. Webpages, of course, should be readable easily by all sorts of people. Many competent authors realise this but have various reasons and excuses for nevertheless producing pages with which people have trouble. I will come to these reasons and excuses shortly, but first let's look at some fundamentals, starting with how browsers decide what size to make text.

How browsers determine text size

When you install a browser for the first time and go to a webpage like this one, the main body text will be a size that a lot of the seeing world will find comfortable enough, competent browser makers will have done their research to ensure this. And they generally do this via a preference or option setting, the browser shipping with some font and font-size setting but one that you can change. Whatever size setting is in this option we can call normal for that browser. I tend to set Geneva and 16px for my preferred font and size for sans-serif and 16px for serif too. This means that if no one is telling the browser otherwise, I will see main text on a monitor at 16px. So, browsers under my control quickly get 16px as normal if they are not already set that way. For you, it might be 14px. For the elderly lady and gent over there, it might be 18px.

In case you are wondering what 16px for a font-size means, it means roughly that the little block that the inventor of the font used to design the various characters is scaled to be 16px high and the designs of the characters are such that they mostly fit into this box, some going to the bottom of the box (using descender space), some going to the top (using ascender space). The box for all the characters needs to be the same height so that when laid side by side, the lines of text look neat and orderly. The designer of modern font families does not specify any particular size, it is just a box that is scalable, along with its contents.

So, the concept of normal is whatever is set in the browser for text. But what text? How about headings? What is normal for headings is not normal for paragraphs, so what is this normal? The answer is that all text is this normal and the same and as set in the preferences, unless someone says otherwise. Yes, that means all text, including headings, would be this normal in the absence of any stylesheet that says otherwise. How big a piece of text is a simple style matter, and style is the business, these days, of cascading style sheets, sets of style rules.

The reason top level headings are usually big and bold is that someone has told them to be - either the author or the stylesheet that ships with the browser. In the stylesheet that browsers default to unless overruled by the author of a webpage, the top level heading is often dictated to be twice as big as normal, 200% of what is normal for body text. The second level headings (like the word "Zooming" below) are set by me to be 150% greater than normal. But I have not set anything special at all for the text in ordinary sentences like this. I have let your browser decide. And the browser decides how I described. It is yours to tell it. Whatever is comfortable for you is normal. All non-body text is usually a percentage different from this baseline normal.

So, we each have our browsers and have them set for what is comfortable for us in the body text. But what happens when we come across a webpage where the author decides to make body text less (or more - though this is very rare) than what is normal?

What quite often happens is that we are annoyed and either strain our eyesight or fiddle to fix it by enlarging (or reducing) the text just for the page(s) we are browsing. In some older browsers, if the author set the font-size a certain way, users were unable to alter it, they had to lump it or leave it! Luckily, modern browsers give easy access to temporary controls. Temporary? Well, if you find the text on one website absurdly small, it would be a nuisance to go into preferences or options and reset the size you find comfortable by pretending you need much bigger than what you actually need in general. That would affect all the websites you visit. There is, thankfully, an easier set of handy controls for tactically changing a webpage's text sizes and that is what I will next describe.

Zooming

Some popular modern browsers have a magnification facility called zooming, where both text and images (foreground and background), at the same time, are enlarged or reduced. Many of the same browsers have an option for the more traditional type of control, just the text adjusting its size, not the images. So popular has the more modern zooming become that those browsers that do provide for text only size adjustment make it a turn off option. In other words, out of the box, these browsers use the full zoom, you have to tick or cross a preference or option menu to turn this off. It is not all that surprising that there would be some authors (and many users) not all that familiar with this Zoom Text Only option. Google Chrome in my latest version has dropped this Zoom Text Only option. Opera, now a very sophisticated browser, famously, has never had simple text only size change like Firefox and Safari.

Many regular visitors to websites know how to quickly enlarge the text for particular pages either by key command or simply mousing an option in a menu (often the View menu at the top of most browsers). You can quickly tell now whether you have the full zoom or the Zoom Text Only operating: change the size of your text and see if the relative length of the following two lines change. One is real HTML text, the other an image. On Text Only Zoom, the image will stay the same length and no matter what your normal text size setting, if the lines are not about equal to begin with, you should be able to make them roughly the same length. You do this by pretending to have worse or better eyesight and zooming in or out. If you don't know how to do this, the next paragraph should help.

Tactical (temporary) enlarging

Many browsers have menus to alter the size of the items (like text) on a webpage without having to go to strategic options or preferences (that set the parameters for all website viewing). They are often under a menu at the top of your screen called "View". One Mac browser called iCab has a rather instructive font-size submenu under its View menu, the essentials of which is illustrated here: Notice that what we have been calling 'normal' is called 'standard' in this browser. The concept is the same. The reason this menu is instructive is that the size of the selected is marked with a tick. Clicking the standard button reveals the size that is set down in preferences/options and this size is the more strategic, permanent size that the browser defaults to when started up and you begin surfing every day. If you have set 16 for your normal but need to choose a bigger size for a particular page or site, you can revert to your generally preferred by choosing 'Standard' under the font-size submenu under View.