mirror of
https://github.com/clagnut/webtypography.git
synced 2025-09-03 01:52:48 +02:00
Merge pull request #14 from nevanscott/quotes
unencoded quotes, apostrophes, and dashes
This commit is contained in:
Richard Rutter
@@ -32,7 +32,7 @@ $dr = str_replace($_SERVER['SCRIPT_NAME'], '/includes/', $_SERVER['SCRIPT_FILENA
|
||||
<h2>References & Tutorials</h2>
|
||||
|
||||
<dl>
|
||||
<dt><a href="http://www.alanwood.net/unicode/index.html#links"><cite>Alan Wood’s Unicode Tests</cite></a> </dt>
|
||||
<dt><a href="http://www.alanwood.net/unicode/index.html#links"><cite>Alan Wood’s Unicode Tests</cite></a> </dt>
|
||||
<dd>Massively comprehensive resource for locating and testing Unicode characters.</dd>
|
||||
<dt><a href="http://www.clagnut.com/blog/348/"><cite>How to size text using ems</cite></a> </dt>
|
||||
<dd>Tutorial on Clagnut which explains in detail how to size text on websites using ems. Covers the issues of inheritance and transitioning from pixel-based text sizing.</dd>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<div id="thebook"> <!-- Amazon referrals help RR pay for hosting -->
|
||||
<p><a href="http://www.amazon.co.uk/exec/obidos/ASIN/0881792128/jalfrezi-21/" title="More information on ‘The Elements of Typographic Style’ at Amazon"><img src="/i/book.png" alt="Cover of ‘The Elements of Typographic Style’ by Robert Bringhurst" style="width:100px" /></a></p>
|
||||
<p><a href="http://www.amazon.co.uk/exec/obidos/ASIN/0881792128/jalfrezi-21/" title="More information on ‘The Elements of Typographic Style’ at Amazon"><img src="/i/book.png" alt="Cover of ‘The Elements of Typographic Style’ by Robert Bringhurst" style="width:100px" /></a></p>
|
||||
</div> <!-- /thebook -->
|
||||
@@ -21,17 +21,17 @@ $dr = str_replace($_SERVER['SCRIPT_NAME'], '/includes/', $_SERVER['SCRIPT_FILENA
|
||||
|
||||
<p>For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.</p>
|
||||
|
||||
<p>Robert Bringhurst’s book <cite>The Elements of Typographic Style</cite> is on many a designer’s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be <q>a must for everybody in the graphic arts, and especially for our new friends entering the field.</q></p>
|
||||
<p>Robert Bringhurst’s book <cite>The Elements of Typographic Style</cite> is on many a designer’s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be <q>a must for everybody in the graphic arts, and especially for our new friends entering the field.</q></p>
|
||||
|
||||
<p>In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in <abbr title="HyperText Mark-up Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>. The future is considered with coverage of <abbr>CSS3</abbr>, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.</p>
|
||||
<p>In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in <abbr title="HyperText Mark-up Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>. The future is considered with coverage of <abbr>CSS3</abbr>, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.</p>
|
||||
|
||||
<p>At the time of writing, this is a work in progress. I am adding to the site in the order presented in Bringhurst’s book, one principle at a time.</p>
|
||||
<p>At the time of writing, this is a work in progress. I am adding to the site in the order presented in Bringhurst’s book, one principle at a time.</p>
|
||||
|
||||
<p>I am excluding those principles which are not relevant to the Web or that do not require a technical explanation. Unfortunately this excludes the entire opening chapter, the Grand Design, which I heartily recommend you read as it lays down the foundations, philosophy and approach to good typography in any medium. If you were to take any working principle from the Grand Design, it would be this: <q>Give full typographical attention even to incidental details.</q></p>
|
||||
|
||||
<p>Now start with <a href="/2.1.1">Rhythm & Proportion</a> or dip into the <a href="/toc">Table of Contents</a> and enjoy pushing a few boundaries to create websites of real typographical worth.</p>
|
||||
|
||||
<p style="text-align:right; margin-top:2.75em">— Richard Rutter, Brighton, December 2005.</p>
|
||||
<p style="text-align:right; margin-top:2.75em">— Richard Rutter, Brighton, December 2005.</p>
|
||||
|
||||
<h2>Postscript</h2>
|
||||
<p>In February 2014, I opened up the <a href="https://github.com/clagnut/webtypography">source code to this website</a> on GitHub, with <a href="http://clagnut.com/blog/2375/">an invitation</a> to web typography enthusiasts to take on the project, update the content and add the missing items. I will continue to maintain the website and update as changes are submitted.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>If text is set ragged right, the <em>word space</em> <span class='bracket'>(</span>the space between words<span class='bracket'>)</span> can be fixed and unchanging. If the text is <em>justified</em> <span class='bracket'>(</span>set flush left and right<span class='bracket'>)</span>, the word space must be elastic. In either case the size of the ideal word space varies from one circumstance to another, depending on factors such as letterfit, type color, and size. A loosely fitted or bold face will need a larger interval between the words. At larger sizes, when letterfit is tightened, the spacing of words can be tightened as well.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>If text is set ragged right, the <em>word space</em> <span class='bracket'>(</span>the space between words<span class='bracket'>)</span> can be fixed and unchanging. If the text is <em>justified</em> <span class='bracket'>(</span>set flush left and right<span class='bracket'>)</span>, the word space must be elastic. In either case the size of the ideal word space varies from one circumstance to another, depending on factors such as letterfit, type color, and size. A loosely fitted or bold face will need a larger interval between the words. At larger sizes, when letterfit is tightened, the spacing of words can be tightened as well.”</p>
|
||||
</blockquote>
|
||||
<p>In <abbr title="Cascading Style Sheets">CSS</abbr>, word space is set with the <code>word-spacing</code> property which has a default value of <code>normal</code>. The default word space is equivalent to approximately 0.25 em, although the exact value will depend on information encoded within the digital font file. To change the word spacing, you should specify a length in ems. This length is added to the existing word space; that is to say <code>word-spacing</code> does not set the actual space between words, it sets an increment to the existing spacing. For example:</p>
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Lists, such as contents pages and recipes, are opportunities to build architectural structures in which space between the elements both separates and binds. The two favourite ways of destroying such an opportunity are setting great chasms of space that the eye cannot leap without help from the hand, and setting unenlightening rows of dots that force the eye to walk the width of the page like a prisoner being escorted back to its cell.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Lists, such as contents pages and recipes, are opportunities to build architectural structures in which space between the elements both separates and binds. The two favourite ways of destroying such an opportunity are setting great chasms of space that the eye cannot leap without help from the hand, and setting unenlightening rows of dots that force the eye to walk the width of the page like a prisoner being escorted back to its cell.”</p>
|
||||
</blockquote>
|
||||
<p>The <dfn>dot leader</dfn> approach to which Bringhurst alludes is the default presentation for tables of contents in Microsoft Word. Fortunately this kind of layout is tricky to accomplish in <abbr title="Cascading Style Sheets">CSS</abbr> so it is rarely seen in web pages. Bringhurst goes on to present two alternative layouts for tables of contents which are replicated here:</p>
|
||||
|
||||
<h2>Example 1 – Table of contents aligned right</h2>
|
||||
<h2>Example 1 – Table of contents aligned right</h2>
|
||||
|
||||
<div class="example"><table class="ex2-1-10-toc1">
|
||||
<tr><th>Introduction</th><td>7</td></tr>
|
||||
<tr><th>Chapter <strong>1</strong> The Sex of Centaurs</th><td>11</td></tr>
|
||||
<tr><th>Chapter <strong>2</strong> Poliphilo’s Dream</th><td>11</td></tr>
|
||||
<tr><th>Chapter <strong>2</strong> Poliphilo’s Dream</th><td>11</td></tr>
|
||||
</table></div>
|
||||
|
||||
<p>This is a table of contents so it has been marked up as a simple table:</p>
|
||||
@@ -38,7 +38,7 @@ td {
|
||||
|
||||
<p>While most of the <abbr title="Cascading Style Sheets">CSS</abbr> is straight forward, a point worth highlighting is the <code>margin</code> declaration for the <code>table</code> itself. There is a right margin of 3 em to set the table in slightly from the right gutter and a left margin of <code>auto</code> to push the table over towards the right hand side of the page.</p>
|
||||
|
||||
<h2>Example 2 – Centred table of contents</h2>
|
||||
<h2>Example 2 – Centred table of contents</h2>
|
||||
|
||||
<div class="example"><table class="ex2-1-10-toc2">
|
||||
<tr><th>Prologue</th><td>page 5</td></tr>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line <span class='bracket'>(</span>counting both letters and spaces<span class='bracket'>)</span> is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line <span class='bracket'>(</span>counting both letters and spaces<span class='bracket'>)</span> is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”</p>
|
||||
</blockquote>
|
||||
<p>The <em>measure</em> is the number of characters in a single line of a column of text. <abbr title="HyperText Mark-up Language">HTML</abbr> doesn’t have a concept of columns per se, instead text is held within <em>boxes</em>. In <abbr title="Cascading Style Sheets">CSS</abbr> the width of a box is set using the <code>width</code> property with any unit of length, for example:</p>
|
||||
<p>The <em>measure</em> is the number of characters in a single line of a column of text. <abbr title="HyperText Mark-up Language">HTML</abbr> doesn’t have a concept of columns per se, instead text is held within <em>boxes</em>. In <abbr title="Cascading Style Sheets">CSS</abbr> the width of a box is set using the <code>width</code> property with any unit of length, for example:</p>
|
||||
|
||||
<pre><code>DIV#col1 {
|
||||
width:400px }
|
||||
@@ -11,7 +11,7 @@ DIV#col2 {
|
||||
DIV#col3 {
|
||||
width:33em }</code></pre>
|
||||
|
||||
<p>When typographers set the measure and text size for printed media, those dimensions are fixed and unchangeable in their physical manifestation. In this regard, the Web as viewed on-screen is fundamentally different to print because the medium is far more under the control of your readers. In particular, if your reader wishes to change the text size or the dimensions of the ‘page’, he can do.</p>
|
||||
<p>When typographers set the measure and text size for printed media, those dimensions are fixed and unchangeable in their physical manifestation. In this regard, the Web as viewed on-screen is fundamentally different to print because the medium is far more under the control of your readers. In particular, if your reader wishes to change the text size or the dimensions of the ‘page’, he can do.</p>
|
||||
|
||||
<p>In the preceding example, column 1 has a fixed width: it has been set to 400 px wide. With text rendering at 12 px this would result in a measure of approximately 66 characters per line. If your reader increases the text size to 16 px then the measure reduces to 50 characters per line. Thus when the text size is changed, so the measure changes.</p>
|
||||
|
||||
@@ -19,6 +19,6 @@ DIV#col3 {
|
||||
|
||||
<p>Column 3 has an elastic width: it has been set to 33 em wide. On average one character takes up 0.5 em so this box will have a measure of 66 characters per line. If your reader increases the text size, the width of box will increase accordingly and so the measure remains at 66 regardless of the text size.</p>
|
||||
|
||||
<p>From a typographical perspective, the most appropriate method is to set box width in ems <span class='bracket'>(</span>elastic layout<span class='bracket'>)</span> as it ensures the measure is always set to the typographer’s specification. Setting box width as a percentage <span class='bracket'>(</span>liquid layout<span class='bracket'>)</span> gives the typographer approximate control over measure but also allows the reader to adjust the layout to suit his or her comfort. This website has been designed with liquid layout to afford readers this control.</p>
|
||||
<p>From a typographical perspective, the most appropriate method is to set box width in ems <span class='bracket'>(</span>elastic layout<span class='bracket'>)</span> as it ensures the measure is always set to the typographer’s specification. Setting box width as a percentage <span class='bracket'>(</span>liquid layout<span class='bracket'>)</span> gives the typographer approximate control over measure but also allows the reader to adjust the layout to suit his or her comfort. This website has been designed with liquid layout to afford readers this control.</p>
|
||||
|
||||
<p>Relinquishing such control makes some designers quake in their boots, but the beauty and advantage of the Web as a medium is that readers are able to adjust their reading environment to suit their own needs. This is a concept that should be acknowledged & embraced, and built into website designs from the ground up.</p>
|
||||
@@ -1,9 +1,9 @@
|
||||
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In justified text, there is always a trade-off between evenness of word spacing and frequency of hyphenation.</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In justified text, there is always a trade-off between evenness of word spacing and frequency of hyphenation.</p>
|
||||
|
||||
<p>Narrow measures – which prevent good justification – are commonly used when the text is set in multiple columns. Setting ragged right under these conditions will lighten the page and decrease its stiffness.</p>
|
||||
<p>Narrow measures – which prevent good justification – are commonly used when the text is set in multiple columns. Setting ragged right under these conditions will lighten the page and decrease its stiffness.</p>
|
||||
|
||||
<p>Many unserifed faces look best when set ragged no matter what the length of the measure. And mono-spaced fonts, which are common on typewriters, always look better set ragged.”</p>
|
||||
<p>Many unserifed faces look best when set ragged no matter what the length of the measure. And mono-spaced fonts, which are common on typewriters, always look better set ragged.”</p>
|
||||
</blockquote>
|
||||
<p>Setting text justified or ragged is accomplished in <abbr title="Cascading Style Sheets">CSS</abbr> through the <code>text-align</code> property, as follows:</p>
|
||||
|
||||
@@ -18,7 +18,7 @@ P {
|
||||
|
||||
<p>Effective justification of text can only be achieved if long words are hyphenated. <abbr title="HyperText Mark-up Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> 2 do not have any provision for automatic hyphenation and current Web browsers support, even for manual hyphenation, is poor.</p>
|
||||
|
||||
<p>So don’t justify text on the web.</p>
|
||||
<p>So don’t justify text on the web.</p>
|
||||
|
||||
<h2>Future considerations</h2>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In the nineteenth century, which was a dark and inflationary age in typography and type design, many compositors were encouraged to stuff extra space between sentences. Generations of twentieth century typists were then taught to do the same, by hitting the spacebar twice after every period <span class='bracket'>[</span>full stop<span class='bracket'>]</span>. Your typing as well as your typesetting will benefit from unlearning this quaint Victorian habit. As a general rule, no more than a single space is required after a period, colon or any other mark of punctuation.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In the nineteenth century, which was a dark and inflationary age in typography and type design, many compositors were encouraged to stuff extra space between sentences. Generations of twentieth century typists were then taught to do the same, by hitting the spacebar twice after every period <span class='bracket'>[</span>full stop<span class='bracket'>]</span>. Your typing as well as your typesetting will benefit from unlearning this quaint Victorian habit. As a general rule, no more than a single space is required after a period, colon or any other mark of punctuation.”</p>
|
||||
</blockquote>
|
||||
<p>All white space in <abbr title="HyperText Mark-up Language">HTML</abbr>, in any combination of spaces, tabs or line breaks, is automatically collapsed to a single word space. Therefore this guideline is automatically adhered to regardless of your training as a typist.</p>
|
||||
|
||||
<p>If you do need to insert more than a single word space between sentences, or any other characters, then use one of the many <a href="/web/20140209214008/http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Avoid the temptation to use a non-breaking space, <code>&nbsp;</code>, as this has a meaning in and of itself.</p>
|
||||
<p>If you do need to insert more than a single word space between sentences, or any other characters, then use one of the many <a href="/web/20140209214008/http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Avoid the temptation to use a non-breaking space, <code>&nbsp;</code>, as this has a meaning in and of itself.</p>
|
||||
|
||||
<ul class='nobullets'>
|
||||
<li><code>&#8194;</code> en space <span class="inex"> </span></li>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Names such as W.B. Yeats and J.C.L. Prillwitz need hair spaces, thin spaces or no spaces at all after the intermediary periods <span class='bracket'>[</span>full stops<span class='bracket'>]</span>. A normal word space follows the <em>last</em> period in the string.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Names such as W.B. Yeats and J.C.L. Prillwitz need hair spaces, thin spaces or no spaces at all after the intermediary periods <span class='bracket'>[</span>full stops<span class='bracket'>]</span>. A normal word space follows the <em>last</em> period in the string.”</p>
|
||||
</blockquote>
|
||||
<p>Hair spaces and thin spaces are two of the many <a href="/web/20140209230324/http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Here’s how to use hair spaces and thin spaces, respectively:</p>
|
||||
<p>Hair spaces and thin spaces are two of the many <a href="/web/20140209230324/http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Here’s how to use hair spaces and thin spaces, respectively:</p>
|
||||
|
||||
<pre><code>W.&#8202;B. Yeats
|
||||
J.&#8201;C.&#8201;L. Prillwitz</code></pre>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Acronyms such as <abbr>CIA</abbr> and <abbr>PLO</abbr> are frequent in some texts. So are abbreviations such as <abbr>CE</abbr> and <abbr>BCE</abbr> or <abbr>AD</abbr> and <abbr>BC</abbr>. The normal value for letterspacing these sequences of small or full caps is 5% to 10% of the type size.</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Acronyms such as <abbr>CIA</abbr> and <abbr>PLO</abbr> are frequent in some texts. So are abbreviations such as <abbr>CE</abbr> and <abbr>BCE</abbr> or <abbr>AD</abbr> and <abbr>BC</abbr>. The normal value for letterspacing these sequences of small or full caps is 5% to 10% of the type size.</p>
|
||||
|
||||
<p>Many typographers like to letterspace all strings of numbers as well. Spacing is essential for rapid reading of long, fundamentally meaningless strings such as serial numbers, and is helpful even for shorter strings such as phone numbers and dates.”</p>
|
||||
<p>Many typographers like to letterspace all strings of numbers as well. Spacing is essential for rapid reading of long, fundamentally meaningless strings such as serial numbers, and is helpful even for shorter strings such as phone numbers and dates.”</p>
|
||||
</blockquote>
|
||||
<p>Letter spacing in <abbr title="Cascading Style Sheets">CSS</abbr> is achieved with the aptly named <code>letter-spacing</code> property. To letter space abbreviations at 10% of the type size you could wrap the abbreviations in <code><abbr></code> tags and apply a <abbr title="Cascading Style Sheets">CSS</abbr> rule such as:</p>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<p>If you have created static pages for your website then inserting <code><acronym></code> and <code><abbr></code> elements where appropriate might be slightly tedious but probably feasible. Dealing with text delivered by a content management system, however, is a different kettle of fish and would need some sort of automation. At this point your <abbr title="Content Management System">CMS</abbr> developer would probably turn to regular expressions. </p>
|
||||
|
||||
<p>I’m not going to explain regular expressions here – there are plenty of resources elsewhere on the web – but in the form of a <abbr title="PHP HyperText Processor">PHP</abbr> function here is an expression to get you started:</p>
|
||||
<p>I’m not going to explain regular expressions here – there are plenty of resources elsewhere on the web – but in the form of a <abbr title="PHP HyperText Processor">PHP</abbr> function here is an expression to get you started:</p>
|
||||
|
||||
<pre><code>$search = '/\b<span class='bracket'>(</span><span class='bracket'>[</span>A-Z<span class='bracket'>]</span><span class='bracket'>[</span>A-Z0-9<span class='bracket'>]</span>{2,}<span class='bracket'>)</span>\b/';
|
||||
$replace = '<abbr>$1</abbr>';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>A man who would letterspace lower case would steal sheep, Frederic Goudy liked to say. The reason for not letterspacing lower case is that it hampers legibility. But there are some lowercase alphabets to which this principle doesn’t apply. Moderate letterspacing can make a face such as lowercase Univers bold condensed <em>more</em> legible rather than less.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>A man who would letterspace lower case would steal sheep, Frederic Goudy liked to say. The reason for not letterspacing lower case is that it hampers legibility. But there are some lowercase alphabets to which this principle doesn’t apply. Moderate letterspacing can make a face such as lowercase Univers bold condensed <em>more</em> legible rather than less.”</p>
|
||||
</blockquote>
|
||||
<p>Letterspacing lower case on the Web is particularly risky as only some faces actually benefit from the treatment, and you can rarely guarantee which type face you will actually be transforming.</p>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Kerning – altering the space between selected pairs of letters – can increase consistency of spacing in a word like Washington or Toronto, where the combinations <cite>Wa</cite> and <cite>To</cite> are kerned.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Kerning – altering the space between selected pairs of letters – can increase consistency of spacing in a word like Washington or Toronto, where the combinations <cite>Wa</cite> and <cite>To</cite> are kerned.”</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 involved.</p>
|
||||
|
||||
@@ -17,7 +17,7 @@ and <span class="kern">T</span>oronto
|
||||
|
||||
<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 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 ‘To’ or ‘Wa’:</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 ‘To’ or ‘Wa’:</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 = '<span class="kern">$1$3</span>$2$4';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In the world of digital type, it is very easy for a designer or compositor with no regard for letters to squish them into cattle trains and ship them to slaughter.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In the world of digital type, it is very easy for a designer or compositor with no regard for letters to squish them into cattle trains and ship them to slaughter.”</p>
|
||||
</blockquote>
|
||||
<p><abbr title="Cascading Style Sheets">CSS</abbr> does not offer many opportunities for altering the width or shapes of letters. In fact only the <code>letter-spacing</code> property can be applied at all for this purpose, and that simply changes the width of the letters <span class='bracket'>(</span>but not their shape<span class='bracket'>)</span>. The <code>letter-spacing</code> property can however be particularly destructive. Consider this maltreatment of a heading:</p>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
<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 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>
|
||||
<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;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.”</p>
|
||||
</blockquote>
|
||||
<p>The most common addition of vertical space on a webpage is that inserted between paragraphs. If the rhythm of the page is to be maintained, the spacing of paragraphs should be related to the basic leading. For example, the text on this page is set at 12 px with a <code>line-height</code> of 1.5 em, making each line 18 px in height. In order to keep the rhythm of the text, the vertical spacing between blocks should also be 18 px. This is achieved by setting top- and bottom-margins equal to the line height.</p>
|
||||
|
||||
@@ -37,13 +37,13 @@
|
||||
|
||||
<p>Sidenotes <span class='bracket'>(</span>and footnotes for that matter<span class='bracket'>)</span> are often set at a smaller size to the basic text. This smaller text should still form a rhythm with the basic text, so a calculation similar to that of headings, is required. Consider the following example:</p>
|
||||
|
||||
<div class="ex2-2-2"><p class="basictext">Daniel is roused by a rooster on the forecastle* deck that is growing certain it’s not just imagining the light in the eastern sky. Unfortunately the eastern light is off to port this morning. Yesterday it was to starboard. Minerva has been sailing up and down the New England coast for the better part of a fortnight, trying to catch a wind that will decisively take her out into the deep water.</p><p class="sidenote">The forecastledeck is the short deck that, towards the ship’s bow, is built above the upperdeck.</p></div>
|
||||
<div class="ex2-2-2"><p class="basictext">Daniel is roused by a rooster on the forecastle* deck that is growing certain it’s not just imagining the light in the eastern sky. Unfortunately the eastern light is off to port this morning. Yesterday it was to starboard. Minerva has been sailing up and down the New England coast for the better part of a fortnight, trying to catch a wind that will decisively take her out into the deep water.</p><p class="sidenote">The forecastledeck is the short deck that, towards the ship’s bow, is built above the upperdeck.</p></div>
|
||||
|
||||
<p>The main body text again has a text size of 12 px and a line height of 18 px. The sidenotes are set at 10 px and so their line-height must be increased to 18 ÷ 10 = 1.8.</p>
|
||||
|
||||
<h2>Images</h2>
|
||||
|
||||
<p>On the Web, images in sidebars and within the main body of text are almost always guilty of disrupting the rhythm of text. The same rules should be applied to images as to headings: any image and associated caption should take up multiples of the basic line height. For example the image on this page demonstrating asymmetrical headings is 180 px tall – precisely 10 lines in height. </p>
|
||||
<p>On the Web, images in sidebars and within the main body of text are almost always guilty of disrupting the rhythm of text. The same rules should be applied to images as to headings: any image and associated caption should take up multiples of the basic line height. For example the image on this page demonstrating asymmetrical headings is 180 px tall – precisely 10 lines in height. </p>
|
||||
|
||||
<p>Clearly problems would arise when the basic text size changes, for example if a reader changes their default text size. In this situation, if the image is left at its natural size, or has a specific size set in pixels, the image would no longer take up a multiple of the basic line height. This could be avoided if the image is sized in ems rather than pixels. For example, the aforementioned image could be given a <code>height</code> of 180 ÷ 12 = 15 em <span class='bracket'>(</span>12 px being the text size<span class='bracket'>)</span>.</p>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>The function of a paragraph indent is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>The function of a paragraph indent is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted.”</p>
|
||||
</blockquote>
|
||||
<p>Paragraphs, and other block level elements, are indented using the <code>text-indent</code> property. To ensure a paragraph is set flush left, the text-indent should be set to zero:</p>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Ornaments <span class='bracket'>[</span>…<span class='bracket'>]</span> drop lines <span class='bracket'>[</span>…<span class='bracket'>]</span> outdented paragraphs <span class='bracket'>[</span>…<span class='bracket'>]</span> and others, have their uses but the plainest, most unmistakable yet unobtrusive way of marking paragraphs is the simple indent.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Ornaments <span class='bracket'>[</span>…<span class='bracket'>]</span> drop lines <span class='bracket'>[</span>…<span class='bracket'>]</span> outdented paragraphs <span class='bracket'>[</span>…<span class='bracket'>]</span> and others, have their uses but the plainest, most unmistakable yet unobtrusive way of marking paragraphs is the simple indent.”</p>
|
||||
</blockquote>
|
||||
<p>Indenting the first line of a paragraph, or any block element is achieved in <abbr title="Cascading Style Sheets">CSS</abbr> using the text-indent property:</p>
|
||||
|
||||
@@ -26,7 +26,7 @@ p + p {
|
||||
|
||||
<h2>Block Paragraphs</h2>
|
||||
|
||||
<p>As stated earlier, block paragraphs – paragraphs separated by line breaks – are the default method used by web browsers. As explained in <a href="/web/20140209211703/http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/">§2.2.2</a> the margins separating paragraphs should be set equal to the line-height in order that the rhythm of the text is maintained.</p>
|
||||
<p>As stated earlier, block paragraphs – paragraphs separated by line breaks – are the default method used by web browsers. As explained in <a href="/web/20140209211703/http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/">§2.2.2</a> the margins separating paragraphs should be set equal to the line-height in order that the rhythm of the text is maintained.</p>
|
||||
|
||||
<h2>Outdenting</h2>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>However the block quotations are set, there must be a visual distinction between main text and quotation, and again between the quotation and subsequent text.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>However the block quotations are set, there must be a visual distinction between main text and quotation, and again between the quotation and subsequent text.”</p>
|
||||
</blockquote>
|
||||
<p>Adding a gap between a block quotation and the main text is best achieved by applying a top and bottom margin to the blockquote. By default, browsers usually apply a left and right margin as well. You may wish to remove this altogether by setting the margins to zero. If you wish to retain the indent, a more consistent layout can be achieved by applying left and right margins equal to the top and bottom margins.</p>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Verse is usually set flush left and ragged right, and verse quotations within prose should not be deprived of their chosen form. But to distinguish verse quotations from surrounding prose, they should be indented or centered on the longest line.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Verse is usually set flush left and ragged right, and verse quotations within prose should not be deprived of their chosen form. But to distinguish verse quotations from surrounding prose, they should be indented or centered on the longest line.”</p>
|
||||
</blockquote>
|
||||
<p>When setting verse, whether on the web or otherwise, the primary concern is not to deprive it of its “chosen form”, including matters of spacing and visual structure <span class='bracket'>(</span>as this is considered, in many poetic works, to be at least as important as the words themselves<span class='bracket'>)</span>. As such, a <code>pre</code> <span class='bracket'>(</span>pre-formatted<span class='bracket'>)</span> element is most apt to setting verse.</p>
|
||||
<p>When setting verse, whether on the web or otherwise, the primary concern is not to deprive it of its “chosen form”, including matters of spacing and visual structure <span class='bracket'>(</span>as this is considered, in many poetic works, to be at least as important as the words themselves<span class='bracket'>)</span>. As such, a <code>pre</code> <span class='bracket'>(</span>pre-formatted<span class='bracket'>)</span> element is most apt to setting verse.</p>
|
||||
|
||||
<pre><code><blockquote class="verse">
|
||||
<pre>God guard me from those thoughts men think
|
||||
@@ -14,7 +14,7 @@ Thinks in a marrow bone.</pre>
|
||||
<pre><code>.verse pre {
|
||||
font-family: inherit; }</code></pre>
|
||||
|
||||
<p>A logical way to center the verse on the longest line would be to simply specify <code>width:auto</code> and <code>margin:0 auto</code>. Unfortunately, due to browsers’ rendering of preformatted elements, the element will still be considered to comprise full-width lines, so no centering will occur. However we can work around this by specifying the <code>pre</code> element to display as a <code>table</code> as follows:</p>
|
||||
<p>A logical way to center the verse on the longest line would be to simply specify <code>width:auto</code> and <code>margin:0 auto</code>. Unfortunately, due to browsers’ rendering of preformatted elements, the element will still be considered to comprise full-width lines, so no centering will occur. However we can work around this by specifying the <code>pre</code> element to display as a <code>table</code> as follows:</p>
|
||||
|
||||
<pre><code>.verse pre {
|
||||
font-family: inherit;
|
||||
@@ -55,7 +55,7 @@ Thinks in a marrow bone.</span></pre>
|
||||
<link rel="stylesheet" type="text/css" href="ie-lte-7.css" />
|
||||
<!<span class='bracket'>[</span>endif<span class='bracket'>]</span>-></code></pre>
|
||||
|
||||
<p>Here’s the final rendered example of prose, set flush left & ragged right, and centered on the longest line:</p>
|
||||
<p>Here’s the final rendered example of prose, set flush left & ragged right, and centered on the longest line:</p>
|
||||
|
||||
<div class="example"><blockquote class="ex2-3-4"><pre><span>God guard me from those thoughts men think
|
||||
In the mind alone;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Fi-nally is a conventionally acceptable line-end hyphenation, but final-ly is not, because it takes too little of the word ahead to the next line.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Fi-nally is a conventionally acceptable line-end hyphenation, but final-ly is not, because it takes too little of the word ahead to the next line.”</p>
|
||||
</blockquote>
|
||||
<p>Unlike much word processing and page-layout software, there is not yet any automatic hyphenation built into web browsers. The next best method is to insert hyphen characters manually.</p>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<pre><code>p {
|
||||
hyphenate: auto; }</code></pre>
|
||||
|
||||
<p>At the time of writing, the latest <a href="/web/20140209230237/http://www.w3.org/TR/2007/WD-css3-text-20070306/">Working Draft of March 2007</a>, states that the definition of the hyphenation feature is still very much up-in-the-air, but it’s likely that advanced hyphenation controls will be introduced. The <a href="/web/20140209230237/http://www.w3.org/TR/2007/WD-css3-gcpm-20070205/#hyphenation"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Paged Media module</a> has more details of the hyphenation properties originally proposed, among these are the <code>hyphenate-before</code> and <code>hyphenate-after</code> properties which specify the minimum number of characters in a hyphenated word before and after the hyphenation character. For example:</p>
|
||||
<p>At the time of writing, the latest <a href="/web/20140209230237/http://www.w3.org/TR/2007/WD-css3-text-20070306/">Working Draft of March 2007</a>, states that the definition of the hyphenation feature is still very much up-in-the-air, but it’s likely that advanced hyphenation controls will be introduced. The <a href="/web/20140209230237/http://www.w3.org/TR/2007/WD-css3-gcpm-20070205/#hyphenation"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Paged Media module</a> has more details of the hyphenation properties originally proposed, among these are the <code>hyphenate-before</code> and <code>hyphenate-after</code> properties which specify the minimum number of characters in a hyphenated word before and after the hyphenation character. For example:</p>
|
||||
|
||||
<pre><code>p {
|
||||
hyphenate-before:2;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In English one hyphenates <em>cab-ri-o-let</em> but in French <em>ca-brio-let</em>. The conventions of the individual language should, ideally, be followed even for single foreign words or brief quotations.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In English one hyphenates <em>cab-ri-o-let</em> but in French <em>ca-brio-let</em>. The conventions of the individual language should, ideally, be followed even for single foreign words or brief quotations.”</p>
|
||||
</blockquote>
|
||||
<p>This guideline can be achieved on the Web when hyphenating manually. See <a href="/2.4.1" title="At hyphenated line-ends, leave at least two characters behind and take at least three forward">§2.4.1</a> for more information on manual hyphenation.</p>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Hard spaces are useful for preventing line-breaks within phrases such as <em>6.2 mm</em>, <em>3 in.</em>, <em>4 × 4</em>, or in phrases like <em>page 3</em> and <em>chapter 5</em>.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Hard spaces are useful for preventing line-breaks within phrases such as <em>6.2 mm</em>, <em>3 in.</em>, <em>4 × 4</em>, or in phrases like <em>page 3</em> and <em>chapter 5</em>.”</p>
|
||||
</blockquote>
|
||||
<p>In <abbr title="HyperText Mark-up Language">HTML</abbr> the hard space character is known as a non-breaking space and is inserted using the entity <code>&nbsp;</code>, for example:</p>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>The stub-ends left when paragraphs <em>end</em> on the <em>first</em> line of a page are called <em>widows</em>. They have a past but not a future, and they look foreshortened and forlorn.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>The stub-ends left when paragraphs <em>end</em> on the <em>first</em> line of a page are called <em>widows</em>. They have a past but not a future, and they look foreshortened and forlorn.”</p>
|
||||
</blockquote>
|
||||
<p>Comprehensive control for page breaks was introduced in <abbr title="Cascading Style Sheets">CSS</abbr> 2, however browser support is currently limited to Opera 9. The only paging properties supported by Internet Explorer 7, Safari 3 and Firefox 2 are <code>page-break-before</code> and <code>page-break-after</code> <span class='bracket'>(</span>this is also true of <abbr title="Internet Explorer">IE</abbr>8 beta and Firefox 3 beta at time of writing<span class='bracket'>)</span>.</p>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. <span class='bracket'>[</span>…<span class='bracket'>]</span> Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”</p>
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. <span class='bracket'>[</span>…<span class='bracket'>]</span> Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”</p>
|
||||
</blockquote>
|
||||
<p>Sizing text in <abbr title="Cascading Style Sheets">CSS</abbr> is achieved using the <code>font-size</code> property. In print, font sizes are specified absolutely, for example setting text at 12 points implies a particular physical height for the printed text. On the web, font sizes can be set absolutely or relatively, and in a number of different units. What’s more, most web browsers enable the reader to resize the text to suit their own reading environment and requirements.</p>
|
||||
<p>Sizing text in <abbr title="Cascading Style Sheets">CSS</abbr> is achieved using the <code>font-size</code> property. In print, font sizes are specified absolutely, for example setting text at 12 points implies a particular physical height for the printed text. On the web, font sizes can be set absolutely or relatively, and in a number of different units. What’s more, most web browsers enable the reader to resize the text to suit their own reading environment and requirements.</p>
|
||||
|
||||
<p>For text which is to be printed, the <code>font-size</code> property can and should be used to set in text in points, for example:</p>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<p>For text which is to be read on screen, the situation is slightly more complicated. Arguably the most appropriate unit is pixels which is a unit relative to the screen resolution. Setting text sizes in pixels gives web designers precision similar to that afforded to print designers. However, Internet Explorer does not allow readers to resize text set in pixels <span class='bracket'>(</span>although <abbr title="Internet Explorer">IE</abbr>7 does provide full page zooming<span class='bracket'>)</span>, so we need to look to other units.</p>
|
||||
|
||||
<p>Sizing text using the <code>em</code> unit is the next most appropriate approach. The em is a true typographic unit and was <a href="/web/20140209211729/http://www.w3.org/WAI/GL/css2em.htm">recommended by the <abbr title="Worldwide Web Consortium">W3C</abbr></a> from the outset of <abbr title="Cascading Style Sheets">CSS</abbr>. Ems are a relative unit and act as multipliers based on the text element’s parent element. Thus, if the <code>body</code> of a web page has 16 px text by default, making paragraphs render at 12 px would require setting paragraphs at <code>0.75em</code>.</p>
|
||||
<p>Sizing text using the <code>em</code> unit is the next most appropriate approach. The em is a true typographic unit and was <a href="/web/20140209211729/http://www.w3.org/WAI/GL/css2em.htm">recommended by the <abbr title="Worldwide Web Consortium">W3C</abbr></a> from the outset of <abbr title="Cascading Style Sheets">CSS</abbr>. Ems are a relative unit and act as multipliers based on the text element’s parent element. Thus, if the <code>body</code> of a web page has 16 px text by default, making paragraphs render at 12 px would require setting paragraphs at <code>0.75em</code>.</p>
|
||||
|
||||
<pre><code>p { font-size:0.75em; /* 16x0.75=12 */ }</code></pre>
|
||||
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>When arabic numerals joined the roman alphabet, they too were given both lowercase and uppercase forms. Typographers call the former <cite>text figures</cite>, <cite>hanging figures</cite>, <cite>lowercase figures</cite>, or <cite>old-style figures</cite> <span class='bracket'>(</span>OSF for short<span class='bracket'>)</span> and make a point of using them whenever the surrounding text is set in lowercase letters or small caps. The alternative forms are called <cite>titling figures</cite>, <cite>ranging figures</cite> or <cite>lining figures</cite>, because they range or align with the upper case.<br />
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>When arabic numerals joined the roman alphabet, they too were given both lowercase and uppercase forms. Typographers call the former <cite>text figures</cite>, <cite>hanging figures</cite>, <cite>lowercase figures</cite>, or <cite>old-style figures</cite> <span class='bracket'>(</span>OSF for short<span class='bracket'>)</span> and make a point of using them whenever the surrounding text is set in lowercase letters or small caps. The alternative forms are called <cite>titling figures</cite>, <cite>ranging figures</cite> or <cite>lining figures</cite>, because they range or align with the upper case.<br />
|
||||
<span class='bracket'>[</span>…<span class='bracket'>]</span><br />
|
||||
<span class='bracket'>[</span>Text figures<span class='bracket'>]</span> are basic parts of typographic speech, and they are a sign that dollars are not really twice as important as ideas, and numbers are not afraid to consort on an equal footing with words. <span class='bracket'>[</span>…<span class='bracket'>]</span> However common it may be, the use of titling figures in running text is illiterate: it spurns the truth of letters.”</p>
|
||||
<span class='bracket'>[</span>Text figures<span class='bracket'>]</span> are basic parts of typographic speech, and they are a sign that dollars are not really twice as important as ideas, and numbers are not afraid to consort on an equal footing with words. <span class='bracket'>[</span>…<span class='bracket'>]</span> However common it may be, the use of titling figures in running text is illiterate: it spurns the truth of letters.”</p>
|
||||
</blockquote>
|
||||
<p>Many core web fonts <span class='bracket'>(</span>indeed most digital fonts<span class='bracket'>)</span> ship with only one case of figures: Arial, Comic Sans, Helvetica, Tahoma, Times, Times New Roman, Trebuchet and Verdana all ship with titling figures only. Georgia is the sole holder of text figures <span class='bracket'>(</span>but lacks titling figures<span class='bracket'>)</span>.</p>
|
||||
|
||||
<p>Microsoft’s new ‘C’ fonts however, are very strong with respect to their numerals. All six typefaces <span class='bracket'>(</span>including the fixed-width Consolas<span class='bracket'>)</span> have both titling and text figures included in the base fonts. Further, three of the fonts default to titling figures <span class='bracket'>(</span>Calibri, Cambria, and Consolas<span class='bracket'>)</span>, the other three to text figures <span class='bracket'>(</span>Candara, Constantia, and Corbel<span class='bracket'>)</span>. Constantia and Corbel even include small variants of their lining figures for use with text set in small capitals.</p>
|
||||
<p>Microsoft’s new ‘C’ fonts however, are very strong with respect to their numerals. All six typefaces <span class='bracket'>(</span>including the fixed-width Consolas<span class='bracket'>)</span> have both titling and text figures included in the base fonts. Further, three of the fonts default to titling figures <span class='bracket'>(</span>Calibri, Cambria, and Consolas<span class='bracket'>)</span>, the other three to text figures <span class='bracket'>(</span>Candara, Constantia, and Corbel<span class='bracket'>)</span>. Constantia and Corbel even include small variants of their lining figures for use with text set in small capitals.</p>
|
||||
|
||||
<p>Despite the bright hope for the future brought by Microsoft’s ‘C’ fonts, <abbr title="Cascading Style Sheets">CSS</abbr> currently makes no provision for the control of numeral case, this means the default figures will always be used, regardless of context.</p>
|
||||
<p>Despite the bright hope for the future brought by Microsoft’s ‘C’ fonts, <abbr title="Cascading Style Sheets">CSS</abbr> currently makes no provision for the control of numeral case, this means the default figures will always be used, regardless of context.</p>
|
||||
|
||||
<h2>The Future</h2>
|
||||
|
||||
<p>The <a href="/web/20140207235105/http://www.w3.org/TR/css3-fonts/"><abbr>CSS3</abbr> fonts module</a> is still a working draft, but is being actively revised. The current <a href="/web/20140207235105/http://dev.w3.org/csswg/css3-fonts/">editor’s draft</a> includes a proposal for supporting specification of lining or old-style numbers through the <code>font-variant-numeric</code> property.</p>
|
||||
<p>The <a href="/web/20140207235105/http://www.w3.org/TR/css3-fonts/"><abbr>CSS3</abbr> fonts module</a> is still a working draft, but is being actively revised. The current <a href="/web/20140207235105/http://dev.w3.org/csswg/css3-fonts/">editor’s draft</a> includes a proposal for supporting specification of lining or old-style numbers through the <code>font-variant-numeric</code> property.</p>
|
||||
|
||||
<p>For example, one could specify old-style figures using the <code>oldstyle-nums</code> value as follows:</p>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user