HTML and CSS Reference
In-Depth Information
Relative-Size Keywords
In addition to the absolute-size keywords, CSS allows for larger and smaller values, which do
pretty much what you'd expect: they cause the type size of the selected element to be scaled
up or down based on the same scaling factor the user agent uses in the absolute-size keywords.
These keyword sizes are relative to the computed font-size value of their parent element.
* {
font-size: medium;
strong {
font-size: larger;
} /* evaluates to the same size as the large keyword /*
One interesting note about relative-size keywords is that they don't have the same limits
as absolute-size keywords. The following is possible:
* {
font-size: xx-large;
strong {
font-size: larger;
} /* evaluates to the size of xx-large times the scaling factor /*
In this case, the size of the strong element's text is still scaled by the user agent's scaling
factor, resulting in larger text than the inherited xx-large .
Using Pixels to Size Text
The font sizing we've done so far has been relative to the user agent's default font size. However,
it is possible to specify the font-size property explicitly in pixels, overriding any inherited size
(either from the user agent's defaults or from parent element[s]). For example:
p {
font-size: 12px;
In this case, the size of the em square for the paragraph element would be 12 pixels by 12 pixels
regardless of what size may have been inherited.
Although this is extremely useful, it is often not considered a best practice among web
developers for two reasons. First, Internet Explorer 6 and lower do not allow the user to resize
fonts whose sizes are specified in pixels. This poses accessibility problems for those visitors
who simply must increase the size of type in order to accommodate for low vision. Addition-
ally, most web designers feel it's important to acknowledge a user's default browser setting
(which the user may have adjusted). By setting type in keywords, ems, or percentages, you
allow users to decide that all type should be scaled based on whatever default they have
chosen, instead of one you have chosen as the designer.
Search WWH ::

Custom Search