title: Hide Text with CSS, Best Practice?
body: <p>Let's say I have this element for displaying the website logo:</p>
  <pre><code>&lt;div id=&quot;web-title&quot;&gt;
    &lt;a href=&quot;http://website.com&quot; title=&quot;Website&quot; rel=&quot;home&quot;&gt;
      &lt;span&gt;Website Name&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The <code>#web-title</code> would be styled with <code>background:url(http://website.com/logohere.png)</code>, but how to properly hide the text <code>Website Name</code>? As seen here: <a href="https://stackoverflow.com/questions/471510/hide-text-using-css">Hide text using css</a> or here <a href="https://stackoverflow.com/a/2705328">https://stackoverflow.com/a/2705328</a> , I've seen various methods to hide the text, such as:</p>
  <pre><code>#web-title span { text-indent: -9999px; }
  </code></pre>
  <p>or</p>
  <pre><code>#web-title span { font-size: -9999px; }
  </code></pre>
  <p>or</p>
  <pre><code>#web-title span { position: absolute; top: -9999px; left: -9999px; }
  </code></pre>
  <p>I've also seen some combine those three methods. But actually which one is the best practice to hide text effectively?</p>