Moving from static to flexible layouts involves a move from absolute to relative measurements. That generally means giving up px in favor of ems for vertical measurements and % for horizontal measurements. A question that continues to get asked is whether or not it’s ok to still use px here or there.
The short answer is no. The longer answer is I don’t believe in absolutes and as we’re moving away from absolute measurements and towards relative ones, let’s not be so absolute with an answer to the question.
Why Relative Measurements?
Responsive isn’t buzzword. It’s a change in thinking about how we develop websites. For a long time we had been creating fixed width and usually centered sites thinking it gave us more control over our designs. We inherently knew the web is a flexible medium and our static methodology wasn’t the right answer, but creating a well designed flexible experience didn’t seem possible, at least not without considerably more work and a lot more compromise than we’d like.
As the number of mobile devices increased and as more and more people began using those devices, it became clear the control we thought we were giving ourselves was an illusion. Fortunately Ethan Marcotte came along and showed us that the technology was there to develop flexible sites well and without as much effort as we thought.
You can’t have some parts of a design adjust to various conditions while others remain fixed and still maintain the proportion between them.
When you create a grid or any kind of layout in general you set it up around some fixed measurement. In print this measurement is the size of the page. It’s a fixed constraint you have to deal with and it becomes the starting point. When we moved to the web we took all our understanding and work designing around a fixed canvas and wanted to apply it so we arbitrarily fixed the canvas.
We took something that wasn’t a constraint and created an arbitrary constraint to make our lives easier.
We’ve now come to realize that a fixed size isn’t a constraint we should design around. In giving up the notion of a fixed canvas we need to find another fundamental element to design grids and layouts around, which might include:
- a measure of text
- the size of a banner ad
- the size of an image
A measure of text (probably the best fundamental element for most sites) isn’t fixed or it shouldn’t be. It should vary with font-size and line-height. Even things that seem static like an image or ad change size in a responsive layout.
Grids and layouts are no longer about absolute widths and heights. They’re about proportion and scale. A column in an 8 column grid is 12.5% of the total. The gutter on each column might be 15% of the total column width. As soon as you start introducing an absolute measurement into the mix it throws off the rhythm and proportion. You can’t have some parts of a design adjust to various conditions while others remain fixed and still maintain the proportion between them.
But Ems and % are Difficult
The biggest reason people hang on to px is they’re easier to work with. There’s no math involved. You use your eye to choose how many px and you’re done.
With % you have to keep track of the container. 80% of what? The body? The main container div? The paragraph? With ems you have to deal with the cascade. 0.875 of 1 is easy enough to calculate, but 0.875 of 0.925 of 0.75 becomes a mess.
The math itself isn’t really that hard, though even with a calculator it can be hard to keep track of. It’s the bookkeeping and remembering what you’re dividing by what that’s a pain. It’s more math and bookkeeping than any of us wants to do. And let’s face it none of us likes seeing numbers like .80952381 in our css.
There are solutions. Preprocessors like Sass and Less will let us set some basic proportions and do the math for us through mixins and functions. It’ll look messy in the end, but we’re spending time in the clean preprocessed file.
Another solution, the rem, is just about ready for prime time use. It eliminates all of the bookkeeping as all the division is relative to a single root element. IE8 and below as well as Opera Mini won’t like our use of rems, though combined with a preprocessor we can still make them work.
Sure no one wants to do the math or bookkeeping, but it’s not really an excuse not to use relative measurements. It isn’t that hard and there are solutions now and on the way to make it easier.
Can I Still Use Px?
The question usually doesn’t get phrased in any way that asks when are px a better choice, but rather when is it ok for me to skip all the math and make life easy for myself. I’ve seen all sorts of responses that say you should use relative measurements, but not to beat yourself up for using px.
Even though I can’t think of a single reason why px are the better option at this point, I won’t tell you that you can never use them. Like I said I don’t believe in absolutes. Just because I can’t think of a reason, doesn’t mean a reason doesn’t exist. In fact in a moment I’ll share how px still end up in my own work despite my not thinking they should.
Again if the point is to develop flexibly and relate elements to each other proportionally then using absolute measurements makes no sense as they’ll always throw off the proportion and inhibit flexibility.
So how do px find their way into my work even as I seem so dead set against them? When tweaking a design it’s sometimes quicker to drop in some px and adjust than it is to keep doing the math over and over. Ideally these px get converted to ems or % once you’ve settled on an amount. Unfortunately it can be all too easy to forget and leave the px in.
One place I still specifically use px is border-widths. Often what I want is a thin line around an element and I don’t want the line getting thicker as the browser or font-size grows. There can also come a point on smaller screens where through rounding your border goes to 0 and disappears.
Relative measurements with min and max widths are the better solution and even here using a single px can throw proportions out of whack. Probably not to the eye, but then again how often have you had to correct a completely broken layout because something was a single px off?
I also still set px on images, though max-widths and heights of auto don’t make those px so absolute.
Is it ok to use px then? I’m still having a hard time thinking of a good reason, but it’s not for me to tell you what you have to do and one more time I don’t believe in absolutes. If you have a good reason for choosing px over em or %, then go ahead and use px.
However, I’d strongly suggest your reason should be more than wanting to save yourself some math and bookkeeping. Have a reason for why it improves your design beyond how it helps you avoid a couple of things you’d rather not do.
Summary
The shift toward responsive design is in part a shift toward flexible layouts. It’s one of the big 3 of responsive design after all. Much of this flexible shift is a move from absolute measurements like px to relative measurements like em or %.
We’re no longer designing to a fixed canvas. We’re designing proportionally to something within the content like the measure of text or an ad unit. Proportion requires relative measurements, especially when the elements you build that proportion around don’t have a fixed size.
Sure ems and % can be a pain to work with at times. The math gets ugly because of the cascade and we get lost in the bookkeeping. We have tools to help us deal with these things, though.
We have calculators and preprocessors and even better rems, which work most everywhere with fallbacks where they don’t.
I won’t tell you that you have to use em and % and never include a px measurement in your code, however I struggle to find any legitimate reason not to, assuming you’re developing a flexible layout. If you are going to choose px please have a reason other than not wanting to do the math.
Download a free sample from my book, Design Fundamentals.
px is a great for quick low-budget projects because it keeps the hours down. It’s not always about what is easier for us as the developer but you have to look at the overall project use. If it’s going to take you an extra 2-3 hours worth of “math and book keeping” on a project with a budget then is it really worth it?
Also, one thing that I’ve noticed in mobile browser testing is the very slight difference between how Android and iOS render font-size using em vs px. In some cases it was just enough to be the 1px off and break the layout of the site, so we ended up using px on the font of the site.
Yes em is great for flexibility, but really you can do the same thing with px. I don’t believe one is any better than the other.
Would tend to agree with you Matt. There are no “absolute” solutions per se. We use a combination of %, em & px with media queries to get the job done.
This includes varying graphics pushed to the browser depending on screen resolution (until, of course, SVG support finally becomes 100% mainstream)
Hopefully SVG does become more mainstream, at least for the images where it can work well.
Is it really 2-3 hours of extra work for the math though? I can’t honestly say it’s taken me more than 15 minutes (if that to do the math) You end up using similar values across a design so it’s more doing a little math once and writing the numbers down somewhere.
If you’re using a css preprocessor you don’t even have to do the math.
I do understand we have to take client budget into account, but I don’t think going from px to em eats into the budget in any significant way.
Personally, I’ve been moving away from absolute pixel measurements in my web development projects and incorporating relative measurements to achieve a more flexible/responsive site. In doing that, I developed an iPhone app called Pixel Coder, available for download on iTunes, that helps with the conversion calcs. Check it out at this link –> https://itunes.apple.com/us/app/pixel-coder/id592586465?mt=8
Thanks John for another option to make the math easier.
And the reason you use pixels in your css on this website is…? Practice before you preach.
I’m using it on images and borders as i mentioned in the post. Did you read it? Or did you spend the time deciding which anonymous name to hide behind?
Not to be argumentative, but I just took a look at it myself and he’s not wrong. In fact, nowhere is a height set using em, and you have a line-height set in pixels (which seems directly perpendicular to what this article is preaching).
I’m not taking what you said as argumentative. The person who commented above was just a troll, which is why I answered as I did.I don’t think that describes you though.
Are you looking specifically at the styles I wrote for the theme or are you looking at the styles set by 3rd party plugins?
There’s no question I used px occasionally when developing this site. In fairness to me the current design of this site was launched about six months prior to this post and most of the code predates the launch by a few more months.
I just counted and there are 47 px references in my stylesheet. 33 of them are in two blocks of code, one of which is commented out. The other block is for positioning of the social icons at the bottom of the page. Most of the rest are from 3rd party plugins.
As I said in the post I did use px for borders and I used them on some images. I notice over the years that here or there I introduced some px back. However, if you look through the css, you’ll see that other than what I just mentioned, the majority of px you see in the css come from 3rd party plugins.
I don’t have control over how those are written. Sometimes they need modification to fit with the theme and at times I probably stuck with px over em or % instead of digging into the 3rd party stylesheet.
As far as never setting height using em, I guess this line of code on #top-bar doesn’t count as it is set as height: 0.375em. I can’t find a single example where I set line-height using px either. I count line-height used 25 times in my stylesheet and all 25 times it’s defined unitless as in line-height: 1.625. Maybe what you’re using to view the source computes the px and shows them, but they aren’t my stylesheet for line-height.
I don’t think it’s fair to say I’m not practicing what I’m preaching with this article just because a few px find there way in. Especially when the article itself says they’re there.
My own site almost entirely makes use of relative measurements with a percentage grid and em-based media queries. The real gains of this approach is that it allows the user more freedom to resize the site as they want.
If we’re going to truly embrace our fluid canvas, we should also recognize that some people aren’t going to stick with our 100% zoom initial layout. Some will zoom in to read it a little better, and with em-based media queries the design simply shifts to accommodate. I don’t bother locking in the maximum scale anymore, because to me it just adds another constraint for the user to fight.
Likewise, if we make our breakpoints content-dependent rather than device-dependent, we’re set for just about any resolution the device landscape can throw at us. My goal for this year is to build interfaces that are truly formless like water, or as close to formless as I can get.
Nice site. I just took a look and yep everything grows and shrinks nicely when I resize the font.
Good point about how people will view our sites. I would suspect most people view it as is and don’t change anything, but that’s certainly not everyone. I’m sure some people have their browser automatically size things bigger or smaller.
I’m with you on the breakpoints too. When I originally designed this site I had used px breakpoints, but some time later I converted everything to ems. I’m after that same formless water like layout too.
Thanks for having a look, Steven. I also agree we shouldn’t deal in absolutes with web design & development. We have standards, but even they constantly evolve to fit the shifting landscape.
The thing I love most about this industry is that we shape the web, for better or worse, through our actions that are informed by the medium we build upon.
Speaking of relative measurements, what do you think about the viewport-relative units? I’ve considered experimenting with vw and vh in particular. As Snook suggested, they might be best used for media and document elements like images, but that largely depends on their adoption and leverage with designers.
At this stage it’s difficult to argue for viewport-relative units in a production environment.
Happy to look Chatman, especially when there’s something nice to look at too.
I hear you about being able to shape the web. I like that too. I sometimes think about future generations and how they’ll look back at the work we’ve done and what they’ll think.
You know I haven’t looked too much at vw and vh yet. I’ve seen them and they look pretty nice, but I know the support isn’t quite there yet. I’m pretty sure I start notes about them for a blog post at some point.
The one point where I’m not so sure about them is they size things relative to the viewport. I think sizing things relative to the content makes more sense. However, there are clearly uses for sizing things relative to the viewport. Jonathan Snook mentioned light boxes, which would definitely make sense.
I only have one concern about ems: smart tvs. How can we ensure that the context font size will be sufficient? Surely the user can change it but what about those who aren’t so technical? I would feel better just setting a font size so I wouldn’t have to worry about those variables. What are your thoughts?
The truth is you can’t really ensure how a person will view your site anywhere so you’re better off making things flexible and doing your best to account for the uncertainty.
I’m not sure how smart TVs set font sizes, but in general if you set something like font-size: 100% on the html element of the body you at least know you’re measuring everything relative to the default size. From there is you stick to ems and % your site should be able to adjust itself and still hold together. There’s certainly more to it than just that, but the general idea is relative measurements are more likely to display well if the viewer adjusts font-size.
Em based layout, grid and defaults are the way to go. However, I do find there are many instances when I don’t want scaled proportions at different screen sizes, like you mentioned with the border issue.
Another thing to consider is that, historically speaking, browser and device manufacturers will pander to the lowest common denominator. Apple’s decision to simply double the pixel ratio of their “Retina” screens is a good example of that, or remember when browser zoom just increased text size but not the entire page?
I’m with you on em based layouts. More and more I’m finding I so want scaled proportions, but there are still times, like with the borders, where I might still go with an absolute measurement. I find a really think border might disappear when set in ems or it might get too thick. There aren’t too many times though where it’s an issue.
Good point about browsers and device manufacturers. I guess we can always count on them pandering to the lowest common denominator. I suppose their consistency is something useful. 🙂
thank u for sharing.btw,you
Copyright © 2005–2014 Vanseo Design isn’t visiable well in the footer,i use chrome33.0.1750.146. 🙂
Thanks. I’ll see if I can fix it.