<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>YUI 3.x: CSS Fonts Sizing Example</title>
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/cssreset.css" type="text/css">
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/cssfonts.css" type="text/css">
    <script src="{{yuiSeedUrl}}"></script>
<style type="text/css" media="screen">
	.cssfonts--10 {font-size:77%;}
	.cssfonts--11 {font-size:85%;}
	.cssfonts--12 {font-size:93%;}
	.cssfonts--13 {font-size:100%;}
	.cssfonts--14 {font-size:108%;}
	.cssfonts--15 {font-size:116%;}
	.cssfonts--16 {font-size:123.1%;}
	.cssfonts--17 {font-size:131%;}
	.cssfonts--18 {font-size:138.5%;}
	.cssfonts--19 {font-size:146.5%;}
	.cssfonts--20 {font-size:153.9%;}
	.cssfonts--21 {font-size:161.6%;}
	.cssfonts--22 {font-size:167%;}
	.cssfonts--23 {font-size:174%;}
	.cssfonts--24 {font-size:182%;}
	.cssfonts--25 {font-size:189%;}
	.cssfonts--26 {font-size:197%;}
</style>
</head>
<body>

<h1>The first row is the size set with CSS Fonts. The second row is the reference size set with pixels.</h1>
<div id="page">
    <p class="cssfonts--10"><em>(77%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:10px;"><em>(10px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--11"><em>(85%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:11px;"><em>(11px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--12"><em>(93%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:12px;"><em>(12px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--13"><em>(100%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:13px;"><em>(13px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--14"><em>(108%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:14px;"><em>(14px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--15"><em>(116%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:15px;"><em>(15px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--16"><em>(123.1%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:16px;"><em>(16px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--17"><em>(131%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:17px;"><em>(17px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--18"><em>(138.5%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:18px;"><em>(18px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--19"><em>(146.5%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:19px;"><em>(19px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--20"><em>(153.9%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:20px;"><em>(20px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--21"><em>(161.6%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:21px;"><em>(21px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--22"><em>(167%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:22px;"><em>(22px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--23"><em>(174%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:23px;"><em>(23px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--24"><em>(182%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:24px;"><em>(24px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--25"><em>(189%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:25px;"><em>(25px)</em> Lorem ipsum dolor sit amet, consectetur.</p>

    <p class="cssfonts--26"><em>(197%)</em> Lorem ipsum dolor sit amet, consectetur.</p>
    <p style="font-size:26px;"><em>(26px)</em> Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</body>
</html>
