CSS Text Appearance

Text Appears Too Big

[VictorE]

After reading some messages on WebmasterWorld and Jakob Nielson's site, I altered my CSS so that now I am no longer specifying a 10pt font in the CSS. I know this can cause problems because people can't adjust the font size with their browser. However, after removing all size specifications, the font size just looks too BIG.

I know there are problems with assigning size by "X-Small", etc. Internet Explorer seems to ignore this CSS. However, the text seems to look about right to me if I use a font size="2" (I notice Brett is using this tag, too). I know it defeats the purpose of CSS to put the font tags on every page. Does anyone know of a better way?

Thanks,

Vic

[WibbleWobble]

You could try various em decimals, and see which you prefer. Though the fact is, if you want size-variant text, its going to be "too big" for lots of people who use different font settings.
However, if you really want a font to look one size - as you seem to, specify it in pixels or points, otherwise, specify it as an em and leave it to the user's browser to determine size, which means it will be what you deem "too big" sometimes.

[BlobFisk]

You could use a relative font unit [blooberry.com], like em's or %'s. This will allow users to still change the text size (smallest...largest), but gives you more control.

There is a good post from papabaer on this here [webmasterworld.com].

Having said this, I still generally use pixels (not points, this is a print unit) - but have started the move towards %'s.

[quiet_man]

I use the following CSS code, based on this article [alistapart.com]:

body, body div, body p, body td{
font-size:x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
color:#333;}

html>body, html>body div, html>body p, html>body th,
html>body td, html>body li, html>body dd {
font-size: small;
/* */
}

So far it seems to work just fine in all the tests I've done.

[VictorE]

Thank you for the replies. I added the following to the body element of my CSS:

font-size: 0.5em;

This doesn't seem to have any effect. Is it a valid attribute for the body element?

[WibbleWobble]

It should be, I just tested it in IE6 and Phoenix, both rendered it smaller. IE's was substantially smaller, almost unreadable. Phoenix's was bigger than IE's, but still smaller.

(Mastah of teh bad grammah!)

[DrDoc]

An important thing to remember when using em or % is that you set the base font size for the body, the rest is relative to that, not relative to default font size.

body{
font-size:0.8em;
/* Equal to 13px (font size 2) when View>Text Size is set to Medium */
}
div{
font-size:0.5em;
/* This does therefore not mean 50% of default size (View>Text Size). Instead it is 50% of whatever value the document body has. In this case it would be equal to .4em */
}

[Eric_Jarvis]

Surely if the font size looks too big if you don't specify one then you have a problem with the settings on your own system. I don't know how it works with a Mac or Linux, but it's easy enough to set a Windows system to a precise default font size. I've got variable eyesight due to diabetes and alter mine frequently, it needs a reboot, but it's not exactly a major hassle otherwise. It's under advanced on disply settings and you can set default font size precisely and even set the dpi.

[pageoneresults]

I've got variable eyesight due to diabetes and alter mine frequently, it needs a reboot, but it's not exactly a major hassle otherwise.

Ah, but there is an easier way to override fixed font settings in IE for the visually impaired. Without rebooting!

Go to...

Internet Options > General > Accessibility > Ignore font size specified on Web pages.

I'm using IE6 so I cannot remember if that Accessbility button was there in previous versions.

Depending on what other font adjustments you've made on your system through the advanced properties will determine how the Accessbility option works. If you set your default font size to 120% (Large Fonts), the Accessibility button may not be an option, the results are unpredictable.