Browser Font Settings

Introduction

Many feel the need to adjust browser font-sizes, be it to compensate for poor eye-sight or just to make readable some ill-designed web-page. My own ignorance of the subject was quickly discovered when I attempted to interpret the help pages for the Firefox and other browsers. I thought that I had understood it, but alas rarely had.

Many parts affect the eventual font-sizes. These include the web-author's HTML page design, user style sheets, numerous browser settings, and the platform's own display settings. Each browser differs in its facilities, though the most useful settings are common to them all. This page describes a few of the text-sizing facilities found in three common browsers.

Here are some font definitions. There are general sets of fonts called families. These include Serif (with tails), Sans-serif (without tails), Proportional (each character's width adjusted for overall appearance) , and Monospace (each character having the same width). Each family has within it sets of font variants, (some use the term faces), each with its own font-name, like Times New Roman, Arial, and Courier. The fonts used most are scalable in that they can be increased or decreased in size to a considerable extent without ragged edges developing. For a more thorough description of terminology, perhaps better suited to printing, see the Wikipedia page entitled Typeface.

The term 'font' here means the 'named font' . There is some confusion in the intuitive use of the word font. The intention among most is to mean the font-name and perhaps the font-family when font is used, but not the font-size, font-color, or other properties, and understanding this simple point can sometimes make sense of what is otherwise confusion. The transition of terminology from printing to computer screens has left the matter in disarray, but here the descriptions will be found to be easily understood. Should these notes use the terms font, face, variant or family, they will refer to the font-name, such as Courier or Arial and when size is intended, that word will be used.

Screen display settings

At the topmost level, the software platform's display settings control the size of everything; on the desktop, on applications, text, images, tables, everything. That is to say, the screen can be left in its native resolution, usually its maximum resolution, or it can be set to have a lower resolution.

Setting a lower resolution for the screen means that pixels are assumed to be grouped into 'bigger blocks' than before, and so objects displayed on the screen, whose widths are still defined in the same number of pixels, must now take up more space. To put it another way, the logical screen pixels of the software are each mapped to a greater number of physical screen pixels than before. As a result, everything on the screen is magnified, and on small screens the layout needs to be rearranged by the software to make it all fit.

The desktop text-size should be changed if it is uncomfortable to read. This setting should be made before considering any other adjustments to the fonts in browsers or other programs, because this setting affects them too. As an example, the Windows platform adjusts screen resolution in the Display section of its Control Panel. Although this setting can be increased greatly, there is a limit to the resizing that most programs can handle in response to it.

Font sizes in web-pages

The sizing code used by web-authors profoundly affects the web-page, especially when the user attempts to change the size of the text. The main issue relates to whether or not the author has designed his page in absolute sizes or relative sizes.

Absolute sizing

The use of absolute length measurements to define font-size, e.g., pt (points), px (pixels), cm (centimeters), or in (inches) causes the fonts to be displayed in an exact size, and the browser will use conversion factors to render the text on the page. When the browser has its settings at nominal, that is without zooming or other magnified texts, the text is displayed at near the sizes found in printed work.

That is not to say that absolute sizes are a bad thing. They most often produce clear web-pages. However, when the user attempts to increase the text size with the default settings, it does not shift at all. Using default settings has no effect on fonts sized in points or pixels.

To quickly test this idea just open the Google search page, and try to increase its size with the default font setting. (not the page zoom). Google's web author has specified the size of the fonts in absolute units.

Relative sizing

The use of relative length measurements to define font-size, e.g., em (the width of the container's letter 'm'), ex (the width of the container's letter 'x'), or % (percentage of the container's font size), without any mention of absolute sizes, allows the use of all of the browser's text-sizing features. This is the preferred design method for most web pages.

The underlying assumption used by browsers in displaying text assumes that every unit of em is equivalent to 16 pixels. This assumption is then modified before display, to take into account the browser's default settings. (Internet Explorer is said to function best when, in addition to using only relative sizes, a font-size of 100% is placed in the page's body tag).

Mixing Absolute and Relative

When there is a mixture of both absolute and relative font sizes in the web-page or its style sheets, the page might still work well, and users would not know that it was so. However, when a larger default size is chosen, the relative sizes will be scaled while the absolute sizes will not, causing much confusion and misalignment of text.

Most browsers have features to help overcome such confusion, and can ignore absolute sizes. When this is done, the user must select fonts to replace them. In addition, users can use their own style sheets.

Default sizing and font choice

When there are no font sizes, absolute or relative, in the page's styles , then the browser's default font-size is used throughout. If the author has provided a choice of font, for example, Times New Roman, it will be used, but if none was specified, then the default font-name is chosen. A similar argument applies to font-color.

The 'no-sizes-at-all' situation makes use of the Client Stylesheet. It has the lowest priority of all other styles.

Common Browser Features

The three browsers in the table below have been listed to compare their text-sizing facilities. Rather that singing the praises or failings of any one browser, it is perhaps more useful to point out that nearly all internet browsers are provided free of charge, and so it is entirely possible to have different browsers for particular tasks. Notes on each of the categories can be found in the text that follows.

Font-sizing Features of Three Browsers
Feature	Internet Explorer 8	Mozilla Firefox 3	Opera 11
Change User Font-size
Change User Font-family
Zoom the Whole Page
Zoom Text Only
Set Minimum Font-size
User Style Sheets	^[1]	^[2] ^[3]	^[4]
Accessibility Features

	Browser options and preferences for fonts use units of pixels. For a display baseline, they take 1em as equivalent to 16 pixels. In the absence of other display magnification, this displays as about 12pt.
About Points

	When installing or changing a local style-sheet, nearly all browsers will require a browser-restart to see the changes. This also applies to preference changes in Opera.
Remember to Restart!

Change User Font-size

This is the browser's main size adjustment, and it only affects text, not the whole page like the page zoom setting. It is sometimes called default size because it is the value used in the absence of any other specifications. More importantly, when web-authors correctly specify fonts in relative sizes, this setting provides the background size setting, or base-size, that will act as a reference point for the scaling of the whole range of fonts on the page. It is the one that a person would use routinely for their preferred viewing level. All three of these browsers allow the user to change the font-sizes displayed, and can even override the author's specific point-sizes in favor of them.

Of these three, Internet Explorer 8 has the fewest facilities. It has no separate default size setting but depends on five 'smallest-to-largest' choices on the View (and Page) toolbars. A recent test of Internet Explorer 8 with near-native screen resolution, 100% page zoom, and the browser's font setting at maximum, could not produce 1em-text larger than about one quarter of an inch (6mm.). Both Firefox 3 and Opera 11 can specify a default size over a wide range, and it is set in the browser options (preferences).

Change User Font-family

The choice of Arial sans-serif fonts for most web-work is fortunate, for it has good clarity and most users tend to stick to it. However, when an author has not specified which font-name to apply to a page, then the user's default font is used. If on the other hand the web-author has specified which font-names to use, but the user finds them disagreeable, then the user can override his choices in favor of his own. In each of these three browsers the override is just a matter of clearing boxes.

The three perform equally well in the selection of font-name and font-color.

Zoom the Whole Page

All three browsers have a page zooming facility. As the name suggests, both text and other page structures are increased, and it is not limited by any other size settings - it is just a page magnifier. This setting can be used as a temporary measure to magnify text, though it will magnify everything. Surprisingly, in an unusual spirit of cooperation, all three browsers use the same shortcuts for zooming. (Ctrl+plus to increase; Ctrl+minus to decrease; and Ctrl+zero to reset).

Both Internet Explorer 8 and Opera 11 have a generous range of page-zoom settings in their drop menus, but no sign of a reset there. Firefox 3 on the other hand has a mere 'up or down' choice for zooming, but shows a reset.

Zoom Text Only

This feature allows the zooming of the page text without changing the other structures. It is a true text feature in that it cannot be reduced below the setting for minimum font-size. Unlike other facilities of the kind, it also increases the size of fonts specified by the author, his absolute sizes, as well as those with relative sizing; this is done without overriding the author's fonts. This feature is similar to the minimum font size setting. It uses the same shortcuts as the page zoom.

On the down-side; some features, like banner text is best made with fixed absolutes, so that when the text size is increased by the user, the text does not spill out of the box. Because text-zoom affects all text it might distort such features.

Of the three browsers, it is featured only in Firefox 3.

Minimum Font-size

At first sight a minimum font-size might seem the same as a default size. however, the default size refers to the usual body text, whereas an author might still set values below the body text, say for the text within a table. This minimum font-size setting is the most general, in that it applies to both absolute and relative sizes, and works without the need to override the author's fonts.

That is to say, even if the author has specified a 9px font in his style sheet, a minimum font-size setting of 16px will cause it to be scaled up. The scaling does not apply to all of the fonts on the page; only the ones below the threshold. So this setting, if higher than the default size, will override some values. Those who intend for all text to be no smaller than the body font, should set both the default and the mimimum to be the same. On the other hand, for those without special viewing needs, who want to give web-authors the most latitude of display, the minimum should be at about two thirds of the default.

Firefox 3 and Opera 11 can set a minimum font-size, but Internet Explorer 8 has no specific setting.

User Style Sheets

The author's styles are either written into the web-page directly, (heading styles or inline styles), or are contained in style sheets that are downloaded with the web-page to the browser. There can be several style sheets and many styles on the page, and the job of the browser is to decide which of all the styles to apply to the parts of the page. The browser sometimes allows the user to add a style sheet of his own, and this sheet can be given priority in deciding formats on the page. This allows the user to specify his own styles, albeit seen only on his local display. This feature can permit custom styles for special purposes; accessibility features for the visually impaired, and to overcome one-off problem types.

Internet Explorer 8 and Opera 11 allow such style sheets to be added from a 'Browse' dialog, whereas Firefox 3 needs the user to add the css file manually to the browser's profile folders. References can be found at the bottom of this page that describe their inclusion. A style sheet was tested with Internet Explorer 8, and it is considered a simple process for those familiar with the making of CSS (cascading style sheet) style expressions. Interested parties can find methods for making style sheets at W3 CSS Reference and at Font Tester, and many find that they can write a .css file in Notepad after a suitable period of study.

Accessibility Features

All three of the tested browsers are keen to mention their accessibility features though their effectiveness remains unclear. My recent test of the voice features in Opera 11 failed entirely, and a bug report was made. It is perhaps true to say that the inclusion of user style sheet facilities is in itself a step toward allowing special formats, though browsers that supply a selection of such style sheets for each disablement grouping would surely command the most respect. Only Opera, of these three allows high contrast styles to be applied from the browser's toolbar. Individuals with experience of the subject are invited to add their comments here.

Although not usually considered a browser issue the Windows and Microsoft Office help panels, for off line viewing, use a specially formatted version of Internet Explorer to display HTML-based documentation. Because the normal browser tool bars are missing from these help panels, they have options buttons to allow the increase or decrease of font sizes. When an external help web-page is accessed by a Microsoft product, it uses Internet Explorer preferentially. Unfortunately these web help pages do not always scale as they should.

Those who use wide screen sizes, (1600 pixels or so), will find that some Microsoft Office help pages have some text that is too small for usual working. (VBA help example code for example.) In Word 2010, VBA Help of Windows 7, cannot be re-sized at all, despite the existence of a button for that purpose. However, because these help features use Internet Explorer to display them, a user style-sheet has been found to be the best solution. By setting IE to have a user style sheet, the MS Help screens can be made in any text size that is specified. However, doing so usually means that IE must be reserved for that specific purpose, and another browser is probably needed for the web in general. The simple css code given in the drop-box below can be saved as a css file and installed as a user-style-sheet to show how to increase the text sizes for difficult pages. (E.g., some offline Developer VBA examples).

That said, Off-line MS Developer Help pages opened in the MS Word VDE have stubbornly small text even while the On-line VBA Help works well.

User Style Sheet for MS Help Pages

/*  This style sheet allows Microsoft Office Help pages to display 
    in the size specified below - eg 11 point */

/*  Be sure to restart the Office application after installing the 
    style sheet  */

/*  When the help pages are still badly distorted, then repairing MS Office
    will sometimes rectify the matter  */

/*  Install this css file as a User Style Sheet to see how it works. 
    Be sure to select the 'Ignore font sizes specified in web pages' and the 
    'Format documents using my style sheet'  check boxes
    in the Accessibility dialog of the Internet Explorer's browser options. */

                 
/* ****************************Styles ********************************* */

div
{
font-family:Verdana serif monospace;
font-size:11pt;
line-height:1.5em;
}