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.
Related
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 building a responsive website and I'm wondering what unit I should use? I've seen a lot of sites using pixels (px) for measurements and I've seen some using percent (%). Is there a preferred — or right — way of doing responsive design?
I've found percent to be hard to use, since it makes calculations hard and I've ended up with values like 2.754% and so on when setting widths/margins etc. Pixels seems easier, it's just simple addition and subtraction, but I've read that it isn't "future proof" or something like that and wont scale properly if the user zooms in the browser window. Is that still true?
If you have any experience or expertise, please share! I would love to hear what you guys have to say!
Thanks!
For layout type things like the sizes of boxes, you want to use % because you will typically have several columns sized as a percentage of their parent that will stack on top of each other at a certain breakpoint (width:100%). No other unit will allow you to fill 100% of the space like % does.
For padding/margins use em, normally you will want to space your elements out relative to the size of your text. With em (the with of an 'M' character) you can quite easily say I want approximately 1 character spacing here.
For borders you can use px or em, there is a difference though. If you want your border to look like it's one pixel wide on all devices, use 1px. It may not be one pixel on all devices however, high density displays convert 1px into 2px for example. If you want your border to be a size based on your font, use em.
For fonts use em (or %), the use of em carries through parents to children and it just a nicer unit to work with over px.
Of course you must use percentage. But with the min-height, max-height, min-width, max-width CSS keys.
For the next generation
vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height.
For responsiveness they are going to be the new units.
Use percentages along with min-width and max-width in pixels. This stops percentages making your divs too small or too large. eg
div {
width:100%; //full width of browser
max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding
}
For layouts vh and vw are good because they are relative to the device's view port. They give you the possibility of designing with the view port of the device in mind. With this said you know what will show on the window and what won't without being too careful.
For text em is best because if it's responsive features.
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 .
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.