Fonts and Text
Good text styling makes a page easy and pleasant to read.
Choosing a Font
font-family sets the typeface. Give a list of choices, ending with a general family like sans-serif, in case the first font is missing.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Arial, sans-serif;
}
h1 {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Ayesha Khan</h1>
<p>This paragraph uses a clean sans-serif font.</p>
</body>
</html>| Family | Looks like | Good for |
|---|---|---|
sans-serif | Clean, no little feet | Body text on screens |
serif | Small feet on the letters | Headings, a classic look |
monospace | Every letter the same width | Code |
Size, Weight and Style
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 { font-size: 40px; }
p { font-size: 18px; }
.bold { font-weight: bold; }
.slanted { font-style: italic; }
.caps { text-transform: uppercase; letter-spacing: 2px; }
</style>
</head>
<body>
<h1>Ayesha Khan</h1>
<p class="caps">Student - Karachi</p>
<p class="bold">This is bold text.</p>
<p class="slanted">This is italic text.</p>
</body>
</html>For body text, 16px to 18px is easy to read on most screens. Smaller text tires the eyes, especially on phones.
Line Height and Alignment
line-height adds space between lines. A value like 1.6 means 1.6 times the font size. text-align lines text up to the left, center or right.
Example
body {
line-height: 1.6;
}
h1 {
text-align: center;
}Using a Google Font
Google Fonts offers hundreds of free fonts. Add a <link> in the head, then use the font name in CSS.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap">
<style>
body {
font-family: "Poppins", sans-serif;
line-height: 1.6;
}
h1 {
font-weight: 700;
color: #b45309;
}
</style>
</head>
<body>
<h1>Ayesha Khan</h1>
<p>This page now uses the Poppins font from Google Fonts.</p>
</body>
</html>Link Colours
Links are blue and underlined by default. You can match them to your page:
Example
a {
color: #b45309;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}a:hover applies only while the mouse is over the link.
Text Properties at a Glance
| Property | Example |
|---|---|
font-family | "Poppins", sans-serif |
font-size | 18px |
font-weight | bold or 700 |
font-style | italic |
line-height | 1.6 |
text-align | center |
text-decoration | none, underline |
text-transform | uppercase |
Update Your Page
Pick one font for headings and one for the body, set line-height: 1.6 on body, and centre the h1.
Exercise
Exercise
Which property adds more space between the lines of a paragraph?