WebDevRes: CSS Font Size Control, Recommendations

In other pages I've tested and discussed some of the issues with trying to find a good way to use CSS font-size control in such a way that it is flexible for the user but works in MSIE and Netscape versions 3.x and 4.x. I've come to some conclusions and have a few suggestions for use... FWIW, I'd love feedback on this... -jeff wilkinson

Recommendations:

  1. I still recommend that most designers stick with using relative sizing control (percentages mainly) to maximize the user/visitors' control of the appearance in their browsers. Avoid the absolute (named, pt, px) CSS size controls since they are most buggy and remove user flexibility.

  2. Keep most text, especially large sections of textual content at the browser default. In other words, do not modify it's size either by HTML or CSS. Let the users scale their browser defaults to what is most comfortable for their eyesight and their screen.

  3. Use modification generally for navigational elements as necessary. See the combined HTML/CSS contextual selector method shown below for one possible means that works in both CSS and non-CSS supporting browsers.

  4. 80% is generally a good smaller font-size setting for menubars and other navigational elements. 70% can be too small, and is unreadable on mac os or linux.

  5. The question of user background level may still cause some sites to stick solely with HTML or with absolute size control, though absolute sizing becomes more difficult to defend as the variety of web-access devices grows.

  6. Used linked style sheet files in general, but don't forget that you can add style info in the head section of specific pages if that page has html structures that need more customized styles. (or where the CSS desired for that page would break other pages.)

Example of combined HTML/CSS contextual selector method:

Update: The combined HTML/CSS contextual selector method recommendation may be outdated now. Consider it as a possible solution, depending upon your own font sizing testing, design and browser compatibility requirements and your design preferences. CSS font sizing is still a mess, but we are moving more to using CSS-supporting browsers and to better solutions. This combined CSS/HTML method is probably more trouble than it's really worth for most sites now. ~jw

The following code uses the recommended contextual CSS selector to define a font-size of 80% for anything that is in FONT tags and is CSS class menuleft. HTML FONT SIZE="-1" tags also surround the text. 

<head><style>
<!--
   .menuleft FONT { font-size: 80%; } 
 -->
</style></head>

<div class="menuleft"><font size="-1">
    &#183;&nbsp;<a href="../about/whatsnew.htm">What's New</a><br>
    &#183;&nbsp;<a href="../about/sitemap.htm">Site Map</a><br>
    &#183;&nbsp;<a href="../about/search.htm">Links</a><br>
</font></div>

The result looks like this...

· What's New
· Site Map
· Site Search

Design Requirements ... or at least Goals

  1. The default size should be adjustable in the users' browser using the default setting and the text size scaling methods.
  2. Text that is made smaller should be smaller (yet readable) in both CSS (msie v3+, netscape v4+) and non-CSS (netscape v3) browsers.
  3. No CSS methods should be used which will make text unreadable on other browsers or other platforms or for printing. (pt or px can cause such problems)
  4. The method should not require huge amounts of extra coding in either CSS or html to implement.

Notes and Warnings:

  1. Be very careful when using CSS relative sizing not to apply it more than once to a particular bit of text. You have to really watch the inheritance in this respect. For instance, if you have TD {font-size:80%;} and .someclass {font-size:80%;} and one is inside the other, or you use nested tables, the text will be scaled down twice, making it pretty small. I generally use just classes for the size control plus some contextual selector declarations with classes.

  2. NS4 sizes are all relative to the current default setting, or rephrased, IE3 and NS4.x treat all relative units and % as relative to the element default rather than as relative to the parent element.

  3. Be very careful to close any block elements where you are using CSS font size controls. If you leave <P class="someclass"> unclosed (no </P>), you can have hard to find inheritance bugs. It's a good idea to close block elements anyway and it'll be required in XML and future versions of HTML and XHTML.

  4. Note that it's easier to test this contextual CSS and HTML tag method using font-size:70% but I'd generally recommend using 80%. 70% can be pretty small in MSIE at times. Jeffrey Zeldman notes: "Contextual CSS plus HTML (70% FONT SIZE="-1)" is unreadable on the mac platform. Basically, 70% will always be unreadable on mac os or linux. It doesn't really correspond to "-1," which is readable on every platform."
    Addition: Joe Gillespie of Web Page Design for Designers (WPDFD) notes that on Macs, 9 pixel or 9 point is really the smallest readable size.

  5. I recommend using the Contextual CSS rather than just a straight CSS class plus HTML because MSIE (at least v4.x) lets the HTML FONT SIZE override the CSS. Netscape does the opposite, making the CSS override the HTML (which is correct by the CSS spec). Since MSIE's FONT SIZE="-1" is only slightly smaller than the default size, it is better to force it using contextual CSS.

  6. Note that Netscape v4 has some problems with contextual selectors, though not with Using .class FONT. For instance, NS doesn't support LI LI {font-size:80%;} to make only second level list item text smaller. Test before using.

  7. Note that this contextual selector will affect all text in FONT tags in the specified CSS class. In other words, it will affect text in <FONT COLOR="RED"> as well as in <FONT SIZE="-1"> tags. It can't tell what the FONT attribute are.

  8. I've tested this in MSIE v4 and v5, Netscape v3 and v4 on the PC. I'd be interested in feedback from anyone who could test in other browser or on other platforms.

Below is a table illustrating the various combinations of CSS, HTML, contextual and non-contextual CSS font-size control. The recommended methods have a light yellow background.

Font Size Attribute Example Text
default
ie no size mods		 Worship is the most important thing we do at Central. It is the hub out of which all other ministries, groups, and activities emanate. In worship we celebrate the historic, bodily Resurrection of Jesus Christ, and His presence in our midst through the preaching of the Word, prayers, praise, and the sacraments of Baptism and the Lord's Supper.
Contextual CSS plus HTML
80%
FONT SIZE="-1"		 Worship is the most important thing we do at Central. It is the hub out of which all other ministries, groups, and activities emanate. In worship we celebrate the historic, bodily Resurrection of Jesus Christ, and His presence in our midst through the preaching of the Word, prayers, praise, and the sacraments of Baptism and the Lord's Supper.
HTML-only
Font Size="-1"
("2")		 Worship is the most important thing we do at Central. It is the hub out of which all other ministries, groups, and activities emanate. In worship we celebrate the historic, bodily Resurrection of Jesus Christ, and His presence in our midst through the preaching of the Word, prayers, praise, and the sacraments of Baptism and the Lord's Supper.
CSS-only
80%		 Worship is the most important thing we do at Central. It is the hub out of which all other ministries, groups, and activities emanate. In worship we celebrate the historic, bodily Resurrection of Jesus Christ, and His presence in our midst through the preaching of the Word, prayers, praise, and the sacraments of Baptism and the Lord's Supper.
Non-contextual CSS
80%
FONT SIZE="-1"		 Worship is the most important thing we do at Central. It is the hub out of which all other ministries, groups, and activities emanate. In worship we celebrate the historic, bodily Resurrection of Jesus Christ, and His presence in our midst through the preaching of the Word, prayers, praise, and the sacraments of Baptism and the Lord's Supper.
MSIE lets the HTML override the CSS (backwards from the CSS spec), and FONT SIZE="-1" in MSIE is only very slightly smaller than the default.

A Debug Tip: If you're trying to debug CSS/HTML and having trouble figuring out what is being affected by particular CSS definitions, add color settings to those definitions. Seeing slight differences in font sizes is often difficult, but setting color:red; in your CSS will make sections that are and aren't affected stand out. Here's a quick example:
    .sm80     { font-size: 80%; color:maroon; }
    .sm80c FONT { font-size: 80%; color:green; }

Font Family Selection: Note that some font families are smaller than others, even for a particular point size. The common browser default Times New Roman generally is smaller than Arial or Verdana. Verdana in particular is wider. Keep this in mind when you are choosing sizes.
   Times New Roman, html size=3
   Example text in Arial, html size=3
   Example text in Verdana, html size=3

Some other references:

[ WebDev Resources | SiteMap | Wilkinson Home ]
Last Updated: July 17, 2002
© 1999-2002 J.Wilkinson