Day 7: Working with Text and Fonts

Welcome Back! Let’s Make Your Text Stand Out

It’s Day 7 of your web design journey, and today we’re going to focus on something super important: text and fonts. Text is a big part of any website, and how you style it can make a huge difference in how your page looks and feels. So, let’s dive into the world of typography and learn how to make your text look great!

Why Typography Matters

Typography isn’t just about making your text readable—it’s also about making your website look professional and appealing. The right fonts and text styles can set the tone of your website, guide the reader’s attention, and make your content more engaging.

Think about it: If you visit a website and the text is too small, hard to read, or just doesn’t look good, you might leave before even reading anything. On the other hand, clear and attractive typography makes you want to stay and explore more.

Choosing the Right Fonts

Fonts play a big role in the overall feel of your website. Here are a few tips for choosing the right fonts:

  1. Keep It Simple: Choose fonts that are easy to read. For body text, go for simple, clean fonts like Arial, Verdana, or Helvetica.
  2. Limit Your Choices: Don’t use too many different fonts on one page. Stick to one or two fonts to keep things looking cohesive.
  3. Match the Mood: Think about the feeling you want your website to convey. A formal website might use a serif font like Times New Roman, while a fun, creative site might use a more playful font like Comic Sans (though be careful with this one!).

Adding Fonts with CSS

CSS makes it easy to style your text and choose the right fonts. Here’s a quick example of how you can set the fonts for your web page:

body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
}

In this example:

  • font-family: 'Arial', sans-serif;: This sets the default font for your page to Arial. The sans-serif is a fallback option in case Arial isn’t available on the user’s computer.
  • font-size: 16px;: This sets the default text size. You can adjust this to make your text larger or smaller.
  • color: #333;: This sets the color of the text to a dark gray, which is easier on the eyes than pure black.

Using Google Fonts

One of the easiest ways to add unique fonts to your website is by using Google Fonts. Google Fonts offers a wide range of fonts that are free to use. Here’s how you can add them to your web page:

  1. Visit Google Fonts: Go to Google Fonts and browse through the available fonts.
  2. Select a Font: Once you find a font you like, click on it and then click the “Select this style” button.
  3. Copy the Link: Google Fonts will provide a <link> tag that you can copy.
  4. Add the Link to Your HTML: Paste the link in the <head> section of your HTML file.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>Custom Font Example</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph with a custom font.</p>
</body>
</html>

And in your CSS file:

body {
    font-family: 'Roboto', sans-serif;
}

Styling Your Text with CSS

CSS allows you to do so much more than just change fonts. Here are some common text styles you can apply with CSS:

Text Alignment: Align your text to the left, right, center, or justify it.h1 { text-align: center; }

Font Weight: Make your text bold or light.p { font-weight: bold; }

Text Decoration: Add underlines, overlines, or strike-throughs to your text.a { text-decoration: underline; }

Text Transform: Change the case of your text to uppercase, lowercase, or capitalize each word.h2 { text-transform: uppercase; }

Line Height: Control the spacing between lines of text.p { line-height: 1.6; }

Letter Spacing: Adjust the spacing between letters.h1 { letter-spacing: 2px; }

Let’s Practice

Try applying some of these styles to your web page. Experiment with different fonts, sizes, and text decorations to see how they change the look and feel of your site. Here’s an example:

h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    color: #2c3e50;
}

p {
    font-family: 'Georgia', serif;
    font-size: 1.2em;
    line-height: 1.8;
    text-align: justify;
    color: #34495e;
}

What’s Next?

Tomorrow, we’ll explore how to work with colors and backgrounds in CSS. This will add another layer of style to your web pages and make them even more engaging and visually appealing.

Final Thoughts:

Great job today! You’ve learned a lot about working with text and fonts, which is a big part of making your web pages look professional and polished. Keep experimenting with different styles and remember—good typography can make or break a website. You’re well on your way to becoming a web design pro!