<glacius:metadata>

    <title>Firefox is master of the beard line</title>

    <description>On typology and text-decoration: underline circa 2011</description>

    <category>Legacy blog posts</category>

</glacius:metadata>

<glacius:macro name="legacy blargh banner">

    <properties>

        <originalUrl>https://tmont.com/blargh/2011/11/firefox-is-master-of-the-beard-line</originalUrl>

        <originalDate>2011-11-13T10:11:37.000Z</originalDate>

    </properties>

</glacius:macro>

<p>

  I found myself reading 

  <a href="https://pragdave.me/blog/2011/04/14/so-im-trying-an-email-experiment.html">this

  article</a>, about which I shall not speak. But of that which I will speak is what I noticed when I

  hovered over the title in Firefox:

</p>

<p class="text-center">

  <img glacius:src="pragdave_firefox.png" alt="firefox" />

</p>

<p>

  The <code>text-decoration: underline</code> went <em>underneath</em> the <tt>g</tt> (note the shadow)!  Is this new?

  Do all browsers do this? Has this been around forever and I just never noticed it? Why is "PragDave"

  such a terrible title?

</p>

<p>

  As it turns out, no other browsers do this. Firefox (on Windows, anyway) seems to be unique.

  Well, Chrome also appears to be doing it, but Chrome doesn't scale the underline so it's hard

  to tell without doing some pixel inspection, of which I shall not do.

</p>

<p>

  To wit, here are screenshots of the underlined-ness of the browsers I had readily available

  on my Windows partition:

</p>

<hr />

<h3>Firefox (the gold standard)</h3>

<p>

  <img glacius:src="pragdave_firefox.png" alt="firefox" />

</p>

<hr />

<h3>Chrome</h3>

<p>

  <img glacius:src="pragdave_chrome.png" alt="chrome" />

</p>

<hr />

<h3>IE9</h3>

<p>

  <img glacius:src="pragdave_ie.png" alt="ie" />

</p>

<hr />

<h3>Opera</h3>

<p>

  <img glacius:src="pragdave_opera.png" alt="opera" />

</p>

<hr />

<p>

  Frankly, I find this very sexy. It's an interesting attention to detail that probably

  goes unnoticed as you scan the text on a page, but makes a big difference subliminally. 

  As in, you're aware that it pleases you aesthetically, you just don't know why. Much

  like your mom.

</p>

<hr />

<p>

  For you unwashed heathens who aren't typophiles, that loop in the "g" is called a "loop".

  Since it goes below the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a>,

  the loop of the "g" is a <a href="https://en.wikipedia.org/wiki/Descender">descender</a>.

  <a href="https://typomil.com/anatomy/index.html">Learn your anatomy</a>.

</p>

<p>

  Or maybe I'm just making this stuff up.

</p>