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.
Everyone against px
Some articles that let me come to this assumption
http://css-tricks.com/why-ems/
http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Here an article that has also an opinion pro px:
Should I use px or rem value units in my CSS?
Reasons against px / for (r)em?
media queries
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).
accessibility
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.
maintainability
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.
Real life examples
I have roughly analyzed their source code, probably I have overlooked some things.
Bootstrap 3
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.
ZURB Foundation 5
It is based on rem and em and in little cases it uses px, but just for borders etc.
cloudfour.com
Media queries and font-size in em and a mix of different units for everything else: px, %, em.
css-tricks.com
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, ...)
TL;DR:
Use % for horizontal page layout
em works great for vertical spacing
Use anything you prefer for font-size (I like em)
Use em for media queries
CSS Measurement Units
I 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.
Horizontal measurements
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 measurements
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 */
}
Typographic measurements
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.
px
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.
em
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.
rem
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. */
}
Font Spacing
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 */
}
Media queries
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.
Other cases
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.
I have personally made the switch EMs and haven't had any issues with it. It works great for anything you'd normally put pixels in. There are only a few scenarios where I use px still and that is for borders and shadows and other things I don't want growing/shrinking with the font size.
Since EMs are somewhat of a dynamically calculated PX size they work well in the situations where you "know" your size. A great tool for converting PX to EM (or vice versa)
http://pxtoem.com/
I do use % for fluid elements rather than define a specific grid system which has worked well for my own needs. But I haven't tried that approach while also using third-party grid/responsive frameworks. So mileage may vary there.
Related
I've read quite a bit about the "em" measurement for "font-size" and I've noticed that some say that especially disabled users benefit from "em" because they can adjust the size of font.
I'm new to CSS & HTML and I do not understand how this really works.
As I understand I can always - as a user - enlarge the viewing size in my browser. Doesn't this also work when I use "px" all the time?
Em represents a page's default size, so for example, 1em might be 12px, but for larger screens may be something else, perhaps 16px. 2em would be twice that size of 1em.
The takeaway is em scales with the screen resolution and is a good choice for responsive design.
Px on the other hand is a specific, fixed sizing guide, where a pixel is one square on a screen. So 12px on one screen may look small on a larger screen.
I recommend using em for most purposes unless there's a good reason you need a specific pixel size.
I am building my project. I just noticed that I made a big mistake with using just pixel values in tables, sidebars etc. So it makes a problem, like if other person has different resolution in computer my website looks shapeless and bad.
Which codes I should use to apply responsive design?
As I know to use width, height values with % is useful. Also I don't know exactly how to use % values. What else I should do?
I use "rem" units to avoid problems (including the "media" max/min widths).
Consider 1rem = 16px for your desktop desing and 99.99% times everything goes well even in almost unknown devices.
https://www.w3.org/TR/css-values-3/#font-relative-lengths
EDIT: (cause the comment)
There are different things.
1.- Use "rem" to size things (like font-size: 0.875rem in spite of font-size:14px) to keep thing with adecuate proportions to the size of the pixels, 2.- Use #media queries to change layout when the screen is to wide/to narrow, that sizing can be done in rems to, so min-width 20rem means (more or less) the width of 20 "M" letters (not really true, but close).
Let say you have a 24 inchs screen with 1480px, and your friend have also 1480px, but in just 6 inchs. If you make font size 12 px you will see pretty nice, but probably your friend will find it small. The device/browser developers can define a different rem size, acording to the physical size of the device (24px, for example) and your 0.875 rem will be 21 pixels in his screen (not so small, more comfortable to see)
The change in layout to adapt to a narrow screen can be done using those rems also, so for the same 1480px he can have a more comfortable layout. You have a screen 1480/16=92,5 rems width, but he have 1480/20=74 rems width.
You can use percentage values just like you would use pixel values. If you want 1/4th of your website to be a sidebar, it can be as easy as:
.container {
width: 75%
}
.sidebar {
width: 25%
}
This wil make the container take up 75% of the browsers window. Since there is 25% space left, you could neatly fit a sidebar next to it by making that 25% width (you might need to add float:left to both elements).
However, I can image that on mobile view you would like your container and sidebar to be 100% width. You can do this by using media queries:
//medium phone size
#media screen (max-width: 425px) {
.container {
width: 100%
}
.sidebar {
width: 100%
}
}
There are several solutions:
Use media queries to your pages.
Use a CSS grid (and media queries)
Use Flexbox (and media queries)
Use an other css framework including a grid system
You can start with Bootstrap. That will not only make your site responsive but also there are many predefined designs for the HTML elements like buttons, fonts, tables etc. You will only have to use the classes.
If you are not well accustomed to Bootstrap the do as #Damian Makkink and #Marc_DNL have posted.
IMO a self-built CSS for a responsive site and design is better. Initially, in my hobby project, I started with Bootstrap but I have completely phased that out.
There's quite a lot of resources encouraging to use ems over pixels in media queries. However, none of them easily explains the obvious doubt about it:
If I have two divs and I want to hide one of them on iPhone4-like devices, how do I do it with em-based media queries? The device resolution is 640x960 in pixels.
In every article there a note that usually 1em = 16px. But since it is not certain, why would I want to convert to ems and risk breaking my design? What if user changes his default font to 20px? Or 10px? My div will hide either too soon or too late.
Example from Foundation:
/* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) { }
How can I be sure it really is 641px and not 1282px? Why would anyone use something so untrustworthy instead of old good pixels?
First the sizing in em cannot be changed by the user as this is a browser setting that cannot be changed. So at best it could vary between browsers but I don't know any that differs from this standard. For that reason, it can be considered quite safe to use.
But for media queries, I would recommend to use rem units. em units is mostly preferred for font sizing in components as it scales relatively based on the parent DOM element. While rem units work well for sizing root elements (width, height...).
px is an absolute unit of measurement (like in, pt, or cm) that also
happens to be 1/96 of an in unit. Because it is
an absolute measurement, it may be used any time you want to define
something to be a particular size, rather than being proportional to
something else like the size of the browser window or the font size.
em is not an absolute unit - it is a unit that is relative to the
currently chosen font size. Unless you have overridden font style by
setting your font size with an absolute unit (such as px or pt), this
will be affected by the choice of fonts in the user's browser or OS
if they have made one, so it does not make sense to use em as a
general unit of length except where you specifically want it to scale
as the font size scales.
Based on this, the most accurate option is using px instead of embased on what you are asking, but you can always redefine your fonts and use rem instead, this is better for responsive websites, together with percentages. That's a matter of judgment in every single element you are adding to your website, and of course, lots of testing to make sure it looks good and works flawless on any resolution and devices.
I personally prefer to do it this way:
I define my fonts and font-sizes (this overrides the default ones)
I use percentages for the block elements
I use rem for the fonts and media queries
But of course sometimes I have to use pixels or change some of my "default" rules depending on my needs. As I said before, it's too a matter of judgement on your needs and on it is best.
Note: The em unit is relative to the font-size of the parent. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.
I'm in the process of trying to wrap my head around using srcset and sizes on img tags.
Whilst I think I have grasped the basics – mainly thanks to this article – I'm struggling in practical application of the sizes attribute.
In all the examples I can find, things are massively simplified and the sizes attribute is declared as if at each breakpoint, the image width will be an exact proportion of the viewport width, allowing the use of vm units. For example:
sizes="(min-width: 36rem) 33.3vw,
100vw"
Of course in real life, images are often within other containers which themselves might be within other containers and so on, each with their own margin, padding or positioning.
Is it fair to say that in all but the simplest cases (when images are of fluid width and are not simply an exact percentage of the viewport), calc must be used, potentially adding hideously complex calculations to the html markup as an images dimensions need to be calculated working from viewport width, down through any containers to the image? For example how would you calculate the correct size for an image located a container with 7px padding that is itself inside a container that is 45% of its container with 15px margin that is inside a sidebar that is 25% of the main page container which has 15px of padding and has a min-width of 1220px?
sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)),
100vw"
Trying to calculate this in the sizes attribute seems ludicrous, especially given that all this might change at each breakpoint. having to keep this massively complex calculation in sync with changes to the CSS seems like madness. And then you have the patchy browser support for calc.
I feel like I'm missing something obvious, but what is it?
Note: I'm aware of Alexander Farkas's excellent Lazy Sizes which does the size calculations for you through the use of data attributes, but I'm interested in standard usage.
First of all % units are not allowed in sizes. You must use vw units. (Which can include the scrollbar width). So your 25% becomes 24-25vw for example.
Second there is no real difference between rem and em (in context of sizes attribute). In case you don't use em/rem based media queries / min-width/max-width in your CSS, never use those in your sizes attribute.
Basically sizes don't need to match your real image size 100% exactly. It is a tell for the browser to find the right image candidate approximately.
Your min-width: 1200px rule as also every max-width usage in your CSS, should be clearly part of a new media condition in your sizes attribute.
This leaves us with the following sizes part:
(min-width: 1200px) calc(11vw - 44px)
In case you add have a max-width defined or a media query that stops sidebar from growing, you can be less correct and simply transform 11vw - 44px into 10vw:
For example:
sizes="<...,>(min-width: 1800px) 180px, (min-width: 1200px) 10vw, <....>"
About calc support: picturefill 3.0 beta as also respimage, do include calc support for IE8+, so all browsers which do support sizes have good enough calc support and all respimage polyfilled browsers do support calc in sizes also.
About getting this straight. This is clearly painfull and in most cases your CMS/backend system should help here. In most projects you should agree upon a limited set of allowed image formats and write the sizes for those corresponding to your design. And your backend should manage to attach those sizes at the right place. In case this is not possible. Either use indeed lazySizes or use srcset with sizes at least for the most important images (i.e.: large image formats, because this is where you can save data most).
If you want you can pick a real website and we attach full correct sizes to it. But be aware. It must be only width constrained. The standard currently does not support height constrained images (This is a lazysizes feature only).
If I mark all my divs in percent, they fill up all the space nicely. I am facing 2 problems:
a) Image sizes: How do I define image sizes so that they do not become larger or smaller than wanted as the window resizes
b) Font sizes: How do I make the font size increase or decrease based on resolution - should this be done at all? (The problem I face is that the text becomes illegible at very high resolutions)
Please point me to a good reference on how to make liquid layouts.
Regarding point b) it is, IMHO, good practice to use relative font sizes, rather than absolute ones, so that the fonts are sized compared to the browsers base settings (I'm guessing, from your problem, that you are using point or px sizes, yes?). You have the heading tags, of course, but you also have the font-size CSS attribute and the ability to size fonts in % or ems. You have hit one good reason to use relative sizes - on high res monitors this can make absolute-sized fonts unreadable (I have seen, in the old days when 14" 800x600 monitors were standard, a website that rendered to about the size of a matchbox on a high-res 21" monitor). There also the issue of "politeness" and accessibility - the user may have set their browser base-font size larger or smaller because of personal preference and/or accessibility issues, and to override this to an arbitrary size doesn't seem, to me, to be a good idea.
have a read on the font-size section of this page:
http://www.w3schools.com/css/css_font.asp
If you need some actual examples then please post a bit of your code and CSS.
Good article here
http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
for a) I love using this
img {
width:100%;
max-width:400px;
}
then, if you need to, add one of the many javascript fixes for max width in older browsers.
I found a simple solution for your second question about font size.
b) Font sizes:
Using stylesheet calculator and properties like:
vh - viewport height
vw - viewport width.
Your font size will take same size on your view, but it can be unreadable if you don't handle small sizes layout.
For regular size: font-size: calc(.5vh + .8vw);
For large size: font-size: calc(5vh + 5vw);
Hope this might help you.