CSS Fonts
- To work with the font-family property.
- To work with the font-size property.
- To work with the font-style property.
- To work with the font-variant property.
- To work with the font-weight property.
Font - the old way
Before looking at how we define font properties with CSS, we'll take a look at how it's done with plain-old HTML. In HTML, we define the font name (i.e, face in HTML, family in CSS) and the font size with the <font> tag, like so:
<font face="list of font names" size="size">
We specified that we wanted text to be bold and italic with the <b> tag and <i> tags.
Font-family
The font-family property is used in CSS to specify the font name to apply to an element. You can specify by font name or font category.
Specifying by Font Name
When you specify a font by font name, the browser will look for the named font on the end user's computer. If it finds it, the font will be displayed accordingly. For example, the following rule would make the font of all <p> tags Arial.
p { font-family: Arial }
If the Arial font were not found on the end user's computer, the browser would display a default font. If you are concerned that the font name you want to use might not be found on a user's computer, you can provide a list of options.
p { font-family: Arial, Helvetica }
In this case, the browser will first look for Arial. If it doesn't find Arial, it will then look for Helvetica.
Specifying Font by Category
When you specify a font by category, the browser will use the font the user's computer specifies for that category. For example, for monospace, the computer might specify Courier. The font family categories are listed below.
- cursive
- fantasy
- monospace
- sans-serif
- serif
To be extra safe, designers often specify a couple specific options followed by a font family category, like so:
p { font-family: Arial, Helvetica, sans-serif}
This way, if neither Arial nor Helvetica is found, the browser at least knows to use some sans-serif font.
The following code sample illustrates how font-family works.
Code Sample: Fonts/Demos/FontFamily.html
<html>
<head>
<title>Font Sizes</title>
<style type="text/css">
body { font-size: large }
div { margin:10px; padding: 10px; border: 1px solid black; }
</style>
</head>
<body>
<div style="font-family: Arial, Helvetica, sans-serif">
Arial, Helvetica, sans-serif
</div>
<div style="font-family: 'Times New Roman', Times, serif">
'Times New Roman', Times, serif
</div>
<div style="font-family: 'Courier New', Courier, monospace">
font-family: 'Courier New', Courier, monospace
</div>
<div style="font-family: Verdana">
Verdana
</div>
<div style="font-family: Comic Sans MS">
Comic Sans MS
</div>
<div style="font-family: Wingdings">
Wingdings
</div>
</body>
</html>
The above code will render as follows:
A survey of the most common fonts found on operating systems can be found at http://www.codestyle.org/css/font-family.
Font-size
One of the nicest benefits of CSS is the precise control it gives designers over the font size. While HTML limits you to seven different relative font size, CSS gives you the ability to specify exactly how big or small you want text to appear. You literally have infinite control.
Font-size Units
All the units of measurement can be used. The following screenshot illustrates the relative size of different units.
Relative Font-size Terms
In addition, font size can be defined using the following relative terms.
- xx-large
- x-large
- large
- medium
- small
- x-small
- xx-small
- smaller
- larger
The terms xx-small to xx-large work similarly to font sizes 1 through 7 in HTML, though they don't match up exactly. The terms smaller and larger change the font size of an element relative to its parent element's font size. The following code illustrates this.
Code Sample: Fonts/Demos/FontSize.html
<html> <head> <title>Font Sizes</title> </head> <body> <div id="smaller"> This text is <span style="font-size:smaller">smaller and <span style="font-size:smaller">even smaller and <span style="font-size:smaller">even smaller</span> </span></span>. </div> <div id="larger"> This text is <span style="font-size:larger">larger and <span style="font-size:larger">even larger and <span style="font-size:larger">even larger</span> </span></span>. </div> </body> </html>
The above code will output the following:
Best Practices
Most experts agree that font size should be defined in relative units (e.g, em or %) or in terms (e.g, large, small, etc.). This is because absolute font sizes can make pages inaccessible to people who have difficulty seeing. In most browsers, a user can change the size that the text appears. In Internet Explorer, this is done using the View menu as shown in the screenshot below.
However, changing this setting will have no effect on font sizes defined in absolute units. To illustrate this, open Fonts/Demos/FontSizeCompared.html in Internet Explorer and change the Text Size setting by selecting Text Size under the View menu. You will notice that, in the table with the caption "Font-size Defined in Units," only the fonts using em, ex, and percentage (%) change size.
All the fonts using relative font size terms change size.
Unfortunately, there is a downside to using relatively defined font sizes and that is that you have less control over design. This can cause text to wrap when you don't want it to or table cells to expand beyond what you had intended.
Exercise: Font Family and Font Size
In this exercise, you will modify an HTML page by applying font sizes to different elements on the page.
- Open Fonts/Exercises/Stories.html for editing. The file contains several children's stories.
- Modify the font family and size of the different elements on the page. You may do this using inline styles, an embedded style sheet and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with font family and font size with CSS.
- When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.
Font-style
Currently, the only use for font-style is to make text italic. The values are listed below.
- normal
- italic
- oblique
However, italic and oblique are displayed in the same way. Since italic has better support, you should use it.
Font-variant
Currently, the only use for font-variant is to turn lowercase letters into small caps. The values are listed below.
- normal
- small-caps
Font-weight
The weight of a font determines how thick (or bold) it is. Possible values are:
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- bold
- bolder
- lighter
- normal
The numeric values are used for fonts that can have many different degrees of boldness. Most fonts, however, are either bold or normal (not bold).
Exercise: Font Style, Font Variant and Font Weight
In this exercise, you will modify Fonts/Exercises/Stories.html by applying font styles, font variants and font weights to different elements on the page.
- Open Fonts/Exercises/Stories.html for editing.
- Modify the font style, variant and weight of the different elements on the page. You may do this using inline styles, an embedded style sheet and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with these CSS font properties.
- When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.
CSS Fonts Conclusion
In this lesson of the CSS tutorial, you have learned to use CSS font properties.