couple more introduction tweaks

Author: John Daggett

css3-fonts/Fonts.html

@@ -185,10 +185,9 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
 
    <li class=no-num><a href="#references">References</a>
     <ul class=toc>
-     <li class=no-num><a href="#normative-references">Normative
-      references</a>
+     <li><a href="#normative"><span class=secno>8.1 </span>Normative</a>
 
-     <li class=no-num><a href="#other-references">Other references</a>
+     <li><a href="#informative"><span class=secno>8.2 </span>Informative</a>
     </ul>
 
    <li class=no-num><a href="#index">Index</a>
@@ -206,37 +205,47 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
    across languages and cultures. For even common Latin letters, wide
    variations are possible:
 
-  <div class=figure><img src=aaaaaa.png></div>
+  <div class=figure><img src=aaaaaa.png>
+   <p class=caption>Letterform variations</p>
+  </div>
 
   <p>Differences in the anatomy of letterforms is one way to distinguish
    fonts. For Latin fonts, flourishes at the ends of a character's main
    strokes, or serifs, can distinguish a font from those without. Similar
    comparisons exist in non-Latin fonts. For Japanese fonts, a Mincho face
    contains tapered strokes while a Gothic face does not:
 
-  <div class=figure><img src=serifvssansserif.png></div>
+  <div class=figure><img src=serifvssansserif.png>
+   <p class=caption>Classifying by letterform style</p>
+  </div>
 
   <p>Fonts contain letterforms and the data needed to map characters to these
    letterforms. Often this may be a simple one-to-one mapping but more
    complex mappings are also possible. The use of combining diacritic marks
    creates many variations for an underlying letterform:
 
-  <div class=figure><img src=aaaaaa-diacritics.png></div>
+  <div class=figure><img src=aaaaaa-diacritics.png>
+   <p class=caption>Variations with diacritic marks</p>
+  </div>
 
   <p>A sequence of characters can be represented by a single glyph known as a
    ligature:
 
-  <div class=figure><img src=final-ligature.png></div>
+  <div class=figure><img src=final-ligature.png>
+   <p class=caption>Ligature example</p>
+  </div>
 
   <p>Visual transformations based on textual context like this may be a
    stylistic option for European langauges but are required to correctly
-   render languages like Arabic. The lam and alef characters below
+   render languages like Arabic; the lam and alef characters below
    <em>must</em> be combined when they exist in sequence:
 
-  <div class=figure><img src=lamaleflig.png></div>
+  <div class=figure><img src=lamaleflig.png>
+   <p class=caption>Required Arabic ligature</p>
+  </div>
 
-  <p>The relative complexity of these transformations requires additional
-   data within the font to support shaping operations like this.
+  <p>The relative complexity of these shaping transformations requires
+   additional data within the font.
 
   <p>Sets of font faces with various stylistic variations are often grouped
    together into font families. In the simplest case this can mean just bold
@@ -245,14 +254,21 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
    within the Univers font family. The width used increases from top to
    bottom and the weight increases from left to right:
 
-  <div class=figure><img src=weightwidthvariations.png></div>
+  <div class=figure><img src=weightwidthvariations.png>
+   <p class=caption>Weight and width variations within a single font family</p>
+  </div>
 
   <p>Italic faces are commonly thought of as sloped variations but the
    distinction is actually more subtle than that. Italics are generally more
-   cursive style letterforms. Compare the artificially sloped version of the
-   regular face in grey to the actual italic face:
-
-  <div class=figure><img src=realvsfakeitalics.png></div>
+   cursive style letterforms (<a href="#ELEMTYPO"
+   rel=biblioentry>[ELEMTYPO]<!--{{ELEMTYPO}}--></a>). Compare the
+   artificially sloped renderings of Palatino &lsquo;<span
+   class=property>a</span>&rsquo; and Baskerville &lsquo;<span
+   class=property>N</span>&rsquo; in grey with the actual italic versions:
+
+  <div class=figure><img src=realvsfakeitalics.png>
+   <p class=caption>Artificial sloping versus real italics</p>
+  </div>
 
   <ul>
    <li>fonts as containers of glyphs, supporting wide variety of languages
@@ -1005,7 +1021,7 @@ <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
 
   <h2 class=no-num id=references>References</h2>
 
-  <h3 class=no-num id=normative-references>Normative references</h3>
+  <h3 id=normative><span class=secno>8.1 </span>Normative</h3>
   <!--begin-normative-->
   <!-- Sorted by label -->
 
@@ -1025,14 +1041,20 @@ <h3 class=no-num id=normative-references>Normative references</h3>
   </dl>
   <!--end-normative-->
 
-  <h3 class=no-num id=other-references>Other references</h3>
+  <h3 id=informative><span class=secno>8.2 </span>Informative</h3>
   <!--begin-informative-->
   <!-- Sorted by label -->
 
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
 
+   <dt id=ELEMTYPO>[ELEMTYPO]
+
+   <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
+    3.1.</cite> 2005. ISBN 0-88179-206-3.</dd>
+   <!---->
+
    <dt id=HTML40>[HTML40]
 
    <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a