Chapter 2: Colors, Fonts, and Text Styling

Typography and color are the primary drivers of user engagement. In CSS, you have granular control over every aspect of how text looks and how colors are applied, allowing you to create high-contrast, readable, and aesthetically pleasing interfaces.

1. Mastering Colors

In CSS, you can define colors in several ways, each serving different design needs:

• Color Names: Simple (e.g., red, blue, cornflowerblue).
• Hex Codes: The standard for web design (e.g., #FF5733).
• RGB/RGBA: Defines colors using Red, Green, and Blue values. The "A" stands for Alpha, which controls transparency (e.g., rgba(255, 87, 51, 0.5)).

Pro Tip: Always ensure your background and text colors have high contrast. Tools like the "WCAG Contrast Checker" help ensure your site is readable for everyone, including those with visual impairments.

2. Typography and Fonts

Controlling text involves more than just picking a font. You must manage font-family, font-size, font-weight, and line-height.

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6; /* Improves readability for paragraphs */
    font-weight: 400;
}

Always provide a "fallback" font stack (as shown above). If the user’s computer doesn't have the first font, the browser will try the next, eventually falling back to a generic sans-serif or serif font.

3. Text Presentation

Beyond the font itself, you can manipulate text behavior to improve design:

• text-align: Controls horizontal alignment (left, center, right, justify).
• text-decoration: Often used to remove the default underline from links (text-decoration: none;).
• text-transform: Quickly change casing (uppercase, lowercase, capitalize).
• letter-spacing: Adjusts the space between characters, perfect for creating elegant headers.

4. Line Height and Readability

One of the most ignored properties is line-height. A line-height that is too tight makes long paragraphs hard to read. A standard recommendation for web body text is a line-height between 1.5 and 1.6. This small adjustment significantly improves the professional feel of your content.

Common Beginner Mistakes

• Hard-to-Read Contrast: Using light gray text on a white background might look "modern," but it is illegible for many users. Stick to high-contrast combinations.
• Using Too Many Fonts: Using more than two or three different fonts on a single site makes it look chaotic and slows down loading times.
• Fixed Units: Beginners often use px for font size. Consider using relative units like rem, which scale better if a user changes their browser's default font size.

Try It Yourself

1. Create a header style that uses uppercase text-transform and custom letter-spacing.
2. Style your body text with a line-height of 1.6 and a specific font-family stack.
3. Use an rgba color for a background block to create a see-through (transparent) effect.

Working with Web Fonts

Beyond system fonts, you can load custom fonts using @font-face or services like Google Fonts, which give your site a distinctive visual identity.

<link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet">

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

Text Alignment and Decoration

CSS gives you fine control over how text is displayed and aligned within its container:

h1 {
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 2px;
}