[thelist] CSS Font Size

Rob Schumann roblgs at cscoms.com
Mon Oct 27 01:26:22 CST 2003


Hi JP,

The stuff of religious wars indeed! tread carefully ;O)

On 27-10-2003 Shawn K. Quinn wrote:

 > Unless you are specifying a print stylesheet, em or %. Even
 > for a print stylesheet I would be a little nervous about using
 > pt. Units like px are only intended for user-side stylesheets,
 > and should *never* be used in an author-side stylesheet for
 > the screen.
 >
The original question falls into the category of "which particular set of difficulties do you wish to cope with today"... as Shawn points out later in his post, there is no single ideal solution.

Inevtiably, there has to be compromise.

If it were not for the fact that IE-Win doesn't allow user resizing of font-sizes specified in 'px', these would probably be the best option. All modern browsers other than IE-Win allow type so sized to be rescaled... unfortunately the exception is the vast majority, so px is ruled out on that count if accessibility is a primary concern (as it should be).

em and % are the most frequently suggested alternatives to px, providing as they do the flexibility of scaling across all modern browsers, without exception. However, their use requires care since they multiply in their effect (as suggested by Jeff in his reply) when used in nested elements that also specify font-sizes other than 1.0 or 100%. 0.8 x 0.8 x 0.8 of an original 12px font will be illegibly small on any platform as it falls below the minimum of 9 pixels required.

css also provides seven keywords (supported right back to NN4) for sizing of text

xx-small
x-small
small
medium         -> equiv. to 1em or 100%
large
x-large
xx-large

There is a 1.2 scaling factor between each step.

These can be nested ad-infinitum, but the sizes are always the same with respect to the default font as set by the users browser... thus small, nested inside small inside small is still small.

small applied to a 12px default font size results in 10px.

Text sized with these keywords though will _never_ be smaller than 9 pixels, and so _always_ above the technical limit for legibility (practical limits differ from person to person and are why the ability to scale needs to be retained).

One last point on keywords for sizing... IE5 (surprise) gets it wrong, presenting text one size larger than specified. This can be got around by the Tantek hack to give IE5 a sixe of 'x-small', and other browsers a size of 'small'.

pt is a print unit and as such should be avoided for screen use (in browsers) and limited in use to print stylesheets.

Keywords offer perhaps the best compromise, they can be scaled by the user and do not suffer the multiplicative problems that afflict em's and %'s.

Check Mark Pilgrim's

<http://diveintomark.org/archives/2002/07/15/day_26_using_relative_font_sizes>

For the an depth discussion.

Best regards


Rob


More information about the thelist mailing list