EMs, Percentages – Keeping it in proportion
Why should we consider switching over to EMs?
For close on five years now the desktop is no longer considered to be the number one device for web consumption. On 16 April 2015 an article in the Drum.com reported that UK mobile use tops desktop and laptop usage for the first time, demonstrating some key statistics sourced from emarketer.com at how the average time viewing web content on mobile devices had exceeded the desktop. In the US this trend has been long established, an article published in July 2014 stated Mobile Exceeds PC Internet Usage for First Time in History, with a graph from comScore demonstrating that the average time on desktop devices had exceeded desktop in the region of 25%.
So, with the argument made – let’s see how EMs work
EMs scale proportionally to your viewport. For example if you set a base font size in your body element to 16px, which is the average readable size for most fonts on most devices, 1em will be equal to 16px and 2em will be equal to 32px and so on.
A practical example:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<style>
body
{
font-size 16px;
font-family: arial, helvetica, sans-serif;
}
h1
{
font-size: 2em;
}
h2
{
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>Sample Title 1</h1>
<h2>Sample Title 2</h2>
<p>This is paragraph text</p>
</body?
</html>Expected output:
Why does this matter for other devices?
The problem with the pixel is that it is an absolute fixed unit of measurement. 16px will remain 16px which can cause a real problem when viewing data on high resolution viewports where you have hundreds more pixels per inch to contend with. So all of a sudden that 16px average font-size you set is going to end up being pretty small!
Using EMs will mitigate for this by scaling proportionally based on the resolution.
And Percentages?
Well, percentages and EMs in terms of scaling in proportion to the viewport behave in exactly the same way.
A practical example:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<style>
body
{
font-size 100%;
font-family: arial, helvetica, sans-serif;
}
h1
{
font-size: 150%;
}
h2
{
font-size: 125%;
}
</style>
</head>
<body>
<h1>Sample Title 1</h1>
<h2>Sample Title 2</h2>
<p>This is paragraph text</p>
</body?
</html>Expected output:
Right – I’m sold – so what do I use and when?
My preferred method is setting the base font-size to 100% in the body – which takes the normal text size of the browser – around 16px and then using EMs to adjust the size of the text accordingly.
And there’s more…
As well as sizing text you can extend EMs and percentages to scaling other web elements as well such as <div>, etc. Also <img> – scaling images using percentages for example is an excellent technique for producing responsive images across devices.
Set yourself a challenge!
Next web project you do try and eliminate the use of pixels all together – trust me you’ll neve look back! It’s a big timesaver and less of a headache in producing portable web content.