I have noticed that you can use 1em and it will look different on different sites.
What is an em in proportion to?
The font used?
The biggest font size?
The page width/height?
See http://w3schools.com/cssref/css_units.asp
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
An EM is relative to the current element it is defined on. If you use relative sizes (like 0.9em), they multiply and can lead to unexpected dimensions.
Now, the default size of a font is not standard between browsers. And there's an issue with IE (at least older IE) when setting the font to a specific pixel unit. A good overview for font sizing can be found on A List Apart.
According to the W3C an em:
"is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element."
In other words, ems don't have an absolute size. They take on their size values based on where they are. For most Web designers, this means that they are in a Web browser, so a font that is 1em tall is exactly the same size as the default font size for that browser.
For most browsers, default value
1em = 16px
The em is defined as the height of the capital letter "M" in the current font and size.
https://web.archive.org/web/20131127083352/http://www.guistuff.com/css/css_units.html
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 want to create a page using only "em" for font size.
The page is going to have a grid (tiles) with each cell having one image with some text above and below the image. The images are all in 200px X 200px in size. The Grid Cell would be somewhat larger than the image to accommodate the text areas.
How should I go about setting the height and width of the Div and Img tag, given that I want to rely only on "em" and not "px" for font size.
em is a relative unit of measurement that inherits its value from the font size of the parent element, so to apply consistent widths to your img elements using em you'll need to define a font size somewhere in your document structure using a measurement in px and inherit from that.
For reference's sake, where 1em equals 16px, an image with a width of 200px would be 12.5em wide- 200 / 16.
You'll want to specify your own measurement in px at least once in any case to ensure cross-browser compatibility. Not every browser uses the same default font size and it's possible that users have manually changed the default font size of their browser. If you rely on defaults, you very likely won't get consistent results, and it will be detrimental to your grid design.
How can browsers understand the em unit when used in a responsive image?
<img alt="A giraffe" src="giraffe.jpg"
srcset="giraffe#1.5x.jpg 600w, giraffe#2x.jpg 800w, [etc.]"
sizes="(max-width: 40em) 40em">
This validates, and I'm not seeing warnings in browser consoles. But if the whole point of the image preloader is to fetch images before the CSS is downloaded and parsed, what does the browser use for em?
Is it just its default font-size that it applies to <html>? Should I use rem for clarity? Is there a difference between the two when the user zooms?
This isn't theoretical; I'm using em in my media query breakpoints, and some images are constrained by a container sized for optimal line length (using em, of course).
I checked the spec, but it's remarkably terse on the new responsive image features.
I bent the ears of the guys inside the official W3C #respimg chatroom, and this is what they had to say:
<Tigt> Pardon me folks, I had a question about how em is interpreted when used inside sizes
<TabAtkins> Tigt: Same as in Media Queries - they're relative to the initial font size.
<TabAtkins> (Not the font size on <html>, the initial font size, as set by the user's personal settings.)
<Wilto> 16px almost everywhere, so long as you haven’t changed the font-size of html.
<TabAtkins> Tigt: rem is treated identical to em here.
So the speed-read is:
When used in sizes or media queries, em and rem are both specced to mean "the user's default font-size.
The actual em or rem that controls how the image is laid out on the page can end up different if your CSS changes it
This means one should not change the default size of em if they want to give the image preloader truthful information
W3C Media Queries:
This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.
#media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
The ‘em’ value is relative to the initial value of ‘font-size’.
5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units
Aside from ‘rem’ (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the ‘font-size’ property itself, in which case they refer to the computed font metrics of the parent element (or the computed font metrics corresponding to the initial values of the ‘font’ property, if the element has no parent).
em unit
Equal to the computed value of the ‘font-size’ property of the element on which it is used.
http://www.w3.org/TR/css3-values/#font-relative-lengths
em css units are equal to the font size of the current element. The font-size property is inherited. Therefore the element (img in this case) will be sized according to 40 times the font-size property. If the user zooms the page (which increases the font size) the em unit's update to that of the font-size property automatically.
The base font size will be determined by the browser, if the browser is running on windows on mac and the user has not changed the font size then base font size will be 16px (usually). On Linux, BSD or any other system the font size will be set by the desktop environment and can vary.
So while conservatively you could assume that the font size is 16px, in a lot of cases you would be wrong.
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.