3Typography & Text Styling
Fonts & Typography
Typography is a key part of web design. CSS allows you to control font family, size, weight, and style to make your text readable and visually appealing.
/* Basic font styling */
p {
font-family: Arial, Helvetica, sans-serif; /* web-safe fonts */
font-size: 16px; /* font size */
font-weight: bold; /* normal, bold, 100-900 */
font-style: italic; /* normal, italic, oblique */
color: #333333; /* text color */
}Web-safe fonts are universally available across devices. For more variety, you can use Google Fonts or custom fonts via `@font-face`.
/* Using Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
/* Custom font with @font-face */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2');
}
h1 {
font-family: 'MyCustomFont', sans-serif;
}Text Properties
CSS offers many properties to style and control text appearance, alignment, spacing, and behavior.
/* Text styling examples */
p {
color: #1a1a1a; /* text color */
text-align: justify; /* left, right, center, justify */
line-height: 1.6; /* spacing between lines */
letter-spacing: 1px; /* spacing between letters */
text-decoration: underline; /* underline, line-through, none */
text-transform: uppercase; /* capitalize, lowercase, uppercase */
text-shadow: 2px 2px 4px #aaa; /* shadow effect */
white-space: nowrap; /* normal, nowrap, pre */
word-break: break-word; /* break long words */
overflow-wrap: break-word; /* fallback for word-break */
}By combining these properties, you can make text more readable, attractive, and responsive to different screen sizes.
Mini Project Step
Create a blog article layout with headings, paragraphs, and quotes. Use a web-safe font for the body, a Google Font for headings, and experiment with font size, weight, color, line-height, letter-spacing, and text-shadow. Test text alignment and wrapping for responsiveness. Add a blockquote with italic style and a subtle text shadow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typography Project</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 20px;
}
h1, h2 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
text-transform: uppercase;
color: #2c3e50;
text-shadow: 1px 1px 2px #ccc;
}
p {
font-size: 16px;
letter-spacing: 0.5px;
margin-bottom: 15px;
}
blockquote {
font-style: italic;
color: #555;
border-left: 4px solid #2c3e50;
padding-left: 10px;
margin-left: 0;
text-shadow: 1px 1px 1px #eee;
}
</style>
</head>
<body>
<h1>CSS Typography Basics</h1>
<h2>Introduction</h2>
<p>This is a paragraph demonstrating the body font, line height, and letter spacing. Adjust these properties to see how typography affects readability.</p>
<blockquote>Typography is the craft of endowing human language with a durable visual form.</blockquote>
<p>Experiment with colors, text alignment, and shadows to create visually engaging text.</p>
</body>
</html>