Font Weight - Arial

How Arial looks compared by weight.

by Wally Glenn

HTML

<h3 class="arial">Arial</h3>
<ul class="arial">
   <li style="font-weight: 100 !important;">100 - Thin</li>
   <li style="font-weight: 200 !important;">200 - Extra Light (Ultra Light)</li>
   <li style="font-weight: 300 !important;">300 - Light</li>
   <li style="font-weight: 400 !important;">400 - Normal</li>
   <li style="font-weight: 500;">500 - Medium</li>
   <li style="font-weight: 600;">600 - Semi Bold (Demi Bold)</li>
   <li style="font-weight: 700;">700 - Bold</li>
   <li style="font-weight: 800;">800 - Extra Bold (Ultra Bold)</li>
   <li style="font-weight: 900;">900 - Black (Heavy)</li>
 </ul>
 
The typeface Arial does not have a 100, 200, 300, 500, 700 or 900 font weight. This is why some of the fonts look the same.

CSS

.arial {
  font-family: arial;
}
.times {
  font-family: Times;
}