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;
}
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;
}