Click to See Complete Forum and Search --> : Font sizing with CSS


catfish
02-26-2008, 11:24 PM
Hello All;
I am tired of spending hours wondering about the font size of my sites. I tweak till I don't think I can tweak anymore and then eventually find on one computer or another that the site doesn't look as good as I thought! My question is;
Does anyone here have a method/formula they use in their CSS file routinely that looks nice no matter what the user preferences are set at? I know that the sizes would most likely change when using a different font-family. I have just worked on this for a while and wonder what you experts think of this layout. Am I using the % and ems correctly here?:o

body {
margin: 0 auto;
background:#ADC1AD;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color: #333;
background-image:none;
background-repeat:repeat-x;
}
p {
font-size:.9em;
line-height:normal;
}
h1 {
text-align: left;
margin-left:15px;
padding: 0;
font-size:1.5em;
text-transform:none;
color:#333;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #666;
}

h2 {
margin: 20px;
padding: 0;
font-size:1.2em;
text-transform: capitalize;
color: #889E88;
font-family: Arial, Helvetica, sans-serif
}

h3 {
text-align: center;
padding: 0;
font-size: 1em;
text-transform:none;
color:#333;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #666;
font-weight:lighter;
}

dtm32236
02-26-2008, 11:40 PM
try

html {
font-size:100%;
}

body {
font:0.8em/1.333 verdana, "trebuchet MS", helvetica, sans-serif;
}

then do the rest with 'em', as you've been doing.
this seems to work out great with any site i've done.

and Veranda is the most commonly used web font, so you can be pretty certain that it'll render the same in any browser

catfish
02-26-2008, 11:54 PM
thanks so much for your quick reply. I will go test it out but before you go offline, what does /1.333 do (after 0.8em)? And also, do I have to put the 0 in front of the .8 or .9 em? I will, but I haven't been I don't think.

Thanks again

dtm32236
02-27-2008, 09:38 AM
i'm not really sure what the /1.333 does, i forget. it has something to do with margins, i think. play around with that number and see what happens.

and, no, you don't need the 0.8, a simple .8 should work just fine.