Access me… #5

…font-size – the right way…

accessible font-size conundrum…

If you want to know what the correct size for an accessible font should be, then you won't find an absolute answer. The reason is that that's for each visitor to decide, and we as designers should accomodate such decisions as well as we possibly can.

The question isn't size here, but whether or not a design-solution can cope with browser-environments that are different from the creator's own settings. We, as designers/coders/whatever, can not impose our preferences on visitor's browsers, but we may destroy our own designs and prevent access by attempting to do so.

User preferences are available in browsers for accessibility reasons, so no use complaining about them. The end-users are in charge – even if far from all of them are aware of it. We as designers either learn about user-preferences and browser-options and take them into account, or prepare for design-failure.

'minimum font size'…?

Now, we may not like “ugly”, huge text, but most browsers have a 'minimum font size' option that overrides whatever font-size we as designers may prefer. Tiny and "nice" 9px text becomes 14px or whatever the user prefer, and "pixel-perfection" is gone — or is it?

example

The image above shows the select-panel in Firefox on windows 2000.

example

The image above shows the preference-panel in Opera 9 on windows 2000.

Opera, Mozilla/Firefox and Safari are the most well known standard-compliant browsers around at the moment, and they all have this 'minimum font size' option.

Internet Explorer (windows) doesn't have a 'minimum font size' option. It does however have an 'ignore font-sizes in page' option that "web designers" often find it convenient to "forget" about – with disastrous results at times. For more on this, see: browser options.

using relative font-size units…

Ok, so we follow 'best practices' and use 'em' and/or '%' as font-size unit – as we should. Most accessibility-articles mention 'relative font-sizes' as a must, and that is not a problem in itself.

Plenty of articles around on the subject of access and font-sizing, but I won't provide any links since every single solution I have seen so far seems to fail. Think they have overlooked how inheritance may affect relative font-sizes when 'minimum font size' is applied.

Relative font-size units are percent (%) and ems (em). Most web designers/coders know how to define their preferred font-size by using these units. I'll focus on how to use them right and achieve the same, without unnecesary break-up of layouts and following accessibility-problems when our pages are subjected to 'minimum font size'.

For the record: a pixel (px) is also a relative unit when used in web design, but let us leave that one out of the equation for the moment since the most used browser, Internet Explorer, is a bit lost when pixels are used on fonts.

inheritance problems…

Browsers use different mechanisms for 'minimum font size', so whatever solution we choose there's a need for cross-browser testing. Let us look at how these differences affect the results.

Opera and Mozilla/Firefox will enforce 'minimum font size' on any element, and the calculated value is inherited down the chain – skewing font-sizes defined in em or percentage.

Figure shows what will happen when root-value (usually on body) is 62.5%, and subsequent font-sizes are defined in 'em' or '%' with no further nesting. CSS defined font-sizes in 'blue' and results in 'dark red'. Minimum font size is set to 14px.

fig: effect of inherited minimum font size

The result is quite a good spread of very large fonts, as the root-value is recalculated to 14px (≈ 88%), and all relative font-size values on subsequent elements inherit this new root-value.

Safari will apply 'minimum font size' after the CSS-defined values are calculated down the chain. Values resulting from 'minimum font size' are thus not inherited, but are instead only forced onto elements where font-size is actually smaller than the 'minimum font size' value to begin with.

Figure shows result with same CSS-defined font-sizes.

fig: effect of non-inherited minimum font size

Nice line-up, as root-value doesn't affect subsequent font-sizes. It does however look like it may affect other 'em' and/or '%' values, so everything may not line up perfectly.

1: minimize inheritance problems…

These differences can lead to strange results, as shown above. To exemplify even further, let us use 'minimum font size = 16px' on a simple but quite normal definition-chain. (Internet Explorer's 'ignore font-size in page' + 'font-size: medium' is included for comparison.)

defined in page:
body {font-size: 62.5%}
#content {font-size: 1.6em; /* ≈ 16px */}
#content p {font-size: 1.1em; /* ≈ 11px */}
redefined in Op, Moz/FF:
body {font-size: 16px;}
#content {font-size: 1.6em; /* ≈ 25px */}
#content p {font-size: 1.1em; /* ≈ 27px; */}
redefined in Safari:
body {font-size: 62.5%;}
#content {font-size: 1.6em; /* ≈ 16px */}
#content p {font-size: 16px; /* ≈ 16px */}
ignored in IE/win:
body {font-size: 62.5%;}
#content {font-size: 1.6em; /* = 16px */}
#content p {font-size: 16px; /* = 16px */}
solution:
  1. Define the largest font-size value on the root-element, be it body or html. Use '%' on root to avoid IE/win's buggy scaling of em.
  2. Size all text-carrying elements equal to or smaller with regard to parents.
result:

Opera, Mozilla/Firefox and Safari will present the page pretty identical, and the result will look as shown for 'redefined in Safari'. (Internet Explorer will ignore the whole issue, and apply its own font-size if that option is used.)

NOTE added [12.nov.2007]: according to extensive testing lately, this “size down” solution is still the most reliable and predictable around.

Caveat: browsers are not bug-free, so some minor flaws may still bypass the most perfect solution.

2: avoid inheritance problems altogether – use pixels…

Before anyone starts yelling about Internet Explorer and pixels, have a look at the simple, stable, cross-browser reliable solution below.

solution:
  1. Feed all standard-compliant browsers font-sizes in pixels (px) on all text-carrying elements in a page.
  2. Give Internet Explorer a separate stylesheet (if it haven't got one already), and redefine all font-sizes, using percentages (%) and ems (em) for functional 'font-resizing' option in that browser.

All standard-compliant browsers can resize text and render font-sizes consistently if we use relative pixels (px) as font-size units. Even some older and/or less standard-compliant browsers will respond well to pixels.

NOTE added [12.nov.2007]: I'm not recommending this solution unless thorough testing is applied, since it may backfire slightly as higher screen-resolution (DPI) makes font-resizing at the user-end more and more likely. Small fonts simply aren't working well on small screens with high resolution.

defined in page:
body {/* never mind */}
#content {font-size: 16px;}
#content p {font-size: 11px;}
user say; 'minimum font size = 16px':
body {/* doesn't matter */}
#content {font-size: 16px;}
#content p {font-size: 16px;}

If any future version of Internet Explorer should happen to get its bug(s) fixed regarding pixels and fonts, then it's just a question of targeting the buggy versions through a 'conditional commented stylesheet', and feed relative pixels to the "fixed" ones.

example:
<link rel="stylesheet" href="styles/good_browser.css" type="text/css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="styles/corrections_for_buggy_ie.css" type="text/css" />
<![endif]-->

As mentioned before; a pixel is a relative unit in its own way, regardless of what anyone may think or write or whatever. Absolute pixels are physical/timed cross-points, "dots", on our screen(s), and our design-pixels are relative to them. See: CSS2 syntax and basic data types - lengths.

layout still breaking…?

Remember that this is web design – not bronze-casting. We can remove some unpredictability, but we cannot (and should not try to) prevent font-resizing or other accessibility-related user-preferences from working. So if our layout breaks too early then it's because we haven't designed it well enough. Back to the drawing board.

We have to make decisions about how much a particular type of design has to be able to take. There's no way around this issue if we want to create accessible and somewhat good-looking web pages.

Personally I've landed on 'minimum font size = 28px' as an upper limit, and test my designs within that range. The results may not be perfect, but content is accessible and my designs survive well enough for comfort. Just give this page a try.

For the record: I set 'minimum font size' to 14px in my browsers for ordinary surfing. The high number of sites that can't even take that much without breaking, shouldn't come as a surprise.

visitor's experience…

As I am one of those (potential) visitors that like readable text-size on web sites, I'm almost always pleased when the author / designer has defined font-size: 62.5% on body. That will in most cases give me very readable text at around twice the size the author intended – readable from half-way across the barn – without any further resizing at my end. So by all means; keep on adding such ridiculously low values as base, and assure all visitors of your ignorance.

Not sure all visitors may appreciate such a statement though. I think most will prefer something closer to font-size: 100% all over, so they won't have to rearrange furniture in order to read comfortably.

Authors / designers may not like their solutions exposed to such accessibility-options, but if they don't test how their own creations appear when ordinary browser-options are applied, then they have only themselves to blame if it doesn't work. They have no say at the visitor's end, and it's about time all authors / designers realized that and designed accordingly.

sincerely  georg; sign

Hageland 23.sep.2005
last rev: 16.nov.2008

Access me…


it never was a question about size…

Section

  • introduction
  • Table of Content

About

  • this is PTL web-design
  • CSS sledgehammer
  • accessibility
  • Print enhanced page
  • Projection enhanced
  • Small Screen enhanced page
  • validity of xhtml and CSS
  • html tidy
  • Opera and me
  • Firefox vs. IE
the usual
  • the author
  • Copyright
the unusual
  • Molly speaks up
the additional
  • Examples
  • Demo pages

Two good friends - Lynx and Opera.
They both provide excellent access to the world wide web.

internal resources:

Dear web design experts:

Don't tell me that nobody uses these options…
…I'm not a 'nobody'
Georg

Dear visitor:

Correct me if I'm wrong, but I'm usually right – sometimes.
Georg

Nice font doesn't really matter if I can't read the text.
Georg

Live testing:

Set 'minimum font size' as you wish, and see the results below for 'em' sized fonts in comparison to 'px' defined fonts.

testcase 1

root: 62.5% of 16px
= root: 62.5%

  • 6px0.60em
  • 7px0.70em
  • 8px0.80em
  • 9px0.90em
  • 10px1.00em
  • 11px1.10em
  • 12px1.20em
  • 13px1.30em
  • 14px1.40em
  • 15px1.50em
  • 16px1.60em
  • 17px1.70em
  • 18px1.85em

testcase 2

root:100% of 16px
= root:100%

  • 6px0.40em
  • 7px0.45em
  • 8px0.50em
  • 9px0.55em
  • 10px0.62em
  • 11px0.66em
  • 12px0.74em
  • 13px0.80em
  • 14px0.88em
  • 15px0.95em
  • 16px1.00em
  • 17px1.05em
  • 18px1.15em

testcase 3

root: 100% of 32px
= root:200%

  • 6px0.19em
  • 7px0.22em
  • 8px0.25em
  • 9px0.28em
  • 10px0.30em
  • 11px0.35em
  • 12px0.37em
  • 13px0.40em
  • 14px0.43em
  • 15px0.46em
  • 16px0.50em
  • 17px0.54em
  • 18px0.57em

off site resources:

about…
…2005 - 2008
last rev: 16.nov.2008