Alternative relative units - relative keywords
Relative keywords:
Relative sizing of text can also be achieved by using the keywords 'larger' and 'smaller'. If you can put up with the feeling that you never quite know how much smaller or bigger the resulting text will be, this seems like a relatively safe option to use.
However, as reports on the website Oo Kingdom by Charlie, Wendi and Joe Petitt in Janesville indicate:'Weirdness may result when text is resized in IE' and Netscape 4 (Mac) and IE 3 will ignore these relative keywords (probably no bad thing).
Smaller - means one size smaller than the parent element, so in the example above the body text is set to 1em - 100% of the default font size. If the default font size in the web browser is 12pt, paragraphs are set one step smaller, perhaps 10pt . The exact size of 'one step' is difficult to say because it varies with the browser. Here is an example using the smaller keyword:
BODY
{
font-size: 1em;
}
P
{
font-size: smaller;
}
Eric A. Meyer author of Cascading Style Sheets: The Definitive Guide by O'Reilly & Associates points to problems with using larger and smaller keywords. These essentially are the same problems you will get when using any relative unit if you don't take into account the hierarchical nature of HTML - and the cascading nature of Cascading stylesheets.
Eric Mayer illustrates his point with examples of the font-size set for text within a table, e.g.
TD
{
font-size: smaller;
}
If tables are nesting, as they are on many Websites, the text will become smaller and smaller, until it is unreadable.
"If there is any nesting of tables, the text inside those tables will very quickly become illegible. Given the prevalence of table-layout pages, rules such as these must be used with the utmost caution, and you'll need to do a lot of testing before making your design public. "
The keyword 'larger' works in the same way as 'smaller' but makes text progressively larger. The same cautions apply when using the larger keyword; text can become so large that the page becomes unusable.
Index | Next: Should you use X-height?