Can someone recommend a good base style to use for Body Text in my website?
What I mean is that I have seen others use shorthand for the font attribute that seems to address Size, Height, Spacing, Face, etc all in one.
I believe that Sans-Serif is better for Body Text, but I don’t have a clue what is the best setting for everything else.
Hope that makes some sense?!
Thanks,
Debbie
ooooooooh typography:)
when you said body, i assume by what you said after, that you meant content ( as opposed to the BODY tag… which would set every font to that font/size/weight/etc… until overridden by a later or more specific rule…
So it goes back to typography… :). you can use ANYTHING your heart desires and it could be good. What you need to think is proportion, space, detail, and contrast.
San-serif fonts ( helvetica, arial, etc)… have less detail and are easier to read in normal cap even at smaller font sizes. They feel a little less organic tho,and case text block to seem a bit “darker” ( take off your glasses or step away from the monitor by a few feet and look at a large block of text and you’ll see what I mean by “darker”.
Serif fonts, have a more organic feel , but get harder to read ONSCREEN, due to the added detail the computer must render. 11pt sans feels like a 14-15pt serif ; that’s just a good rule of thumb , but this ratio is not linear and varies by font.
Remember what I said what I said earlier about “darkness” and contrast in text blocks? You want to create more contrast and make the block seem less “dark” tho I realize now a better word would have DENSE. Line-height helps a lot here. Since line height is based on the font since the calculations are not that difficult. I would recommend a line-height of 1.4-1.9 for san serif, or 1.2-1.6 for serif. ( if you are wondering about the difference… it’s because , as I said earlier, serif fonts appear lighter and smaller than sans on the screen, so you will want to set a serif font larger …)
COLOR: people neglect this… but think of how color affect contrast… dont always think that #000 is the best choice. If your background is pure #FFF. That’s HARSH contrast. In my site I have a bg of #f4f4f4, and a font color of #222… soft, yet determined contrast.
different UAs have different default sizes, varying from 14-18px…who knows. I will ignite a firestorm here if I suggest that you start by Body{font-size:16px;} But if you have … a good rule is to set the font-size in your stack by %. So if we assume the base font will be 15px. and we opted for a san-serif… we can optain a demure yet still legible body block from 80% ( that’s 13px)
So lets try {font: normal 75%/1.8 “mySans font”, helvetica, arial,sans-serif; /* and for contrast*/ background:#f3f3f3; color:#222}
I hope I have helped you in your font-style quest.
Hit a “sweet spot”, did I?! 
when you said body, i assume by what you said after, that you meant content ( as opposed to the BODY tag… which would set every font to that font/size/weight/etc… until overridden by a later or more specific rule…
Yes to both. In the CSS books I have read, and in many posts on SitePoint - that I can’t easily find - I have seen the author/coder set up a “base” Font - usually defined somewhere like in <body> that defines the Font Size, Typeface, Height, Weight, Family, etc, etc.
And, right, that way instead of defining your font every other line like I have been doing, you can define it once, and then override it as necessary.
So it goes back to typography… :). you can use ANYTHING your heart desires and it could be good. What you need to think is proportion, space, detail, and contrast.
And I think that is what I am really wanting advice on… Typography.
San-serif fonts ( helvetica, arial, etc)… have less detail and are easier to read in normal cap even at smaller font sizes. They feel a little less organic tho,and case text block to seem a bit “darker” ( take off your glasses or step away from the monitor by a few feet and look at a large block of text and you’ll see what I mean by “darker”.
Is that because the lines that make up the type are thicker? (It seems serif fonts like Times New Roman are “skinny” along the lines by “fatter” at the ends where the serifs are at?
Serif fonts, have a more organic feel , but get harder to read ONSCREEN, due to the added detail the computer must render. 11pt sans feels like a 14-15pt serif ; that’s just a good rule of thumb , but this ratio is not linear and varies by font.
So what are the best Fonts to use for body/content? For headings?
It seems to me that Verdana or Geneva got pretty good ranks for sans serif fonts, and that Georgia was a favorite amount serif fonts.
Remember what I said earlier about “darkness” and contrast in text blocks? You want to create more contrast and make the block seem less “dark” tho I realize now a better word would have DENSE.
Line-height helps a lot here. Since line height is based on the font since the calculations are not that difficult. I would recommend a line-height of 1.4-1.9 for san serif, or 1.2-1.6 for serif. ( if you are wondering about the difference… it’s because , as I said earlier, serif fonts appear lighter and smaller than sans on the screen, so you will want to set a serif font larger …)
Okay, this is where I’m really interested!
First off, I believe I have read that using “EM” is best whenever you deal with font-sizes and or spacing related to fonts, correct?
But I see a lot of people using “pt” (Point) and “px” (Pixel) in their Font-Size and Line-Height definitions, like this…
font: 34px/100px
And for the numbers you gave above, is there a formula behind that?
Is that a linear relationship?
Or you just “eye it”?!
COLOR: people neglect this… but think of how color affect contrast… dont always think that #000 is the best choice. If your background is pure #FFF. That’s HARSH contrast.
In my site I have a bg of #f4f4f4, and a font color of #222… soft, yet determined contrast.
So too much contrast is a bad thing, huh? (I always heard more contrast is better?!)
different UAs have different default sizes, varying from 14-18px…who knows.
UA’s???
I will ignite a firestorm here if I suggest that you start by Body{font-size:16px;} But if you have … a good rule is to set the font-size in your stack by %. So if we assume the base font will be 15px. and we opted for a san-serif… we can optain a demure yet still legible body block from 80% ( that’s 13px)
Again, I thought using pixels was bad?
Why not use “1em” or “0.80em” in your case?
So lets try {font: normal 75%/1.8 “mySans font”, helvetica, arial,sans-serif; /* and for contrast*/ background:#f3f3f3; color:#222}
I hope I have helped you in your font-style quest.
It is a good start!
Debbie