Easy way to convert pixels into the “em” unit without Converter

Image for post
Image for post
Photo by Chris Liverani on Unsplash

To make a responsive website, there is no alternative to use em. But converting pixels into em is daunting for some people. People also use an online converter to convert pixels to em. But they don’t need to. I will show you an easy way to convert pixels into em. Before start, you need to understand the full concept. SO, don’t skip anything

Base Pixel:

By default, browser font size is 16 px and we know that 16px =1em. Now do some school math.

Image for post
Image for post

I called these values(16px,32px,48px,64px) base pixels. We will calculate other values with respect to these base pixels.

Tip-1: Memorise these base pixels. Remember that for an increase of 16px, em is an increased by 1

4 Increment:

But what about values like 20px, 36px, 60px? They all are 4px away from their respective base pixel. Let’s do another math:

Image for post
Image for post

So for every 4px em value increases by 0.25em. Such as:

Image for post
Image for post

Tip-2: For every increase of 4px from the base pixel, em is increased by 0.25

8 increment:

Suppose we have 40 pixels, it is 8 px away from its base pixel 32.

Image for post
Image for post

Tip-3: For every increase of 8 px from the base pixel, em in increase by 0.5

Summary:

Using these laws, we cal do almost 90% of the task of responsive web design. Let’s recap :
Tip-1: Memorise these base pixels. Remember that for an increase of 16px, em is an increased by 1

Tip-2: For every increase of 4px from the base pixel, em is increased by 0.25

Tip-3: For every increase of 8 px from the base pixel, em in increase by 0.5

Tip-4: For every increase of 32 px from the base pixel, em is increased by 2

Tip-5: For every increase of 160 px from the base pixel, em is increased by 10

Conclusion:

IF use understands these 5 tips, you will no longer need to use the pixel to em calculator anymore. I hope this article is helpful to you. Follow me for more articles.

Written by

Front-End Developer & Tech Writer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store