Forum Moderators: open
For my use, I'm only interested in the text being the same size on screen independent of resolution or platform, and it doesn't need to be exact, just relatively the same size, say within 1px either way.
In other words, will a 12px font look the same across different platforms, browsers, and resolutions relative to the page itself?
A particular problem I have with fixed sizes: although IE 7 (of all browsers!) respects fixed sizes, FireFox does not. So a specific size will increase when someone selects larger text size in FF.
So to answer the question,
. . . text being the same size on screen independent of resolution or platform . . .
Not going to happen. In the context of your question this is a contradiction - fixing text with a pixel size makes it resolution dependent (in theory.) What you should do is design so that if the text *IS* resized your layout is not so delicate that it explodes.
The recommendation is probably going to be em, but I have better luck with percentages.
Do you have the same luck, or a problem?
[edited by: tedster at 5:22 pm (utc) on Nov. 14, 2007]
Fixed pixel sizes ... A particular problem I have with fixed sizes: although IE 7 (of all browsers!) respects fixed sizes, FireFox does not. So a specific size will increase when someone selects larger text size in FF.
I'm not suggesting use px either, but px in terms of CSS are relative, not fixed:
W3C - 4.3.2 Lengths: [w3.org]
Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch). When printed on a laser printer, meant for reading at a little less than arm's length (55 cm, 21 inches), 1px is about 0.20 mm. On a 300 dots-per-inch (dpi) printer, that may be rounded up to 3 dots (0.25 mm); on a 600 dpi printer, it can be rounded to 5 dots.
Actually I tired resizing the font on my website with both IE and FF and they increase and decrease the font size fine.
It might be worth mentioning that if you are 'zooming' with IE7 (as oppossed to simply changing the text-size) then even px sizes will 'zoom' OK.
Yes, zooming, is probably what I'm doing, simply by CNTL +/-, which I assume most people do....
But in IE6 (which most people still use) Ctrl +/- changes the text size (since it didn't have zoom). In IE7 you can only change the text size via the menu (View > Text Size).
I don't have IE6 anymore, but I'm almost sure I remember that CNTR +/- will increase the px font size when used as CSS.
That's the thing - it won't! The same as if you actually pick a larger or smaller text size from the menu in IE7. IE won't resize the text if it's defined in px (as rocknbil suggests; it's fixed) - except for the 'zoom' feature in IE7, which resizes everything not just the text. Other browsers however will. And IE will if the font-size is defined in em, ex or %.
Hail FF.
Thanks for all your input on this topic. I'll probably change the font setting in my css file now to reflect better text sizing.
Penders writes:
I'm not suggesting use px either, but px in terms of CSS are relative, not fixed:
And then goes on to quote the W3C recommendation.
Now, the CSS spec's categorization of pixels as relative units has confused web designers for years for this reason:
Ems and percentages are categorized as "relative" quite understandably because they take their base size from their parent element.
Then, however, the spec goes on to lump pixels in along with ems and percents as "relative" but for an entirely different reason. (See Pender's post.)
Frankly, whoever wrote this part of the spec needs a brush-up in cognitive science real bad. Categorization is important, it helps us make sense of a complex world. But do pixels behave anything like ems and percentages? No. does it make any sense at all to categorize them together? No.
And besides, if pixels are "relative" then points, inches, picas, and millimeters when displayed on screen are relative too because the OS uses pixels to compute the end result - as in the computedStyle property. You can even map the values of pixel to point, pixel to pica, pixel to inch, etc... (The most obvious being the browser default font-size of 12 points being 16px. At a 96 DPI, the point to pixel ratio is a 3:4)
In fact, the CSS spec mentions these relationships:
6.1.2 Computed values
Specified values may be absolute (i.e., they are not specified relative to another value, as in 'red' or '2mm') or relative (i.e., they are specified relative to another value, as in 'auto', '2em', and '12%'). For absolute values, no computation is needed to find the computed value.Relative values, on the other hand, must be transformed into computed values: percentages must be multiplied by a reference value (each property defines which value that is), values with relative units (em, ex, px) must be made absolute by multiplying with the appropriate font or pixel size, 'auto' values must be computed by the formulas given with each property, certain keywords ('smaller', 'bolder', 'inherit') must be replaced according to their definitions.
In most cases, elements inherit computed values. However, there are some properties whose specified value may be inherited (e.g., the number value for the 'line-height' property). In the cases where child elements do not inherit the computed value, this is described in the property definition.
Clear? Confusing? Yeah, both at the same time and that's the problem.
CSS pixel units do what they do and calling them relative or absolute muddies rather than illuminates the issue.
The CSS spec took a wrong turn in this regard and let's not perpetuate it. It should be amended.
(And don't even get me started about the "arms's length" nonsense. What a joke.)
The best reason for using ems, is that it takes the browser's default font size, and scales everything relative to it. It does not outright assign some arbitrary value the user has to deal with, which is the problem on most websites.
For most consistant size rendering (regardless of resolution or monitor size), pts are the best way to go. It should be used for stuff like printing. The two main problems with points are #1. not all people have their DPI set correctly, and 2. IE doesn't scale pt based sizing with text zoom.
I recently ran into this explanation/categorization of basic layout/text sizing schemes which I think nicely sums up the range of options:
Fixed: Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’s text settings.
Elastic: Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts if the site visitor changes the text settings, but does not change based on the size of the browser window.
Liquid: Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
Hybrid: Columns are a combination of any of the previous three options. For example, in the two-column hybrid, the right sidebar layout has a liquid main column that scales to the size of the browser, and an elastic column on the right that scales to the size of the site visitor’s text settings.
For what it's worth...
