Rem/Em Confusion - css

Question

I've been having a play around using em's/rem's today on a new site and have several things i'd like to discuss/ask on here.
For many years I have been totally a pixel based person with a few percentages thrown in when required.
I keep reading that em's and rem's are "the way" the web should be. Fair Enough which is why I gave it a go today.
So, first things first. Are the point of using em's/rem's for dimensions literally just for changing the dimensions of things relative to the main font size?
If so, then for what situation would you change the main font size? I have always set mine to be 16px and worked with it.
I located a Sass mixin that allows me to specify in pixels my dimensions for any property and it outputs it with rem and a pixel based fallback. I tweaked it to my liking first though.
So I then started building the site using the rem mixin for all my dimensions (margin, padding and a few heights). Yes everything scales when I alter the main font size but again, same question as number 2 here.
I used Compass Susy to set my grid up and used em's to specify it's settings, (I normally would have chosen pixels). I set the grid style within Susy to be the magic-grid which makes the grid static when the browser is wider than the grid but entirely flexible on the inside.
Surely everything that I have read about the benefits of using em's can be done using media queries? What do you guys do and most importantly what do the mainstream sites use?
Right, the next two questions are to do with images. I came across two situations today where using em's/rem's with an image somewhere in the equation resulted in a problem.
5a. I had an h2 set to inline block and added padding around and then the rem equivalent of 45px padding on the right. I set the line-height to a unitless value of 1.3. I then set an image to be the background of the h2 to appear over to the right to appear in the padding-right. At the standard base font size of 16px all is fine. However I increase or decrease that font size and the top and bottom of the image crop off. So question 2 again. I see why the image is getting cropped but it's how to deal with the relationship between em's/rem's and images that is bugging me.
5b. I had a div with a height set at the rem equivalent of 200px in height. I then added an image into there which had a height of 200px. The width of the image was set using the susy mixin span-columns to a specific column width and the height was set to auto. When the font size was altered I either ended up with an image too tall or too short. What is the best thing to do in this situation?
I was looking through some of the compass mixins available and for example this one:
#mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
margin-left: 0;
li {
padding-left: $padding;
background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
list-style-type: none;
}
}
I can't add in all my em/rem stuff in there?
I think the over arching questions are:
Why are em's/rem's required in the first place?
How do you work with them in relation to images?
Any thoughts guys?

Answer 1

There is a lot to say about your post and it would probably be best to start with a few basics:
Why use em or rem units?
Em & rem units are used to size things relatively.
Em units: An em unit in a browser changes relative to it's parent's font-size, whether that is a span, p, div, body or html element. So when using em units for font sizes and for width or height, those dimensions will depend on the current parent's font-size.
Rem units: An rem unit in a browser is relative to the base font-size of the document. If you set that to 16px then 1rem is 16px, 2rem is 32px and so on. This means that you can change the scale of the entire document at a single point and anything that is using that relative measurement is going to increase/decrease accordingly.
The Point: These measurements are 'relative' so the answer to the question, "Why use em or rem units?", is for the em unit, simply use them when you want to size an element in a web page relative to it's parent and for the rem, use them when you want to size an element relative to the document.
That's a simple approach but it puts web design in the right context for the next question...
How should em & rem units be used in design and layout?
The answer to this question is also multifaceted but to put it in simple terms using em, rem or any 'relative' measurement to describe elements in your design is a move away from static pixel based design.
For the most part em, rem & percentages are used for creating flexible layouts and flexible layouts have a whole different approach to the web and using elements within them than pixel based design. For instance, if you have a container that needs to expand relative to the document width and it has an image in it, you'll probably want that image to resize along with the container or situate itself differently depending on the available space.
Here's where we get into 'Responsive' designs and layouts in an attempt to make 'Adaptive' sites & applications and also where Media Queries and other techniques come in.
Personally I use em's almost exclusively for type and margins & padding of elements. Dimensions I describe in percentages and then it's almost always only the widths. There's only so much you can control in a world where the devices, device dimensions and pixel ratios keep doubling every year.
So to sum up, sort of...
1) If you need static dimensions just stick with pixels. There is generally no real benefit to using relative measurements if you need specific fixed dimensions.
2) Em's & rem's are one of many tools and serve their purpose as other tools (pixels) serve theirs. They are a great tool and worth mastering so use them when you need to but only when the problem requires relative sizing.
3) You may want to split those Compass Susy questions into a more specific post and provide some example if you want help with that.
I hope that helps even if it doesn't answer all of the questions you have here.
Cheers

Answer 2

Ems/rems are used to make the site adaptive to different settings on the client end. My browser settings can increase or decrease the font size on your site, and using em/rem allows you to adapt to my settings. It's a trade off - as with everything else in web design - between your pixel-exact control and your willingness to design around change and user control. There is no right answer - but I like to remind myself that the entire technology of the web is weighted towards user control, and any attempt for me to be pixel-anal is fighting against the core technologies.
Ems/rems can be used in media-queries to set breakpoint widths, but they solve a different part of the adaptability formula - font size, rather than screen size. Your Susy grid can now adapt to both at once!
Images are a pain for any kind of responsive/adaptive design work. The same solutions you might use for a fluid layout will help with an em-based layout. Common solutions involve the background-size property (Compass has a mixin for it) and setting html images to a max-width of 100%. See CSS-Tricks Rundown of Handling Flexible Media. I have use this fluid-media mixin to handle the "intrinsic ratios" approach for background images and the like.
But, more often than not, I find a way to design with fewer images. I like that the technology pushes me towards simplicity in that area - so it doesn't bother me.