homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS Text Appearance
Text Appears Too Big

 4:17 pm on Jan 20, 2003 (gmt 0)

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?





 4:20 pm on Jan 20, 2003 (gmt 0)

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.


 4:23 pm on Jan 20, 2003 (gmt 0)

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.


 4:36 pm on Jan 20, 2003 (gmt 0)

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

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

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.


 4:40 pm on Jan 20, 2003 (gmt 0)

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?


 4:54 pm on Jan 20, 2003 (gmt 0)

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!)


 6:29 am on Jan 21, 2003 (gmt 0)

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.

/* Equal to 13px (font size 2) when View>Text Size is set to Medium */
/* 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 */


 7:26 am on Jan 21, 2003 (gmt 0)

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.


 7:33 am on Jan 21, 2003 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved