Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
font-size unit comparisons
<!doctype html>
<html>
<head>
<title>Font-size unit comparisons</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
}
div {
border: 1px solid #000;
padding: 10px;
margin: 0 0 10px;
}
#px {
font-size: 16px;
}
#pt {
font-size: 12pt;
}
#em {
font-size: 1em;
}
#percent {
font-size: 100%;
}
</style>
</head>
<body>
<div id="px">
<p><del>Karl Pilkington's got a head like a Fucking Orange! - px</del></p>
</div>
<div id="pt">
<p><del>Karl Pilkington's got a head like a Fucking Orange! - pt</del></p>
</div>
<div id="em">
<p>Karl Pilkington's got a head like a Fucking Orange! - em</p>
</div>
<div id="percent">
<p>Karl Pilkington's got a head like a Fucking Orange! - %</p>
</div>
<img src="http://www.google.co.uk/images/nav_logo72.png" alt="Check we're not zooming" />
<p>Image added to help ensure fonts are being scaled not zoomed.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.