When we use the flexible layout(called elastic or liquid layout) that time only to define the ‘em’ measurement.
In fixed layout to be define the ‘px’ measurement. Because you can define the em measurement in fixed layout, the layout has been breakable. its not good for the viewer.
Because the problem is only to below IE6 version, when we define the ‘px’ measurement. If you are define the ‘px’ measurement you can’t enlarge the font size in the ie6 browsers. Enlarging problem not available in other browsers.(FF,Opera,Chrome etc.,)
Dinesh, that’s kind of a rule of thumb, but I woudn’t go so black and white with px are bad, ems are good. I hear in my head that counselor from South Park: “Drugs er baaaad, mmmm kay?”
I remember my copy of Firefox 1.5 could really text-enlarge, but FF3 simply doesn’t enlarge the text very much. I believe assistive technology simply does this better and has the capability to enlarge up to 32 times or whatever crazy amount is needed. Either browsers come by default with a screen magnifyer, or users need to couple their browser WITH a screen magnifyer. Because a magnifyer is sooo much different from just text enlarge.
I never zoom, because I hate everyone getting larger JUST so I can read the text. I always prefer text-enlarge, which is why zoom is turned off on my FF and Safari (3 at least) doesn’t zoom (or I just haven’t found it). Maybe 4 beta does?
Though you know how Safari lets users enlargen a textarea to their liking? That would be kinda awesome (if unbelievably difficult to code) to let users do that to all sorts of containers. Like Zeldman’s page-- I’d like to just text-enlarge that 9px font he’s got, but the 800px wide page is just too damn small to do that-- you get like two words per line, lawlz. Cause he’s squeezing a sidebar in there and all that. I’d like to be able to stretch his box to like 1000 px and then continue on happily with just text-enlarge-- I don’t want his logo and images to grow, they’re a waste of space.
In my opinion, you should always use flexible layouts. They protects your website’s layout whether the user resizes the text or zooms the site. Using flexible layouts eliminates most text resizing problems and makes your site more flexible and user friendly, even for IE6 users.
Of course you should always make a flexible layout. If you don’t your basically screwing over the people who need additional help to view your pages. And those with different monitors sizes/resolution sizes are going to have to zoom if they view it in a big monitor and you designed for a small one.
In my opinion, Firefox 3+ and Safari 4 (now final, not beta) do it right. They have a single Zoom in and Zoom out feature, that will zoom the entire page content. But you can switch to resizing text only by checking an option. This is what it looks like (in French, though):
Regarding to what extent users should be able to maximize text… i’m not an expert, but some accessibility experts i’ve talked to consider that beyond IE’s “larger text” zoom level, or the equivalent in Firefox and other browsers, users will probably use specific tools (screen magnifiers), sometimes in combination with a screen reader. A very capable page zoom, such as Opera’s (the first and the best by far), might be a good intermediate solution.
I’m not sure of that. Flexible layouts are great for some websites, but won’t really work for others. I’ve come across quite a few great layouts that couldn’t have been done using a flexible width. Moreover, when doing a flexible layout you must restrict the width (using max-width and sometimes min-width) so that text lines won’t be too long, so you end up with a flexible layout that will actually display as approximately 750px-wide, 980px-wide or 1100px-wide depending on the browser window’s width. In those cases you might want to go with media queries and define two or three fixed-width layouts (that won’t be more work, if you do it right). And, well, generally using a flexible height is enough to provide a good experience for current desktop and laptop users. Oh, and a flexible-width layout makes content design way harder (content design is important, you don’t just design a container and navigation and then throw some content in it… or at least you shouldn’t).
So, no banning fixed-width layouts for me. But the whole question is really tricky and each project should ask the question: fixed-width or flexible (and what kind of fixed or flexible exactly)?
I mena flexible, as in room for text resize/help devices to allow users to browse your sites more freely. I have done a fixed layout once but the accessibility and usability failed.
But you can switch to resizing text only by checking an option
That’s what I’ve done since the moment FF3 came out. I hated zoom from the moment it appeared, except in Opera since it’s the only way to enlarge text there. My copy of Safari3 does text-enlarge by default, and I never went looking for a zoom.
A bit late, but I too was under the assumption that just IE6 was intolerant of px fonts. But so are IE7 and 8, so actually, we should be saying “IE”. I did not knowz that.
AutisticCuckoo had a good answer with "A font usually contains other characters than Latin letters. Some of them will reach above the tallest ascenders or below the deepest descenders of the Latin letters.
So the font size specifies the height of the character box in which all possible glyphs in the font must fit. Latin letters may or may not utilise the full extent of that box."
However, that does not seem to be the full story. I believe the answer is “it’s up to the typeface designer.”
For example, set up a table where you define a thin/solid border, background color, padding 0, and for the text set a background color and 32px. I used a blue border, red cell background, and a yellow text background. I then set up multiple rows, with one row in Arial, the next in Arial Black, Comic Sans MS, … on up to Verdana. Each row has “Šq|┼║█The quick brown fox jumps over the lazy dog”. Display the page in a browser and take a screen shot.
In my case Arial Black was the tallest and used 45 pixels with the top to bottom character height being 35 pixels. The thinnest was Courier New at 36px high for the overall box and 32px for the lettering. The average for the fonts I tried was 39.4px space used and 36.2px for the lettering. Courier New was the only font that actually used the 32px I had asked for and the rest are taller.
There were quite a few surprises and inconsistencies in how the text was placed in relation to the text background. Arial and Times New Roman have a one pixel area above the text background where the cell background is showing. When I added “┼║█” to the test I found those characters descended below the text background for some fonts with Verdana descending by two pixels.
It seems many font designers did not have ligatures in mind when they added characters such as “┼║█” as the tops of the ligatures are well above the tops of those characters which should go all the way to the top of the text background.
In summary, when you ask for a size such as 16px the displayed text will be “around” 16 pixels.
That’s a cool page. I’m routinely amazed when software renders text and that page brings up some of the issues a rendering engine deals with. I think I’ll hang out on the rendering mailing lists and see if the old brain melts. These guys spend a career thinking about the meaning of vertical centering.
I forget what search terms I used but had been hunting around to better understand the definition of “font size.” It was prompted as Microsoft SharePoint defaults to size “3.” We have a table that people update regularly and rather than having people change the size back to “2” each time I wanted to add “font-size: 80%;” to the cell style as SharePoint simply duplicates the cell styling when you insert a new row. I was not sure if 80% was right, looked at the displayed “2” text on screen, and realized the # of pixels visibly used was not one of the normal “px” sizes. I started hunting around, finding lots of junk, and then found this thread where the OP asked exactly the same question I had. By then I’d also done the testing with that table with colored backgrounds and so figured I’d chip in the results to answer the OP’s question. I knew it was an old thread and that the thread seemed to have drifted from the original question.
Now I just realized what I can do is to go back to that SharePoint page, put up some “3” text, and the same in “2” to see what the ratio is for FireFox and the various versions of IE we use. I’ll need to look around this site for other hair loss products as it looks interesting.