Styling text

Text is a big part of almost every webpage. If the text looks good, the page will look good.

There’s a lot you can control about how text looks! Size, color, spacing, and shape are only the first layer. There’s also niche text styles, like decoration (e.g. underline or strikethrough).

There's lots of other choices too! Body and header fonts, how links look when you hover them, how the numbers or bullets look on your lists...

Choosing the right value for each property is hard. Each change you make forces you to tweak something else. Over time, you’ll build an intuition for what makes a site look good, and how to achieve good design with CSS. For now, we’ll tell you what properties CSS can control, and the most important rules for good typography.

Typography Tutorial

Before we do a deep dive into writing CSS to control text, check out this interactive tutorial by Learn UI Design.

Click through the Interactive Typography Tutorial

• Scroll and click through each step
• Try different fonts, line lengths and heights, point sizes, and spacing.
• (You don't need to sign up for their course)

Afterwards, reflect on these questions:

• What text properties did you already know about?
• What properties were new to you?

In the next few lessons, you'll learn how to control those properties with CSS, instead of with sliders.