I've been working on a personal website (so, time is not an issue here) and I made a base stylesheet where I take care of all the font-sizes, border-widths, line-heights and the like.
I made an effort to use ems all the way, but when I tested the website on other browsers (eg. Chromium) the content didn't match my "pixel-perfect" grid.
So, my question here is, should I use px instead? I mean, I know ems are "the way to go" but nowadays most browsers implement fullpage zoom (they don't resize just the text) and when it comes to dealing with border-width and line-heights, px are more comfortable, because I can avoid subpixel rounding altogether.
What's your take on this? (btw, supporting IE is not one of my goals; i couldn't care less about it)
the content didn't match my "pixel-perfect" grid.
If you're working with a pixel-perfect grid, use pixel values. em is a relative value that works well only if the layout is able to adapt to different content sizes.
I would use em only for elements which size depends on font size.
Elements like borders (and its width) usually does not depend on font size.
When using em for margin and padding, I've found that the relative measurement can do some funny things.
The em can accumulate in nested elements and you find yourself bumping some values back up to align them with outer elements.
This looks fine until you shrink the browser window in very slowly and find that sometimes the values for the nested elements round to a pixel different to the outer parent.
To combat this, I've used rem at the parent level to set the font size and found that this allows parent and descendents to work from the same base relative value.
Related
I'm finally learning responsive design and I need to know the best practices for em and percentage units of measurement. If I were to set the font-size of the body to be 10px, would I run into problems down the line declaring all font-sizes em's (1em = 10px, 2.5em = 25px, etc.)?
Also, when is the correct time to use em units vs percentages? Are em units mainly for typography, and then percentages would be used for sizing, margin, padding, etc.?
I love the idea that I can scale font-size proportionally at media queries by changing the body font-size, but I don't think I would want my layout and spacing to shift based on the size of text (or do I?).
It is best practice to allow the browser's font size setting to affect your design–avoid setting the font-size of the body in pixels.
rem units are great for ensuring that everything scales proportionally to the browser font-size. em units are calculated based on the font-size of the parent element so they can become trickier to use when elements are nested. rem is always relative to the font-size of the html element (the root element). If you assume 1rem = 16px and build everything relative to that, then even if the user has set the browser so that 1rem = 20px, for example, then the entire design will scale up accordingly.
With responsive design, it is best practice to define media query "breakpoints" at screen widths where the content starts to become unusable (rather than at arbitrary widths based on popular devices). When your whole site is scaled up or down by the browser's font-size change, you will want the break points to also respect that font-size. However, since Safari treats rem media queries differently than other browsers, it is best to use em for media queries.
ok, first if you want using responsive design, i suggest strongly to you to use a framework like bootstrap or fondation to have a responsive design. You seem newbie in that way and responsivity is a bunch of css and preprocessor for most complicate cases.
But, to answer to your question, we dont resize fonts in media queries for most cases. Set per exemple your fonts in rem. So you must test on many devices your responsivity. By layout you must probably mean divs. Best practice is viweport vw (width) and vh (height) except if you want a proportionnal measure inside annother element. In that case, use %. Rem is better than em cause it is root em. The true size of a font difined in html. When the screen become too small on a device, you must collapsing your menu, and the text on your site must goes down in a div. I can continue like this a while, but like i said, use a framework, faster learning and faster development. Most devs like me use frameworks for their clients.
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?
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
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.
what are cons to use relative values em and % for fonts, What is rounding problem? and how to avoid/solve rounding problem. Is there any calculator?
How to use relative values as easy as we use px
There are not a lot of cons using em or %.
Sometimes i had trouble to make fonts look exactly the same size in IE and the normal browsers. But most of the time i have to do a IE CSS anyway so its not really a problem.
When you define fonts in PX, the fonts are not antialiased on some computers running windows. If you use EM or % they are and you have a very precise control of the font size. (1.249em for example).
Unlike #scunliffe i would always use EM as font-size. Even when you have fixed design withs. Sometimes its not possible to do a pixelperfect design with PX fonts, because fonts rendered by Photoshop looks different then in the browser.
I have made a test tool to show the differences:
http://bluesys.ch/csstest/
and here you can find a tool to convert your PX values in to EM:
http://pxtoem.com/
I may be preaching to the choir here, but I find the Firefox "Web Developer" addon is a real help when I'm dealing with font sizing.
https://addons.mozilla.org/en-US/firefox/addon/60/
Use 'Information' > 'Display element information' to view the exact pixel size for your (relatively sized) element. Tweaking the CSS (to within 1 decimal point) until the amount returned is a round number minimises the chances of your text being different sizes in different browsers / operating systems.
Oh, and from my current project:
Standard (appearing as 12px) font set on site wrapper is 75% (body is 100%) , then use:
14px: 116.7%
16px: 133.3%
18px: 150%
18px: 166.7%
There are loads of reasons to not use fixed text sizes (accessibility being the big one), and once you've spent a while getting your CSS sorted you'll never look back.
Here's a nice little trick for you.
In the your CSS, set the font-size on the BODY of the document to 62.5%.
Now, whenever you want to set a font-size, you use EM values. 1.1em would be equivelant to 11px and 1.2em to 12px and so on.
That's how I work anyhow.
Good luck.
Michael.
I don't believe there are (m)any cons. Using px limits your ability to scale text in IE6 but otherwise using % or em should allow you to scale nicely.
The only con I can think of is that if you want your text to be exactly 12pt, or 13px then using % or em isn't what you want. However If you are trying to create a fixed width design where everything is measured out to the pixel I would advise against it. The Web is a free-flowing canvas... each user has a different sized window, personal font/zoom size choice and Operating System differences. Your content should look good on any screen by adapting to the real-estate you are provided with.
em vs px is like a holy war. Everyone has their own ideas on what's best. Using px is perfectly fine, the only real problem is that text will not resize in IE6.
One other issue is how much you will change your mind about the general font size. If you do everything in absolute values (px, pt), then decide the font size across the site is too small, then you might have to change a lot of values to make everything bigger. Conversely, if you do everything in relative values (em, %) then you want to change the size of one thing only, it will affect all its child elements.
In the end, the best choice is to simply be consistent.
in my projects i use em for sizing of font only with body {62.5%}?
with this method i can easily calculate em value.
so what are pros and cons if i use em sizing unit for width, height, padding, margin, line-height, even for inline images also along with font for fixed width layouts?
Ems are wonderful units for a good designer. It all rests on what you're taking as pixel perfect. Since most front-enders will only get an image (maybe a .psd file) from the designers, it might seem a good idea to keep every pixel as is. Which is good, except that you can't rely on web browsers to be pixel perfect.
Imagine a browser with a different font, or a font with a different aspect. Imagine a user who enlarges the default font or who zooms in (using those browsers that only enlarge the font). A margin set in px will still show up with the exact px value you gave it. An em-based margin will stretch according to the font-size.
Also, they're not that hard to work with. Define a base font-size and line-height and apply it to your (after a good reset, of course). Then change it only for the titles (you shouldn't have more than 6 titles) and for any region where it makes sense to change the font-size (a sidebar or footer). You will do 3 or 4 calculations, everyone will be happy :)
The biggest downside is in indentation and text-block alignment with fonts of different sizes with em-sizing. It gets hard to line things up exactly – if that's important to you (and it should be).
Well if you understand how em work you can do just about anything you can do with pixels for example but with a bit more calculation.
Actually you could do more, for example, if you have a h1 header you could specify line-height and bottom margin in em's to they always reflect the font size of that header. As you increase a font size of header you increase the margins and line-height too.
This can be used to create a dynamic vertical rhythm for example.
Also if you build a complete web site in relative units you can achieve zoom effect in older browser, etc.
But with modern browsers and if you can afford to not to support behemonts like IE6 you can use absolute units and still get a full page zoom.
Em-sizing is useful for liquid layouts, but less so for fixed layouts. Not to say that it is useless, but a fixed layout is easier to set up using pixels. You can of course continue using ems for font sizing.
This question already has answers here:
What is the difference between px, em and ex?
(4 answers)
Closed 1 year ago.
When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?
There's a really good article on web typography on A List Apart.
Their conclusion:
Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.
Both adjust the font-size relative to what it was. 1.5em is the same as 150%. The only advantage seems to be readability, choose whichever you are most comfortable with.
From http://archivist.incutio.com/viewlist/css-discuss/1408
%: Some browsers doesn't handle
percent for font-size but interprets
150% as 150px. (Some NN4 versions,
for instance.) IE also has problems
with percent on nested elements. It
seems IE uses percent relative to
viewport instead of relative to
parent element. Yet another problem
(though correct according to the W3C
specs), in Moz/Ns6, you can't use
percent relative to elements with no
specified height/width.
em: Sometimes browsers use the wrong
reference size, but of the relative
units it's the one with least
problems. You might find it
interpreted as px sometimes though.
pt: Differs greatly between
resolutions, and should not be used
for display. It's quite safe for
print use though.
px: The only reliable absolute unit on
screen. It might be wrongly
interpreted in print though, as one
point usually consist of several
pixels, and thus everything becomes
ridiculously small.
The real difference comes apparent when you use it not for font-sizes. Setting a padding of 1em is not the same as 100%. em is always relative to the font-size. But % might be relative to font-size, width, height and probably some other things I don't know about.
Given that (nearly?) all browsers now resize the page as a whole, rather than just the text, previous issues with px vs. % vs. ems in terms of accessible font resizing are rather moot.
So, the answer is that it probably doesn't matter. Use whatever works for you.
% is nice because it allows for relative resizing.
px is nice because it's fairly easy to manage expectations when using it.
em can be useful when also used for layout elements as it can allow for proportional sizing related to the text size.
As Galwegian mentions, px is the most reliable for web typography, as everything else you do on the page is mostly laid out in reference to a computer monitor. The problem with absolute sizes is that some browsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoom in/out, everything adjusts except for those elements.
I do not know whether IE8 handles this properly, but all other browser vendors handle pixels just fine and it is still a minority case where a user needs to enlarge/diminish text (this text box on SO perhaps being the exception). If you want to get really dirty, you could always add a javascript function for making your text size larger and offer a "small"/"larger" button to the user.
Regarding the difference between the css units % and em.
As far as I understand (at least theoretically/conceptually, but possibly not how these two units might be implemented in browsers) these two units are equivalent, i.e. if you multiply your em value with 100 and then replace em with % it should be the same thing ?
If there actually is some real difference between em and % then can someone explain it (or provide a link to an explanation) ?
(I wanted to add this comment of mine where it would belong, i.e. indented just below the answer by "Liam, answered Sep 25 '08 at 11:21" since I also want to know why his answer was downvoted, but I could not figure out how to put my comment there and therefore had to write this "thread global" reply)
Yahoo User Interface library (http://developer.yahoo.com/yui/) has a nice set of base css classes used to "reset" the browser specific settings so that the basis for displaying the site is same for all (supported) browsers.
With YUI one is supposed to use percentages.