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.
Related
Many websites write code that have broken the ability for users to set their own font size (in the settings of the browser/mobile). In order to avoid this, what exactly happens on a technical level when the user changes the default font size? What does it affect?
the html root element font-size that is specified in CSS? Does it scale or override this?
the units em, px, rem, %?
what about other units, like vh, vw, vmin, vmax for those that are trying to do fluid typography?
how will this affect calc()?
is the behavior the same for mobile devices?
Notes that don't yet form a full answer:
However, none of the below refer to specifications, but are just collections of specific behaviors.
From my own experiments, setting font-size for html with a % does scale when the user changes the browser font size.
This answer has some information, seeming to say that when html is set, px doesn't adjust, but em, rem, % do.
This site has some really good info, but it is all a decade old and uncertain if the behavior mentioned is just because of browser bugs or if it's designed that way.
There is a lot of sloppy language that people use when talking about this. For example, people will talk about the 'base font size', but not specify if this is the font specified in the root/html element, the browser settings, or the combination of the two. I'm sure it's clear to those who already know the interactions, but to me I still have the concepts unclear.
The user-defined font size determines the base font size of the root element html. The initial value of font-size as specified by CSS is medium, which in all desktop browsers corresponds to this user-defined size (except Microsoft Edge which follows Windows DPI and accessibility settings rather than having its own). Mobile browsers don't seem to honor the system-wide preference typical of mobile devices, unfortunately. At least, none of Safari on iOS, Internet Explorer on Windows Phone 8.1 or Microsoft Edge on Windows 10 Mobile do.
All other keyword values of the font-size property defined here are scaled to this size, so if the user-defined size is 20px, medium corresponds to 20px and small will almost certainly correspond to a size smaller than 20px.
Media query rems and ems are calculated directly off of this user-defined size, irrespective of the specified font-size property of the root element. Each of the following media expressions:
(max-width: 30rem)
(max-width: 30em)
is equivalent to (max-width: 480px) when the user-defined size is 16px, and (max-width: 600px) when the user-defined size is 20px.
Style rule rems on the other hand are calculated off of the specified font-size of the root element. The following rule:
:root { font-size: 50%; }
makes 1rem in a style rule equivalent to 8px when the user-defined size is 16px, and 10px when the user-defined size is 20px.
Style rule ems and percentages are always calculated relative to ancestor elements so their behavior doesn't change. If the font size of body is declared in ems or percentages then it'd be based off of whatever the font size of html (its parent) is, for example. So on and so forth for all its descendants that don't specify some other size.
The px unit corresponds to a CSS pixel and so its metrics are never affected by the user-defined font size.
The behavior of viewport units and calc() doesn't change, since none of those things depends on an element's font size. As their name suggests, viewport units scale to the size of the viewport.
The most noticeable overall effect this can have on a layout that sizes everything (including widths and heights of boxes) in rems and ems, is that the user can scale the entire layout just by changing their preferred font size. I don't know how useful this is anymore, especially when zoom is a thing.
So, to ensure that your copy is able to accommodate the user's preferred font size without forcing them to zoom, specify all your font sizes in rems or ems where possible. Especially do not specify a pixel font size on html, as that will override the preference completely. You don't necessarily have to specify widths and heights in rems or ems — this really depends on your layout. Not all fluid layouts scale well with different sizes. The most important aspect of this, really, is the size of text, since this feature is intended to scale text to improve readability.
I am aware of vw units, however, these are based on the size of the viewport, i.e., the entire screen. What if I need a font-size to be large enough to fit a particular width of a div.
Is that possible?
Any solution or workarounds if it's not?
Thanks!
I agree with user1902183 that there is no need to downvote this question as its perfectly legitimate.
I would suggest taking a look at the rem unit.
rem stands for relative em.
As most developers know, an em is fixed according to device. For example, in a browser 1em = 16px. On mobile devices this may be a smaller figure.
With a relative em the font size is dependent on the parent I believe but investigate this. This may be the closest to what you are trying to achieve without resorting to JavaScript.
I've been using px for almost all the measurement related styling, but I wanted to know the best places for the use of pixels (px), percentage (%), points (pt) and em.
I've seen the use of em and (I believe) points in typography, but I don't know the best way to use them.
Where should either be used, and why?
pt or cm, in, mm etc. are most used for print stylesheets, as they're most fit for measurements on the physical properties of paper sheets, and the render of printers.
em and en (and the new rem, and more interesting units such as ch) are glyph relative units, and as such are suitable for text styling, in correspondence with absolute units at the root element (e.g. px units at the body).
another interesting uses: ex units (the height of the 'x' glyph in the font) to set vertical measures in relation to text, ch to indent lines.
px are absolutely rendered so one can design a pixel-perfect (or fixed) layout based on these units, applied for containers, or on various widgets demanding fixed size (buttons and the like). disclaimer: absolutely is an over-statement, as pixels are rarely absolute, and has many factors affecting the rendered outcome - see this article about px as an angular measure.
% are mostly used in conjunction with an absolute unit at the top container, and are applied in various CSS techniques, such as the faux centered container. these units are also very handy for layouts that are fluid by nature. others, like the viewport relative vh, vw and vmin, may be used regardless of the parent's units.
all of the above is based on my personal views, as this subject is open for debate, and CSS techniques will keep evolve and we'll see more uses of the specifications and capabilities we had never thought of. it's mostly the creative use of those tools that scopes or favors the use of one unit over another.
It used to be that these distinctions mattered: for example, back in the IE6 days, you should never set your text using px, because then it couldn't be zoomed. That is, back in the day, browsers actually treated px as a number of pixels.
These days, browsers have conformed to web reality: most people use px everywhere, for almost everything. Thus px is now defined as an angular measurement, which essentially means that px behaves just fine in any zoom setting and on any size or DPI device.
Similarly, as part of conforming to web reality, all other units are defined in terms of px, so there is really no reason to use them unless it happens to be more convenient for your case. The only exception is, of course, percentages, since they allow you to specify values in relation to parents' measurements.
Details from the spec:
in, cm, mm, pt, and pc are all defined relative to px, since in practice all devices follow "For a CSS device, these dimensions are ... anchored ... (ii) by relating the pixel unit to the reference pixel." And as discussed, the "reference pixel" is an angular measurement that varies depending on DPI settings, screen size, zoom level, device type and so on.
1em equals the computed font-size of an element, which is usually defined in px. If that size itself is defined in ems or exs, the browser then looks upward until it finds a px to be relative to, eventually falling back to the default font-size (usually 12px).
1ex equals the height of the letter "x" in the defined font-size if possible, but usually (?) falls back to 0.5em.
Use px for elements that are of a set size.
Use percentage when you need the element to be in proportion to the window size or parent element size.
em is the standard for text, it adjust according to screen size on a mac. Make it a habit, there's plenty of good blogs on why to use em, em is not just for font properties it also comes in handy with other elements like div, inputs etc. There may be consequences when using px for font size, there's also situations where px and % will be more ideal, it' takes trial & error to understand fully.
There are no real rule on what to use it's all according to the desired effect. As you create you will test your site in different resolutions and adjust the browser size to see how it appears from a variety of users points of view.
Consider cross browser compatibility & resolution with em,
Consider resolution with percentages,
Disclosure: I am a sysadmin, not a web designer.
I generally use em for padding around images, so as to keep the padding sized according to the text it keeps away from the image.
I use % to handle liquid/fluid layouts sometimes, though most often a fluid layout will just be 100% of the browser but with fixed width (px) columns.
I use px to handle column widths, headers, etc. The height and width attributes of an <img> tag are of course in pixels by default, and an image will render best if you don't ask the browser to resize it from its native/original resolution. In some cases, you need to use px on fonts, when the font has to work with an image (i.e. a spanner icon next to the word "Tools"). If possible, I always use UTF-8 fonts instead of images.
As you know, you can specify dimensions with CSS in px or em. As far as I understand it, em means "line height of the current element's fonts". My approach currently is to always use px (also for margin which seems to be a controversial practice).
Question: Can I rely on the ratio of px and em to be the same across browsers? If not, then my manually specified margins between paragraphs will likely look odd because they so not match 1em anymore.
I believe that it is better to use em for margins but I have quite a base of existing code that always uses px margins.
No. ems are relative to the user's chosen font size, px aren't. The default font sizes of desktop browsers are about the same in pixels, but mobile devices in particular will vary even before user adjustment.
You should use em for a margin in text content that should be sized similarly to the surrounding fonts, and px for a margin that has to line up with images used by the page layout.
No, you cannot.
The size of em in pixels is related to the font type & size you're using, the resolution of your screen (depending on OS, browser), and possible further OS and browser settings - eg "Show fonts +10%" may alter the em value.
I have designed and developed more than 10 sites, but I still have a doubt about the correct unit I should use. Should it be px, em or %?
EDIT 1: FOR LAYOUTS (Especially for container boxes)
Different units depending on context. If there was one that was best for every situation, then there wouldn't be so many units.
As rules of thumb go:
If you are working on screen media:
Use % for font sizes
Use px for images
Use px, %, or em for box sizes
Use ratios for line height
If you are working in print media:
It might be wise to avoid px (this is not a hard rule by any means) and everything else is fair game. It really depends how much control you want.
There's no real right or wrong, but as a rule of thumb:
For anything you want a certain, fixed size, use PX
For anything you want to scale with font-size, use EM
For anything you want to scale to the available space in the window/container, use %
Each used to have specific advantages or disadvantages in different browsers when it came to users scaling the browser's base font-size/zooming, but more recent versions of the browsers by-and-large get around these issues by scaling everything, not just font-size.
If you're talking about font-size then px and pt are not ideal.
Ems and Percent units are scalable, therefore they are far more accessible - friendly for the visually-impaired. They also scale down well for mobile phone users.
Px and Pt units do not scale upward for visually-impaired users, or downward for mobile phones.
If you're talking about layout or containers then it depends on the type of design you want - fluid or static - and there isn't necessarily a "right" answer.
Without going into an example, it's difficult to advice. Do you have a site in mind we could look at?
Use the unit you need in the specific context.
Unit Description
====================
% percentage
in inch
cm centimeter
mm millimeter
em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)
source: http://www.w3schools.com/css/css_units.asp
For flexibility and accessibility I recommend using % for horizontal measures (relative to the user's screen), and em for vertical measures (relative to the user's font setting).
For fixed width layouts
For as much as pixel perfection I would suggest to use PX for width ,height, margin, and padding
for line-height use unit-less value like {line-height:1.2}
for typographic elemets use {font-size:62.5%) for body then use em for other elements
in HTML for <img> always use unit-less width and height .