Command Palette

Search for a command to run...

Hectal
Phase 4Beginner5 of 12 in CSS

Text and Typography

Fonts, font stacks, web fonts, size, weight, line height, alignment, decoration, long text, lists and links: make text readable and beautiful.

Most of the web is text, so typography is most of design. In this phase you'll learn how the browser picks a font, how to load your own web fonts without slowing the page, and how size, weight and line height make text easy or hard to read.

Then you'll style the text itself: alignment, underlines, capital letters, spacing and shadows. You'll learn what happens when text is too long for its box (wrapping, breaking long words, the … ellipsis, clamping to a few lines), and how to style lists and links so they look good and stay accessible.

Every topic builds on Phase 3 (units like rem, em and ch, colours and clamp()). The box model, which controls the space around text, comes next in Phase 5.

0/6 · 0%
6 topics ~2 h 19 code blocks & diagrams
Start with the first topic
1
4.1

Font Families and Font Stacks

font-family takes a list of fonts in order of preference, called a font stack; the browser uses the first one it has and must always end with a generic family like sans-serif as the safety net.

20 min 3 code practice

2
4.2

Web Fonts

@font-face lets a page download its own font files so every visitor sees the same typeface; font-display, the WOFF2 format, subsetting and preloading keep that download from making text invisible or slow.

27 min 4 code practice

3
4.3

Size, Weight, Style and Line Height

font-size, font-weight, font-style and line-height set how big, how thick, how slanted and how spaced text is; a unitless line height and a line length of about 45–75 characters make text comfortable to read.

26 min 3 code practice

4
4.4

Text Alignment, Decoration and Transform

text-align, text-decoration, text-transform, letter-spacing, word-spacing, text-indent and text-shadow control where text sits in its line, its lines and underlines, its capital letters, its spacing and its shadow.

25 min 3 code practice

5
4.5

Long Text: Wrapping and Overflow

white-space decides whether spaces and line breaks are kept and whether lines wrap, overflow-wrap, word-break and hyphens decide how long words break, and text-overflow: ellipsis and line-clamp cut text that doesn't fit with a ….

26 min 3 code practice

6
4.6

Styling Lists and Links

list-style and ::marker control the bullets and numbers of lists, and link styles are written in the order :link, :visited, :hover, :focus-visible, :active so each state wins at the right moment, while staying easy to spot for everyone.

20 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Give the page a font stack

Give the whole page a sans-serif font stack on body with at least one named font and the generic sans-serif at the end.

Beginner
2

Make an article easy to read

Set the body text to 1.125rem (18px with the default) with a comfortable line height between 1.4 and 1.8.

Beginner
3

Style a sale banner

Make the heading display in capital letters with CSS (don't change the HTML text), with extra letter spacing, centred, and with a text shadow.

Beginner
4

Truncate a product card

The card is 220px wide. Keep the product title on one line and end it with … when it's too long.

Intermediate
5

Typography for a blog page

Declare a web font with @font-face named Brand, using src: local("Georgia") (the preview can't download files) and font-display: swap. Use it for the h1 with a serif fallback.

Intermediate