This third method??”and the one I typically use for websites I design??”
enables you to create font sizes that are targeted at a pixel size, but are also resizable in
Internet Explorer, since the measurements are relative units.
The system works by first setting a base font size of 62.5% using a body selector:
body {
font-size: 62.5%;
}
Since most browsers have a default font size of 16 pixels, the previous rule then sets the
default size to 62.5% of that value??”in other words, 10 pixels. From here, ems can be used
to define font sizes of specific elements, using values that are one-tenth of the target pixel
size:
h1 {
font-size: 2.0em; /* will be the equivalent of 20px */
}
p {
font-size: 1.2em; /* will be the equivalent of 12px */
}
WORKING WITH TYPE
81
3
The system isn??™t perfect??”relative values defined in ems can be inherited, so if a list item is
within another list item, the size of the nested item(s) may increase or decrease, depending
on the value assigned to the parent. However, override rules can easily get around this
problem (see ???Dealing with font-size inheritance??? in the ???Working with lists??? section later
in the chapter), and the method generally leads to more satisfactory results from a design,
control, and user point of view than either of the other two methods mentioned. It is
worth noting, however, that this method is somewhat reliant on the user??”if someone has
changed the default font size in their browser, your design may not look as intended on
their browser, since the value defined for body may be 62.
Pages:
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155