CSS Fonts (Web Development)
Learn CSS Fonts (Web Development) step by step with clear examples and exercises.
Why This Matters
In web development, CSS font properties play a crucial role in enhancing the visual appeal and readability of text on web pages. By mastering these properties, you can create unique, engaging, and easy-to-read content that sets your designs apart from competitors, improving user experience.
Prerequisites
Before diving into CSS font properties, it's essential to have a good understanding of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). You should be familiar with creating web pages using basic HTML elements like `, , , various heading tags (–`) as well as CSS selectors, properties, and values.
Core Concept
CSS font properties control the appearance of text on your web pages. Here are some key properties:
Font Family
The font-family property specifies the typeface or font that will be used to display text within an HTML element. You can list multiple font families separated by commas, in order of preference, so that the browser can choose the first available one.
h1 {
font-family: 'Arial Black', Gotham, sans-serif;
}Font Size
The font-size property determines the size of the text within an HTML element. You can use various units like pixels (px), em, rem, and percentages to set the font size.
h1 {
font-size: 4rem;
}Font Weight
The font-weight property controls the thickness of the text within an HTML element. You can use predefined values like normal, bold, or numerical values from 100 to 900, where higher values indicate thicker text.
h1 {
font-weight: 700; /* Medium bold */
}Font Style
The font-style property allows you to apply italic or oblique styles to the text within an HTML element. You can use predefined values like normal, italic, or oblique.
h1 {
font-style: italic;
}Line Height
The line-height property sets the height of a line box, which includes both the text and any padding or border. This can help prevent text from being too closely packed together, improving readability.
h1 {
line-height: 1.2;
}Text Alignment
The text-align property determines the horizontal alignment of text within an HTML element. You can use predefined values like left, center, right, or justify.
h1 {
text-align: justify;
}Text Transform
The text-transform property changes the capitalization of the text within an HTML element. You can use predefined values like uppercase, lowercase, or capitalize.
h1 {
text-transform: uppercase;
}Text Decoration
The text-decoration property adds underlines, lines, or other decorations to the text within an HTML element. You can use predefined values like none, underline, line-through, and overline.
h1 {
text-decoration: underline overline;
}Font Variant
The font-variant property allows you to specify small caps or normal text within an HTML element.
h1 {
font-variant: small-caps;
}Worked Example
Let's create a simple web page with a heading styled using various CSS font properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 3rem;
font-weight: 700;
text-align: center;
line-height: 1.2;
text-transform: uppercase;
text-decoration: underline overline;
}
h2 {
font-size: 2rem;
font-weight: 400;
text-align: left;
line-height: 1.5;
text-transform: capitalize;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Welcome to My Website!</h1>
<h2>Explore our latest blog posts below:</h2>
</body>
</html>Save this code as index.html and open it in a web browser to see the styled headings.
Common Mistakes
Forgetting to close CSS rules
Ensure that you always close your CSS rules with a semicolon (;) and end them with a curly brace (}).
h1 {
font-family: Arial, sans-serif; /* Correct */
font-size: 36px;
} /* Incorrect — missing closing brace */Using incorrect units for font size
Be mindful of the units you use when setting font sizes. While pixels (px) are commonly used, em and rem can be more flexible as they scale with the user's screen size.
h1 {
font-size: 36px; /* Fixed size in pixels */
font-size: 2em; /* Scales with the parent element's font size (em) */
font-size: 2rem; /* Scales with the root element's font size (rem) */
}Ignoring browser defaults
When specifying multiple font families, ensure that at least one of them is a commonly available font like Arial, Helvetica, or sans-serif. This helps prevent text from appearing as fallback system fonts on users' devices.
Practice Questions
- Write CSS rules to style an `
element with the following properties:font-family: 'Georgia', serif;,font-size: 24px;,font-weight: normal;, andtext-align: left`.
h2 {
font-family: 'Georgia', serif;
font-size: 24px;
font-weight: normal;
text-align: left;
}- Modify the previous example to add a line height of
1.2, an italic style, and small caps for the `` element.
h2 {
font-family: 'Georgia', serif;
font-size: 24px;
font-weight: normal;
text-align: left;
line-height: 1.2;
font-style: italic;
font-variant: small-caps;
}FAQ
Q: What happens if I don't specify a font family for my HTML elements?
A: If you don't specify a font family, the browser will use its default system fonts. This can result in inconsistent text appearance across different devices and operating systems.
Q: Can I use CSS to change the color of my text?
A: Yes! You can use the color property within your CSS rules to set the color of your HTML elements' text. For example, h1 { color: red; } will make all `` elements red.
Q: What is the difference between em and rem units in CSS?
A: Both em and rem are relative units that scale with the font size of their parent element. However, em is based on the current font size of the element itself, while rem is based on the root font size (usually set by the browser). This makes rem a more consistent choice for responsive design.