CSS Font
CSS font properties define the font, boldness, size, and text style.
Differences Between Serif and Sans-serif Fonts
CSS Font Families
In CSS, there are two types of font family names:
- Generic Font Families - A group of font families with a similar look (like "Serif" or "Monospace")
- Specific Font Families - A specific font family (like "Times" or "Courier")
| Generic Family | Font Family | Description |
|---|---|---|
| Serif | Times New Roman <br> Georgia | Serif fonts have extra details on the ends of the characters |
| Sans-serif | Arial <br> Verdana | "Sans" means without - these fonts do not have extra details on the ends of characters |
| Monospace | Courier New <br> Lucida Console | All monospaced characters have the same width |
Font Family
The font-family property sets the font for text.
The font-family property should list several font names as a "fallback" system, so if the browser does not support the first font, it tries the next one.
Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Courier New".
Multiple font families are specified with a comma:
Example
For commonly used font combinations, see our Web Safe Font Combinations.
Font Style
The font style property is mainly used to specify italic text.
This property has three values:
- Normal - Displays text normally
- Italic - Displays text in italic
- Oblique - Text is slanted (similar to italic but less supported)
Example
Font Size
The font-size property sets the size of the text.
Being able to manage the size of text is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the correct HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
Font sizes can be set with absolute or relative values.
Absolute size:
- Sets text to a specified size
- Does not allow users to change text size in all browsers
- Useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrounding elements
- Allows users to change text size in browsers
Setting Font Size with Pixels
Setting the text size with pixels gives you full control over the text size:
Example
The above example allows text resizing in Internet Explorer 9, Firefox, Chrome, Opera, and Safari by zooming the browser.
Though text can be resized with the browser zoom tool, this adjustment affects the entire page, not just the text.
Setting Font Size with Em
To avoid text resizing issues in Internet Explorer, many developers use em units instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px.
Therefore, the default size of 1em is 16px. You can convert pixels to em with this formula: px/16=em
Example
In the above example, the em text size is the same as the previous pixel example. However, using em units allows text resizing in all browsers.
Unfortunately, there are still issues with Internet Explorer. When resizing text, it may appear larger or smaller than intended.
Using Percentages and Em Together
A solution for all browsers is to set a default font size for the <body> element in percentages:
Example
Our code works effectively. It displays the same text size in all browsers and allows all browsers to scale the text size.
More Examples
All Font Properties in One Declaration
All CSS Font Properties
| Property | Description |
|---|---|
| font | Sets all font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Displays text in small capitals or normal font. |
| font-weight | Specifies the thickness of the font. |