<header aria-label="Masthead">
  <h1>
    <small>Mike Mai&rsquo;s</small>
    <span>Typography<br>Manual</span>
  </h1>
</header>
<main>
  <article>
    <h2>Use One Font</h2>
    <p>Believe it or not, you can do a lot with just a single font. Choose a well designed font and explore all of its weights, this works best with <a href="https://fonts.google.com/?vfonly=true">variable fonts</a>. If a font you like does not have multiple weights, you could utilize colors to <a href="https://mikemai.net/typesettings/showcase-im-fell-english.html">create contrast</a> between headings and body&nbsp;text.</p>
    <p>This manual is set in Archivo 300, 600, and&nbsp;900.</p>
    <h2>Use Traditional Point&nbsp;Sizes</h2>
    <p>You can&rsquo;t learn typography overnight. As a beginner, it could feel daunting to set up a type scale. If you are at a loss, it would be safe to utilize the set of traditional point&nbsp;sizes.</p>
    <p>Remember to convert the point value to <q>rem</q> when designing for the&nbsp;web.</p>
    <figure>
      <p class="pt-double-canon">Double Canon</p>
      <p class="pt-canon">Canon</p>
      <p class="pt-double-great-primer">Double Great Primer</p>
      <p class="pt-double-english">Double English</p>
      <p class="pt-double-pica">Double Pica</p>
      <p class="pt-paragon">Paragon</p>
      <p class="pt-english">English</p>
      <p class="pt-pica">Pica</p>
      <p class="pt-small-pica">Small Pica</p>
      <p class="pt-bourgeois">Bourgeois</p>
    </figure>
    <table>
      <caption>
        Type Scale with Traditional Point&nbsp;Sizes
      </caption>
      <thead>
        <tr>
          <th>Text Style</th>
          <th>Point Size</th>
          <th>Rem Size</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Display</td>
          <td>Double Canon</td>
          <td>4.666</td>
        </tr>
        <tr>
          <td>Heading 1</td>
          <td>Canon</td>
          <td>3.999</td>
        </tr>
        <tr>
          <td>Heading 2</td>
          <td>Double Great Primer</td>
          <td>2.999</td>
        </tr>
        <tr>
          <td>Heading 3</td>
          <td>Double English</td>
          <td>2.333</td>
        </tr>
        <tr>
          <td>Heading 4</td>
          <td>Double Pica</td>
          <td>2.000</td>
        </tr>
        <tr>
          <td>Heading 5</td>
          <td>Paragon</td>
          <td>1.666</td>
        </tr>
        <tr>
          <td>Heading 6</td>
          <td>English</td>
          <td>1.166</td>
        </tr>
        <tr>
          <td>Body</td>
          <td>Pica</td>
          <td>1.000</td>
        </tr>
        <tr>
          <td>Fine Print 1</td>
          <td>Small Pica</td>
          <td>0.916</td>
        </tr>
        <tr>
          <td>Fine Print 2</td>
          <td>Bourgeois</td>
          <td>0.750</td>
        </tr>
      </tbody>
    </table>
    <h2>Redefine Point Sizes for CJK&nbsp;Characters</h2>
    <p>CJK (Chinese, Japanese, Korean) characters are wildly different than Latin characters. Make sure to pick point sizes that would look good with CJK&nbsp;characters.</p>
    <figure>
      <div lang="zh-Hans">
        <p class="pt-chu">初号</p>
        <p class="pt-xiaochu">小初号</p>
        <p class="pt-yi">一号</p>
        <p class="pt-er">二号</p>
        <p class="pt-xiaoer">小二号</p>
        <p class="pt-san">三号</p>
        <p class="pt-si">四号</p>
        <p class="pt-xiaosi">小四号</p>
        <p class="pt-wu">五号</p>
        <p class="pt-xiaowu">小五号</p>
      </div>
    </figure>
    <table>
      <caption>
        Type Scale with CJK Point&nbsp;Sizes
      </caption>
      <thead>
        <tr>
          <th>Text Style</th>
          <th>Point Size</th>
          <th>Rem Size</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Display</td>
          <td lang="zh-Hans">初号</td>
          <td>3.499</td>
        </tr>
        <tr>
          <td>Heading 1</td>
          <td lang="zh-Hans">小初号</td>
          <td>2.999</td>
        </tr>
        <tr>
          <td>Heading 2</td>
          <td lang="zh-Hans">一号</td>
          <td>2.166</td>
        </tr>
        <tr>
          <td>Heading 3</td>
          <td lang="zh-Hans">二号</td>
          <td>1.833</td>
        </tr>
        <tr>
          <td>Heading 4</td>
          <td lang="zh-Hans">小二号</td>
          <td>1.500</td>
        </tr>
        <tr>
          <td>Heading 5</td>
          <td lang="zh-Hans">三号</td>
          <td>1.333</td>
        </tr>
        <tr>
          <td>Heading 6</td>
          <td lang="zh-Hans">四号</td>
          <td>1.166</td>
        </tr>
        <tr>
          <td>Body</td>
          <td lang="zh-Hans">小四号</td>
          <td>1.000</td>
        </tr>
        <tr>
          <td>Fine Print 1</td>
          <td lang="zh-Hans">五号</td>
          <td>0.875</td>
        </tr>
        <tr>
          <td>Fine Print 2</td>
          <td lang="zh-Hans">小五号</td>
          <td>0.750</td>
        </tr>
      </tbody>
    </table>
    <h2>Use Serif for Italic&nbsp;Text</h2>
    <p>Chances are that italic sans-serif is ugly. Why? Because the style is not available for certain sans-serif fonts and you end up with forced italics. Even if it is available, it is usually poorly designed. Inspect carefully when using italic sans-serif, or substitute a serif font for italic text&mdash;<em>it&rsquo;s worth it, trust&nbsp;me</em>.</p>
    <h2>Use En Dash &amp; Em&nbsp;Dash</h2>
    <p>Did you know dashes have different&nbsp;widths?</p>
    <p>The em dash&mdash;the long dash&mdash;is for indicating a break in the sentence. The en dash is slightly wider than the hyphen and narrower than the em dash, and it should be used for span or range of numbers. Hyphen is for hyphen&shy;ation,&nbsp;duh!</p>
    <h2><q>Hang Quotes &amp;&nbsp;Bullets</q></h2>
    <ul role="presentation">
      <li role="presentation">Because</li>
      <li role="presentation">text</li>
      <li role="presentation">should</li>
      <li role="presentation">align</li>
    </ul>
    <p>to ensure the flow of&nbsp;reading.</p>
    <p>When letters align with letters, text blocks are uniform. Avoid distracting the eye with&nbsp;indents.</p>
    <h2>Use One Space after a&nbsp;Period</h2>
    <p>Unless you are still using a typewriter or you still think your professor was right. Hint, you are not and they were&nbsp;not. Digital typefaces are designed with proper kerning. Let obsolete practices stay in the past.</p>
    <h2>Reduce Heading Spacing</h2>
    <p>Humans always look for patterns. When elements are close to each other, we consciously group them as related&nbsp;information.</p>
    <p>The spacing between a heading and a paragraph should be less than the regular paragraph spacing. If regular paragraph spacing is used instead, the heading would seem too far away from the&nbsp;paragraph.</p>
    <h2>Use Thin Space</h2>
    <p>Thin Space might be the most underrated HTML entity. It can be used for a name like J.&#8202;K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just&nbsp;perfect.</p>
    <p>The HTML code is <mark>&amp;thinsp;</mark>. You can go even further with Hair Space <mark>&amp;#8202;</mark>.</p>
    <p><a href="https://codepen.io/mikemai2awesome/pen/LYQwBmp">A demo on Thin Space</a>&nbsp;→</p>
    <h2>Use Paragraph Indent or Paragraph Spacing, Never&nbsp;Both</h2>
    <p>Do you wear suspenders while you are already wearing a belt? I didn&rsquo;t think&nbsp;so.</p>
    <h2>Don&rsquo;t Use Helvetica, Inter, &amp;&nbsp;Roboto</h2>
    <p>You might enjoy eating <a href="https://helveticasux.com">McDonald&rsquo;s</a> but you know that is not healthy for you. Pick a font that is not so ubiquitous,&nbsp;YOLO!</p>
  </article>
</main>
<footer aria-label="Colophon">
  <p>Crafted in HTML &amp; CSS by <a href="https://mikemai.net">Mike Mai</a>. The guidelines in this manual are solely based on his typographic philosophy and visual&nbsp;judgment.</p>
  <p>Originally released on <a href="https://codepen.io/mikemai2awesome/pen/qBygNwq">Codepen</a>.</p>
</footer>