mirror of
https://github.com/clagnut/webtypography.git
synced 2025-09-09 04:31:05 +02:00
b58f97ae8b
tweaked copy to remove 'bad example' language and explain the downsides leavding the reader to decide whether it's bad for them or not
42 lines
3.2 KiB
HTML
42 lines
3.2 KiB
HTML
|
||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Vertical space is metered in a different way <span class='bracket'>[</span>to horizontal space<span class='bracket'>]</span>. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.”</p>
|
||
</blockquote>
|
||
<p>Leading <span class='bracket'>(</span>pronounced “ledding”<span class='bracket'>)</span> is so called because, in mechanical presses, strips of lead are placed between lines of type to space the lines apart. Leading is achieved in <abbr title="Cascading Style Sheets">CSS</abbr> through the <code>line-height</code> property. For example 12 point text can be given 3 points of lead in the following manner:</p>
|
||
|
||
<pre><code>p {
|
||
font-size: 12pt;
|
||
line-height: 15pt;
|
||
}</code></pre>
|
||
|
||
<p>That example will give you the same line-height throughout all your paragraphs, however it does introduce the danger that, when the browser text size is increased by your reader <span class='bracket'>(</span>to 18 pt for example<span class='bracket'>)</span> the line-height may remain at 15 pt. The result being that, instead of the lines being spaced apart, they would actually overlap.</p>
|
||
|
||
<p>A safer approach is to use a unitless value. The preceding example could also be coded as:</p>
|
||
|
||
<pre><code>p {
|
||
font-size: 12pt;
|
||
line-height: 1.25;
|
||
}</code></pre>
|
||
|
||
<p>In this example the value of <code>line-height</code> is a multiplier: 1.25 x 12 = 15 pt. This is a far more reliable method as the line-height <span class='bracket'>(</span>the distance between baselines<span class='bracket'>)</span> will always be proportional to the text size. Line height can be incorporated into the <code>font</code> property using a shorthand familiar to typographers:</p>
|
||
|
||
<pre><code>p {
|
||
font: 12pt/1.25 "Minion Pro", "Minion Web", serif;
|
||
}</code></pre>
|
||
|
||
<p>It should be noted that some browsers add a little leading by default: Safari and Internet Explorers for example; whereas others, such as Camino and Firefox, do not. Text on the web almost always benefits from an increase in line height, and figures upwards of 1.3 are common <span class='bracket'>(</span>this page has a <code>line-height</code> of 1.5 for example<span class='bracket'>)</span>.</p>
|
||
|
||
<p>Unlike in mechanical presses, where one line of lead is added below the text, the spacing added on the Web is divided equally above and below the text. To illustrate this the following example has a <code>line-height</code> of 3 and shows the text set midway between two borders:</p>
|
||
|
||
<div class="example"><div class="ex2-2-1i">line-height spacing is added equally above and below the text</div></div>
|
||
|
||
<p>Negative leading, in other words a <code>line-height</code> value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For example:</p>
|
||
|
||
<pre><code>.example {
|
||
font-size: 1.5em;
|
||
line-height: 0.85;
|
||
text-indent: -0.5em;
|
||
}</code></pre>
|
||
|
||
<div class="ex2-2-1ii example">this is an example<br />
|
||
of negative leading</div>
|