Web · Text and Font Styles
Font-family, size, weight
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to Font Properties
When styling text in CSS, there are three fundamental properties that control how your text looks: font-family, font-size, and font-weight.
These properties help you create readable, attractive text that matches the design of your website:
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
}
In this lesson, we'll explore each of these properties in detail.
Exercise 2 — The font-family Property
The
font-family
property specifies which font to use for text. You can specify a single font or a list of fonts (known as a "font stack").
When you specify multiple fonts, the browser will use the first one available on the user's device. If none of your specified fonts are available, the browser will use its default font.
<!DOCTYPE html>
<html>
<head>
<style>
.arial-text {
font-family: Arial, sans-serif;
}
.times-text {
font-family: "Times New Roman", Times, serif;
}
.fancy-text {
font-family: Georgia, "Palatino Linotype", serif;
}
</style>
</head>
<body>
<p class="arial-text">This text uses Arial (sans-serif).</p>
<p class="times-text">This text uses Times New Roman (serif).</p>
<p class="fancy-text">This text uses Georgia or Palatino (serif).</p>
</body>
</html>
Some important notes about
font-family
:
- Font names with spaces must be enclosed in quotes:
"Times New Roman"
- It's good practice to end with a generic font family (serif, sans-serif, monospace, etc.)
- Web-safe fonts like Arial, Times New Roman, and Georgia are available on most devices
Exercise 3 — Correct Font Stack
Which of the following is the correct syntax for specifying a font stack that includes Arial, Helvetica, and a generic sans-serif fallback?
Options
• ```font-family: Arial, Helvetica, sans-serif;```
• ```font-family: "Helvetica", "Arial", "sans-serif";```
• ```font-family: Arial; font-family: Helvetica; font-family: sans-serif;```
• ```font-family: (Arial, Helvetica, sans-serif);```
Hint : Think about the correct way to specify multiple fonts in a single font-family property. Which option follows the standard CSS syntax?
Exercise 4 — The font-size Property
The
font-size
property sets the size of the text. You can specify size using different units:
-
px
(pixels): Fixed size
-
em
: Relative to parent element's font size
-
rem
: Relative to root element's font size
-
%
: Percentage of parent element's font size
- Keywords:
small
,
medium
,
large
, etc.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 16px; /* Base font size */
}
.pixels {
font-size: 20px; /* Absolute size in pixels */
}
.percent {
font-size: 150%; /* 150% of parent's font size (16px) = 24px */
}
.em-unit {
font-size: 1.5em; /* 1.5 times parent's font size (16px) = 24px */
}
.keywords {
font-size: large; /* Browser-defined 'large' size */
}
</style>
</head>
<body>
<p>Default size text (16px in most browsers)</p>
<p class="pixels">This text is 20 pixels</p>
<p class="percent">This text is 150% of the parent size</p>
<p class="em-unit">This text is 1.5em (similar to 150%)</p>
<p class="keywords">This text uses the 'large' keyword</p>
</body>
</html>
Which Unit to Use?
For most web development, pixels (px) are straightforward for beginners. As you become more experienced, relative units like em and rem become valuable for responsive design, allowing text to scale based on user preferences or device characteristics.
Exercise 5 — Complete the Font Size CSS
Complete the CSS to set the following text sizes:
- Main heading: 24 pixels
- Paragraph text: 16 pixels
- Small note text: 12 pixels
h1 {
____ ____;
}
p {
____ ____;
}
.note {
____ ____;
}
Options: font-size 24px font-size 16px font-size 12px text-size font
Hint : Remember the property name for setting text size and the correct way to specify pixel values in CSS.
Exercise 6 — The font-weight Property
The
font-weight
property sets how thick or thin the characters in text should be displayed. It controls the boldness or lightness of the text.
You can specify
font-weight
using keywords or numeric values:
Keywords:
-
normal
(same as 400)
-
bold
(same as 700)
-
lighter
(relative to parent element)
-
bolder
(relative to parent element)
Numeric values:
- Range from 100 to 900 (in steps of 100)
- 400 is normal
- 700 is bold
- Lower values are lighter, higher values are bolder
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
font-weight: normal; /* or 400 */
}
.bold {
font-weight: bold; /* or 700 */
}
.light {
font-weight: 300; /* lighter than normal */
}
.extra-bold {
font-weight: 800; /* bolder than bold */
}
</style>
</head>
<body>
<p class="normal">This text has normal weight (400)</p>
<p class="bold">This text is bold (700)</p>
<p class="light">This text is light (300)</p>
<p class="extra-bold">This text is extra bold (800)</p>
</body>
</html>
Font Weight Availability
Not all fonts have all weight variants available. Many fonts only have normal (400) and bold (700). If you specify a weight that isn't available, the browser will use the closest available weight.
Exercise 7 — Match Font Weights
Match each font-weight keyword with its equivalent numeric value:
Items to match
• normal
• bold
• Extra light
• Extra bold
Definitions
• 400
• 700
• 200
• 800
Exercise 8 — Font Weight Comparison
Which of the following font-weight values will produce the boldest text?
Options
• ```font-weight: 900;```
• ```font-weight: bold;```
• ```font-weight: 500;```
• ```font-weight: normal;```
Hint : Consider the range of numeric values for font-weight and which ones represent bolder text.
Exercise 9 — Combining Font Properties
You can combine all the font properties we've learned to create exactly the text style you want. Let's see how to use them together:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-family: Georgia, serif;
font-size: 32px;
font-weight: bold;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
}
.highlight {
font-family: "Trebuchet MS", sans-serif;
font-size: 18px;
font-weight: 600;
}
</style>
</head>
<body>
<h1>Welcome to Codémon World</h1>
<p>Learn all about your favorite Codémons and how to train them.</p>
<p class="highlight">Aquachu, Pyrochu and Florachu are the starter Codémons!</p>
</body>
</html>
As you can see, we've applied different combinations of font properties to create distinct styles for different elements on the page.
The font Shorthand
CSS also offers a shorthand
font
property to set multiple font properties at once. However, it's often clearer for beginners to use the individual properties we've covered in this lesson.
Exercise 10 — Complete the Font Styling
Complete the CSS to style the heading with Arial font, 28 pixels in size, and bold weight.
h1 {
____ Arial, sans-serif;
____ 28px;
____ bold;
}
Options: font-family: font-size: font-weight: font-style: text-family: text-size:
Hint : Think about the correct property names for setting the font type, size, and boldness.
Exercise 11 — Font Properties and Their Purpose
Match each font property with its purpose:
Items to match
• font-family
• font-size
• font-weight
• serif
Definitions
• Sets the typeface used for text
• Controls how large the text appears
• Sets how bold or light the text appears
• A generic font family with small lines at the ends of characters