WordPress Responsive Design Calculator: Pixels to REM

We are really busy here at Foliovision, designing and launching a few websites per week.

Most of our sites are custom designs built on top of existing themes. We really like the bundled WordPress theme TwentyTen. Recently we’ve started the move to responsive design and have started working with TwentyTwelve (Twenty Eleven was a bit of a dog, neither fish nor fowl).

Responsive design means calculating REM units. As a designer, my math is kind of crappy. Especially the doing it in the head kind. I don’t like to fill my head with figures when I’m working on making a site look good.

Calculating sizes means some extra work time, as all dimensions (widths, heights, margins, paddings, line-heights) have to be calculated double, one in pixels as a fallback option and one in REM. Plus you have 3 different screensizes set up in the CSS. That means 3 different calculations just for one element. Not to speak of the fact, that line-height has a different variable from the rest of the mesurements.

To make my (and yours easier), I asked the programmers here (thanks Peter) to build a simple calculator to convert pixels to REM units so we can get on with our lives.


Just type the value in pixels and hit Enter. You will get two results – one to be used for font-size, width, height, margin, padding and the other result for line-height. There are two calculators, because TwentyTwelve is using 14px=1rem as the initial variable, but some other themes might be using 16px=1rem. Always check your theme first for initial font-size and pick the calculator that applies to you.

REM SIZE CALCULATOR (font-base 14 / line-height 24)


REM SIZE CALCULATOR (font-base 16 / line-height 26)


Tip: A single click then selects the whole result, after that you can copy and paste it to your CSS.

Please let us know if you have any ideas on how we can improve this. I hope it helps you as much as it helps me (and our other CSS designers).

Further thoughts on responsive design and specifically TwentyTwelve

After having the calculator in place, it gave us more freedom to explore the different nuances of responsive themes. So we started to play around. At the moment we can sum up our ideas in a few points, but more testing was already done and we will update the list soon.

  • There are situations, where the elements will jump all over the place. As said above, 3 different screensizes are covered in the CSS file. Especially when you are close to the border to the next screensize, some elements might slip.
  • You also have to remember, that it’s written in HTML5. Which means, fallbacks for IE7 and IE8 have to be in place.
  • You have to leave a significant portion of your CSS tricks behind, as these simply won’t work anymore. With a flexible theme you just cannot give the element a fix-sized wrapping div. Floats behave sometimes nasty too, when resizing a browser window.
  • Responsive themes might have some new limitations, so a close cooperation between designers (CSS and Photoshop) is a must. CSS designer must pick up the new scheme and communicate what is possible and what is not.
  • My impression so far is that TwentyTwelve is a great theme, but since it’s built mobile-first, content and structure would have to adjust to the theme, not the other way around. Let’s not forget this when tempted to bulk up the theme to a complex one.

Helpful Extract from TwentyTwelve style.css intro comments:

/* =Notes
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:


$rembase: 14;
$line-height: 24;


---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
padding: 5px 0;
padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
font-size: 16px
font-size: 1.142857143rem; (16 / $rembase)
line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
margin: 24px 0;
margin: 1.714285714rem 0; ( 24 / $rembase )

Further reading

Font Sizing With REM
Type study: Sizing the legible letter

This entry was posted in Design, WordPress. Bookmark the permalink.

36 Responses to WordPress Responsive Design Calculator: Pixels to REM

  1. Channy

    Thanks for this post.

  2. Pieter Goosen

    Thanks for the calculator, make my job so much easier

  3. Georges

    Merci beaucoup ! cette page me sera bien utile …

  4. Roberto Chahim - Brazil


  5. Debanjan Paul

    This px to rem calculator is really good…

  6. Flame Denise

    You’re such a darling. this tiny calculator is really helpful. Thank you very much. ^_^

  7. Thiago Fagundes

    Awesome calculator, thank you! :-)

  8. Larry

    the calculator is great. Thanks alot.

  9. Jay Khatri

    I never understood why and how to use em and rem. Anyways, you calculator is just release of pain.

  10. Lin

    calculator does not work:
    24px is 1.5rem not 1.71428571rem!!!

  11. Louisa

    Thank you so much! That calculator has saved me loads of time :-D Someone left a comment saying it ‘does not work’ – to be honest, I don’t have time to check whether the calculations are spot on but I don’t care – it’s close enough for my purposes :)

  12. Hi Louisa,

    Glad we could help. We use the calculator all the time. We’d be happy to update any issues that anyone finds.

    Share it with your friends and let us know if there’s anything else we could add for you.

    I wish you joy in your design and coding!

  13. Seb Barraud

    Very usefull ! Thank you

  14. paolo

    hi i’d like to know if this will also work on element sizes? or better to use percentage? thanks

  15. Georgie


    I’m new to wordpress & this tool has been a dream! It’s my new number one bookmark.

    thanks again

  16. Emily Capito

    So helpful! Thanks!

  17. Dylan Archer

    I love tools like this and greatly appreciate the hard work put into bringing a tool to everyone like this; however, are these calculations accurate?

    e.g. I am use to 16px equating to 1rem/em, where as here it is equal to 1.143rem (rounded) that’s a fairly large adjustment and around a 2 pixel difference from what I am familiar with.

    Really, I just wonder if the calculations are basing itself on the font-family you’re using (seeing as em/rem is based on the width of the letter “M” for whichever font you’re using)
    OR if these are actually more accurate on a sub-pixel level
    OR if the calculations are off slightly?

    I’m no measurement unit guru, I’m just familiar with a different set of numbers than the ones being generated here, so don’t take this as an insult, more of a inquiry of curiosity.

  18. Pingback: Pixels, Ems, and Rems | Triple Threat Websites

  19. Hi Dylan,

    There are some small discrepancies. We’ll work on improving the calculator again soon.

    Thanks for your notes.

  20. viktor

    Hi Dylan,

    the units are not dependent on fonts but on the initial font-size declaration. As the article states, but maybe wasn’t clear enough, the calculator is based on the TwentyTwelve theme. Which in this case means
    html {
    font-size: 87.5%;

    If you have set this to a different size, the rest of the math will look just different. We probably won’t do adjustments to this calculator, as it would ruin the ease of use. Now it’s a minimum of keyboard shortcuts, to get the REM result copied to your clipboard. So additional options would just slow down the process.

    In the meantime we’ve moved to TwentyThirteen, which is not using REM units anymore. I’ll do an update to the post about that.


  21. Actually Dylan, we will be releasing a version which allows you to change the starting point in REM, as well as a calculator for TwentyThirteen (based on pixels).

    Thanks for your question!

  22. Dylan Archer

    Thanks for the update guys. That explains a lot. Keep up the great work!

  23. Istvan HOLCZER

    Thank you very-very much!!!!!!

  24. Fantastic! Thank you so much for this!

  25. André

    Hi pal.
    Thank you for your calculator, I use it a lot.
    If would be great if at the bottom of the form the values were shown at the following text format:

    font-size: px
    font-size: rem;
    line-height: ;

    in order to be easy to copy past to my css.


  26. Pankaj Vagare

    Thank you so much for this!

  27. Robin Button

    I love this calculator, and use it all the time as I build my Twenty-Twelve child themes! Thank you so much!

  28. Hi Robin,

    Thanks for your kind words. They are much appreciated!

    Have a wonderful holidays!

  29. Marcin

    Awesome!! Can you share this as wp widget or xls file ? :)

  30. Hi Marcin,

    Thanks for writing.

    I think the calculator works just great here. And it saves us managing lots of updates.


  31. Paula Clagon

    Awesome. I am so new to wordpress, this help me tremendously. I kept asking the question in google about this px and rem and it lead me to your site. What a freaking life saver.

  32. Carol


    Is this still working? I love this calculator but I seem to be having problems using it today.


  33. Thanks for the heads up Carol. We’ll get it fixed.

  34. Carol

    Thank you for fixing this! I’ve found this to be very useful!

  35. Hi Carol,

    You’re welcome! Ironically, it was the WordPress built-in post editor which broke the calculator when we turned off our Foliopress WYSIWYG which allows code to live inside a post.

    Thanks for letting us know!

  36. viktor

    Hello all,

    we’ve just added a second calculator, that is using a different font-base for it’s calculations – 16px. The previous one for 14px works as before. Always check your theme style.css for initial font-size and use the coresponding calculator.

    Thank you for all your input.

Leave a Reply