Welcome to WebmasterWorld Guest from 107.21.175.43

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Text Appearance

Text Appears Too Big

     

VictorE

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

10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month