The CSS way to style fonts

The <font> tag is deprecated, so instead we must use the font and text properties. They are as follows:

font-family – defines a font family
font-size – defines a font size [% or em are the recommended units, given they resize without any trouble, unlike px]
color – defines a font colour
font-weight – defines how bold you want your text to be
font-style – defines the font to be either normal, italic or oblique
font – shorthand font property – we will get to this shortly
text-align – sets the text alignment
text-transform – defines the case of your font
text-decoration – used to apply an overline, underline, linethrough or "blinking underline" to a link
text-indent – indents inline text

Example

			font-family:Arial, Helvetica, sans-serif;
			color:#6699CC;
			font-weight:75%;
		

Which font size to use

The W3C recommend that you stay away from absolute length units when it comes to fonts - such as px and pt - as they render inconsistently across browsers and do not resize. Instead, it is recommended that you use em or percentage values. Also, for accessibility purposes, fonts that are too small should be avoided.

Setting your base font (body font) to 1em or 100% is equivalent to setting the font to the user's preference. Medium is the default font size for browsers, which is equivalent to 16px (just so you can get an idea of what size thsi is). You might find that 100% is too big for you. If this is the case, why not try 68.75% or 75% (1.1em or 1.2em). These are generally considered happy mediums.

Which unit to work with

Percentage or em's are normally the best choice. I, personally, prefer percentages, as em units can sometimes present you with inconsistent results per browser. If that doesn't bother you, then go ahead and use them, or if you think working with percentages might be easier, use those. Whatever makes you feel comfortable!

Shorthand

Use font to write shorthand styles. The advantages of CSS shorthand are that it cuts your filesize down and is quicker to write.

Syntax:

			font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>;
		

Example

Here's an example taken from my site:

font:bold 120% Verdana, Arial, Helvetica, sans-serif

Result

yippie kay ey mother f***er! - John McClane, Die Hard

This example specifies a font of 120%, bold and belonging to the Verdana family.

Using the span tag to style random text

Here, I'll show you how to use the span tag to apply formatting to text. This is useful when you want to make certain parts of your text stand out.

The way to do this is to create some ultra-funky classes that will emphasise your text.

CSS Code

			.emphasis {
			font:bold 140% Times;
			color:orange;
			}
		

The class emphasis has a bold, orange font, of size 140% and uses the Times type-face.

Note, try to give your classes names that pertain to the element(s) they are going to be applied to. Not what they do.

HTML Code

			<p>Homer Simpson:I am so smart! I am so smart! S-M-R-T! I mean <span class="emphasis">S-M-A-R-T!</span></p>
		

Result

Homer Simpson: I am so smart! I am so smart! S-M-R-T! I mean S-M-A-R-T!

As you can see, the text surrounded with a span tag, on which we have applied our emphasis class, is now much more noticable.

Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.

Back to resources.