Chapter 8: Text and Font
Text and font properties in CSS are used to format the appearance of words and text on a webpage. The font property is concerned with how the characters look, such as whether they are ‘fat’ or ‘thin’, ‘big’ or ‘small’, and what font type to use. The text property is used to style everything else. In this chapter, we’ll be covering the text and font properties commonly used.
Font Properties
font-family
The font-family property is used to set the font type.
There are three main categories of font types: serif, san serif and monospace.
Serif fonts have a small line at the end of some characters. Examples include “Times New Roman” and Georgia.
San Serif fonts do not have lines at the end of characters. Examples include Arial and Verdana.
Monospace fonts use the same amount of space for all characters. For instance, the letter ‘i’ has the same width as the letter ‘a’. Examples of monospace fonts include “Courier New” and “Lucida Console”.
When specifying the font-family property, you should always include several font names so that if the browser does not support the first font, it can try the next font until it finds one that it supports. Start with a more specific font (such as “Times New Roman”) and end with a generic font family. If the font name is more than one word, quotation marks should be used.
Example:
font-family: "Times New Roman", Times, serif;
font-size
The font-size property sets the size of the text. Font size can be set with pixels (px), em, percentage (%) or by using keywords.
Using px
The default font size used on most browsers is 16 pixels. If you want your site to display with a different font size, you can specify it like this: font-size: 20px;.
Using em
An em is is equal to the current font size. If the element is the child of another element, the current font size is the font size of the parent element. If the element is not a child of any element, the current font size is the browser’s default font size. As mentioned above, the default font size used on most browsers is 16px. Hence by default 1em = 16px.
However, this default font size can be changed by changing the browser’s setting. For instance, to change the default font size on Firefox, click on the menu button (the right most button with three horizontal lines), select “Options’ and finally select the “Content’ tab. You can then change the current font size under the ‘Fonts & Colors’ section.
If the user sets the default font size to 20px, 1em becomes 20px. If you want the font size to be 1.5 times the current font size, you simply write 1.5em. The em is the prefered unit size used by most developers as the default font size can be customised by the user.
Using Percentage
Percentage is similar to em. 200% simply means 2 times the current font size. Hence, 200% = 2em.
Using Keywords
The final way to specify font size is to use keywords. Commonly used keywords are xx-small, x-small, small, medium (this is the default), large, x-large and xx-large.
Examples:
font-size: 40px;
font-size: 1.5em;
font-size: 120%;
font-size: large;
font-style
The font-style property is used to specify italic text. The two common values are normal and italic. Normal will display text with no italic while italic displays text in italic.
Example:
font-style: italic;
font-weight
The font-weight property is the counterpart of font-style. While font-style is used to specify italic text, font-weight is used to specify bold text. Commonly used values include normal, bold, bolder and lighter. Alternatively, you can also specify the thickness of the characters using numbers in multiples of 100, from 100 (thinnest) to 900 (thickest). 400 is the normal thickness, and 700 is the same as bold.
However, note that most web browsers only support normal and bold font weights. In that case, 100-500 correspond to normal while 600 and above correspond to bold.
Examples:
font-weight: bold;
font-weight: 300;
Text Properties
CSS text properties allow you to set properties that are not related to the font of the text. Common properties include text color, text alignment, text decoration, letter spacing, word spacing and line height.
color
The CSS color property specifies the color of the text. Similar to what we learned in Chapter 4 regarding the border-color property, text color can be specified in one of three ways: using a color name, a RGB value or a hex value.
Examples:
color: blue;
color: #00ff00;
color: rgb(255,0,0);
text-alignment
The text-alignment property allows us to specify whether we want text to be centered, or aligned to the left or right, or justified. The commonly used values are left, right, center and justify.
Example:
text-align: center;
text-decoration
The text-decoration property is mainly used to specify whether the text should be decorated with a line. The commonly used values are none (i.e. just normal text, no decoration), underline, overline (a line above the text) and line-through (a line through the text).
This property is commonly used to remove underlines from hyperlinks. By default, most browsers will display hyperlinks in blue, with an underline. You can use the code text-decoration: none; to remove the underline.
Example:
text-decoration: none;
letter-spacing
Letter spacing is used to increase or decrease the spacing between letters in a word. You specify the amount of spacing in pixels. To increase the spacing, use a positive value. To decrease it, use a negative value.
For instance, letter-spacing: 2px; will cause the letters to be spaced 2 pixels apart. letter-spacing: -1px; will cause the letters to be cramped together, overlapping each other by 1 pixel.
Example:
letter-spacing: 2px;
word-spacing
Word spacing, on the other hand, is used to increase or decrease the spacing between words in text. Similar to letter-spacing, you specify the amount of spacing in pixels, using positive to increase the spacing and negative to decrease it.
Example:
word-spacing: 2px;
line-height
Line height is used to set the spacing between each line of text. This property can be set using a number, a specific length, or a percentage.
When using a number to specify line-height, the given number will be multiplied with the current font size to give the line height. For instance, line-height: 2 will result in a line height of 32px if the current font size is 16px.
When using length to specify line-height, units such as px (pixel), em, cm, pt (point, where 1 point = 1/72 of 1in) etc can be used.
When using percentage, the given percentage will be multiplied with the current font size to give the line height. For instance, line-height: 50% will result in a line-height of 8px if the current font size is 16px. Note that line-height does not alter the font size. A line height of 8px will result in the lines overlapping each other.
Examples:
line-height: 20px;
line-height: 120%;
To have a better understanding of how each of these properties work, try the exercise below.
Exercise 8
Download the source code for this exercise from http://learncodingfast.com/css and unzip the file. The source code for this exercise can be found in the Chapter 8 - Font and Text folder.
Exercise 8.1
1. Open the file Chapter 8 - Font and Text.html concurrently in your browser and text editor.
2. Modify the CSS property font-family and observe what happens to the sample text. The current font family is Sans Serif. Try each of the following:
(a) font-family: Verdana, Arial, Helvetica, sans-serif;
(b) font-family: Courier, "Lucida Console", monospace;
3. Modify the CSS property font-size and observe what happens to the sample text in each of the following cases. Try
(a) font-size: 40px;
(b) font-size: 1.5em;
(c) font-size: x-small;
(d) font-size: 120%;
4. Modify the CSS property font-style and observe what happens to the sample text. Try
(a) font-style: italic;
5. Modify the CSS property font-weight and observe what happens to the sample text. Try
(a) font-weight: bold;
(b) font-weight: 300;
6. Modify the CSS property color and observe what happens to the sample text. Try
(a) color: blue;
(b) color: #00ff00;
(c) color: rgb(255,0,0);
7. Modify the CSS property text-align and observe what happens to the sample text. By default, the text in this paragraph is left aligned. Now try each of the following:
(a) text-align: justify;
(b) text-align: right;
(c) text-align: center;
8. Modify the CSS property text-decoration and observe what happens to the sample text. Try
(a) text-decoration: underline;
(b) text-decoration: overline;
(c) text-decoration: line-through;
9. Modify the CSS property letter-spacing and observe what happens to the sample text. Try
(a) letter-spacing: 5px;
(b) letter-spacing: -5px;
10. Change letter-spacing back to 0px. Modify the CSS property word-spacing and observe what happens to the sample text. Try
(a) word-spacing: 10px;
(b) word-spacing: -20px;
11. Change word-spacing back to 0px. Modify the CSS property line-height and observe what happens to the sample text. Try
(a) line-height: 2;
(b) line-height: 25px;
(c) line-height: 30%;