Skip to navigation

Font sizes

Absolute and relative units.


<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Font sizes</title>
	* {
		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;
	<h1>Font Sizes</h1>
	<p>Font sizes can be set using the <a href=""><code>font-size</code></a> property, the value of which can be a length, percentage, or keyword.</p>

	<h2><a href="">Lengths</a></h2>

	<h3>Absolute lengths</h3>
		<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>

	<h3>Relative lengths</h3>
		<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>

	<h2><a href="">Percentage</a></h2>
		<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>

		<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>

	<!-- Link back to HTML Dog: -->
	<p id="htmldog"><a href=""><img src="" alt="HTML Dog"></a></p>


View original