Hi.
I understand the advantages of using em´s as units for fonts but what about paddings/margins, height/widhts of contents?
Should i use em´s also? If i understand right that will make my site to “resize” smoothly when the user rezises their browser font-size i could see a lot of problems.
1st: Em´s units are dependent of the font-size of the body element. What if i want to change that value later? I would have to change all the widths, margins etc or it could generate problems with my layout.
2st:It´s harder to think in em´s than in px. If i have all the paddings set in em´s it would be an headache if if want to change them later.
Font-size should ALWAYS be in EM’s (for accessibility reasons). Dimensions (width, height, padding, margin, absolute positioning) should be provided in % (flexing for big or small screens), if % appears too big or small, remember you can limit the width and height using min/max-width/height so it’ll always be between two values! but EM is acceptable for other cases and PX should only be used if the element contains an image or something with explicit requirements - just be consistent in what you use. PX should only generally be applied for fixed style elements like borders which of course need constant styles rather than “scoping” based on the viewport.
I specify px for everything, it makes my life simpler, and it is generally consistent. Percentages and em’s tend to fudge rendering in different browsers in my experience, based on how different platforms and browsers round percentages and how they render fonts differently.
I do use px a lot but - find that ems from a cross browser POV are unreliable. In fact comparing IE and FF - it seems that point size statements for font produce more consistent results.
It’s just how the browser rounds. If you specify everthing in ems for example, it gets the em values off the parent font size, and if it needs to be rounded, it wil round (some will round up, some down) and then the child will base the em sizes off that, and it’s a cascading effect just like in math, if you get a wrong answer early in the problem, all other calculations based off that will slowly become more and more messed up ;).
The measure that is least reliable is px. It is the one that gets treated the most differently between browsers and should be avoided for anything except borders.
So you are the only one who will ever see your web page? You are writing for yourself alone and so no one else matters?
Those of us, however, who make web pages for others to view will likely have policies that will make life simpler for those who visit.
Surely those who earn money from the people who visit their websites will, if they are rational, be doubly interested in making it easier for their source of income to spend their money most conveniently.
Do I need to list major design websites that all specify font sizes in px?
A List Apart, Information Architects, Digital Mash, Subtraction, etc…
ems, pts, and percentages are all RELATIVE font sizes. A user who has specified the DPI in their operating system to be 120dpi will see fonts differently than another user who is using 96dpi. Without at least specifying a base font in px, relative font sizes are inconsistent and dependent on the user’s operating system and/or browser.
Sorry to burst your bubble but your wrong, PT, alike PX, PC, IN, CM and MM are all absolute font sizes, not relative as you claimed. And PX is not an absolute font size like you specified, it’s relative. So you have just contradicted yourself and classed the very measurement unit you use as inconsistent.
Ok px may be “relative” to the viewing device (screen/print) so to speak, I concede that point.
However, what I said about different DPI settings, browsers, and operating systems holds true.
Using pixels is the only way you can specify font size on the web with any kind of certainty, and all of the major sites that still use px to specify font sizes are evidence of that.
That doesn’t make them right. There are far more terrible web sites out there than good ones.
ems, pts, and percentages are all RELATIVE font sizes. A user who has specified the DPI in their operating system to be 120dpi will see fonts differently than another user who is using 96dpi. Without at least specifying a base font in px, relative font sizes are inconsistent and dependent on the user’s operating system and/or browser.
Of course, pixels are just as relative, and if you change the DPI you change the logical pixel size, too. The OS will combine physical px elements to make a logical px, but it does not tell your browser. So a font specified in px sizes will enlarge when the user changes his DPI setting.
There is actually no truly absolute measurement in CSS, and that’s because the web is not paper, and was designed to be flexible. Nothing you can do will change this.
The “best” base font size is the one the user expects. If you do not change the user’s default setting he will be able to read that text most easily.
Setting a base font size in px WILL NOT change the fact that “relative font sizes are inconsistent and dependent on the user’s operating system and/or browser.” That’s simply the designed nature of the web which you cannot change, and therefore must adapt to, or pay a heavy price.
You’re wrong in saying that a font specified in px will change if the user changes the DPI setting. A 12px font on one OS is a 12px font on another, regardless of DPI setting. A 1em font on one OS may not look like 1em on another OS, depending on DPI setting.
Whatever the justifications may be, I’ll trust what the top-tier pros do on their own websites is right, and that is specifying font sizes in pixels. Sure, one monitor may have a higher resolution than another and therefore a higher pixel density, displaying individual pixels smaller than another monitor might. I’m not talking about physically measuring a font size on different monitors, though. I’m just saying 1em is less consistent than 12px.
ems, pts, and percentages are all RELATIVE font sizes
No pt is a fixed font size - there are always 72 pt to an inch on the computer and 72.1pt to an inch in the printing industry. That never changes.
Perhaps you are getting points and pixels mixed up in that statement since px is a relative font size that depends on the PPI that the screen is using.
