WebcoreFE

Let's choose some fonts

A font is a set of letters drawn in one style. Some look classic, some look modern, some look like a typewriter. With four font properties, you choose the font, how big it is, how bold it is, and how much room each line gets.

Think of a café menu. The café's name is printed in a fancy, classic font, and it's the biggest text on the card. Section names like "Drinks" are bold, so your eyes find them fast. The small note under the drinks has extra space between the lines, so it's easy to read.

Two fonts are enough for most pages: a special one for the name or headings, and a plain one for everything else.

A closer look

Fonts need backups

The browser can only show fonts that are on the visitor's computer or phone. That's why font-family takes a list, split by commas: Georgia, 'Times New Roman', serif. The browser tries each name in order and uses the first one it has. The last name is a generic family, a type of font that every device has. Put quotes around names with spaces, like 'Times New Roman'.

Three generic families

serif fonts have small "feet" on the letters, like in printed books. sans-serif fonts have no feet (sans means "without") and look clean on screens. monospace fonts give every letter the same width, which is why code editors use them.

Font weight

font-weight sets how thick the letters are: normal (the same as 400) or bold (the same as 700). Numbers from 100 to 900 give more steps, but a font only shows the steps it was made with.

Line height

line-height sets how tall each line of text is, so it controls the space between lines. A plain number like 1.6 means "1.6 times the text size", and it adjusts by itself if the text size changes. Long paragraphs are easier to read with a line height between 1.5 and 1.8.

Let's build it

Let's choose fonts for a Front Page Bytes story: the site name, the headline, the writer's name and the story text. Each code box opens on the CSS tab with the new lines highlighted. Click HTML to see the page being styled.

Step 1: Pick a font for the whole page

Your code

body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h1>Front Page Bytes</h1>    <h2>New Phones Arrive This Week</h2>    <p class="byline">By Ana Reyes</p>    <p>Three new phones go on sale on Friday. Each one has a bigger battery, a sharper camera and faster charging. Stores in Manila and Cebu open early, and prices start at ₱9,999.</p>  </body></html>

What you see

font-family on body changes the font of all the text, because fonts are passed down like text color. The browser uses Arial, then Helvetica if Arial is missing, then any sans-serif font.

Step 2: Give the site name its own font

Your code

body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}h1 {  font-family: Georgia, 'Times New Roman', serif;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h1>Front Page Bytes</h1>    <h2>New Phones Arrive This Week</h2>    <p class="byline">By Ana Reyes</p>    <p>Three new phones go on sale on Friday. Each one has a bigger battery, a sharper camera and faster charging. Stores in Manila and Cebu open early, and prices start at ₱9,999.</p>  </body></html>

What you see

The h1 rule switches the site name to Georgia, a classic newspaper-style font with small feet on the letters. Everything else stays Arial.

Step 3: Change text sizes

Your code

body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}h1 {  font-family: Georgia, 'Times New Roman', serif;  font-size: 40px;}p {  font-size: 18px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h1>Front Page Bytes</h1>    <h2>New Phones Arrive This Week</h2>    <p class="byline">By Ana Reyes</p>    <p>Three new phones go on sale on Friday. Each one has a bigger battery, a sharper camera and faster charging. Stores in Manila and Cebu open early, and prices start at ₱9,999.</p>  </body></html>

What you see

font-size: 40px; makes the site name bigger, and font-size: 18px; makes every paragraph a little bigger than the usual 16px, so the story is easier to read.

Step 4: Make the writer's name bold

Your code

body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}h1 {  font-family: Georgia, 'Times New Roman', serif;  font-size: 40px;}p {  font-size: 18px;}.byline {  font-size: 14px;  font-weight: 700;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h1>Front Page Bytes</h1>    <h2>New Phones Arrive This Week</h2>    <p class="byline">By Ana Reyes</p>    <p>Three new phones go on sale on Friday. Each one has a bigger battery, a sharper camera and faster charging. Stores in Manila and Cebu open early, and prices start at ₱9,999.</p>  </body></html>

What you see

The byline is a paragraph too, so it was 18px. This rule makes it smaller at 14px and bold with font-weight: 700;. The .byline rule points at a class, and a class rule wins over a plain tag rule like p, so its size is used.

Step 5: Give the lines some room

Your code

body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}h1 {  font-family: Georgia, 'Times New Roman', serif;  font-size: 40px;}p {  font-size: 18px;  line-height: 1.6;}.byline {  font-size: 14px;  font-weight: 700;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h1>Front Page Bytes</h1>    <h2>New Phones Arrive This Week</h2>    <p class="byline">By Ana Reyes</p>    <p>Three new phones go on sale on Friday. Each one has a bigger battery, a sharper camera and faster charging. Stores in Manila and Cebu open early, and prices start at ₱9,999.</p>  </body></html>

What you see

line-height: 1.6; makes each line of the story 1.6 times as tall as its text. Compare it with step 4: the story looks calmer and is easier to follow.

Quick notes

font-family Which font to use

body { font-family: Arial, Helvetica, sans-serif; }

How to use

Georgia, serif A font name first, then a backup. The browser uses the first one it has.
serif Letters with small feet, like in books and newspapers.
sans-serif Letters without feet. Clean and easy to read on screens.
monospace Every letter is the same width, like code.
'Times New Roman' Put quotes around font names that have spaces.

Examples

A clean font for the whole page.
```
body {  font-family: Arial, Helvetica, sans-serif;}
```
A classic newspaper look for the site name.
```
h1 {  font-family: Georgia, 'Times New Roman', serif;}
```
Code shown in a typewriter-style font.
```
code {  font-family: 'Courier New', monospace;}
```

font-size How big the text is

p { font-size: 18px; }

How to use

16px The usual size of body text.
24px Bigger text, good for headings.
1.5em One and a half times the size of the parent's text (more in CSS Lesson 6).
Add a unit like px. A number on its own is skipped.

Examples

A big site name.
```
h1 {  font-size: 40px;}
```
Easy-to-read story text.
```
p {  font-size: 18px;}
```
Small print, like a photo caption.
```
.caption {  font-size: 13px;}
```

font-weight How bold the text is

.byline { font-weight: 700; }

How to use

400 or normal Regular text.
700 or bold Bold text. Headings are bold by default.
100 to 900 From very thin to very heavy. Only some fonts have every step.

Examples

A bold name under a story.
```
.byline {  font-weight: 700;}
```
A heading that is not bold.
```
h2 {  font-weight: normal;}
```

line-height Space for each line

p { line-height: 1.6; }

How to use

1.6 Lines are 1.6 times as tall as the text. A number with no unit is the easiest choice.
24px An exact line height.
normal The browser's usual spacing, about 1.2.
Values below 1 make lines overlap.

Examples

Roomy lines for long stories.
```
p {  line-height: 1.6;}
```
Tight lines for a big two-line title.
```
h1 {  line-height: 1.1;}
```

Common mistakes

These are mistakes many beginners make. Each mini browser shows what really happens.

A misspelled font with no backup

The mistake

body {  background-color: #F0F7FF;  font-family: "Curier New";}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h1>Front Page Bytes</h1>    <h2>New Phones Arrive This Week</h2>    <p class="byline">By Ana Reyes</p>    <p>Three new phones go on sale on Friday. Each one has a bigger battery, a sharper camera and faster charging. Stores in Manila and Cebu open early, and prices start at ₱9,999.</p>  </body></html>

What you see

No device has a font called "Curier New", and there is no backup in the list. The browser falls back to its own default font, so the page doesn't get the typewriter look.

Tip: Check the spelling, and end the list with a generic family: font-family: 'Courier New', monospace;

A size without a unit

The mistake

body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}p {  font-size: 18;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h1>Front Page Bytes</h1>    <h2>New Phones Arrive This Week</h2>    <p class="byline">By Ana Reyes</p>    <p>Three new phones go on sale on Friday. Each one has a bigger battery, a sharper camera and faster charging. Stores in Manila and Cebu open early, and prices start at ₱9,999.</p>  </body></html>

What you see

18 on its own could mean 18 pixels, 18 points or something else, so the browser skips the line and the story keeps its usual size.

Tip: Add a unit: font-size: 18px;

A line height that is too small

The mistake

body {  background-color: #F0F7FF;  font-family: Arial, Helvetica, sans-serif;}p {  font-size: 18px;  line-height: 0.7;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <h1>Front Page Bytes</h1>    <h2>New Phones Arrive This Week</h2>    <p class="byline">By Ana Reyes</p>    <p>Three new phones go on sale on Friday. Each one has a bigger battery, a sharper camera and faster charging. Stores in Manila and Cebu open early, and prices start at ₱9,999.</p>  </body></html>

What you see

With line-height: 0.7;, each line is shorter than the letters themselves, so the lines of the story run into each other.

Tip: Use a line height of 1.5 or more for paragraphs.

Test your knowledge

Edit the CSS on the left. Open the HTML tab to see the class names you can use. The mini browser updates as you type, and each goal gets a check mark when it's done.

No clicking needed. Each goal gets a check mark by itself once your code does it.

Change the font of the whole page with font-family on body. not done yet
Change the size of the .note text. not done yet
Make the .title heading normal weight, not bold. not done yet
Give the .note text more space between lines. not done yet

Your code

What you see

Try an exercise

Recap

font-family picks the font. List backups after it and end with a generic family like sans-serif.
font-size sets how big the text is, with a unit like px. font-weight makes it bold (700) or normal (400).
line-height sets the space for each line. A value around 1.6 makes long text easy to read.

References

Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.

W3C. CSS Fonts Module Level 4 (official specification). Open reference
W3C. CSS Inline Layout Module Level 3 (official specification, line-height). Open reference
LibreTexts. Web Site Design (2022, open textbook). Open reference

Fonts

What you'll learn

Let's choose some fonts

A closer look

Fonts need backups

Three generic families

Text size

Font weight

Line height

Let's build it

Step 1: Pick a font for the whole page

Step 2: Give the site name its own font

Step 3: Change text sizes

Step 4: Make the writer's name bold

Step 5: Give the lines some room

Quick notes

Common mistakes

A misspelled font with no backup

A size without a unit

A line height that is too small

Test your knowledge

Recap

References

waving_hand Let's choose some fonts

search A closer look

Fonts need backups

Three generic families

Text size

Font weight

Line height

construction Let's build it

1 Step 1: Pick a font for the whole page

2 Step 2: Give the site name its own font

3 Step 3: Change text sizes

4 Step 4: Make the writer's name bold

5 Step 5: Give the lines some room

sticky_note_2 Quick notes

report Common mistakes

error A misspelled font with no backup

error A size without a unit

error A line height that is too small

quiz Test your knowledge

task_alt Recap

menu_book References

Let's choose some fonts

A closer look

Let's build it

Step 1: Pick a font for the whole page

Step 2: Give the site name its own font

Step 3: Change text sizes

Step 4: Make the writer's name bold

Step 5: Give the lines some room

Quick notes

Common mistakes

A misspelled font with no backup

A size without a unit

A line height that is too small

Test your knowledge

Recap

References