Rem Confusion

[rctneil]

Hey all,

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.

1. So, first things first. Are the point of using em’s/rem’s for dimensions literally just for changes dimensions of things relative the main font size?

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

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

4. 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?

5. 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?

6. I was looking throguh 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:

1. Why are em’s/rem’s required in the first place?
2. How do you work with them in relation to images?

Any thoughts guys?

Neil

[CrocoDillon]

I think the biggest advantage is not to keep optimal ratios like line lengths when you change the main font size, but to keep optimal ratios like line lengths when the user changes the main (default) font size.

If you use pixels for everything the user won’t be able to change the default font size (fair enough the sight impaired users can always zoom in).

If you use ems or any other relative font size, but pixels for widths etc., your ratios might be less than optimal. For example 33em width is nice for paragraphs, setting that in pixels and the user doubles (who knows :P ) the default font size you’re left with half the characters / words per line.

[CrocoDillon]

You might want to read this (using ems in MQs): http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

[Author]

Posts