What I don’t understand about font sizes, is how you know in the first place the default numbers with which you’re going to work. Do you have to assume all fonts will be 16px, and then work based on that fact?
Is there a way to impose a default font size to user agents?
When you set a #wrapper that is, say, 98% wide. 98% of what? Is there a number you set in the first place?
Is it possible to say that a #wrapper is 960px wide and still have a fluid layout?
Yes, when I switched from an old 1024x768 monitor to a 1680x1050 wide-screen, I discovered that “readability” problem on a lot of sites, some of my own included.
These forums stretch the full width, and that’s OK, but on some sites, it really does look awful.
I’ll attempt to answer, though admitting partial ignorance:
What I don’t understand about font sizes, is how you know in the first place the default numbers with which you’re going to work. Do you have to assume all fonts will be 16px, and then work based on that fact?
It won’t always be 16px, but that’s a fairly safe bet in general, so far as I know. If you set the font size on the <body> to 100% as a starting point, it’s common to make calculations on the basis of 1em being 16px. Even if that’s not the case for a particular user, everything will still be in proportion.
Is there a way to impose a default font size to user agents?
You can’t govern how people use their computers, nor should you try. Just accept that people will use their browsers as they choose, and try to make content as accessible as possible. If people want larger font sizes, there’s not much you can do to stop them. (If they know how to create their own style sheets, those will override yours. But they can also bump up their default font sizes.)
When you set a #wrapper that is, say, 98% wide. 98% of what? Is there a number you set in the first place?
98% of the viewport; that is, the browser window. (That’s assuming that the #wrapper is the first child of the <body>.)
Is it possible to say that a #wrapper is 960px wide and still have a fluid layout?
I don’t think so, but set it to something like 60ems and give the inner elements % widths and the wrapper will be ‘elestic’—growing wider if font size is increased, and narrowing if the browser window is narrowed to less than 60ems.
Don’t assume anything about font sizes. For many people, they will have a base font of 16px. But some will have bigger, and some will have smaller. Different operating systems, different browsers and different user defaults mean that it is impossible to predict the resulting font size for all users … so best not to try. Make your design flexible so that it accommodates a range of text sizes, and then everyone will be happy.
Is there a way to impose a default font size to user agents?
Only by doing the whole page as one giant .GIF file, which renders the whole point of a web page somewhat pointless. No, you can’t. And even if you could, you shouldn’t. Some people have changed their default settings to meet their needs, eg a larger size because their eyesight isn’t so good and they can’t read small text. It’s far more important that they can read your text comfortably than that you get an easy ride coming up with a pixel precision layout
When you set a #wrapper that is, say, 98% wide. 98% of what? Is there a number you set in the first place?
98% of whatever the width of its parent element is.
Is it possible to say that a #wrapper is 960px wide and still have a fluid layout?
Technically, you could have a site where the wrapper is a fixed width, but the columns within it adjust their size depending on the text size - eg, the left and right columns are always 10em wide and the middle space just fills in the gap - but that rather defeats the point of a flexible fluid layout, which is to accommodate people with a range of screen and window sizes, some of which will be narrower than 960px.
I’m currently studying styesheets of famous designers. I was wondering, why would the SimpleBits layout have a max-width of 960px? Is it a fluid layout or not?
It is common for sites that are fluid to have max- and/or min- widths. If you don’t have that, if you just let your site expand to fill the available space, and someone with a huge monitor and massive screen resolution comes to your site, they’re going to have lines that are 60 or maybe even 100 words long, and that starts to get really tricky to read. An ideal line length for reading is typically about 15-20 words, so you don’t want to allow your page to stretch off to infinity unchecked.
If you size the page width in ems at a suitable measurement then its similar to a fixed layout except that the whole page is dependent on the size of the text and will grow proportionately depending on the users default font size or whether fonts are scaled via browser controls.
So your advice would be to have both min and max width?
Yes for desktops you really want a min and max width to keep the page usable at sensible sizes. On my 27" imac 100% wide sites are totally unusable and I don’t want to have to close the window to find a suitable width when switching between various sites.
I prefer to use a min and max-width approach using pixels. In that way the most common screen widths can be accommodated with a little care.
Or you could make a site with min and max width in pixels combined with an em width which will provide an elastic site. The ems can make the layout grow proportionately but the min and max-width stops it from getting too wide if text is resized. This is similar to a fixed width site in that it doesn’t really cater for all window sizes but is better than a fixed width in pixels.
