The CSS way to style fonts
Published on October 13th 2007.
Updated on July 30th 2010.
You've probably heard of the font tag, or seen it in old code you were re-writing. We don't use the font tag anymore. It is deprecated because it ruins any semblance of beauty an HTML page has...no, not really: it's because the formatting of a web page is handled with CSS now, and not HTML. The font tag is out, and in its place are several useful CSS font and text properties. Let's take a look at 'em.
The CSS font and text properties
- font-family – defines a font family
- font-size – defines a font size
- color – defines a font colour
- font-weight – defines how bold you want your text to be
- font-style – sets the font as 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
For more on these properties, see CSS 101 | Part Eight - CSS Font and Text Properties. and CSS 101 | Part Nine - CSS and Links.
Example of creating some font styles
Let's change the font family, colour and font size of some sample text.
CSS Code:
#fontSample {
font-family:Arial, Helvetica, sans-serif;
color:#6699CC;
font-size:150%;
}
(X)HTML Code:
<p id="fontSample">This text is Arial, Helvetica, sans-serif, 150% the font size set in the body and pale blue.</p>
Result:
This text is Arial, Helvetica, sans-serif, 150% the font size set in the body and pale blue.
Which unit of measurement should I use?
The W3C recommend that you use pixels, percentages and em units to size your font, because they produce consistent, accessible results.
Stay away from inches, millimetres, picas and points. These are units of measurement aren't intended for web page design as they vary greatly between different mediums and resolutions; picas and points, in particular, are units of measurement used in the print industry.
Which font size should I use?
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 this 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.
Shorthand
When you want to manipulate lots of font properties all at once, it's better to use the shorthand font property, than write each property out individually. The advantages of CSS shorthand are that it cuts your filesize down and is quicker to write.
Syntax
CSS Code:
font: font-style font-variant font-weight font-size/line-height font-family;
Example
Here are some examples of how to use font to save you time when styling your text.
CSS Code:
/* This sets our font to italic, bold, with 12px size and a line-height of 24px;
our font-family is set to Verdana, Arial, Helvetica, sans-serif. */
#fontExOne {
font:italic bold 12px/24px Verdana, Arial, Helvetica, sans-serif;
padding:6px; /* For demonstration purposes. */
margin:0 0 10px 0; /* For demonstration purposes. */
background-color:#E1DCE9; /* For demonstration purposes. */
}
/* This displays our font in capital letters, with the first letter of each sentence larger than the rest, with a size of 1.5em and a font of Arial. */
#fontExTwo {
font:small-caps 1.5em Arial;
padding:6px; /* For demonstration purposes. */
margin:0 0 10px 0; /* For demonstration purposes. */
background-color:#F2DDEC; /* For demonstration purposes. */
}
/* This sets our font to 120% in size and gives it a font family of "Trebuchet MS", Arial, Helvetica, sans-serif. */
#fontExThree {
font:bold 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
padding:6px; /* For demonstration purposes. */
margin:0 0 10px 0; /* For demonstration purposes. */
background-color:#FBFEC7; /* For demonstration purposes. */
}
(X)HTML Code:
<div id="fontExOne">I am italic, bold, 12px, with a line-height of 24px and a font-family of Verdana, Arial, Helvetica, sans-serif.</div>
<div id="fontExTwo">I have small caps and am 1.5em in size with a font of Arial.</div>
<div id="fontExThree">I am bold, 120% in size with a font-family of "Trebuchet MS", Arial, Helvetica, sans-serif.</div>
Result:
Using the span tag to style random text
When you want to apply emphasis to some parts of your text, but prefer to use more drastic or different styles than the strong tag and the em tag provide, why not use the span tag? You can apply some interesting styles to the span tag that enhance certain areas of your text. Let's look at how this is done.
Example of using the span tag to brighten up 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 the classes themselves do.
(X)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
As you can see, the text surrounded with a span tag, on which we have applied our emphasis class, is now much more noticeable.
