Font Size Question

Okay, so is there a way to change the actual size that like.. setting the font size to xxsmall or xsmall or whatever.. Is there a way to make that custom to what it sets the font size to?

Where do you want to change the font size

I thought I might have been a bit confusing.. sorry

Anyway

Like, in the manager, when you’re making/editing a page, there’s a font size option in the editor bar thing. Is there a way to set custom font sizes for xxsmall, xsmall, etc.?

This might not be what you intended, but I found a fantastic, easy way to set font-sizes in CSS. We all (should) know that setting font-sizes in pixels or any other absolute unit is a bad idea. Relative units are the way to go.

If you get lost in understanding ems, percentages, etc. then you could always use this as a guideline (which should look consistent in all browsers):

The default point size for text in browsers is 16 points. If you style the HTML tag to 125% (20 points) and style its immediate child, BODY, to 50% (10 points), you ems become easier to control and understand throughout your stylesheet.

For example, by applying the rules below:



1em is equal to 10 points in all browsers. So if you want to set your H1 tag to 16 points and your P tag to 12 points, it’s as easy as dividing by 10, and then stick an em on the end.

For example,



This way, font-sizing in ems throughout your stylesheet becomes more manageable. If you then want to increase or decrease the font-size of your entire website, you just change your font-size in your body tag and the rest will size itself proportionally.

Gee, I hope that made sense.

I’m not a fan of using keywords such as small, xsmall, etc. From experience, different browsers treat them differently.

I’d stick to the using the stylesheet rather than relying on the editor to do your font-sizing. Define your styles, then reference them in the FCKEditor using the XML method. Hope it helps!

Yeah, that definitely makes sense.

And that’s how I prefer to do it, too, and I tried suggesting that to the guy that owns the site, but he’s all telling me "There’s got to be a way to set them custom."

And we are using CSS for most everything, too, so I don’t know why he doesn’t want to with this...

Quote from: grelca at Feb 04, 2006, 09:49 PM

I tried suggesting that to the guy that owns the site, but he’s all telling me "There’s got to be a way to set them custom."

Bosses eh? Who’d have ’em.

The following links are worth looking at. Just rememebr that 76% is as small as you can go and stay the same across browsers (damn cross browsers)

I uses 76% on our site then 1.0em for normal text.

http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html
http://www.clagnut.com/blog/348/
http://www.zeldman.com/daily/0502c.html#purtypink

Actually I would go with Briggsys here. You could set font size to 125% and body to 50% to achieve 10point size for default text. But if you used 75% on the Body alone then you would achieve the recommended default text font size of 12 pixels with one rule. Also remember that users who set important on body size will have this applied to body tag, not HTML so if you set HTML at 125% and the user had body at 100% important! they will likely end up with text much bigger that they anticipated at 20point size.

There was work done where 76% was found to be a good base selection and I would tend to agree. Overall there is a trend (I think) towards more flexible layouts, more whitespace (a looser design)and in these cases 12 point deafult text size seems to work well, especially with a line height of 140 - 150%. (I always felt 12point should have been the default , not 16point)

Not all browsers render at 16 pixels exactly however, text is slightly different from browser to browser. Whilst the end user has control to vary their default font size you can use important in the rule. Then only those users where they have specifically overridden you rule by adding important in their own style sheet will get the text size they desire (And so they should because there is a good reason they would have done that)

If I need text close to 10 point I then use 85% or .85ems. For headings H1 to H3 I like to use 2em, 1.5em and 1em. All said there are lots of ways to do this so its a questions of what works for you and just how much info you need to squeeze on a page

Ahhh. Alas my novice CSS skills. I’ll go back to PHP now.

Nice to remember though. *Notes it down!*

Quote from: grelca at Feb 04, 2006, 09:49 PM

And that’s how I prefer to do it, too, and I tried suggesting that to the guy that owns the site, but he’s all telling me "There’s got to be a way to set them custom."

You might try letting the owner know that if you use ems for your sizes then users can use the built in browser functions for changing font sizes. As far as I know, every graphic browser offerers the ability to increase and decrease your font sizes and using ems is the only way to ensure consistent cross browser sizing using this built in browser function. If he is looking for accessibility this is the best way to do it.