Fonts & Typefaces
Even if you want to create a highly visual site, almost all of your content will be made out of text. CSS offers a flexability that you can't get out of HTML FONT tags. Where you might have had to use a pile of GIF images to create a good looking series of buttons in the past, you can easily get by with a background image and some smart font choices using CSS.
Use fonts to convey what you mean.
Sure, we all want to have good looking text on our site ... but as the expression goes, there's more than one way to skin a cat. Which I'm sure comforts the cat sitting on my desk right now. But the point is that default fonts may not be impactful enough to convey the ideas behind your text.
Elegant & Refined
The default font doesn't make much of an impression. What we want to do is use CSS to specify a font that matches the "mood" in the text.
Elegant & Refined
That's certainly better, but also consider the following:
Elegant & Refined
The text is still appropriate, but it conveys an entirely different meaning for the phrase. As the web designer it's up to you to decide what fonts, colors, and weights to use in order to make your text as expressive as possible.
Another Nagging Reminder
Remember that you should use your XHTML to describe what things are, not how they look. If you had a music site and wanted all song titles to be yellow, you wouldn't go to each one and color it directly, you'd make a class and then use CSS to style that class.
- css:
- .SongTitle {color: #FFFF00;}
- xhtml:
- <p class="SongTitle">Stairway To Heaven</p>
CSS Attributes for Fonts & Typefaces
And finally the down-and-dirty of it. These are the actual attributes you can use to specify fonts and typefaces for objects on your webpage. These aren't all the attributes, but some of the most useful ones.
font-family
Sets the typeface for an object. If you do not specify font-family for an object, it will inherit the font-family setting from its parent.
You can set multiple fonts for an object separated by commas.
p { font-family: Tahoma, Verdana, Arial, sans-serif; }
The browser will use the first font on the list that's installed on your computer. Always end the list with serif, sans-serif, or monospace to ensure that the browser will select the appropriate default font just in case it can't find any of the fonts you requested.
font-weight
Sets the font's weight (duh). Meaning how thin or how wide the lines are. It's the difference between drawing with a pen or drawing with a magic marker. Acceptible values are normal, bold, bolder, and lighter.
font-size
Sets the font's size. You can set the size in any one of several measurements:
- pt: Points. This is a print typographical measurement. There are 72 points per inch. Web pages are rendered at 96dpi. So to convert points to pixels, you could simply use points*96/72.
- px: Pixels. Or you could just take the easy way out and specify the font size in pixels directly.
- in: Inches. Again, the web page is rendered at 96dpi, so 1in fonts render 96px tall.
- em: Em. Yeah, Em. It's said that an em is the height of the capital letter "M," so you must be setting the font size based off another font size. 1em is equal to the font size of the parent object, so 0.5em sets the font to half the size of the parent object. So if your document is set to have 10px fonts, but H1 is set to have 2em fonts, they will render at 20px in the end.
It may seem like em is completely useless, but it's actually exceptionally useful when defining font sizes for heading tags. That way you could change the document's font size and the heading tags will keep the same proportion by comparison.
color
Sets the font color. You could use any one of several words, but it's usually more useful to use hex values like you would in HTML.
font-style
You can set it to normal, italic, or oblique (which is almost indistinguishable from italic). This is how you make fonts italic in CSS.
line-height
Sets the height of a line of text. This can allow you to space out lines of text without making the font any larger (like a double-spaced paper). line-height is usually set in em increments, and a line height of 1.4em - 1.6em is considered to be most legible.
text-align
You can set text to align left, right, center, or justify. The first three are self-explanatory. justify will add spacing in between words to make sure that the left and right sides of the text flush up with the container. This is the common setting for magazines and newspapers.
Taking Your Time
Developing an effective text treatment that works across an entire site takes a lot of time and effort. Take your time, make small refinements, and learn to walk away. If you walk away from your design for a day and come back, you'll be able to spot the things you want to change much more easily than if you stare at it constantly.
If you structure your CSS correctly, you can make site-wide changes to your fonts and styling by altering a single file.
There's a handful of other font attributes I didn't explain that are not only more obscure, but also less useful. A quick Google search will yeild you immediate answers on any one of those attributes. Specifically W3 Schools has an excellent (if exceedingly dry) CSS reference where you can look up all sorts of values.