How to set a user specified font size?
May 9, 2009 3:09 AM Subscribe
Please educate me about variable text sizes and CSS. How can I make sure that my text sizes are truly fluid, and that they look good at any font size & resolution (within reason)?
Example: a site is designed to be viewed in 1024x768 resolution, with fixed widths and font sizes. At a higher/lower resolution, the layout is distorted, with left-right sliders and sections "overlaying" one another.
Backstory: I want to avoid that on my website. I'm using variable widths on everything necessary, but I'm unsure as to how to go about setting font sizes. I've tried using em values, but I got into a horrible mess with headings being smaller than general text and such. I want to avoid using absolute values as much as possible, because I want the site to look the same (as much as that is possible) at any resolution. 10pt fonts at 1680x1050 look horribly small.
The actual questions: Is going down the em route considered the best way to go? And if it is, is there something I can do to make it simpler? For example, could I somehow set 1em as being the default that the user has chosen in their browser, and then make the other sizes relative to that? Or is there a better way?
Example: a site is designed to be viewed in 1024x768 resolution, with fixed widths and font sizes. At a higher/lower resolution, the layout is distorted, with left-right sliders and sections "overlaying" one another.
Backstory: I want to avoid that on my website. I'm using variable widths on everything necessary, but I'm unsure as to how to go about setting font sizes. I've tried using em values, but I got into a horrible mess with headings being smaller than general text and such. I want to avoid using absolute values as much as possible, because I want the site to look the same (as much as that is possible) at any resolution. 10pt fonts at 1680x1050 look horribly small.
The actual questions: Is going down the em route considered the best way to go? And if it is, is there something I can do to make it simpler? For example, could I somehow set 1em as being the default that the user has chosen in their browser, and then make the other sizes relative to that? Or is there a better way?
Oh God, I'd avoid doing what miss tea just advised.
I willing to wager that you're overthinking this. If your layout is consistent and well-formed, then sizing things using em will work just fine. If you've got your h1s at 1.4 em and your h2s at 1.2 em and your p/body text at 1.0 em then your general text will never be smaller than your headings. (These are just examples of sizes.)
Far, far, far more imporant than twiddling with the layout is quality content. Good layout won't bring in 1/100th of the traffic that good content will.
posted by unixrat at 5:12 AM on May 9, 2009 [1 favorite]
I willing to wager that you're overthinking this. If your layout is consistent and well-formed, then sizing things using em will work just fine. If you've got your h1s at 1.4 em and your h2s at 1.2 em and your p/body text at 1.0 em then your general text will never be smaller than your headings. (These are just examples of sizes.)
Far, far, far more imporant than twiddling with the layout is quality content. Good layout won't bring in 1/100th of the traffic that good content will.
posted by unixrat at 5:12 AM on May 9, 2009 [1 favorite]
Best answer: Yes, you should go down the em road. I'd recommend setting your base font size on the body tag
body{
font-size: 1em;
}
then calculate your h1, h2, h3 etc from there. You should also add this
html{
font-size: 100%;
}
Which will fix IE text resizing issues.
posted by dydecker at 5:20 AM on May 9, 2009
body{
font-size: 1em;
}
then calculate your h1, h2, h3 etc from there. You should also add this
html{
font-size: 100%;
}
Which will fix IE text resizing issues.
posted by dydecker at 5:20 AM on May 9, 2009
This makes the math a bit simpler.
Like unixrat says, it's not too hard at all
posted by dydecker at 5:21 AM on May 9, 2009 [1 favorite]
Like unixrat says, it's not too hard at all
posted by dydecker at 5:21 AM on May 9, 2009 [1 favorite]
There is an entire chapter on fluid text sizes in Bulletproof Web Design, a book I recommend unreservedly.
Dan Cederholm recommends setting your base font-size to
font-size: small;
And then setting the sizes of headers, etc, as percentages, e.g.
h1 {
font-size: 200%;
}
You will need to feed IE6 the x-small size as it for some reason renders all keyword font sizes one size larger than every other browser.
Anyway, the book I linked above has an excellent discussion of a number of font-sizing techniques and is well worth reading.
posted by rachelpapers at 6:21 AM on May 9, 2009
Dan Cederholm recommends setting your base font-size to
font-size: small;
And then setting the sizes of headers, etc, as percentages, e.g.
h1 {
font-size: 200%;
}
You will need to feed IE6 the x-small size as it for some reason renders all keyword font sizes one size larger than every other browser.
Anyway, the book I linked above has an excellent discussion of a number of font-sizing techniques and is well worth reading.
posted by rachelpapers at 6:21 AM on May 9, 2009
One thing that might be confusing you is that font-size is one of the properties that cascades (some Cascading Style Sheet properties cascade and some do not.)
This means that if your CSS rules or inline styles are setting font-size in percentage or ems on block-type container elements like div's, you are then redefining what "1em" means inside that kind of div. So if you're applying relative font sizes like that to containers, you could have, say, a class for span elements that sets its font size to ".7 em", then text in such spans will be completely different sizes in different parts of the page depending upon what the settings are on the containers they're in.
So the font size of any given text is going to be the product (as in, multiplied together) of all of the settings of each element that contains it.
posted by XMLicious at 7:13 AM on May 9, 2009
This means that if your CSS rules or inline styles are setting font-size in percentage or ems on block-type container elements like div's, you are then redefining what "1em" means inside that kind of div. So if you're applying relative font sizes like that to containers, you could have, say, a class for span elements that sets its font size to ".7 em", then text in such spans will be completely different sizes in different parts of the page depending upon what the settings are on the containers they're in.
So the font size of any given text is going to be the product (as in, multiplied together) of all of the settings of each element that contains it.
posted by XMLicious at 7:13 AM on May 9, 2009
This thread is closed to new comments.
A quick search should show you some example of that.
posted by miss tea at 3:44 AM on May 9, 2009