Refining Text Presentation with your Web Browser: Windows

It wasn’t long ago that I wrote an article on authoring an effective text-resizing widget. In that article, I made a point not to espouse the use of text-resizing tools, since it’s generally more effective to allow people to use their browser’s built-in text-resizing functionality.

In fact, browser’s allow you a great deal more control than simply size. Modern browsers can give you extensive control over website text, including dictating background colors, text color, base text size, minimum text size, and link attributes. This post is intended to provide a quick overview of the specific controls for most modern browsers.

Most browsers have fundamentally the same options, although the interface and location in menus is quite variable. Some are more intuitive than others, and some interfaces simply don’t quite work right…

Firefox, versions 2 and 3

Main Options: Tools » Options » Content

Firefox text configuration options dialogueOptions for text configuration in Firefox are split between three menus, as is the case in most browsers. In addition to the basic options (setting your default font and font size), you can open up menus to configure preferred browser colors, link behavior options, etc.

Advanced Options: Tools » Options » Content » Advanced

Firefox advanced text configuration options.In the advanced menu, Firefox gives you the options to set preferred fonts for Proportional, Serif, Sans-serif, and Monospace fonts — this can be useful, if you know what they mean, but is primarily a decorative decision. However, they also give you the ability to set your minimum font-size AND to dictate whether or not web pages will be allowed to over-ride your own browser settings for font face. The minimum font-size can be a very powerful tool for accessibility — it allows you to easily prevent any website from ever producing text at a size you are unable to read.

Color Options: Tools » Options » Content » Colors

Firefox text color options dialogue.Text color options are fairly straightforward. Firefox doesn’t provide an extensive list of choices: you have only four generic objects you can choose color for. Links, visited links, text, and overall background. Importantly, however, it gives you the power to enforce your choice of text and background colors, overriding any web site text or background colors. (For the record, it does also override background images, so no worry that you’ll be left with black-on-black purely because the site is using an image for the background text.

Netscape 9 uses the same options menu as Firefox, and this will not change, since Netscape was officially killed as of March 1st, 2008. RIP, Netscape.

Opera 9

Basic Options: Tools » Preferences » Web Pages

Opera 9 font configuration settings.The options in Opera 9 are much the same as Firefox, with a significantly different organization — and a couple of glaring omissions. The first omission noted is that while Opera provides you with the option to change the default background color, it does not give the option to change the corresponding default text color. This could easily cause problems, and makes it much more difficult to choose as your preference a light-on-dark color scheme, for example. The second omission is the lack of an option to have Opera override the text colors set by the web site. The options provide are merely to configure pages without a specific style applied — leaving you with less than ideal options when it comes to preferences on a less than ideal site. In general, the basic options are extremely weak in Opera.

Advanced Options: Tools » Preferences » Advanced » Fonts

Opera 9 advanced font options.The advanced options in Opera, while providing extensive options for configuring font colors, sizes, and faces, are perhaps a bit confusing to operate. They may be a bit on the overwhelming side for some users. However, they do also give you a lot of choices. You’re presented with a list of 23 separate types of on-page text which you can modify. Rather than simply setting one base font size or face, you can individually configure settings for browser menus, toolbars, web page text, headings, and form input.

Opera 9 text element configuration.The one complication is that not all fields give you the same set of options. While at first glance, it’s very nice that they provide options to change browser menus, in fact they have not provide the option to change the text size for those elements. Ah, well. The menu to configure those text elements which are fully configurable is straight-forward and logical.

How these text presentation choices actually function, however, is perhaps a little bit mysterious. It’s not 100% accurate to say that these are choices specific to text elements. The organization doesn’t make this clear, and there’s no text to describe it, but if you change the option “Web page normal text,” this will effect all text on the page. This option appears to be inclusive of all the element-specific configurations expressed below. Changing this option will override whatever text-size choices the website has made. This is not apparently true of the other options: changing the specified size for h1 did NOT override the website specifications in my testing.

Safari 3.0 for Windows

Main Options: Edit » Preferences » Appearance

Safari 3.0 Text OptionsThe basic options in version 3.0 of Safari are pretty simple, at first glance. You can pick the basic options (font face and font size) for standard and fixed-width fonts. If you want to change the default font size to one of the options provided (9-14, 16, 18, 24, 36, 48, 64, 72, 96, 144 or 288 pixels), you simply select that size and you’re set. If you want a size not in that list, however, you’re in for a surprise.

Safari 3.0 Text options (controls)First, Safari 3 for Windows does not provide any kind of control to save or commit your changes. They are intended to be committed immediately, with no need to save. This is counter-intuitive in the Windows operating system paradigm, particularly when making a change which is not immediately visually apparent. In the case of font changes, fortunately, as long as you have a web page open behind the control panel, you will see the results immediately.

But…if you type in the size you would like to see (in the editable text field in the upper right corner), it does not immediately take effect. This is because the change is actually implemented as soon as you remove focus from the text box. So, if you edit the text box manually and then close, the change will not be saved. If, instead, you edit the text box and then move the focus to any other field, your edit will then be committed.

The other option for freely changing text size is a vertically oriented slide control. This would be reasonably logical if it weren’t for the list of font sizes right next to it — the select control is listed from smallest to largest, but the slide control moves the opposite direction: the largest sizes at the top. Still, once you get the hang of the controls, it’s not difficult — just not really intuitive.

Advanced Options: Edit » Preferences » Advanced

Safari 3.0 Advanced Text OptionsThe Safari advanced options provide only one additional text refining feature: the ability to set the minimum font size rendered. This is also where you can attach a custom stylesheet; but this type of feature will be discussed later. You may also note at this point that Safari offers no options for altering text colors, background colors or link colors.

Internet Explorer 6/7/8

Main Options: Tools » Internet Options » General » Fonts

Internet Explorer (versions 6-8) General text optionsThe general font options in all version of Internet Explorer are quite basic — the only option available is to choose the font faces which will be provided for web page or plain text fonts. Straight forward, simple — and doesn’t do very much. For the most part, this is not likely to provide any additional accessibility, unless you happen to spend a lot of time on the web sites which have not specified a font face and have difficulty reading Times New Roman.

“Accessibility” Options: Tools » Internet Options » General » Accessibility

Internet Explorer (versions 6-8) accessibility optionsI put this section into quotes because I find the categorization of these options as being specifically “accessibility” options is a bit specious. What is actually provided under the accessibility menu are the options for allowing Internet Explorer to use your color and font settings to override web site settings. It should be noted that Internet Explorer allows you to ignore the font sizes specified on a web page, but does NOT allow you to change your own base font setting. (You can change this setting in your Windows appearance options, and it will effect web pages if the “Ignore Font Sizes” setting is checked.)

One sadly missing feature in all versions of Internet Explorer is the ability to set a minimum font-size — a feature which, in my opinion, adds great value to other browsers.

Internet Explorer 7/8

Colors Options: Tools » Internet Options » General » Colors

Internet Explorer (versions 7-8) Color optionsWith Internet Explorer 7 and, so far, version 8 as well, the color choice menu has been redesigned from version 6. It has not been designed for the better, mind you. The interface is, to say the least, confusing. There are two check boxes in the new interface: “Use Hover Color”, and “Use Windows Colors”. “Use Hover Color” is fairly straightforward, although the way the interface is designed makes it unclear what color will in fact be used.

“Use Windows Colors,” however, is quite confusing. Unfortunately, if you have the option checked, the color selections are grayed out: giving you, in effect, no idea what “Windows Colors” will actually be. This may not be a problem in a default set up; but if you have changed your Windows Color, you may have no idea what to expect. When you uncheck the option, the color fields once again light up and give you your options to change.

Internet Explorer 6

Colors Options: Tools » Internet Options » General » Colors

Internet Explorer 6 Color OptionsAlthough fundamentally a very similar interface to the later versions, the color selection tools in IE 6 are, to me, much clearer than the later events. The grouping of features makes more sense, as does the indication of current defaults — which are at least available for link colors, if not for text and background colors.

One of the biggest problems, in my opinion, with the design of the Internet Explorer interfaces (all of them) is that rather than giving you the option to override web page settings at the same time you establish your settings, you have to create the settings and set the override selection in separate menus. In IE 7 and 8, adding insult to injury, the interface takes up space to link to instructions on how to ignore presets — space which could just as easily have been occupied by a checkbox to perform that action.

Custom Stylesheets

Most browsers allow you to attach your own custom style sheet. These style sheets use the Cascading Style Sheets format to allow you very fine control over how web sites you visit will display. They are, however, somewhat beyond the skill level of the average web user. Nonetheless, it’s valuable to know that the feature is available — if you are unable to enable your browser to provide what you need, you may be able to accomplish it with custom styles.

Opera Custom CSS: Tools » Quick Preferences » Edit Site Preferences » Display

Opera 9 Custom Stylesheet InterfaceThe richest options available at this time are for the Opera browser. Opera allows customization on a site-specific level, allowing you to specify detailed characteristics for each site you visit.

Firefox Custom CSS: Complicated by hand, easy with plugins…

In it’s default installation, Firefox simply doesn’t offer a practical way to install custom styles. However, the easy extensability of Firefox through browser add-ons solves this problem readily. The most popular and easiest to use option is the Stylish add-on, which provides functionality to add custom styles at the site level or the global level. Additionally, Stylish maintains an online repository of user-created styles.

Safari Custom CSS: Edit » Preferences » Advanced

You’ve already seen this menu above, and it seems fairly straightforward. I will say, however, that I had a great deal of difficulty managing style sheets. The behavior of the interface was quite buggy. It’s difficult to describe, except to say that the differentiation between selecting to choose a style sheet and loading a new style sheet was extremely weak. It was not uncommon for them to behave in a different manner from what I expected. Altogether, at this time I’d say that the functionality is present, but at least in my installation, nearly unusable.

IE 6/7/8 Custom CSS: Tools » Internet Options » General » Accessibility

Unlike Opera by default and Firefox with the Stylish plugin, Internet Explorer offers only a single global custom stylesheet to be added. Nonetheless, there’s a lot you can do with global styles: and at least the interface works.

Conclusion

Most modern browsers provide the user with the ability to set their preferred default font size, text and background colors, and link colors and decoration. Some browser provide much richer features than that, allowing site-specific options and setting a minimum base font size to prevent microscopic text. In general, browser options tend to be richer and more reliable than the same functionality provided by any web-site based text widget; but may be significantly less apparent to the user.

Have something to contribute?




« Read my Comment Policy

Start the conversation!

Return to Top