In the book bulletproof web design the author mentions that specifying font size in pixel is not the right way from the point of accessibility.
Later in the book, he uses the margin and padding in pixels - My question is since pixel is relative to the resolution of the device - would that remain consistent - when accessed from different devices?.
Thanks to explain.
--
Update: Read the later notes by the author: The author "Try using ems for margins, padding, line height, and so forth to provide true scaling of your design (and not just text), regardless of font size."
It seem's that there is no one answer to this - just that if older browser support /accessibility issues are taken into consideration then relative measurements are preferred.
There's a lot of opinion but no one best right/wrong way to do it. It all depends on context...the content, the site, the audience, the code, etc.
There's nothing inherently inaccessible about defining your fonts in pixels. There was a time when it was hard to size the type via user-preferences in IE6, but that was a failing of IE6, not the px unit of measurement. Many folks now prefer to spec type in px (as do I) as it can make things easier on large sites with massive amounts of inherited CSS and a deeply nested DOM.
As stated, em is a measurement relative to the size of the type. So if you base padding and margins using ems, they will change in proportion to base font size of your page. Is that good? Again, it depends on your particular page layout and needs.
That's only a problem in IE6. All the newer browsers zoom properly, and enlarge text, even when it's set in pixels.
Only setting font sizes in em doesn't increase accessibility in any other browser.
However, it's no harm in any browser, so if it suits you, stick with it.
Pixels in css aren't really pixels, they're a percentage of the viewing angle.
So hi-res devices will show your content fine, it won't appear tiny if you set pixel sizes.
Reference:
A Pixel is Not a Pixel - Quirksmode
W3C Unit Definitions - see the explanation of the pixel unit for a free headache
Related
What are the advantages & disadvantages of each? em, px, % and pt ?
My current choice are percentages, the only reason is because I can globally change the font-size of all elements, just by modifying the font size on the root element (body)
I would recommend EM — simply because I use Baseline CSS for my basic set up of forms, layout and most importantly type.
Can't recommend it enough : http://baselinecss.com/
My original design training said em's where possible.
I believe a main reason was that different browsers and devices have different resolutions, which is once again becoming a big issue.
I think it's frequently better to use em's and %'s as they are an abstraction layer particularly when compared to pixels. Both are similar in some respects as "100%" = "1em".
Another problem with the pixel unit is that it does not scale upward for visually-impaired readers.
Today, for mobile, pad, etc. consideration it's often better to have specific stylesheets / rules for each one.
Also, for print concerns, em works well.
I have seen em unit called a standard for font sizes on the web, but the percent unit often gives a more consistent and accessible display. When user settings are changed, percent text scales well preserving readability, accessibility, and visual design.
Here is a link to one of my favorite articles on proper sizing of text with css from AListApart:
http://www.alistapart.com/articles/howtosizetextincss
Semantically, em is preferred, but I've always found it problematic because it impacts each child element inclusively. If your design nests 4 or 5 divs and each is at .75 em, by the time you get to the last child div your text is almost unreadable.
My preference is pt because it works with various operating systems (allowing the system itself to decide what a pt is) rather than using px which can really put a pinch on the readability of a site depending on resolution. Em is considered the "standard" for css, but it has just as many problems as the others, but it does have the advantage of cascading globally.
I always use ems. Using % is kind of the same, but they mean something else when using them in a padding or margin statement (padding:1em 0; is not the same as padding:100% 0;). So just use ems I you mean relative to the current font size, and avoid any confusion.
Added benefit or using ems is you could e.g. use a media query and body{font-size: 120%} to give mobile users a slightly bigger fontsize.
Nice question !
Me i'm using pixel because I like it when everything is fixed.
But checkout this article :
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
could help you make a choice.
I think all this is very personal. Or it depend of what you are doing I suppose
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
what is the difference px,em and ex?
I have a question for all the coding geniuses on StackOverflow.
I am a newbie, and I am about to start building my third website. Being that I had some problems with the layouts of my first two websites, I am asking this question before I start on my third:
What measurement is it best to use for
the css elements? Percents,EM's or Px?
Which form of measurement will ensure that I have a site that will not get distorted on different browser sizes/resolutions? Is there anything else that I have to be careful of when building my site so that it will not get distorted when a user zooms, or looks at the site from a different browser size/ resolution? (as was he case on my other sites)
Thanks for your time, guys. Any help would be greatly appreciated!!
Thank you.
Whichever is easier for you to work with.
Modern browsers (i.e. everything in use today except for IE6 and IE7) have a concept of "CSS pixels" which is different from "actual pixels," so e.g. zooming changes the size of a "CSS pixel." Fonts will scale just fine; if you say the font is 14px, it will start out that way, but if the user zooms it'll get bigger. Thus, if it's easy for you to measure in pixels, for example to size page elements relative to an image of a given pixel size, you should do pixels.
Sometimes you want to size things relative to text, though. If the width of an em-dash is a useful measurement, somewhat representing the "longest possible character," go ahead and use ems.
And finally, if you're trying for a fluid layout, percentages can be great: a gradient that starts fading 50% across the page is often what you want, as opposed to one that starts fading after some fit number of pixels. Even if you're not fluid, and the width of your container is fixed to e.g. 900px, it's still often useful to say "this goes at the 50% mark" or "I have one thing at the 33% mark and one at the 66% mark." That's much easier to work with than figuring out what the corresponding pixel offset is every time, and makes your intent clearer to anyone reading your code.
Short answer: it depends.
Longer answer:
There is a place for all three units, frequently in the same design. There is no "best" unit; they serve different purposes.
Pixel units generally offer the most precise control over the size of the elements in the user interface, but also restrict that size such that it does not change with regard to the other elements of the page design. The size of pixels themselves may change. For example, a Retina display packs more pixels into the same physical space as a non-Retina display, so images which were designed for traditional displays get scaled up. Similarly, traditional desktop web browsers may adjust the size of pixel in response to the user zooming the size of a page. In these cases however, the pixels change sizes throughout the entire document, and retain the same proportions with regard to one another, so you can use px values and expect them to work sanely in most conditions.
EM units vary according to the size of the text. They're most commonly used for setting the size of text, and for line heights; but there have been some interesting things done with "elastic" layouts such as the elastic lawn zen garden (turn off page zoom for this site; switch to text-only zoom and change the size a few times).
Percentages vary according to the size of the containing element, expanding and contracting depending on how much room is available to them.
And, really, it's very common to see web designs that use all of these. For example, suppose you have a site with two columns. The main column must expand and contract with the browser width, but the secondary column needs to stay the same width. The main column might have a width of 100%, but also a margin set in pixels for the secondary column to float in. And the text and line height might be set in ems.
So, the real answer is: they all have their uses. Keep practicing, and pretty soon you'll figure out how it all fits together.
EDIT: In the example above, I should have said "a width of auto" -- meaning take up all available space after margins, padding, and borders are accounted for. Sorry, I tend to think of that as a percentage even though it's actually a keyword.
from accessability point of view need to use EM's. You need you layout to adapt to very different fonts sizes so if allmeasurements are in EM's everything will scale as accessability tools increase font size
When creating liquid layouts, it makes sense to use percentages for the widths of your blocks, so they shrink and grow with browser size changes.
For heights, pts have a specific spatial value, and em are related to your current point size. This is useful because things specified in those units will be roughly the same size on everyone's display (unless they have different zoom factors applied). em are also useful when working with a dimension driven by an amount of text.
Browsers will also scale values specified in pixels, so they are not any more a "trap", but they are rarely the "natural" choice for layouts, unless working with raster images.
As Will and Domenic say: use all three, when appropriate. As you get more experience, you'll get a better feel for when to use which.
If you want to design a fixed layout website then use px or em.
If you want to design a fluid layout website then use percentages.
Percentage is always relative so page content with dimensions in percentage will automatically resize on window resize and on different screen resolutions.
px and em are one and the same thing. Same in their nature. They define the absoluteness of the dimensions. Btw for the difference, 1em=current font size. So if your html or body has css font-size:19px; then 1em=19px.
I still use EM's in the CSS to specify the sizes of elements in my templates.
Today most browsers are able to correctly scale websites where the sizes are given in PX.
My argument for using EM's was / is: if a person that has a sight disability and changes the base font size in the browser, the design still fits.
I'm asking because for me its still a source of errors to use EM's. When i specify a different font-size then the base font-size on a element, I often forget to adapt my EM calculation for the children elements.
Now i have 2 questions:
How do people with a sight
disability configure the browser (do
they use the browser zoom or do they
still change the base font-size)?
Does it still make sense to use EM's
for element sizes nowadays?
Based on what I've read, neither. Users with mild-to-moderate sight difficulties often use applications distinct from the UA itself to provide zooming functions. These tools can magnify all or part of a display, but (in my limited experience) they don't zoom the text out-of-relation to the setting.
It still makes sense to use 'em'. First of all, accessibility isn't the only reason to use 'ems'. I think the inheritance model of relative sizes makes more sense with ems and percentages than it does with pixels. Second, you can do calculations in CSS3 itself, if it helps you to not need to remember to adapt your calculations.
refs:
http://www.championinternet.com/rwa/Ann.pdf
http://davidbcalhoun.com/2010/does-it-still-make-sense-to-use-em-rather-than-px
http://www.w3.org/TR/css3-values/#calc
Physical dimensions (px) are generally worse than logical (pt, em, %) because physical devices' size and resolution may vary wildly (from a small handset to a desktop screen to a wall-mounted plasma screen). Unless you're tightly bound to a piece of raster graphics, there should not be any disadvantage in specifying dimensions in logical units.
If you always specify font sizes as percent of base size, it's harder to forget to use the logical units :) Also a user can just specify base font size in the browser and your entire design adapts automatically.
When font size is too small for me to read, I zoom a little. Also I specify quite large base size for Japanese pages so that I can make out the glyphs. But if a page resists to adapt to font change, I usually just hit my 'Readability' bookmarklet, and the offending design disappears completely.
I'm still in favor of using EM as a unit. But like you said, modern browser scales size pretty well even with other units.
I think the most important is to always use the same unit across the website. As long as you don't start to mix different unit, the browser should handle everything well.
The only real advantage I see nowadays to use EM, is that someone who has increased is default font size will see your site with bigger elements without doing anything. If you use PX, the person probably have to change the size manually.
I read somewhere on a site :
In principle, using a px measurement for font-size is not a good idea. A handful of browsers will prevent the font from being resized by the user if you do this.
Is this right??
Is this right??
Well, yes, certainly there are a few (generally older) browsers that won't let you resize the text when it's sized in px, pt, in, mm and so on.
But even in browsers with a working zoom, it's polite to work relative to the user's stated preference for font size, so they don't have to resize the text or zoom the page manually to make it comfortable. (Fixed fonts plus fixed width page can be particularly bad for this in page-zooming browsers as zooming up is likely to make the columns of text too wide to fit the screen.)
In principle, using a px measurement for font-size is not a good idea.
I wouldn't go so far as to say it's always a bad idea.
There are often elements on the page where you want the text to be sized to match an image (say, a header with text below it that should fit more-or-less without wrapping, or text above a background image made to fit it). In that case you should use px to make fonts and images line up nicely.
For the page's main body text, yes, it's nicer to use em/% and let the user decide the size. But for text that plays a part in the page's graphical layout, px fonts are typically the best bet.
The issue is mainly with aspect ratio. Let's say my resolution is 1024x768 for an aspect ratio of 1.33. For 1920x1080, the aspect ratio becomes 1.77, meaning that any image displayed at a specific pixel width and height will be a different size in inches due to the scaling effect of the aspect ratio. The same basic issue exists if you zoom as you are effectively using the aspect ratio in the zoom window.
Most websites get around this by using em which, to be honest, suffers from some of the same downfalls as any other rendering mode. Even "device independent pixels" are based on the DPI of a monitor. So, use em knowing that it just has less faults than px, not because it's perfect.
Read the following article if you want a more in depth study.
http://www.w3.org/WAI/GL/css2em.htm
Yes, at least IE6 & IE7 do that. Take a look at How to Size Text in CSS.
Quoting CSS: The Definitive Guide by Eric Meyer
There is one more value that is
potentially the same as 36pt, and
that's 36px, which would be the same
physical distance if the display
medium is 72 pixels-per-inch (ppi).
However, there are very few monitors
with that setting anymore. Most are
much higher, in the range of 96ppi to
120ppi. Many very old Macintosh web
browsers treat points and pixels as
though they are equivalent, so the
values 14pt and 14px may look the same
on them. This is not, however, the
case for Windows and other platforms,
including Mac OS X, which is one of
the primary reasons why points can be
a very difficult measurement to use in
document design.
Because of these variations between
operating systems, many authors choose
to use pixel values for font sizes.
This approach is especially attractive
when mixing text and images on a web
page, since text can (in theory) be
set to the same height as graphic
elements on the page by declaring
font-size: 11px; or something similar,
as illustrated by Figure 5-15.
Using pixel measurements for font-size
is certainly one way to get
"consistent" results with font-size
(and, indeed, with any length at all),
but there is a major drawback.
Internet Explorer for Windows up
through Version 6.0 does not allow
users to easily resize text that has
been set with pixels. Other browsers,
including Mozilla, Netscape 6+,
IE5+/Mac, Opera, and even IE7, allow
the user to resize text no matter how
it's been set. Thus, using pixels to
size text is no more of a guarantee
that it will stay the same size than
is any other method. The other
approaches discussed in this chapter,
such as keywords and percentages, are
a much more robust (and user-friendly)
way to go, as they can be used to
scale text from the user's default
font size.
That said, the issue here is what unit to use for your body element. In most cases, you should use the em unit for other elements like headings and paragraphs.
This question already has answers here:
What is the difference between px, em and ex?
(4 answers)
Closed 1 year ago.
When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?
There's a really good article on web typography on A List Apart.
Their conclusion:
Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.
Both adjust the font-size relative to what it was. 1.5em is the same as 150%. The only advantage seems to be readability, choose whichever you are most comfortable with.
From http://archivist.incutio.com/viewlist/css-discuss/1408
%: Some browsers doesn't handle
percent for font-size but interprets
150% as 150px. (Some NN4 versions,
for instance.) IE also has problems
with percent on nested elements. It
seems IE uses percent relative to
viewport instead of relative to
parent element. Yet another problem
(though correct according to the W3C
specs), in Moz/Ns6, you can't use
percent relative to elements with no
specified height/width.
em: Sometimes browsers use the wrong
reference size, but of the relative
units it's the one with least
problems. You might find it
interpreted as px sometimes though.
pt: Differs greatly between
resolutions, and should not be used
for display. It's quite safe for
print use though.
px: The only reliable absolute unit on
screen. It might be wrongly
interpreted in print though, as one
point usually consist of several
pixels, and thus everything becomes
ridiculously small.
The real difference comes apparent when you use it not for font-sizes. Setting a padding of 1em is not the same as 100%. em is always relative to the font-size. But % might be relative to font-size, width, height and probably some other things I don't know about.
Given that (nearly?) all browsers now resize the page as a whole, rather than just the text, previous issues with px vs. % vs. ems in terms of accessible font resizing are rather moot.
So, the answer is that it probably doesn't matter. Use whatever works for you.
% is nice because it allows for relative resizing.
px is nice because it's fairly easy to manage expectations when using it.
em can be useful when also used for layout elements as it can allow for proportional sizing related to the text size.
As Galwegian mentions, px is the most reliable for web typography, as everything else you do on the page is mostly laid out in reference to a computer monitor. The problem with absolute sizes is that some browsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoom in/out, everything adjusts except for those elements.
I do not know whether IE8 handles this properly, but all other browser vendors handle pixels just fine and it is still a minority case where a user needs to enlarge/diminish text (this text box on SO perhaps being the exception). If you want to get really dirty, you could always add a javascript function for making your text size larger and offer a "small"/"larger" button to the user.
Regarding the difference between the css units % and em.
As far as I understand (at least theoretically/conceptually, but possibly not how these two units might be implemented in browsers) these two units are equivalent, i.e. if you multiply your em value with 100 and then replace em with % it should be the same thing ?
If there actually is some real difference between em and % then can someone explain it (or provide a link to an explanation) ?
(I wanted to add this comment of mine where it would belong, i.e. indented just below the answer by "Liam, answered Sep 25 '08 at 11:21" since I also want to know why his answer was downvoted, but I could not figure out how to put my comment there and therefore had to write this "thread global" reply)
Yahoo User Interface library (http://developer.yahoo.com/yui/) has a nice set of base css classes used to "reset" the browser specific settings so that the basis for displaying the site is same for all (supported) browsers.
With YUI one is supposed to use percentages.