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.
Related
I've tried using em as well as px, but I cannot get a certain line of text to display at the same size in every browser. I know I'm reaching for a lot but I'm tasked with achieving a pixel-perfect development based on a mock-up, and need a certain text to span the width of an area left-to-right so that it all flushes from side to side with an image.
My last option is to use an image, which I don't want to do. I know that you can specify certain CSS parameters that work on the different browsers such as -moz-SOMECSSPROPERTY:some value; but can you do this with the font size so that one browser has it at one size, and another as another. Oddly enough too though this is actually only happening in the browsers that are on different OS's, i.e. - on my Mac it's as intended, and on Windows (same browsers) different.
Thanks for advice.
It won't be enough to specify the font on a per-browser basis, because (as you noticed) you'll also run into inconsistencies across platforms and devices.
If you want the text to always fit the image flush, the text pretty much has to be an image, too.
I'm redesigning my site because looks awful on different resolutions (apart devices), most guides and tutorials rely on % and em than fixed values. I'm still learning this so I'm reading everything around.
Thought this would solve the question with different display sizes but again: we have to craft some more CSS for fix some specific issues.
If I need to add media-queries for extra display sizes, why use % then? Do use % really reduce coding? Is ok need to add some extra css for some sizes or am I doing something wrong?
Thanks for any advice!
The purpose of using em sizes is to allow the base your design off of the user's choice of font size. I may use a larger font size because I have a huge monitor and poor eye sight, while someone else might prefer a smaller font. By using em units, your design will accommodate both of our font preferences and resize accordingly instead of forcing the font size to a given standard (eg. "12 point font").
In a similar manner, percent (%) units allow your design to respond to different browser sizes. Used in conjunction with em units, this will allow text-based elements to respond to arbitrary font size choices, and layout elements to respond to arbitrary browser sizes.
It is perfectly acceptable to design a single responsive design for all media types. Media queries are intended when you want different display styles on different devices, not to "support" different display sizes. An example would be to use serif fonts on print media and sans-serif fonts on display media, since usabilities studies have shown that these font faces are preferred for these sorts of media.
Furthermore, it allows you to do custom styling for some situations like mobile devices, where you may want to consider that the user has a limited amount of bandwidth and maybe cut down on extra images. Or if you want to display your content in a completely different layout for the microscopic screen afforded by certain phones.
% allows your site to be responsive to the user's method of viewing. Let's say you have a div that's at 100%. It'll fill the entire section, regardless if it's on a phone or desktop.
It should be okay to add extra CSS for sizes as well. As far as I know, you can have some elements display in % and some with a fixed px value, although they might conflict depending on how the page is setup or what it is being viewed with.
For example.
Your website header have the width of 950px; But in a mobile device, it may fit at 450px;
So, you use media-query to reposition some elements and handle some size issues and set the header width to 450px;
But, if you use % values, you can set your header div to have 100% of width base in its parent. So you can only change the body or some container div width, the all childs going to adapt.
Diana,
I am glad I came across this question. I literally just uploaded my first responsive design which is 90% based off of percentages when it comes to font-size and widths.
Check out the below:
http://www.noxinnovations.com/portfolio/responsive/
Obviously, it doesn't look amazing, and the image looks way out of place... But do me a favor and resize your browser window, by slowly making it smaller and smaller. I did that by setting a percentage width!
Trust me, I tried doing this responsive design test with pixels, and it didn't turn out too well. The percentage width ensures that regardless of the resolution and or pixel dimensions (per se) the design will always cater to the size of the screen. Also, I did not have to use one CSS3 Media Query, but I would highly suggest using CSS3 Media Queries only when you need them.
In my opinion, I should probably have a Media Query for a larger screen.
I hope this helps you as much as it has helped me!
Thank you,
Aaron
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
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.
what are cons to use relative values em and % for fonts, What is rounding problem? and how to avoid/solve rounding problem. Is there any calculator?
How to use relative values as easy as we use px
There are not a lot of cons using em or %.
Sometimes i had trouble to make fonts look exactly the same size in IE and the normal browsers. But most of the time i have to do a IE CSS anyway so its not really a problem.
When you define fonts in PX, the fonts are not antialiased on some computers running windows. If you use EM or % they are and you have a very precise control of the font size. (1.249em for example).
Unlike #scunliffe i would always use EM as font-size. Even when you have fixed design withs. Sometimes its not possible to do a pixelperfect design with PX fonts, because fonts rendered by Photoshop looks different then in the browser.
I have made a test tool to show the differences:
http://bluesys.ch/csstest/
and here you can find a tool to convert your PX values in to EM:
http://pxtoem.com/
I may be preaching to the choir here, but I find the Firefox "Web Developer" addon is a real help when I'm dealing with font sizing.
https://addons.mozilla.org/en-US/firefox/addon/60/
Use 'Information' > 'Display element information' to view the exact pixel size for your (relatively sized) element. Tweaking the CSS (to within 1 decimal point) until the amount returned is a round number minimises the chances of your text being different sizes in different browsers / operating systems.
Oh, and from my current project:
Standard (appearing as 12px) font set on site wrapper is 75% (body is 100%) , then use:
14px: 116.7%
16px: 133.3%
18px: 150%
18px: 166.7%
There are loads of reasons to not use fixed text sizes (accessibility being the big one), and once you've spent a while getting your CSS sorted you'll never look back.
Here's a nice little trick for you.
In the your CSS, set the font-size on the BODY of the document to 62.5%.
Now, whenever you want to set a font-size, you use EM values. 1.1em would be equivelant to 11px and 1.2em to 12px and so on.
That's how I work anyhow.
Good luck.
Michael.
I don't believe there are (m)any cons. Using px limits your ability to scale text in IE6 but otherwise using % or em should allow you to scale nicely.
The only con I can think of is that if you want your text to be exactly 12pt, or 13px then using % or em isn't what you want. However If you are trying to create a fixed width design where everything is measured out to the pixel I would advise against it. The Web is a free-flowing canvas... each user has a different sized window, personal font/zoom size choice and Operating System differences. Your content should look good on any screen by adapting to the real-estate you are provided with.
em vs px is like a holy war. Everyone has their own ideas on what's best. Using px is perfectly fine, the only real problem is that text will not resize in IE6.
One other issue is how much you will change your mind about the general font size. If you do everything in absolute values (px, pt), then decide the font size across the site is too small, then you might have to change a lot of values to make everything bigger. Conversely, if you do everything in relative values (em, %) then you want to change the size of one thing only, it will affect all its child elements.
In the end, the best choice is to simply be consistent.