<main mv-app="boxmodel" mv-bar="none" mv-storage="local">

 <article>
  <h1 style="letter-spacing:[ls]em; word-spacing:[ws]em">
   Interactive Typesetting</h1>
  
  <h2>Use the sliders to visualise how the tools of traditional typography (font-sizes, leading (line-height), tracking (letter-spacing), and spaces (word-spacing) are applied with CSS coding. NOTE: It’s common to use simple “unitless” values for setting line-height — and rely on the CSS 'em' values to fine-tune letter and word spacing based on the size of the font itself.</h2>

 <section>
  <p style="font-size:[fz]px; line-height:[lh]; letter-spacing:[ls]em; word-spacing:[ws]em">TYPESETTING IS THE PRINTER’S ART of composing individual letters of a typeface to create an appealing and readable presentation of the text on a page (or - in our case - the screen). Much of the function and jargon of CSS typesetting properties derives from the traditions of movable type and letterpress printing.</p>
    <p style="font-size:[fz]px; line-height:[lh]; letter-spacing:[ls]em; word-spacing:[ws]em"><strong>The Crystal Goblet or Printing Should be Invisible</strong> from Beatrice Warde,<em>The Crystal Goblet, Sixteen Essays on Typography, Cleveland, 1956</em></p>
  <p style="font-size:[fz]px; line-height:[lh]; letter-spacing:[ls]em; word-spacing:[ws]em">Imagine that you have before you a flagon of wine. You may choose your own favorite vintage for this imaginary demonstration, so that it be a deep shimmering crimson in colour. You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your choice of goblet, I shall know whether or not you are a connoisseur of wine. For if you have no feelings about wine one way or the other, you will want the sensation of drinking the stuff out of a vessel that may have cost thousands of pounds; but if you are a member of that vanishing tribe, the amateurs of fine vintages, you will choose the crystal, because everything about it is calculated to reveal rather than to hide the beautiful thing which it was meant to contain.</p>

  <p style="font-size:[fz]px; line-height:[lh]; letter-spacing:[ls]em; word-spacing:[ws]em">Bear with me in this long-winded and fragrant metaphor; for you will find that almost all the virtues of the perfect wine-glass have a parallel in typography. There is the long, thin stem that obviates fingerprints on the bowl. Why? Because no cloud must come between your eyes and the fiery heart of the liquid. Are not the margins on book pages similarly meant to obviate the necessity of fingering the type-page? Again: the glass is colourless or at the most only faintly tinged in the bowl, because the connoisseur judges wine partly by its colour and is impatient of anything that alters it. There are a thousand mannerisms in typography that are as impudent and arbitrary as putting port in tumblers of red or green glass! When a goblet has a base that looks too small for security, it does not matter how cleverly it is weighted; you feel nervous lest it should tip over. There are ways of setting lines of type which may work well enough, and yet keep the reader subconsciously worried by the fear of 'doubling' lines, reading three words as one, and so forth."</p>


</section>

 </article>

<pre>
<div>
*{ font-size:<span>[fz]px</span>;<input class="indent" type="range" property="fz" value="24" min="10" max="72"/>
</div>

<div>
   line-height:<span>[lh]</span>;<input class="indent" type="range" property="lh" value="1.6" min="0.0" max="3.0" step="0.1"/>
</div>

<div>
   letter-spacing:<span>[ls]em</span>;
   <input class="indent" type="range" property="ls" value="0.03" min="-1.0" max="1.0" step="0.01"/>
</div>

<div>
   word-spacing:<span>[ws]em</span>;
   <input class="indent" type="range" property="ws" value="0.04" min="-1" max="2" step="0.01"/>
</div>

<div>
 }
</div>




</pre>
</main>