Navigation
Learn how to choose and implement fonts that make your website look professional and readable.
Why do some websites feel like a professional magazine while others look like a messy homework assignment? The secret isn't the images—it's the 'personality' of the letters you're reading right now.
In web design, you can't guarantee a user has your favorite font installed on their computer. If you pick 'Futura' but the user doesn't have it, their browser will default to something ugly. To prevent this, we use a font stack. This is a list of fonts in your font-family property, separated by commas. The browser starts with the first font and moves down the list until it finds one it has. You should always end your stack with a generic family like serif, sans-serif, or monospace. This acts as a 'safety net' so your layout never breaks.
Follow these steps to create a professional fallback system: 1. Open your CSS file. 2. Target the body element: `body { ... }`. 3. Add the font-family property: `font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;`. 4. Note that multi-word fonts like 'Helvetica Neue' must be in double quotes.
Quick Check
Why is it important to include a generic family like 'sans-serif' at the end of your font-family list?
Answer
It serves as a final 'safety net' fallback so the browser uses its default style if no other fonts in the list are installed.
Good typography isn't just about the shape of the letters; it's about the space between them. line-height (known as leading) controls the vertical space between lines of text. For body text, a value of to is usually best for readability. letter-spacing (tracking) adjusts the horizontal gap between characters. Finally, text-align controls how text sits in its container. While center looks great for titles, left alignment is almost always better for long paragraphs because it creates a consistent 'starting line' for the eye to find.
Let's optimize a paragraph for a blog post: 1. Set the line height to a multiplier: `line-height: 1.6;`. 2. Add a tiny bit of breathing room between letters: `letter-spacing: 0.5px;`. 3. Ensure the text is easy to track: `text-align: left;`. 4. This results in a vertical gap of the font size.
Quick Check
If your font-size is 16px and you set line-height to 2, what is the total height of the line in pixels?
Answer
32px
To break free from standard 'web-safe' fonts, we use external fonts. Services like Google Fonts host thousands of typefaces on their servers. To use them, you grab a `<link>` tag from their website and paste it into the `<head>` section of your HTML. This tells the browser to download the font file before rendering the page. While powerful, be careful: downloading too many different font weights (like thin, bold, and extra-bold) can slow down your website's loading speed.
Integrating a custom font into a project: 1. Visit fonts.google.com and select 'Roboto'. 2. Copy the provided `<link>` tag: `<link href='...' rel='stylesheet'>`. 3. Paste it inside your HTML `<head>` above your own CSS link. 4. In your CSS, apply it: `h1 { font-family: 'Roboto', sans-serif; font-weight: 700; }`. 5. Adjust the `letter-spacing` to to make the heading feel tighter and more modern.
Which CSS property is used to change the space between characters?
In the stack `font-family: 'Lato', Arial, sans-serif;`, what happens if the user doesn't have 'Lato'?
The <link> tag for a Google Font should be placed inside the <body> tag.
Review Tomorrow
Tomorrow, try to explain the concept of a 'font stack' to someone else without looking at your notes.
Practice Activity
Go to Google Fonts, pick two contrasting fonts (one for headings, one for body), and implement them on a practice webpage with a line-height of 1.6.