Notes about font-family in the web

Font-family differences

Using different fonts can make some problems with the layout. In the sample list I use Verdana, Arial, Sans-serif, Trebuchet MS, Bitstream Vera Sans, Tahoma, Georgia, Helvetica and Courier. All text listed use the same font size, but they need different space.

font-family sample list

1. I'm a sample text without any sense (Verdana)
2. I'm a sample text without any sense (Arial)
3. I'm a sample text without any sense (Sans-serif)
4. I'm a sample text without any sense (Trebuchet MS)
5. I'm a sample text without any sense (Bitstream Vera Sans)
6. I'm a sample text without any sense (Tahoma)
7. I'm a sample text without any sense (Georgia)
8. I'm a sample without any sense (Helvetica)
9. I'm a sample without any sense (Courier)

CSS Part:

  body {
    font-size: 82%;
  }
  
  .byfarlists {
    font-size: 1em;
    line-height: 1.4em;
    color: #333333;
    background-color: #ffffff;
    padding-bottom: 2em;
  }
  

(X)HTML Part:

  <ol class="byfarlists">
    <li style="font-family: Verdana;">I'm a sample text without any sense</li>
    <li style="font-family: Arial;">I'm a sample text without any sense</li>
    <li style="font-family: sans-serif;">I'm a sample text without any sense</li>
    <li style="font-family: 'Trebuchet MS';">I'm a sample text without any sense</li>
    <li style="font-family: 'Bitstream Vera Sans';">I'm a sample text without any sense</li>
    <li style="font-family: Tahoma;">I'm a sample text without any sense</li>
    <li style="font-family: Georgia;">I'm a sample text without any sense</li>
    <li style="font-family: helvetica;">I'm a sample text without any sense</li>
    <li style="font-family: courier;">I'm a sample text without any sense</li>
  </ol>