CSS Text and Fonts
Most of a web page is text, so text and font styling makes a big difference to how it looks and reads.
Text Properties
| Property | Example | What it does |
|---|---|---|
color | color: #333333; | Text colour |
text-align | text-align: center; | left, right, center or justify |
text-decoration | text-decoration: underline; | Adds or removes lines (use none to remove) |
text-transform | text-transform: uppercase; | uppercase, lowercase, capitalize |
line-height | line-height: 1.6; | Space between lines |
letter-spacing | letter-spacing: 2px; | Space between letters |
word-spacing | word-spacing: 5px; | Space between words |
text-shadow | text-shadow: 2px 2px 4px gray; | A shadow behind the text |
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 2px 2px 3px #aaaaaa;
}
p {
line-height: 1.7;
text-align: justify;
}
.old-price {
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<h1>Eid Sale</h1>
<p>Our Eid sale is now live at the Tariq Road branch. Every shirt, shoe and bag in the shop has a discount, and there are gift boxes for children too. The sale runs until the end of the week.</p>
<p>Kurta: <span class="old-price">Rs 3,000</span> Rs 2,200</p>
</body>
</html>A line-height between 1.5 and 1.8 makes long paragraphs much easier to read. Write it without a unit, so it scales with the font size.
Font Family
font-family chooses the typeface. Give a list of fonts, separated by commas. The browser uses the first one it has, and the last item should be a generic family as a backup.
Example
body {
font-family: "Segoe UI", Arial, sans-serif;
}Put quotes around font names that contain spaces.
| Generic family | Look | Examples |
|---|---|---|
serif | Small strokes at letter ends | Times New Roman, Georgia |
sans-serif | Clean, no strokes | Arial, Verdana, Helvetica |
monospace | Every letter the same width | Courier New, Consolas |
cursive | Handwriting style | Comic Sans MS |
Font Size, Weight and Style
font-sizesets the size, for example16px,1.2remor120%font-weightsets the thickness:normal,bold, or numbers from100to900font-stylemakes textitalicornormal
Example
<!DOCTYPE html>
<html>
<head>
<style>
html { font-size: 16px; }
.small { font-size: 0.875rem; }
.normal { font-size: 1rem; }
.large { font-size: 1.5rem; font-weight: bold; }
.quote { font-style: italic; font-family: Georgia, serif; }
</style>
</head>
<body>
<p class="small">Small text (14px)</p>
<p class="normal">Normal text (16px)</p>
<p class="large">Large bold text (24px)</p>
<p class="quote">"Practice every day, even for twenty minutes."</p>
</body>
</html>px, em or rem?
| Unit | Based on |
|---|---|
px | A fixed size |
em | The font size of the parent element |
rem | The font size of the root <html> element |
rem is a good choice for font sizes. If a user sets a bigger default font in their browser, everything grows with it.
Using Google Fonts
Google Fonts offers free fonts you can load from the web. Add a <link> in the <head>, then use the font name in CSS:
Example
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">Example
body {
font-family: "Poppins", sans-serif;
}Load only the weights you need. Every extra weight makes the page a little slower.
Exercise
Exercise
Why should a font-family list end with a generic family such as sans-serif?