info/webtypography
1
0
Fork 0
mirror of https://github.com/clagnut/webtypography.git synced 2025-09-09 04:31:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Removed extraneous parts, added in all existing items, bibliography, intro

Browse Source
This commit is contained in:
Richard Rutter
2014-02-27 22:47:44 +00:00
parent b3ca56c75a
commit 01ef5ab5ea
53 changed files with 930 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
items/2.1.8.html Normal file
View File

@@ -0,0 +1,29 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Kerning &#8211; altering the space between selected pairs of letters &#8211; can increase consistency of spacing in a word like Washington or Toronto, where the combinations <cite>Wa</cite> and <cite>To</cite> are kerned.&#8221;</p>
</blockquote>
<p>At present there is no mechanism within <abbr title="HyperText Mark-up Language">HTML</abbr> or <abbr title="Cascading Style Sheets">CSS</abbr> that specifically enables kerning. However text on the Web does not generally need manual kerning, as all digital fonts have kerning tables built-in. These tables define which letter pairs need adjusting and by how much, and are usually adhered to by operating systems. The only time manual kerning may prove necessary is with larger text such as that in headings, in particular when numbers, italics or punctuation are&nbsp;involved.</p>
<p>It is also important to bear in mind that letter pairs in one font of your <code>font-family</code> list may need kerning whereas in another font they do not. In this case it is advisable not to kern, as too much kerning is almost always worse than none at&nbsp;all.</p>
<p>Where you do wish to kern letter pairs, you must insert a neutral inline element, such as <code>span</code> and apply the <code>letter-spacing</code> property. For&nbsp;example:</p>
<pre><code>&lt;span class="kern"&gt;W&lt;/span&gt;ashington
and &lt;span class="kern"&gt;T&lt;/span&gt;oronto
.kern {letter-spacing: -0.1em }</code></pre>
<p>Which should render&nbsp;as:</p>
<div class="ex2-1-8 example"><span class="ex2-1-8i">W</span>ashington and <span class="ex2-1-8i">T</span>oronto</div>
<p>Notice that the <code>span</code> was applied around the first letter of the pair, not around both letters. This is because the <code>letter-spacing</code> property adds or removes space <strong>after each letter</strong>. Notice also that the <code>letter-spacing</code> is specified in <code>ems</code> to ensure that the amount of kerning is applied in proportion to the text&nbsp;size.</p>
<p>As with <a href="/web/20140209204454/http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.6/">letterspacing strings of capitals</a>, adding a <code>span</code> every time you need to kern a letter pair could become tedious and so regular expressions could come to the rescue once more. This <abbr title="PHP HyperText Processor">PHP</abbr> function uses a regular expression to replace insert a <code>span</code> into any string of &#8216;To&#8217; or &#8216;Wa&#8217;:</p>
<pre><code>$search = '/<span class='bracket'>(</span>T<span class='bracket'>)</span><span class='bracket'>(</span>o<span class='bracket'>)</span>|<span class='bracket'>(</span>W<span class='bracket'>)</span><span class='bracket'>(</span>a<span class='bracket'>)</span>/';
$replace = '&lt;span class="kern"&gt;$1$3&lt;/span&gt;$2$4';
$text = preg_replace<span class='bracket'>(</span>$search,$replace,$text<span class='bracket'>)</span>;</code></pre>
<h2>The&nbsp;Future</h2>
<p>The <a href="/web/20140209204454/http://www.w3.org/TR/2003/CR-css3-text-20030514/#kerning-props"><abbr>CSS3</abbr> Text Module</a> may contain the <code>kerning-mode</code> and <code>kerning-pair-threshold</code> properties to aid control over kerning, although these properties have yet to be fully&nbsp;defined.</p>