<?xml version="1.0"?>
<?xml-stylesheet href="/transform" type="text/xsl"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:bibo="http://purl.org/ontology/bibo/" xmlns:bs="http://purl.org/ontology/bibo/status/" xmlns:ci="https://vocab.methodandstructure.com/content-inventory#" xmlns:dct="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xhv="http://www.w3.org/1999/xhtml/vocab#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" lang="en" prefix="bibo: http://purl.org/ontology/bibo/ bs: http://purl.org/ontology/bibo/status/ ci: https://vocab.methodandstructure.com/content-inventory# dct: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ rdf: http://www.w3.org/1999/02/22-rdf-syntax-ns# xhv: http://www.w3.org/1999/xhtml/vocab# xsd: http://www.w3.org/2001/XMLSchema#" vocab="http://www.w3.org/1999/xhtml/vocab#" xml:lang="en">
  <head>
    <title property="dct:title">Typesetting Best Practices</title>
    <base href="https://doriantaylor.com/style-guide/typesetting-best-practices"/>
    <link href="../document-stats#ESr86Ptf3mi77-T5-xK4xK" rev="ci:document"/>
    <link href="../elsewhere" rel="alternate bookmark" title="Elsewhere"/>
    <link href="../this-site" rel="alternate index" title="This Site"/>
    <link href="http://purl.org/ontology/bibo/status/published" rel="bibo:status"/>
    <link href="" rel="ci:canonical" title="Typesetting Best Practices"/>
    <link href="../lexicon/#ElJLHYiYysLxSpAqBYD7JJ" rel="dct:audience" title="Visual Designer"/>
    <link href="../person/dorian-taylor#me" rel="dct:creator" title="Dorian Taylor"/>
    <link href="choosing-a-palette" rel="dct:references next" title="Choosing a Palette"/>
    <link href="designing-a-relative-layout" rel="dct:references prev" title="Designing a Relative Layout"/>
    <link href="../whats-up-with-the-layout" rel="dct:references up" title="What's Up with the Layout?"/>
    <link href="../lexicon/#EnewYu-MeZVXNc97q_-jAI" rel="dct:subject" title="Web Development"/>
    <link href="../person/dorian-taylor" rel="meta" title="Who I Am"/>
    <link about="../" href="../3f36c30c-6096-454a-8a22-c062100ae41f" rel="alternate" type="application/atom+xml"/>
    <link about="../" href="../f07f5044-01bc-472d-9079-9b07771b731c" rel="alternate" type="application/atom+xml"/>
    <link about="../" href="../this-site" rel="alternate"/>
    <link about="../" href="../elsewhere" rel="alternate"/>
    <link about="../" href="../e341ca62-0387-4cea-b69a-cdabc7656871" rel="alternate" type="application/atom+xml"/>
    <link about="../verso/" href="../3f36c30c-6096-454a-8a22-c062100ae41f" rel="alternate" type="application/atom+xml"/>
    <link about="../verso/" href="../this-site" rel="alternate"/>
    <link about="../verso/" href="../elsewhere" rel="alternate"/>
    <meta content="typesetting-best-practices" datatype="xsd:token" property="ci:canonical-slug"/>
    <meta content="Here I am back in 2008 trying to decide what the heck to do about the typesetting." name="description" property="dct:abstract"/>
    <meta content="2008-06-19T05:25:04+00:00" datatype="xsd:dateTime" property="dct:created"/>
    <meta content="typesetting-best-practices" property="dct:identifier"/>
    <meta content="2008-09-03T00:08:22+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2008-10-09T02:02:01+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2009-03-04T00:43:00+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2022-05-31T04:18:52+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta about="../person/dorian-taylor#me" content="Dorian Taylor" name="author" property="foaf:name"/>
    <meta content="summary" name="twitter:card"/>
    <meta content="@doriantaylor" name="twitter:site"/>
    <meta content="Typesetting Best Practices" name="twitter:title"/>
    <meta content="Here I am back in 2008 trying to decide what the heck to do about the typesetting." name="twitter:description"/>
    <object>
      <nav>
        <ul>
          <li>
            <a href="designing-a-relative-layout" rev="dct:references" typeof="bibo:Note">
              <span property="dct:title">Designing a Relative Layout</span>
            </a>
          </li>
          <li>
            <a href="../whats-up-with-the-layout" rev="dct:references" typeof="bibo:Note">
              <span property="dct:title">What's Up with the Layout?</span>
            </a>
          </li>
          <li>
            <a href="../document-stats#ESr86Ptf3mi77-T5-xK4xK" rev="ci:document" typeof="qb:Observation">
              <span>urn:uuid:4abf3a3e-d7f7-49a2-aefb-f93e7ec4ae31</span>
            </a>
          </li>
        </ul>
      </nav>
    </object>
  </head>
  <body about="" id="Ea7iKiQKaxX7zJ4mUj3h7K" typeof="bibo:Report">
    <p>It is truly a deplorable thing that typography on the <abbr title="World Wide Web">Web</abbr> is still as bad in <var>2008</var> as it was over a decade prior. In fact, it has arguably gotten <em>worse</em>. I remember using <a href="http://www.bitstream.com/font_rendering/products/truedoc/index.html" title="TrueDoc" rel="dct:references">BitStream TrueDoc</a> and <a href="http://www.microsoft.com/typography/web/embedding/weft3/" title="Microsoft WEFT 3" rel="dct:references">Microsoft <acronym title="Web Embedding Font Tool">WEFT</acronym></a> in <var>2000</var> to produce natively embeddable fonts for <abbr title="World Wide Web">Web</abbr> sites. Sure, there's <a href="http://www.mikeindustries.com/sifr" title="sIFR" rel="dct:references"><acronym title="Scalable Inman Flash Replacement">sIFR</acronym></a>, but in my opinion it's a suboptimal solution because it requires a <span title="albeit ubiquitous">plug-in</span> and breaks text selection, amongst other things.</p>
    <p>So, I'm going to ignore embedding typefaces for now and focus on things I <em>can</em> do something about.</p>
    <h2>Optimal Paragraph Width</h2>
    <p>I remember reading (not sure where, but I will recall it eventually) that the optimal width for a paragraph is between <var>65</var> and <var>70</var> characters. Therefore, rather than go with a fully <em>liquid</em> layout, which changes with the size of the viewport, I chose a paragraph width of 66<em>ex</em>. After all, it's hyper<strong>text</strong>, right? That would imply that it's meant to be <em>read</em>.</p>
    <h2>Hyphenation</h2>
    <p>I am a fan of justified paragraphs. <abbr title="World Wide Web">Web</abbr> browser vendors, apparently not so much. the <code>text-align: justify;</code> <acronym title="Cascading Style Sheets">CSS</acronym> declaration, when not paired with copious <em>soft hyphens</em> (<code>&amp;shy;</code> character entities), create nasty <a href="http://en.wikipedia.org/wiki/River_(typography)" title="River (typography) &#x2014; Wikipedia" rel="dct:references">rivers</a> down the page, rendering the paragraphs laborious at best to read.</p>
    <p>To make matters worse, soft hyphens are not universally implemented, and even if they were, I would still have to hyphenate all my text. Luckily, a guy called <a href="http://www.tug.org/docs/liang/" title="Franklin M. Liang" rel="dct:references">Frank Liang</a> solved that problem in 1983 with his word hyphenation algorithm, which is used in the <a href="http://www.tug.org/" title="TeX Users Group" rel="dct:references">TeX</a> typesetting language.</p>
    <p>I am currently using the <a href="http://code.google.com/p/hyphenator/" title="hyphenator &#x2014; Google Code" rel="dct:references">JavaScript implementation</a> of the <a type="application/pdf" href="http://www.tug.org/docs/liang/liang-thesis.pdf" title="Word Hy-phen-a-tion by Com-put-er" rel="dct:references">Liang hyphenation algorithm</a> by <a href="http://www.mnn.ch/" title="Mathias Nater's Weblog" rel="dct:references">Mathias Nater</a>. Once I am far enough along, I will likely adapt and/or integrate it into my own JavaScript library.</p>
  </body>
</html>
