Font sizes
Absolute and relative units.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font sizes</title>
<style>
* {
margin: 0;
}
body {
font-size: 20px;
line-height: 1.5;
margin: 20px;
}
code {
color: #c00;
}
h2, #htmldog {
margin-top: 20px;
}
#len1 {
font-size: 12px;
}
#len2 {
font-size: 12pt;
}
#len3 {
font-size: 12q;
}
#len4 {
font-size: 1.2ex;
}
#len5 {
font-size: 1.2em;
}
#len6 {
font-size: 1.2vmax; /* not supported by Internet Explorer */
}
#pc1 {
font-size: 50%;
}
#pc2 {
font-size: 100%;
}
#pc3 {
font-size: 150%;
}
#kw1 {
font-size: x-small;
}
#kw2 {
font-size: medium;
}
#kw3 {
font-size: x-large;
}
</style>
</head>
<body>
<h1>Font Sizes</h1>
<p>Font sizes can be set using the <a href="http://www.htmldog.com/references/css/properties/font-size/"><code>font-size</code></a> property, the value of which can be a length, percentage, or keyword.</p>
<h2><a href="http://www.htmldog.com/references/css/values/length/">Lengths</a></h2>
<h3>Absolute lengths</h3>
<ul>
<li><code id="len1">font-size: 12px</code></li>
<li><code id="len2">font-size: 12pt</code></li>
<li><code id="len3">font-size: 12q</code></li>
</ul>
<h3>Relative lengths</h3>
<ul>
<li><code id="len4">font-size: 1.2ex</code></li>
<li><code id="len5">font-size: 1.2em</code></li>
<li><code id="len6">font-size: 1.2vmax</code></li>
</ul>
<h2><a href="http://www.htmldog.com/references/css/values/percentage/">Percentage</a></h2>
<ul>
<li><code id="pc1">font-size: 50%</code></li>
<li><code id="pc2">font-size: 100%</code></li>
<li><code id="pc3">font-size: 150%</code></li>
</ul>
<h2>Keywords</h2>
<ul>
<li><code id="kw1">font-size: x-small</code></li>
<li><code id="kw2">font-size: medium</code></li>
<li><code id="kw3">font-size: x-large</code></li>
</ul>
<!-- Link back to HTML Dog: -->
<p id="htmldog"><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>