HTML Dog
Skip to navigation

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>

Output

View original