I jumped into a discussion on another forum regarding font sizing and a couple of its members insist PX font sizing is bad.
Now me, ive always used PX font sizing and have built a few sites using EM and % as well, i find them messing up my designs so have always preferred PX. I set the padding, margin and other elements in PX so it just makes sense to me. Im talking about fixed width sites at the moment, i havent had a fluid site to build for a long time and dont like them. Im trying to learn responsive design and I understand using @ media queries you cant use EM font sizing?
I know from an accessibility point of view, EM or % should be used but every time i do all the text etc just spills outside my divs and the design is ruined. Ive just been playing with the font sizing on my personal site and its becoming a headache using EM and %. When you zoom on a modern browser it zooms in all elements of the page and its fine to use PX.
On my personaI site ive just set my body font to 100%, then the P to 85%, the H2 to 110%, the footer menu to 75% etc. Everything looks fine. I go into my browser settings (Chrome) and change the font to Extra Large, go back to my page and everything is messed up. The main text is all outside the div its sat in, the menu is messed up on two lines. I have a twitter feed, this is 220px by 500px and has a background image the same size. If i use a font other than PX the text spills outside the background by setting the browser font to large/extra large and it doesn't work. I then click onto this forum and everything is as it should be. I had a nosy at the CSS and the font sizing is set to PX. There is a another stylesheet with various EM and % variations on some elements so i presume some debugging has been done to eliminate some of these issues.
Some of the points raised was the fact that different devices have different dpi, whether its 96, 120, 144 etc and you can override the font sizing by changing the system font size. I cant change any font sizing on my iMac apart from in the browser so nothings overriding my stylesheets, and in fact the test i just did on Chrome when i changed to the very large font was overridden by my PX font sizing anyway, the same in Firefox and and Safari.
I thought this would make a good topic so what do you all use? i want to hear all arguments as im a couple of months into a new web design venture and want to make sure on a commercial level im doing the right thing by my clients.
@joshuanhibbert that article is now 5 years old. Some points may be relevant, but it is out dated in many ways. Px based design is now growing in many ways because browsers now use zoom to enlarge the page vs text resizing.
Do you use PX like me? As we both have said, browsers zoom in all the content so everything stays relevant, when you have a fixed size div and text in EMs or % you have no control over the layout if the reader increases the font size. You cant build every site with fluid divs and heights etc because you couldnt have any control of the design and the maths would be crazy. I think responsive design is the way forward, im trying to learn this at the moment.
In my mind, the design should stay as the designer intended thats why i use PX. When i zoom in on a webpage on my 50" living room plasma, my designs work fine using PX. If i read it on my iPhone, im still able to view it perfectly. To me thats how it should be. If a person is visually impaired and needs to increase the font size, shouldnt the other elements on the page also increase so they can see them clearly too? Thats what the modern browsers are doing.
@springlab I feel that it is actually the other way around. Pixels don't offer nearly enough flexibility in todays age of responsive design. I firmly believe that pixels have had their time in the spotlight, but now the future will be better off with measurements like rems.
Just to make myself extra clear, I am not talking about using responsive measurements for browser zooming, I am talking about using them so that content can flexibly adapt to the device it is being viewed on.
That site is exactly what im looking to do with mine. I have a fixed width 960 12 column site, i love how it looks. Im looking to add the responsive side in the next few weeks where it changes the structure as you decrease the browser width. Obviously on an iPhone and such the design will be totally usable so no pinch and zoom. Thats a lovely example, thanks. How many style sheets does it take? 1 for each resolution? And how many resolutions do you consider? Do you have different size images for each stage or do you set the div size to say 50% for those pictures to decrease on the smallest setting?
Ive just done a test. I resized my Chrome font to extra large, then Googled WEB DESIGN [MY AREA] and looked at every page in the top 20.
3 sites used EMS, the rest all design in pixels. I could tell by the font sizes obviously, but delving into some of the stylesheets of the top 5 proved they use pixels so it isnt just me, most of the top agencies ive just browsed all use PX.
I didn't really know about the application of the ideal type size. But for the em units, I think it appropriate to balance the size of the elements based on the size of the letters. eg: JQuery UI themes. It's very nice.
@joshuanhibbert responsive design and text are two different animals. Text is the least of the problem when it comes to responsive design. Px vs % in margins and paddings is the real debate. Text in responsive design is easily changed with media queries and will naturally flow with the design using px...as the same with % or ems. However, px IS WIDELY USED in design these days and many designers are making the switch to px based design for the stability of the text size.
@springlab We will have to agree to disagree. I take a content out approach when designing, therefore everything is focused around the typography. I'm not saying it's always the right way, but I find that it is mostly the right way to design. And sure fluid measurements may be harder to work with, but since when should we let that stop us from doing right by our design?
Going back to my original topic, why would most of the agencies i looked at yesterday all use PX font sizing. Google a few and see how many use EMs.
I can only presume that PX font sizing is becoming the standard so that designs remain intact. Again, im open to all arguments as thats why i started this topic.
@MrPixel I'm not sure how you expect me to speak for businesses I have nothing to do with? Everything I have said is merely my own opinion, please take it as such. I am no expert on the matter.
Im not expecting anything bud, just some constructive discussion. Im looking at other agencies in my area and most of the top ones use PX font sizing. To me, they are either slow on the uptake, or most prefer PX font sizing as it allows them to control the layout of the design.
@MrPixel px based layout is on the uprise with out question. It adapts well in any layout design...including responsive design and mobile devices. Even mobile devises use zoom so px works perfect for this. Ems was the thing to use back when browsers did not support zoom, but that has all changed and there are still some who prefer to use Ems because that is what they have grown to use.
so im not alone in my thinking. I just wish there was a definite way then all this would be irrelevant. Im reading about REM units now, another to add into the mix. I test my designs on every browser going and on the 4 devices i own and PX has yet to let me down. I have however grown frustrated at EM sizing as it ruins my designs when on zoom. It is an interesting topic tho, and there seems to be no definite way. Like my name, ill stick with the Pixels!
Here is what works for me... I set my font body to 72.5% at the body tag. So it looks something like this: body font-size:72.5% {in my CSS} then I can use: P {font-size:1.em} or whatever size you need.. you can even do 1.1em, 1.2em, 1.3em you get the idea...
Throwing in my 2 cents.... I personally prefer pixels, exactly because they are so absolute and defined.
With ems, and rems, the fonts are all so relative. If the HTML is set to 62.5%, and the body is set to 1.4em, and then the P is set to 1.1em, then you'll have to calculate what the font size in P is (in this case, it ends up being 15px I think).
With px, you can just set it right away and you don't have to calculate: set P to 15px, done. I want it to be 15px, so I set it to 15px -- instead of 62.5 * 1.4 * 1.1.
Now of course that gives less flexibility (I have not done enough responsive sites to take advantage of rems and ems), and maybe it's a little lazy, but I find it personally easier to work with.
@Senff In today's world of media queries, being able to alter the typography of an entire site by simply adjusting the root font-size percentage is quite a blessing.
@joshuanhibbert Yea, I know you're right -- I just never had to need for it, really, since I haven't done many true responsive sites yet...which is why I've been sticking with PX so far.
On the other hand, I did use EMs on big e-commerce sites a few years ago, and even though I saw the potential for it, I never actually executed that. In the end, it was all about pixels anyway. None of the sites I ever had to do for a client (freelance or work) was ever meant to be responsive, most of them just want things to work on desktop and "usable" on mobile (not "optimized"). Soooo....
In the end, I just have to do a good responsive site, and that's when I will probably start using it! :)
I've done plenty of responsive sites and still don't see the benefit of using EMs.
I set grid measurements in % and use PX for typography, and it works out splendidly - responsive and scalable across all devices while maintaining vertical rhythm.
As opposed to my experience with EMs, which always ended in disaster. First I'd have to do a lot of math converting PX to EMs and would end up with crazy numbers like:
li { font-size: 0.75em; line-height: 1.333333333333333em; }
And then there's the compounding issue - any child element of that list is no longer 12px, it's 9px! Now I'd have to write extra code to reset every nested element on the entire site. And if at some point client nested things incorrectly in WYSIWYG of CMS, the layout would break.
So, to keep my job (and sanity) I'm sticking with pixels.
I want to maintain a consistent "vertical rhythm" for my sites, so I use pixels for both font-size, line-height, and any padding or margin that's going to introduce vertical space.
FWIW I have found the following two articles helpful:
I think you need to definitely have and or develop a solid understanding of each type however, most people i think use what they understand the best. Perfect example: @kf420 perfectly illustrates this point... just do your research and find what works best for you.
I use px...however I do understand the benefits of using em and % given the way mobile use is growing now and you are dealing with two different screen sizes, at the least. However, I share the OP's point of view--I basically program for myself and for my friends, and none of the websites I make are on demand for being responsive and mobile. And then, em has its cons too.
Therefore I prefer px, basically because I do not need the benefits em gives.
At the root, (insert your number here)px, 1em, and 1rem are all the same. After that, it breaks down to whether or not you want to stay relative to the root (rem), or stay relative to the parent (em). For me, I like having one base number (usually 100%, or 16px), then base the rest on the parent, so I prefer ems. The reason I like ems over pxs is because, if I want to change all the font sizes for any reason, I only have to change the one base size, and the rest scale accordingly. Some, however, might find rems easier to work with since you base everything on the root size and don't have to do as much math, but in all reality, I don't see that it really makes a difference which option you choose aside from just personal preference. RWD will work with any option.
Altough browsers currently zoom better whether you use px or em, not all visitors know how to zoom or are used to other tools. Furthermore, what if you want to zoom the text but not the entire site? For instance, there are some sites which have buttons to enlarge all the text. In those cases by using em, you only have to enlarge the base font-size, and all the text will scale relative to that (but without scaling the entire site).
And you can argue if it's a waste of time for such small a group. Yet, how much extra time does it take? If you know your base font-size, how much work is it to calculate it in em? After you have done this a few times, it will just get easier. I am used to it right now and using em takes just as much time as using px.
All the work I've done has been using px for text, as I find it easier to work with, however I have been planning to start using rem/em for future projects.
In a course I completed in the last couple of months (which focussed on Accessible Web Design), the tutor was pretty adamant that we use rem/em for font. She reasoned that people with visual impairments would increase the base font size on the browser, rather than zoom in.
In any case, the reason I want to move to using rem/em is because I think it will be easier to keep the proportions between headings, texts and links, regardless of any future changes to the base font.
This what works very well for me in responsive design lately. All the headings will be sized with em's. No bottom margins required in headings due to 1.8 line height in body which takes care of vertical rhythm nicely. Also, no reset of any kind with exception of html and body margin and padding.
html {
font-size:100%;
overflow-y:scroll;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html, body {
margin:0;padding:0;height:100%;
}
body {
color: #333;
font-family: sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1.8;
}
p, h1, h2, h3, h4, h5, h6 {
width:96%;
font-weight:500;
margin:0 0 0 2%;
text-rendering:optimizeLegibility;
}
p {font-size:1em;margin-bottom:18px;}
@media only screen
and (max-width : 640px) {
html {font-size:93.8%;}
}
Like most things, it's personal preference, but I think the pros outweigh the cons when talking about large type (as long as you adjust it accordingly for handheld devices).
I just want to make it clear that I don't find anything wrong with Trent's site, I just don't care for such large type on websites. It takes longer to read articles and introduces more scrolling. But as Josh stated, it does come down to personal preference.
You can set everything (padding, widths, etc) in ems and the site will gracefully zoom. This is nice because of the various devices that have a strange default zoom.
But I think it’s a bit of a fool’s errand to enforce perfection on it up and down every page of a website. One image inside the content will most likely throw the whole thing out of whack.
...
Does it matter if the rhythm gets off? I don’t think so. Well set text will still look good. Remember: the type will still be in rhythm with the text right around it. So who cares if it’s off with text thousands of pixels away from it, and perhaps off screen? Making sure the type looks good in general is far more important than adhering to an invisible grid dogmatically.
For similar reasons as the ems w/ zoom. You don't know how a person is viewing your website, and you want to create an experience that is flexible and will look as good as is reasonable possible in most situations.
It all depends on what you want to achieve. I think we miss the whole point of designing for the web when we adopt a "one size fit's all" approach. However, if you are like me, working to achieve elegant user experiences with responsive web design (I actually do care about device resolutions and such) while at the same time attempting to remain loyal to the graphic design principles that were drilled into me at school, here is a Goldilocks approach: http://goldilocksapproach.com/
I use PX because it's easier. However, for stuff where I don't need to worry about legacy stuff (IE8 and lower) I'm starting to use REM's as they offer a lot of flexibility without the downside of EM's.
However, if I do need semi-legacy support, I go with PX. Why? It's easier. A lot easier than EM's. Yes, you can get used to EM's and make them work but, let's be honest, there's extra hassle.
Wow, I can't believe so many people are so biased towards em.
Now with rem, it's no different than px.
If you set it to:
html {
font-size:62.5%
}
It's exactly the same, but you move the decimal one place to the left, 12px = 1.2em.
With rem, you don't have to worry about context vs target relationship, but still get the advantages of em. Use some media queries and it's like zooming in and out on photoshop. Your designs will scale with ease, otherwise you'd have to write a media query that re-establishes every class/element/id that you specified a font-size in px with to achieve the same result. What sounds more logical?
Just build your site out with px, then go through and convert it to rem/em.
Same with percentages. Figure out your target/context relationships and it will be scalable all of a sudden.
The whole beef with this is simply ignorance or the unwillingness to do something in a different way than you are used to.
I'm just getting into it myself, but fundamentally, it makes sense with the variance in viewing sizes nowadays.
As someone that develops as well as designs, I'm constantly getting hit with new ways to do stuff... OOP vs. procedural, new "hipper" languages, etc., so having to start from square one happens a lot.
Whereas, as a designer you can get stuck in your groove and the world will blow past you.
Responsive design is the way things will be from now on, so get used to it and be smart and learn it as soon as possible. Otherwise, someone possibly a decade younger than you will snatch your job/contracts from you and you'll be eating fish heads and rice.
I didn't read all comments but too answer in general: relative size of content is only relevant for future. So drop your Pixels and adapt Ems. You just can't design app or website that will look great ok 4k tv and 500px mobile phone. Zooming is fine but absurd. Who wish to see squared text on 4k tv? Why most of sites still use px? Well of course those sites were made some time ago or company that made site still didn't switched on new "technology". But go take a look at known web designers sites you'll see just responsiveness.
Designing for screen was under influence of print design, this is now changing in good way. Content is important not a shiny button you wish to shine exactly on all devices as it shines on yours.
Personally I like how em's behave within percentage based layout frameworks, and if you couple that with em based media queries you can set your breakpoints based on your content instead of chasing different devices view port size.
Now me, ive always used PX font sizing and have built a few sites using EM and % as well, i find them messing up my designs so have always preferred PX. I set the padding, margin and other elements in PX so it just makes sense to me. Im talking about fixed width sites at the moment, i havent had a fluid site to build for a long time and dont like them. Im trying to learn responsive design and I understand using @ media queries you cant use EM font sizing?
I know from an accessibility point of view, EM or % should be used but every time i do all the text etc just spills outside my divs and the design is ruined. Ive just been playing with the font sizing on my personal site and its becoming a headache using EM and %. When you zoom on a modern browser it zooms in all elements of the page and its fine to use PX.
On my personaI site ive just set my body font to 100%, then the P to 85%, the H2 to 110%, the footer menu to 75% etc. Everything looks fine. I go into my browser settings (Chrome) and change the font to Extra Large, go back to my page and everything is messed up. The main text is all outside the div its sat in, the menu is messed up on two lines. I have a twitter feed, this is 220px by 500px and has a background image the same size. If i use a font other than PX the text spills outside the background by setting the browser font to large/extra large and it doesn't work. I then click onto this forum and everything is as it should be. I had a nosy at the CSS and the font sizing is set to PX. There is a another stylesheet with various EM and % variations on some elements so i presume some debugging has been done to eliminate some of these issues.
Some of the points raised was the fact that different devices have different dpi, whether its 96, 120, 144 etc and you can override the font sizing by changing the system font size. I cant change any font sizing on my iMac apart from in the browser so nothings overriding my stylesheets, and in fact the test i just did on Chrome when i changed to the very large font was overridden by my PX font sizing anyway, the same in Firefox and and Safari.
I thought this would make a good topic so what do you all use? i want to hear all arguments as im a couple of months into a new web design venture and want to make sure on a commercial level im doing the right thing by my clients.
Px based design is now growing in many ways because browsers now use zoom to enlarge the page vs text resizing.
Do you use PX like me? As we both have said, browsers zoom in all the content so everything stays relevant, when you have a fixed size div and text in EMs or % you have no control over the layout if the reader increases the font size. You cant build every site with fluid divs and heights etc because you couldnt have any control of the design and the maths would be crazy. I think responsive design is the way forward, im trying to learn this at the moment.
In my mind, the design should stay as the designer intended thats why i use PX. When i zoom in on a webpage on my 50" living room plasma, my designs work fine using PX. If i read it on my iPhone, im still able to view it perfectly. To me thats how it should be. If a person is visually impaired and needs to increase the font size, shouldnt the other elements on the page also increase so they can see them clearly too? Thats what the modern browsers are doing.
@MrPixel This is my view: http://www.the-pastry-box-project.net/andy-clarke/2012-january-3/
Just to make myself extra clear, I am not talking about using responsive measurements for browser zooming, I am talking about using them so that content can flexibly adapt to the device it is being viewed on.
That site is exactly what im looking to do with mine. I have a fixed width 960 12 column site, i love how it looks. Im looking to add the responsive side in the next few weeks where it changes the structure as you decrease the browser width. Obviously on an iPhone and such the design will be totally usable so no pinch and zoom. Thats a lovely example, thanks. How many style sheets does it take? 1 for each resolution? And how many resolutions do you consider? Do you have different size images for each stage or do you set the div size to say 50% for those pictures to decrease on the smallest setting?
Ive just done a test. I resized my Chrome font to extra large, then Googled WEB DESIGN [MY AREA] and looked at every page in the top 20.
3 sites used EMS, the rest all design in pixels. I could tell by the font sizes obviously, but delving into some of the stylesheets of the top 5 proved they use pixels so it isnt just me, most of the top agencies ive just browsed all use PX.
emunits, I think it appropriate to balance the size of the elements based on the size of the letters. eg: JQuery UI themes. It's very nice.Use px and make life simple.
Going back to my original topic, why would most of the agencies i looked at yesterday all use PX font sizing. Google a few and see how many use EMs.
I can only presume that PX font sizing is becoming the standard so that designs remain intact. Again, im open to all arguments as thats why i started this topic.
Im not expecting anything bud, just some constructive discussion. Im looking at other agencies in my area and most of the top ones use PX font sizing. To me, they are either slow on the uptake, or most prefer PX font sizing as it allows them to control the layout of the design.
so im not alone in my thinking. I just wish there was a definite way then all this would be irrelevant. Im reading about REM units now, another to add into the mix. I test my designs on every browser going and on the 4 devices i own and PX has yet to let me down. I have however grown frustrated at EM sizing as it ruins my designs when on zoom. It is an interesting topic tho, and there seems to be no definite way. Like my name, ill stick with the Pixels!
So it looks something like this:
body font-size:72.5% {in my CSS}
then I can use:
P {font-size:1.em} or whatever size you need.. you can even do 1.1em, 1.2em, 1.3em you get the idea...
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
With ems, and rems, the fonts are all so relative. If the HTML is set to 62.5%, and the body is set to 1.4em, and then the P is set to 1.1em, then you'll have to calculate what the font size in P is (in this case, it ends up being 15px I think).
With px, you can just set it right away and you don't have to calculate: set P to 15px, done. I want it to be 15px, so I set it to 15px -- instead of 62.5 * 1.4 * 1.1.
Now of course that gives less flexibility (I have not done enough responsive sites to take advantage of rems and ems), and maybe it's a little lazy, but I find it personally easier to work with.
On the other hand, I did use EMs on big e-commerce sites a few years ago, and even though I saw the potential for it, I never actually executed that. In the end, it was all about pixels anyway. None of the sites I ever had to do for a client (freelance or work) was ever meant to be responsive, most of them just want things to work on desktop and "usable" on mobile (not "optimized"). Soooo....
In the end, I just have to do a good responsive site, and that's when I will probably start using it! :)
I've done plenty of responsive sites and still don't see the benefit of using EMs.
I set grid measurements in % and use PX for typography, and it works out splendidly - responsive and scalable across all devices while maintaining vertical rhythm.
As opposed to my experience with EMs, which always ended in disaster. First I'd have to do a lot of math converting PX to EMs and would end up with crazy numbers like:
And then there's the compounding issue - any child element of that list is no longer 12px, it's 9px! Now I'd have to write extra code to reset every nested element on the entire site. And if at some point client nested things incorrectly in WYSIWYG of CMS, the layout would break.
So, to keep my job (and sanity) I'm sticking with pixels.
I want to maintain a consistent "vertical rhythm" for my sites, so I use pixels for both font-size, line-height, and any padding or margin that's going to introduce vertical space.
FWIW I have found the following two articles helpful:
http://24ways.org/2006/compose-to-a-vertical-rhythm
http://www.alistapart.com/articles/settingtypeontheweb
REM ftw. That is all. If not, go with EMs.
I think you need to definitely have and or develop a solid understanding of each type however, most people i think use what they understand the best. Perfect example: @kf420 perfectly illustrates this point... just do your research and find what works best for you.
I use px...however I do understand the benefits of using em and % given the way mobile use is growing now and you are dealing with two different screen sizes, at the least. However, I share the OP's point of view--I basically program for myself and for my friends, and none of the websites I make are on demand for being responsive and mobile. And then, em has its cons too.
Therefore I prefer px, basically because I do not need the benefits em gives.
At the root, (insert your number here)px, 1em, and 1rem are all the same. After that, it breaks down to whether or not you want to stay relative to the root (rem), or stay relative to the parent (em). For me, I like having one base number (usually 100%, or 16px), then base the rest on the parent, so I prefer ems. The reason I like ems over pxs is because, if I want to change all the font sizes for any reason, I only have to change the one base size, and the rest scale accordingly. Some, however, might find rems easier to work with since you base everything on the root size and don't have to do as much math, but in all reality, I don't see that it really makes a difference which option you choose aside from just personal preference. RWD will work with any option.
@GMB It is quite easy to maintain vertical rhythm using ems. I've written an article that explains it: http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/
Altough browsers currently zoom better whether you use px or em, not all visitors know how to zoom or are used to other tools. Furthermore, what if you want to zoom the text but not the entire site? For instance, there are some sites which have buttons to enlarge all the text. In those cases by using em, you only have to enlarge the base font-size, and all the text will scale relative to that (but without scaling the entire site).
And you can argue if it's a waste of time for such small a group. Yet, how much extra time does it take? If you know your base font-size, how much work is it to calculate it in em? After you have done this a few times, it will just get easier. I am used to it right now and using em takes just as much time as using px.
All the work I've done has been using px for text, as I find it easier to work with, however I have been planning to start using rem/em for future projects.
In a course I completed in the last couple of months (which focussed on Accessible Web Design), the tutor was pretty adamant that we use rem/em for font. She reasoned that people with visual impairments would increase the base font size on the browser, rather than zoom in.
In any case, the reason I want to move to using rem/em is because I think it will be easier to keep the proportions between headings, texts and links, regardless of any future changes to the base font.
@David_Leitch It also makes it so much easier when working with media queries. Here is an example:
And just like that you have increased the font-size for larger screens!
Glorious, will keep in mind :)
This what works very well for me in responsive design lately. All the headings will be sized with em's. No bottom margins required in headings due to 1.8 line height in body which takes care of vertical rhythm nicely. Also, no reset of any kind with exception of html and body margin and padding.
I'm personally not a fan for large type that you can see a mile away (e.g. Trent Walton's site).
I wasn't a fan either of larger font size than .875em on p. Going to 100% width, larger font size looks much better to me.
Like most things, it's personal preference, but I think the pros outweigh the cons when talking about large type (as long as you adjust it accordingly for handheld devices).
I just want to make it clear that I don't find anything wrong with Trent's site, I just don't care for such large type on websites. It takes longer to read articles and introduces more scrolling. But as Josh stated, it does come down to personal preference.
This Lyza Gardner article did a great job reinforcing why ems are so great: The EMs have it: Proportional Media Queries FTW!.
You can set everything (padding, widths, etc) in ems and the site will gracefully zoom. This is nice because of the various devices that have a strange default zoom.
@GMB Re: Vertical Rhythm. Chris Coyier in Smashing Magazine had this to say:
...
For similar reasons as the ems w/ zoom. You don't know how a person is viewing your website, and you want to create an experience that is flexible and will look as good as is reasonable possible in most situations.
If you are after responsive px is out. So i think you should use em or in css3 there is rem witch is relative to base font size.
It all depends on what you want to achieve. I think we miss the whole point of designing for the web when we adopt a "one size fit's all" approach. However, if you are like me, working to achieve elegant user experiences with responsive web design (I actually do care about device resolutions and such) while at the same time attempting to remain loyal to the graphic design principles that were drilled into me at school, here is a Goldilocks approach: http://goldilocksapproach.com/
I use px now that ie6/7 are dead to me.
I use PX because it's easier. However, for stuff where I don't need to worry about legacy stuff (IE8 and lower) I'm starting to use REM's as they offer a lot of flexibility without the downside of EM's.
However, if I do need semi-legacy support, I go with PX. Why? It's easier. A lot easier than EM's. Yes, you can get used to EM's and make them work but, let's be honest, there's extra hassle.
Wow, I can't believe so many people are so biased towards em.
Now with rem, it's no different than px.
If you set it to:
It's exactly the same, but you move the decimal one place to the left, 12px = 1.2em. With rem, you don't have to worry about context vs target relationship, but still get the advantages of em. Use some media queries and it's like zooming in and out on photoshop. Your designs will scale with ease, otherwise you'd have to write a media query that re-establishes every class/element/id that you specified a font-size in px with to achieve the same result. What sounds more logical?
Just build your site out with px, then go through and convert it to rem/em. Same with percentages. Figure out your target/context relationships and it will be scalable all of a sudden.
The whole beef with this is simply ignorance or the unwillingness to do something in a different way than you are used to.
I'm just getting into it myself, but fundamentally, it makes sense with the variance in viewing sizes nowadays.
As someone that develops as well as designs, I'm constantly getting hit with new ways to do stuff... OOP vs. procedural, new "hipper" languages, etc., so having to start from square one happens a lot. Whereas, as a designer you can get stuck in your groove and the world will blow past you.
Responsive design is the way things will be from now on, so get used to it and be smart and learn it as soon as possible. Otherwise, someone possibly a decade younger than you will snatch your job/contracts from you and you'll be eating fish heads and rice.
I didn't read all comments but too answer in general: relative size of content is only relevant for future. So drop your Pixels and adapt Ems. You just can't design app or website that will look great ok 4k tv and 500px mobile phone. Zooming is fine but absurd. Who wish to see squared text on 4k tv? Why most of sites still use px? Well of course those sites were made some time ago or company that made site still didn't switched on new "technology". But go take a look at known web designers sites you'll see just responsiveness.
Take a look at this video. http://channel9.msdn.com/Events/Build/2012/2-116
Designing for screen was under influence of print design, this is now changing in good way. Content is important not a shiny button you wish to shine exactly on all devices as it shines on yours.
Personally I like how em's behave within percentage based layout frameworks, and if you couple that with em based media queries you can set your breakpoints based on your content instead of chasing different devices view port size.
I always use em's for text, unless said text is in a container with a pixel height/width. I just like things to be scalable.
Working with em's isn't that difficult once you understand how they work.
That said, I still use pixels for things like margins/padding.