This makes the line-height of the h1 element the equivalent
of 18 pixels.
Similar thinking is used to define the value for margin-bottom??”this needs to be
18 pixels to keep the vertical rhythm going, so the value is set to 1em.
h1 {
font-size: 1.8em;
line-height: 1em;
margin-bottom: 1em;
}
Styling semantic markup: A traditional example with serif fonts and a baseline grid
WORKING WITH TYPE
95
3
3. Style the subheading. For the subheading, the font-size value is set to 1.4em. To
keep the line-height vertical rhythm going, you need to find the value that will
multiply with the font-size setting to create 1.8 (since 1.8em is the equivalent of
18 pixels). You can get this by dividing 1.8 by the font-size value, which results in
a line-height value of 1.2857142em. To keep the rhythm going, this setting can
then be used for both the margin-top and margin-bottom values.
h2 {
font-size: 1.4em;
line-height: 1.2857142em;
margin-top: 1.2857142em;
margin-bottom: 1.2857142em;
}
However, what this serves to do is isolate the heading on its own line, rather than
making it obviously lead to the subsequent paragraph. Two solutions exist for dealing
with this. The first is simply to remove the bottom margin; the second is to
create asymmetrical margins, making the top margin larger than the bottom one.
To keep the entire space the element takes up strictly within the grid and not interrupt
the vertical rhythm too much, it??™s sensible to take half the margin-bottom
value and add it to the margin-top value.
Pages:
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172