Prev | Current Page 124 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"

In this case, CSS
simply takes the calculated size of whatever number of on-screen
pixels 1.2 ems works out to be and multiplies it by 1.4 to arrive at
the line height. If you later increase the font size to 1.5 ems, the line
In case you??™re wondering where the
term ???leading??? came from, in the
early days of printing, a strip of lead
was used to space the lines of type.
STYLIN??™ FONTS AND TEXT 93
height (leading) is still 1.4 times the calculated amount of 1.5 ems.
If the line height had been speci?¬? ed in a ?¬? xed unit, such as pixels,
and you increased the font size, then the lines of text would start to
overlap one another.
It??™s worth noting that any line height greater than the text height is
shared both above and below the text. Let??™s take a simple example
in pixels to illustrate this point, although for the reasons I gave earlier,
using pixels is not the ideal way to set line height. However, it??™s
easier to understand the math if I use pixels here. If you have a font
size of 12 pixels and you set the line height to 20 pixels, the browser
adds 4 pixels of space above the line of type and 4 below: 12 + 4 + 4
= 20. In the normal course of events, you don??™t notice this because
the overall look in a multiline paragraph of text is that there are 8
pixels of space between each line. However, this might have a bearing
for you on the ?¬? rst and last lines of text, which, in fact, only have
4 pixels of space above and below them respectively.


Pages:
112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136