Menu
The last days I dealt with units in responsive webdesign and webdesign in general. My question is about units for sizes in CSS at all, meaning not only related to font-size, but also padding, width, media queries, ...
It seems as px is considered pretty for most use cases bad by most professional web designers.
Some articles that let me come to this assumption
Here an article that has also an opinion pro px: Should I use px or rem value units in my CSS?
The big advantage of em media queries is, following many articles, that these media queries are even applied when using the browser's text-only zoom.
However I think all modern browsers support full-page zoom, which also applies media queries defined in pixels (tested in up-to-date Firefox and IE).
em (or rem) seems to be recommended for font-size (accessibility) but what is about the other sizes?
Increased accessibility is IMHO no important reason anymore, because modern browsers support full-page zoom. I have no idea about screenreaders, but I can't imagine, that they haven't been improved in the last years.
It is easy to change the size of the complete site by changing the base size.
If it is a persistent change for every device it should be very easy when using a CSS preprocessor.
The only reason I could find was in the css-tricks.com article, because you may want to have all sizes changed on mobile devices. Do you really want this for all / most elements? For some cases like really big headings it seems to be useful, but why should a mobile user be able to read smaller text better than a desktop user? Additionally the measuring in reference pixels compensates the different DPIs.
I have roughly analyzed their source code, probably I have overlooked some things.
In most places px is used: font-size, media queries, padding, margin ... The grid system uses percents at least for widths. However you can find many issues regarding this topic at Github. Many people demand em / rem.
It is based on rem and em and in little cases it uses px, but just for borders etc.
Media queries and font-size in em and a mix of different units for everything else: px, %, em.
font-size, padding, margin mostly in px, but media queries in em and some widths in %.
So far I have read everywhere, that you should use relative sizes and have done so. If there are sensible reasons for (and I thinks so, because many professionals do so) I will continue / improve doing so, but it was more complicated than using px.
If you assume most people are using full-page zoom, where is the problem with px for everything, having one consistent unit seems to be nice? (Supporting people, who haven't upgraded their browser / device for almost 10 years (IE <= 7), is not my aim.)
Which is the way to go? (Please consider the different properties font-size, width, media queries, ...)
915
Pixels are the most commonly used and accepted unit. And it's considered the base of measurement for many other units. It provides the most consistent result among various devices. The box element in the following example has a height of 150px and width of 150px, and it will remain the same on all screen sizes.
The vw and vh units, which stand for viewport width and viewport height, are the last units that we will go over. No matter where you are, inside a child or in a grand grandchild, the vw and vh will always be the width and height of the viewport .
point (1 pt is the same as 1/72 inch) ... the following is just to help visually understand line-height in points. The font-size is set at 12pt and the line-height is set to 13.5pt. pixels (a dot on the computer screen) ... the following is just to help visually understand line-height in pixels.
% for horizontal page layoutem works great for vertical spacingfont-size (I like em)em for media queriesI find that my usage of different CSS measurement units varies with the area of measurement I'm dealing with: horizontal, vertical, typography, or media query.
The horizontal space gives structure to the page. Thus, horizontal measurements work well with units relative to the page width (%). For example, it's great for giving some basic breathing room to the main content:
#main {
width: 90%;
margin: 0 auto;
}
More complex layouts (columns, for example) also work well when one or all of the horizontal measurements are proportional to the page or to their container.
.column-main {
width: 61.8%; /* The golden ratio is pretty awesome. */
}
.column-secondary {
width: 38.2%;
}
There's a corollary to this idea, which is that if you set up your container structure well, you won't have to do much horizontal sizing on the contents. You basically let the block-level elements fill the width of their container, as they like to do, and you're all set.
Vertical space is more about the structure of the content (i.e. how close elements in the document flow are to one another), and I think these measurements work fine with both fixed and relative units (px or em).
However, using relative units here helps give you a vertical rhythm, which can be very pleasing. It also allows you to make changes to your content (read: font-size) and keep your vertical spacing proportional.
p, ul, ol, dl {
margin: 0 1em; /* gives you proportional spacing above and below,
no matter the font size */
}
Font measurements fall into their own category, maybe because font-size acts as the base for all other measurements in em. I've seen advocates for different strategies, but from what I've seen any measurement will work fine, as long as you know what you're doing.
Setting font-size in px is extremely reliable and easy to calculate. In the post-IE6 age, it also scales nicely, so there's really no reason not to use px if that's what you prefer.
The only problem I see in using px is that it doesn't take advantage of the CSS cascade. In other words, once I've specified sizes in px, I have to go back and change each one of them individually if I want to make any large-scale changes.
Despite any drawbacks, I think em can be a really good way to specify font-size. What I like is that it lets me quickly see the relationship between my font sizes. A lot of times I don't care what the exact size of the font is because the most important thing for me is the relationship of that size to all of the other sizes on the page.
The important thing about using em is to set the sizes as close to the end tag as possible. That means I avoid setting font units on containers:
aside { font-size: 0.8em; } /* This can mess me up */
...
aside p { font-size: 0.8em; } /* Way too small! */
And mostly set sizes on headings and text items:
h1 { font-size: 2.5em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
...
Anyway, I like that I can see clearly and easily the relationship between the sizes there.
Sizing things based on the browser's base font size seems like the web-standards thing to do, because then you allow for browsers whose optimal base font size might not be 16px. In practice, though, it kind of works the other way. From what I've seen, browsers use 16px as the base font size because that's what everyone expects, and set the actual size of that CSS measurement to look decent in the browser.
The biggest drawback here I see is browser support. If you code for browsers that don't support rem, you'll be adding your rules twice:
p {
font-size: 16px;
font-size: 1rem; /* I kind of hate repeating myself here,
but a good CSS preprocessor might ease that pain. */
}
Other font measurements are a lot easier to figure out once you've got your font-size since most other font measurements fall into the category of either vertical or horizontal measure. For example:
h1 {
font-size: 2.5em; /* Change this, and everything below stays proportional.
(Use whatever measurement unit you prefer.) */
margin-top: 0.618em;
margin-bottom: 0.3em;
line-height: 1.2; /* The only unit-less measure in CSS */
}
In most cases, there is little difference between the way browsers handle em and px in media queries. This holds true even when a user uses text zoom to resize the page.
HOWEVER, if someone has changed the default text size in their browser settings, things behave very differently. See my answer to a related question and my codepen demo for a longer explanation.
In short, while px works well for media queries in most cases, it's definitely safer to go with em.
There are certainly cases where the above general comments don't apply. For example, you may find that ems come in handy any time you want things proportional to the font size, like the following:
h1.title {
font-size: 2em;
width: 20em; /* Resizing the font also resizes its container properly. */
background-color: #d00d1e;
}
@media (min-width: 400px) {
h1 {
font-size: 2.5em; /* Woot! Didn't have to touch the width! */
}
}
Or maybe you want to constrain line lengths for readability:
p {
max-width: 42em;
}
Also, as mentioned in other comments, px still works well for borders and things like that. It can also be good for padding, especially when you pair it with box-sizing:
.example {
width: 80%;
box-sizing: border-box; /* Padding is NOT added to total width. Huzzah! */
padding: 10px;
}
There is already a great answer for this question: Should I use PX or REM?
But to add to that, the articles you link to for "All against px" are generally based on misunderstandings or mis-assumptions.
For example, PX are relative (see the other answer). From an accessibility point of view (my area of exertise), zoom is now the default method of making things bigger/smaller, so PX vs EM is irrelevant. (The browser renders to CSS pixels in both cases.)
Also (for the Cloudfour article) Webkit used to have a bug, but it fixed that a while ago (pre split with blink) so that PX now trigger media queries on zoom.
Basically, whatever you use is translated to (CSS) pixels anyway, so it is up to you.
Personally, I set a based size in PX (generally 16px) and then size in REM. That means it is easy to set the sizes relative to the base, including padding/margin etc. Then you can easily change the base pixels within different media queries. You can also provide PX fallbacks for older browsers if needed.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
