Font size by Pixels
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS Example</title> <style rel="stylesheet" type="text/css"> body { font-size: 18px; } td { padding: 10px; width: 210px; } p.absoluteone { font-size: xx-small; } p.absolutetwo { font-size: x-small; } p.absolutethree { font-size: small; } p.absolutefour { font-size: medium; } p.absolutefive { font-size: large; } p.absolutesix { font-size: x-large; } p.absoluteseven { font-size: xx-large; } p.pixelsone { font-size: 9px; } p.pixelstwo { font-size: 12px; } p.pixelsthree { font-size: 14px; } p.pixelsfour { font-size: 18px; } p.pixelsfive { font-size: 24px; } p.pixelssix { font-size: 36px; } p.pixelsseven { font-size: 48px; } p.picaone { font-size: 1pc; } p.picatwo { font-size: 2pc; } p.picathree { font-size: 3pc; } p.picafour { font-size: 4pc; } p.pointone { font-size: 9pt; } p.pointtwo { font-size: 12pt; } p.pointthree { font-size: 14pt; } p.pointfour { font-size: 18pt; } p.pointfive { font-size: 24pt; } p.pointsix { font-size: 36pt; } p.pointseven { font-size: 48pt; } p.relativeone { font-size: smaller; } p.relativetwo { } p.relative { font-size: larger; } p.emone { font-size: 1em; } p.emtwo { font-size: 2em; } p.emthree { font-size: 3em; } p.emfour { font-size: 4em; } p.exone { font-size: 1ex; } p.extwo { font-size: 2ex; } p.exthree { font-size: 3ex; } p.exfour { font-size: 4ex; } p.exfive { font-size: 5ex; } p.exsix { font-size: 6ex; } p.exseven { font-size: 7ex; } p.percentone { font-size: 50%; } p.percenttwo { font-size: 75%; } p.percentthree { font-size: 100%; } p.percentfour { font-size: 150%; } p.percentfive { font-size: 200%; } p.percentsix { font-size: 400%; } </style> </head> <body> <h1>Font Sizes</h1> <table><tr><td valign="top"> <h2>Absolute Sizes</h2> <p class="absoluteone">xx-small</p> <p class="absolutetwo">x-small</p> <p class="absolutethree">small</p> <p class="absolutefour">medium</p> <p class="absolutefive">large</p> <p class="absolutesix">large</p> <p class="absoluteseven">large</p> </td><td valign="top"> <h2>Pixels</h2> <p class="pixelsone">9 px</p> <p class="pixelstwo">12 px</p> <p class="pixelsthree">14 px</p> <p class="pixelsfour">18 px</p> <p class="pixelsfive">24 px</p> <p class="pixelssix">36 px</p> <p class="pixelsseven">48 px</p> </td><td valign="top"> <h2>Points</h2> <p class="pointone">9 pt</p> <p class="pointtwo">12 pt</p> <p class="pointthree">14 pt</p> <p class="pointfour">18 pt</p> <p class="pointfive">24 pt</p> <p class="pointsix">36 pt</p> <p class="pointseven">48 pt</p> </td><td valign="top"> <h2>Picas</h2> <p class="picaone">1 pc</p> <p class="picatwo">2 pc</p> <p class="picathree">3 pc</p> <p class="picafour">4 pc</p> </td></tr></table> <br /><hr /><br /> <table><tr><td valign="top"> <h2>Relative Sizes</h2> <p class="relativeone">smaller</p> <p class="relativetwo">no style</p> <p class="relativethree">larger</p> </td><td valign="top"> <h2>Ems</h2> <p class="emone">1em</p> <p class="emtwo">2em</p> <p class="emthree">3em</p> <p class="emfour">4em</p> </td><td valign="top"> <h2>Exs</h2> <p class="exone">1ex</p> <p class="extwo">2ex</p> <p class="exthree">3ex</p> <p class="exfour">4ex</p> <p class="exfive">5ex</p> <p class="exsix">6ex</p> <p class="exseven">7ex</p> </td><td valign="top"> <h2>Percents</h2> <p class="percentone">50%</p> <p class="percenttwo">75%</p> <p class="percentthree">100%</p> <p class="percentfour">150%</p> <p class="percentfive">200%</p> <p class="percentsix">400%</p> </td></tr></table> </body> </html>