How to Convert Pixels to Ems

If you work with CSS a lot, and especially if you work with a lot of responsive and mobile friendly designs, then you probably know the difference between pixels and ems. But just in case, here’s a little rundown for you: pixels are fixed values of measurement that can be used to define the size of a number of different HTML elements. Pixels can be used to define the size of a font, or the width and height of a div, for example. But when you define size using pixels, that size is static, so a div that is 500px wide will display at that size regardless of whether or not it’s viewed on a desktop or a mobile device (most of which are smaller than 500px wide).

Ems, on the other hand, are scalable units of measurement. An em is equal to the current font size, so they’re a lot easier to use to control the size of elements based on the viewport. If the width of a div is always 10em, then all you have to do is change the font size of the body of the web page and the div’s width will change accordingly. This makes it a lot easier to change sizes of elements based of viewport size, because you only have to change the size of one element (font-size) to change them all.

But for a lot of designers and developers, pixels is how they learned and what they’re used to. If that’s the case, then you’re in luck — there are pixel to em converters that can be used so you know exactly how many ems to make an element! Check out the list of some of the best converters below.

1. Px to Em

Screen Shot 2017-05-11 at 5.31.40 PM

Px to Em provides you with handy reference tables that reveal conversion rates based on the base font size. If you don’t feel like looking it up, you can also just enter all the information into their converter and you’ll be presented with your custom conversion.

2. W3 Schools

Screen Shot 2017-05-11 at 5.33.38 PM

Another great way to convert, this converter takes all the guess work away and doesn’t provide tables or charts. Simply enter in your default pixel size (FYI, on most browsers this is 16px, but if you’ve changed it to something different using CSS, be sure to account for that), and the px or em that you’d like to convert to the other unit of measurement. This converter does px to em and vice versa, so you’ve got all your bases covered.

3. Em to Px

Screen Shot 2017-05-11 at 5.36.09 PM

This is another great converter application that just about achieves the same effect as the other two on this list, but it has a really clean design and is very straightforward and easy to use.

No matter which converter you use to go between px and em, your responsive designs will thank you, and so will your schedule. You’ll definitely notice less time spent on responsive styling if you switch from fixed pixel units of measurements to scalable, mobile-freindly ems.

8 Free Icon Sets for App Designs

Screen Shot 2017-05-11 at 5.04.53 PM

Designing an app and looking for some free icon sets that you can use on iOS and Android? Look no further. We’ve curated this list of some generic yet stylish and current icon sets that will make super additions to any of your app designs. Not only can you use the icons on iOS and […]

Read on...

How to Use CSS3’s Transition Property

Don’t be intimidated by CSS transitions! They might seem complicated if you know nothing about them, but really, they’re pretty straightforward and easy to implement. A transition animation occurs when a value of any property of an element is triggered to change — often something like this happens when you’ve implemented a hover effect. Let’s […]

Read on...

How to Use CSS3’s Z-Index Property

In CSS, the z-index property can be used to specify the order of an element. Traditionally in HTML, elements that appear later on in the code take precedence over the ones that come before them. So for example, if you’ve got a <div> element that comes before a <p> element and the two elements happen […]

Read on...

How to Jazz up your Website Background – and Have Fun With It!

Introduction Coding a layout that brings together content successfully can be difficult. One great way to add a creative touch is by using images as your background — or altering the background in general. This may seem like a technical job, but coding allows for maximum flexibility in the task. Before we begin, it’s important […]

Read on...

How to Create a Vertical Split Text Effect with CSS

Screen Shot 2017-04-30 at 2.20.41 PM

We’ve already learned how to use CSS to create a diagonal split text effect on this site, so now we’re going to show you how to do the same effect horizontally. This is one of those effects that looks like it might be difficult or complicated to create, but the code is actually super straightforward. […]

Read on...

7 Free Icon Sets for Spring

Screen Shot 2017-04-30 at 2.24.11 PM

Finally, spring has arrived! If you’re feeling inspired by the season and want to insert a little spring fling into any of your web pages or projects, we’ve got just the thing. What follows is a curated list of some of the best free icon sets out there that are perfect for this beautiful time […]

Read on...

How to Use this Free Summer-Inspired Color Palette

summer

It’s never too early to start thinking about your summer color schemes and themes! Summer is just around the corner, and if you’re so far uninspired by the season, check out these 5 bright, summery colors that are sure to get you in the mood for warm weather and barbecues. We’ve got a soft mustard […]

Read on...

10 Fun CSS Snippets for Dog Lovers

Screen Shot 2017-04-25 at 5.08.56 PM

If you love dogs, then you’re going to love this collection of CSS snippets that are all about creating realistic (or occasionally not so realistic) depictions of man’s best friend. The dogs on this list are animated, interactive, and would surely make fun additions to any project or website. Feel free to customize any of […]

Read on...

How to Use CSS’s Vertical-Align Property

Screen Shot 2017-04-19 at 5.31.14 PM

Aligning elements vertically is a lot different from aligning them horizontally. There are a few different ways we can align elements horizontally, or center elements horizontally, either using the margin properties or the text align properties or some complicated combination of one of those and some tricky jQuery. There is one best way to align […]

Read on...