Foliovision

Main navigation

Affordable VAST/VPAID for Wordpress has arrived. Serve ads with your videos starting today!

WordPress Responsive Design Calculator: Pixels to REM

/ / 36 Comments

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. 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
Line-height

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

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

Viktor Klimo

Viktor Klimo

Viktor comes from Bratislava. During his university studies of Journalism and German language he moved to Nitra. After his studies he spent nearly 3 years in Sydney. Apart from fatherhood and design, he is passionate about food and coffee. He maintains one of the oldest Slovak foodblogs at delikatesy.sk.

Reader Interactions

Comments

  11. 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 :)

    Reply

  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!

    Reply

  17. 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.

    Reply

  19. 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

    Reply

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

    Reply

  24. 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.

    Thanks.

    Reply

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

    Reply

  30. 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.

    Reply

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

    Reply

  35. 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.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You can click here to Subscribe without commenting

All materials © 2024 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com