The typography properties in CSS are the set of rules that allow us to control the appearance, family, size, weight, and legibility of the text we display on our web page.
You can have the best HTML structure in the world and spectacular backgrounds, but if your text is ugly, boring, or hard to read, the user will flee in terror (web design is, 90%, text design).
For example, it’s hard to imagine a festival poster, a wedding invitation, or any advertisement using a single text style. In web development, exactly the same thing happens.
The typography you choose conveys the personality of your project, whether it’s a tech blog, a fashion store, or an industrial control panel.
Let’s look at the tools CSS gives us to make our texts perfect.
The Font Family (font-family)
The most important property is font-family. It is used to tell the browser which typeface we want to use for a specific piece of text.
The peculiarity of this property is that we don’t pass it a single name, but a list of fonts separated by commas, in order of preference. This is known as a fallback plan.
body {
/* Try to use Roboto. If you don't have it, use Arial. If not, the first sans-serif available */
font-family: "Roboto", Arial, sans-serif;
}
Why do we do this? Because the browser can only render fonts that the user has installed on their computer. If you request a super rare font that only you have, the visitor will see their system’s default font (which is usually Times New Roman, breaking your entire design).
Never use more than three different typefaces on a single web page. Using too many different fonts creates a terrible visual chaos and also slows down the page load significantly. The ideal is to choose one eye-catching font for headings and one highly legible font for paragraphs.
Loading an External Font
To avoid depending on the fonts each user has installed, today we can import external typefaces from services like Google Fonts. You copy a <link> into your HTML, and the browser downloads the necessary font.
When using an external font, the service itself usually gives you a snippet to paste into the <head> of your HTML.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
After that, you can use that font from CSS like any other.
body {
font-family: "Roboto", Arial, sans-serif;
}
Don’t load ten font families with nine weights each “just in case”. Each external font is a file the browser has to download. Choose few, choose well, and your website will load much lighter.
Text Size (font-size)
To make letters bigger or smaller, we use the font-size property.
Historically, pixels (px) have been used as the standard unit because they are very easy to understand (equivalent to “points” in a Word document).
h1 {
font-size: 32px; /* A large, bold heading */
}
p {
font-size: 16px; /* Standard size for reading text */
}
Although pixels are great for starting out, in modern and accessible web design it is recommended to use the rem unit for texts. One rem equals the browser’s base size (usually 16px).
If you set font-size: 2rem;, you are saying “make it twice as big as the normal text”.
Font Weight (font-weight)
If you want to highlight a word or make a heading stand out more, you need the font-weight property.
It allows us to control how “chubby” or thin the line of our letter is. You can use keywords like normal or bold, or you can use numeric values ranging from 100 (super thin) to 900 (super thick).
.highlighted-text {
font-weight: bold; /* The classic way to make text bold */
}
.thin-heading {
font-weight: 300; /* Requires the font to support this weight */
}
Numeric values only work properly if the font has that weight available. If you request font-weight: 900 from a font that only comes with 400 and 700, the browser will do what it can, which is usually to approximate the result with more will than precision.
Alignment and Decoration (text-align and text-decoration)
Just like in any word processor, in CSS we can align our paragraphs to the left, right, center, or justify them. For this we use text-align.
.centered-quote {
text-align: center;
}
On the other hand, we have a very common property called text-decoration. By default, browsers underline all <a> links with a rather ugly blue line. To remove this line and make the link look like normal text (or a button), we use this property:
a {
text-decoration: none; /* Goodbye to the default underline */
color: #ff5722; /* And give it a cool orange color */
}
Room to Breathe (line-height)
The line-height controls the spacing, meaning the vertical space between one line of text and the next within the same paragraph.
If the line spacing is too small, the lines pile up, and the user gets lost when changing rows. If you give it a little air, the text becomes immensely more pleasant to read (which is always a good thing 😊).
p {
font-size: 16px;
line-height: 1.5; /* The space between lines will be 1.5 times the font size */
}
Uppercase, Spacing, and Small Adjustments
In addition to choosing the font and size, CSS allows us to control other very common details in headings, menus, and secondary texts.
.label {
text-transform: uppercase;
letter-spacing: 0.08em;
}
text-transform: uppercase converts the text to uppercase visually, without changing the original HTML. letter-spacing slightly separates the letters, which usually works well for short uppercase texts.
Do not use letter-spacing in long paragraphs. Separating letters can look elegant in a label or a menu, but in reading text it can be quite tiring. Normal text wants to breathe between lines, not between each letter as if it were angry.
Example of Typographic Hierarchy
A page is better understood when the sizes and weights form a clear hierarchy. The user should be able to distinguish at a glance what is a main heading, what is a subheading, and what is normal text.
h1 {
font-size: 2.5rem;
line-height: 1.1;
}
h2 {
font-size: 1.75rem;
line-height: 1.2;
}
p {
font-size: 1rem;
line-height: 1.6;
}
It’s not about making every heading gigantic. It’s about having a coherent visual scale, so the reader doesn’t have to guess which part of the content is more important.
