|
Text Sizing Must Read
Stylesheets often cause problems for designers when they test their designs in different browsers. Owen Briggs created 264 screenshots to find a useful way to size text in the most popular browsers. Text size should match the designer's intended size in default mode and support resizing in users' browsers. The experiment includes twelve sizing methods with results from ten browsers. Backgrounder on the experiment.
Conclusions are in the making. However, the major text sizing problems are:
- Pixels... IE PC doesn't resize text. Example: body { font-size:80%; }
- Em... IE PC displays unreadable small text when user browser is set to
smaller and em is less than 1. Example: body { font-size:0.80em; }
- Percentage usually works. Example: body { font-size:80%; }
- Keywords usually works. Example: body { font-size: smaller; }
I would add another issue: Resizing headlines H1-H6 in your stylesheet creates new problems since percentage doesn't work in IE PC version 6.0 (keywords work). Documentation for this finding is shown in this screenshot (HTML for this screenshot).
DEFAULT is headers H1-H5 without formatting, shown as control group.
120 PERCENT and 80 PERCENT should increase/decrease size of H1-H5 by 120% and 80%. But it doesn't work.
Notice that the plain old paragraph works.
Trouble resizing H1-H6 often lead designers to choose private ways to format the size of their headlines ... which typically results in new browser compatibility problems. And the HTML code for headlines becomes more complex than a simple H1-tag.
[Correction:] I was in error when I wrote that "120 PERCENT and 80 PERCENT should increase/decrease size of H1- H5 by 120% and 80%. But it doesn't work." I withdraw my argument. (June 8, 2002)
Owen Briggs correctly comments:
quote, "120 PERCENT and 80 PERCENT should increase/decrease size of H1- H5 by 120% and 80%. But it doesn't work."
Er, no... H1 style="font-size: 80%" should make the H1 80% of the default font size, not the default H1 size.
Does the W3C spec somewhere have your interpretation? All I can find is "There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones." And under font-size, "Percentage values: relative to parent element's font size."
When font-size is applied, it is relative to the parent element's font size, not relative to the browser's default for that element. The parent element for a heading is usually the BODY or HTML tags, so in that case an 80% H1 will be 80% of the size of raw text inserted in body.
CSS rules replace the browser's equivalent rule, not modify the browser's equivalent rule. Essentially, things act like the browser has a stylesheet. Normal rules of cascade apply.
June 8, 2002
- By Kristoffer Bohmann
| 
Usability News 