When I started finding my way in webdesign I always used 'px' units to define everything from marges, paddings, font-sizes etc. Then I switched over to relative units. Using EM and REM.
I understand the concept of using EM's or REM's for typography. Especially for responsive websites it comes in handy. But I don't get why I should use them for other elements than typography (for instance margins and paddings). Because when we set the font-size larger for small screens the margins and paddings will also increase, which is impractical for mobile devices and I don't want that.
So should we only use relative CSS units for typography? Or am I misunderstanding the dynamics of these relative units and using them wrong?
I would use relative measurements for vertical paddings and margins but fixed for horizontal. That way vertical rhythm is kept when font-sizes are changes by the users' device, but doesn't squash everything up horizontally.
Related
Right now I am dealing with a project that requires me to use responsive design instead of adaptive design(i.e. No media-quires; everything changes fluidly), and I am not sure which unit should I use for padding and margin.
For font-size, I am using rem, which I believe is a good choice for responsive design, as I only needs to change the font-size for html to control their scale of change.
But for padding and margin, each unit comes with its drawback, at least in my opinion.
px
Hardcoding pixel is not an option here.
rem
To me, it does not make sense for padding and margin of containers to scale with font-size, but this is the easiest unit to use for responsive design.
vw
If I use vw, padding and margin of containers will scale with viewport width. This unit make sense to me, but I don't want to get the proportion of a unit relative to the viewport by writing calc( marginWidth/viewportWidth * 100vw) everywhere. Is there a better way of writing and achieve the same result?
%
If I use %, padding and margin of containers will scale with parent's width. Again, I will have to do calc( marginWidth/viewportWidth * 100%). This is really cumbersome.
Is there a better way to set padding and margin for responsive css design? Would using CSS processor like tailwind css, postCSS or Sass help tackle this problem? Any opinion is welcomed.
This question has been asked a lot and everyone does it differently. You can use px,%,em,rem,vw,vh. All of those except for px are relative units. It depends on the project but I do find it best to use px & percentages for most because you know they won't be messed up by varying viewports. Using vh and vw for padding and margins can really poorly affect accessibility in terms of how your page zooms.
I'd suggest trying out a few different approaches or combinations of both because there's not one right answer.
I understand that other questions have touched on this topic in various forms, but none as directly as I would like in a definitive answer.
When building a view, padding and margin are useful in all the ways you expect. As you read this page, imagine how much more difficult it would be to navigate if all the spacing from the surrounding elements was collapsed so that everything was squeezed together.
When I am designing a view, I will often add 10px padding to a text box, or space apart buttons with a 5px margin. But on small resolution displays and (equivalently) on those with small device pixel ratio settings (often phones and laptops where the CSS pixels are scaled to make the webpage usable, or where browser users press ctrl +), that padding/margin takes up valuable real-estate in the pursuit of making the webpage small device friendly.
If screen resolution is limited, or the device pixel ratio is scaled strongly, a 10px padding is going to take up a different percentage of the screen than it would on a desktop. What is intended to be a small logical separation turns into a large wall. So how do I keep paddings/borders small?
It would be nice if it was possible to make padding/margin responsive so that didn't take up too much of the screen. But units in CSS don't correspond to their physics lengths, percentages produce different values based on the reference element, media queries would be burdensome, and the viewport CSS units also have limitations.
They're is a bunch of other units you could use beside px:
em: Relative to the font-size of the element (Used quite often in modern web design)
ex: Relative to the x-height of the current font
ch: Relative to the width of the "0"
rem: Relative to font-size of the root element (Quite common too ...)
vw: Relative to 1% of the width of the viewport
vh: Relative to 1% of the height of the viewport (Same here)
%: Relative to the parent element
And much more... I think if I remember, Bootstrap for exemple is based on em's.
So coming back to your problem, you could have a dynamic font size with a dynamic padding and margins system based on em. Hope this help. gl.
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 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.
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.