2.1 The font-family Property
Fonts play a key role in web design, impacting the readability and overall visual appeal of text. Font families define the general style and characteristics of fonts that can be used on web pages. In CSS, fonts are usually divided into three main families: serif, sans-serif, and monospace. Let's take a closer look at each.
The font-family Property
The font-family property is used to specify the font family. You can specify multiple fonts, separated by commas, so the browser can use the next font in the list if the first one isn't available.
Example of using multiple fonts
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Example of usage:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<body>
<p>This text is displayed using Helvetica Neue, Helvetica, or Arial fonts.</p>
</body>
2.2 Serif Font Family
Serif fonts (serif) are characterized by small lines or strokes added to the ends of letters and symbols. These fonts give text a more traditional and formal appearance.
Examples of serif fonts:
- Times New Roman
- Georgia
- Garamond
- Baskerville
Example of usage:
body {
font-family: 'Times New Roman', serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a serif font.</p>
</body>
2.3 Sans-serif Font Family
Sans-serif fonts (sans-serif) don't have small lines at the ends of letters and symbols. These fonts look more modern and minimalist, and are often used in web design because of their good readability on screens.
Examples of sans-serif fonts:
- Arial
- Helvetica
- Verdana
- Open Sans
body {
font-family: 'Arial', sans-serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a sans-serif font.</p>
</body>
2.4 Monospace Font Family
Monospace fonts (monospace) have the same width for all characters. These fonts are often used for displaying code, technical documentation, and tables where it's important for the characters to align vertically.
Examples of monospace fonts:
- Courier New
- Consolas
- Monaco
- Lucida Console
Example of usage:
body {
font-family: 'Courier New', monospace;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a monospace font.</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
To enhance perception and stylistic diversity on web pages, a combination of different font families is often used. For example, headings can be styled with serif fonts, while body text can be styled with sans-serif fonts. And code is always monospace.
GO TO FULL VERSION