05-values-and-units/character-relative-sizing.html

<!DOCTYPE html>
<html>
<head>
<title>Character-relative sizing</title>
<style type="text/css">
p {margin: 0.5em 0;}
p span {background: #AAF;}
p img {width: 25ch; height: 1em;}
#p01 {font-family: Times, serif;}
#p02 {font-family: Garamond, serif;}
#p03 {font-family: Helvetica, sans-serif;}
#p04 {font-family: Arial, sans-serif;}
#p05 {font-family: Impact, sans-serif;}
#p06 {font-family: Courier, monospace;}
</style>
</head>
<body>

<p id="p01">
This example uses Times.<br/>
<span>0000000000000000000000000</span><br/>
<img src="box-red.gif" alt="">
</p>

<p id="p02">
This example uses Garamond.<br/>
<span>0000000000000000000000000</span><br/>
<img src="box-red.gif" alt="">
</p>

<p id="p03">
This example uses Helvetica.<br/>
<span>0000000000000000000000000</span><br/>
<img src="box-red.gif" alt="">
</p>

<p id="p04">
This example uses Arial.<br/>
<span>0000000000000000000000000</span><br/>
<img src="box-red.gif" alt="">
</p>

<p id="p05">
This example uses Impact.<br/>
<span>0000000000000000000000000</span><br/>
<img src="box-red.gif" alt="">
</p>

<p id="p06">
This example uses Courier.<br/>
<span>0000000000000000000000000</span><br/>
<img src="box-red.gif" alt="">
</p>

</body>
</html>