Archive for the ‘Fonts’ Category

Recently a client gave me a laptop to use in their behalf. Using it to look up information on my I18nguy web site, I noticed that one of my web pages, which I had recently worked on to scale with different font sizes, was grossly out of whack. It took me quite a while to sort out why it seemed to work on the laptops that I had tested, but not on this client’s laptop. Here is what I learned. Most of the details are relevant to Mozilla Firefox 3.6. In the future, I may investigate how other browsers behave with respect to default fonts.

Accessibility Recommendation: Avoid Absolute Font Sizes

I believe in universality of the Web and those practices, standards and recommendations that promote accessibility and internationalization so that everyone can have access to information. One of those recommendations is to avoid absolute font sizes, so that users can adjust text to a size that is legible for their eyes and equipment. An absolute font size would be one declared in terms of inches, centimeters, millimeters, points, pixels. Font sizes can instead be declared in em units or percents, relative to other fonts.

For example, using CSS declarations, here are two fixed and two relative font size settings:

.fixedpixel { font-size: 16px;}

.fixedpoint { font-size: 12pt;}

.relativeem { font-size: 1.5em;}

.relpercent { font-size: 150%;}

My web page used entirely relative font sizes.

Browser Default Font

However, there must be a font from which others are declared relatively. Browsers have a default font which can serve this purpose.

There are also font-size keywords (xx-small, x-small, small, medium large x-large xx-large). Medium is considered the default size for body text. The specific value for the font name (or in CSS terms the font-family) and size of the medium font is defined by the browser’s default font. The browser’s default font is usually configurable by users.

The recommendations to browser implementers for the values of the remaining keywords have changed over time. (Lack of stability and consistency of implementations is a related frustration when it comes to default font sizes.)

My page had declared medium as the font size for the body element and other fonts were sized relative to this.

Many people have written about the differences between browsers and their treatment of the default font and potential solutions. (For example, A List Apart)

I had tested scalability with Internet Explorer and Firefox. IE let’s you set the default font-family but not the size. Size in IE is adjusted through zoom controls. Firefox on the other hand let’s user specify a default font and size.

Firefox Default Font Size

Firefox let’s you set both font-family and font-size for the default font. Go to the Firefox Tools menu, Options and choose the Content tab. To test scalability I view pages with different default font size settings.

Now being an I18n Guy, I had also clicked the Advanced... button. This brings up a dialog box with a drop-down for different scripts (writing systems) such as Arabic, Bengali, Simplfied Chinese, Central European, Western… For each script there are font settings for Proportional, Serif, Sans-Serif, and Monospace fonts, as well as other properties such as default character encoding.

I had looked through and edited the settings for a few different scripts. Apparently, the last script I had touched was Central European. Returning to the previous dialog box, it shows as the default font size the value last set for any script.
My subsequent changes to the default font-size all mapped on to the Central European font.Unfortunately, Firefox doesn’t use that value as the default! In my experiments, only the value of the Western script was applied to my pages. So my tests had falsely indicated that the page was stable and independent of the browser default font size.

Note this occurred even though the Western script uses the same font as the Central European. The Western font size was not changed when the default font size was changed. So I was changing the default font-size but it was not affecting the size of the font that was applied to the page.

I have since changed the language of the page to several different values using statements such as <HTML lang="en-US"> and the changes did not seem to determine the script selection. The web page is UTF-8 so the character encoding didn’t drive the choice of script and default font-size. Perhaps, the browser detects the relevant script based on the actual characters used in the page.

Note also, that it doesn’t matter that the page may be using fonts other than the default font. The size associated with medium and other keywords is based on the browser’s default font size, even if that size was associated with a completely different font.

I think it is a mistake that Firefox setting for the default font size hides the script it is applied to behind the Advanced... button. The script should be made explicit, as well as the method by which a script is determined for a page. A good feature would be to also offer an option for the default size change to apply across all scripts.

Summary

As recommended, I defined a page using relative font sizes.

The base font was medium.

Firefox provides settings for different default fonts by script.

The default font-size is displayed as the last script used.

Further changes to the default font-size are applied to the last script used.

The default font-size used by a web page may not be the default font shown.

I have not determined yet how the script selection associated with a page is made.

Impact

This information has consequences for users, designers, localizers and testers.

User, especially multilingual users, may be frustrated by changes to the default font size not having any impact on the pages they are viewing.

The relationship between implementation of relative fonts and default fonts is important to providing usable and accessible pages.

To perform QA and operate pages with different default font-sizes, testers must understand the need to change the default settings for the relevant script(s) used by the pages, not just the default value.

Understanding how the browser associates the script with the page also needs to be understood.