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.

Instructions

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. The calculator uses 14px=1rem as the initial variable and is built for adjusting the TwentyTwelve theme.

REM SIZE CALCULATOR

Rem
Line-height

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.

23 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

    thanks!

  5. Debanjan Paul

    This px to rem calculator is really good…
    Thanks!!!

  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

    Hi

    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.

    thanks

  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!!!!!!

Leave a Reply