Mastering CSS: A Comprehensive Guide to Web Design: Chapter 4: Styling Text and Fonts
By Shahin Mannan on
June 3, 2024
- Frontend Development
Font Families and Sizes
CSS allows you to control the appearance of text by specifying font families and sizes. The font-family property lets you choose from a variety of fonts, while the font-size property sets the size of the text.
Example:
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
Text Alignment and Decoration
Text alignment can be controlled using the text-align property, and you can add various text decorations using the text-decoration property.
Example:
h1 {
text-align: center;
text-decoration: underline;
}
p {
text-align: justify;
text-decoration: none;
}
Line Height and Letter Spacing
The line-height property controls the space between lines of text, while the letter-spacing property adjusts the space between characters.
Example:
p {
line-height: 1.5;
letter-spacing: 1px;
}
Google Fonts and Web Safe Fonts
To enhance typography, you can use Google Fonts or web safe fonts. Google Fonts offers a wide variety of fonts that you can easily integrate into your web page by linking to the font in the HTML and specifying it in your CSS.
Example:
- Include the Google Fonts link in your HTML:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
- Specify the font in your CSS:
body {
font-family: 'Roboto', sans-serif;
}
Exercise: Designing a Typography-Driven Webpage
Now, let's apply these concepts to create a webpage with enhanced typography.
- Create an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography Design</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph to demonstrate typography styling using CSS. By adjusting font properties, you can create visually appealing text that enhances the user experience.</p>
</body>
</html>
- Create a CSS file:
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
text-align: center;
text-decoration: underline;
font-size: 2.5em;
margin-bottom: 20px;
}
p {
text-align: justify;
letter-spacing: 0.5px;
color: #333;
}
Open the HTML file in a browser to see your typography-styled webpage. Experiment with different font families, sizes, and text properties to see how they affect the appearance of your text.
Coming Up Next
In Chapter 5, we'll delve into colors and backgrounds, exploring various ways to enhance your web pages with color schemes and background images.
Please Sign In to post a comment.