CSS Typography

Introduction to CSS Typography

CSS text and typography properties control the appearance and formatting of text on web pages, enhancing readability and visual appeal. These properties manage font styles, sizes, spacing, and alignment to create professional and accessible designs.

Purpose: Style text to improve user experience and convey brand identity.
Role in CSS: Essential for consistent and aesthetically pleasing content presentation.

Text Styling Properties

CSS offers several properties to style text directly:

color: Sets text color (e.g., red, #FF0000, rgb(0, 0, 255)).
text-align: Aligns text (left, right, center, justify).
text-decoration: Adds effects like underline, overline, line-through, or none.
text-transform: Changes case (uppercase, lowercase, capitalize).
line-height: Sets the height of a line, improving readability (e.g., 1.5, 20px).

Example: Basic text styling:

<style>
    h1 {
        color: navy;
        text-align: center;
        text-decoration: underline;
    }
    p {
        text-transform: capitalize;
        line-height: 1.6;
    }
</style>
<h1>Welcome</h1>
<p>this is sample text.</p>

<style>
    h1 {
        color: navy;
        text-align: center;
        text-decoration: underline;
    }
    p {
        text-transform: capitalize;
        line-height: 1.6;
    }
</style>
<h1>Welcome</h1>
<p>this is sample text.</p>

Font Properties

Font properties control the typeface and size of text:

font-family: Specifies the typeface (e.g., Arial, sans-serif). Use fallback fonts for compatibility.
font-size: Sets text size (e.g., 16px, 1rem, 2em).
font-weight: Defines thickness (e.g., normal, bold, 700).
font-style: Sets style (normal, italic, oblique).
font: Shorthand for multiple properties (e.g., font: italic bold 16px Arial).

Example: Font styling:

<style>
    .title {
        font-family: 'Helvetica', sans-serif;
        font-size: 24px;
        font-weight: 700;
    }
    .italic {
        font-style: italic;
        font: 16px 'Georgia', serif;
    }
</style>
<h2 class="title">Bold Title</h2>
<p class="italic">Italic text</p>

<style>
    .title {
        font-family: 'Helvetica', sans-serif;
        font-size: 24px;
        font-weight: 700;
    }
    .italic {
        font-style: italic;
        font: 16px 'Georgia', serif;
    }
</style>
<h2 class="title">Bold Title</h2>
<p class="italic">Italic text</p>

Web Fonts

Custom fonts can be loaded using @font-face or external services like Google Fonts:

@font-face: Defines a custom font from a file.
Google Fonts: Links to hosted fonts via <link> or @import.

Example: Using Google Fonts:

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>
<p>Text in Roboto font.</p>

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>
<p>Text in Roboto font.</p>

Example: Custom font with @font-face:

<style>
    @font-face {
        font-family: 'CustomFont';
        src: url('customfont.woff2') format('woff2');
    }
    .custom {
        font-family: 'CustomFont', sans-serif;
    }
</style>
<p class="custom">Custom font text</p>

<style>
    @font-face {
        font-family: 'CustomFont';
        src: url('customfont.woff2') format('woff2');
    }
    .custom {
        font-family: 'CustomFont', sans-serif;
    }
</style>
<p class="custom">Custom font text</p>

Advanced Typography

Modern CSS supports advanced typography features:

letter-spacing: Adjusts space between characters (e.g., 2px).
word-spacing: Adjusts space between words (e.g., 4px).
text-shadow: Adds shadow effects (e.g., text-shadow: 2px 2px 4px gray).
font-variant: Enables small caps or other variants (e.g., small-caps).
text-wrap: Controls text wrapping (balance, pretty for modern browsers).

Example: Advanced typography:

<style>
    .fancy {
        letter-spacing: 1px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        text-wrap: balance;
    }
</style>
<p class="fancy">Fancy text styling</p>

<style>
    .fancy {
        letter-spacing: 1px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        text-wrap: balance;
    }
</style>
<p class="fancy">Fancy text styling</p>

Best Practices for Typography

Readability: Use legible font sizes (at least 16px for body text) and sufficient line height (1.4–1.8).
Accessibility: Ensure high contrast between text and background (WCAG-compliant).
Fallback Fonts: Always include fallback fonts in font-family.
Consistency: Maintain a cohesive typography system across the site.
Performance: Limit custom fonts to reduce load times; use modern formats like WOFF2.

Example: Accessible and consistent typography:

<style>
    :root {
        --main-font: 'Arial', sans-serif;
        --text-color: #333;
    }
    body {
        font-family: var(--main-font);
        font-size: 16px;
        line-height: 1.5;
        color: var(--text-color);
    }
    h1 {
        font-size: 2em;
        text-align: center;
    }
</style>
<h1>Main Heading</h1>
<p>Readable body text.</p>

<style>
    :root {
        --main-font: 'Arial', sans-serif;
        --text-color: #333;
    }
    body {
        font-family: var(--main-font);
        font-size: 16px;
        line-height: 1.5;
        color: var(--text-color);
    }
    h1 {
        font-size: 2em;
        text-align: center;
    }
</style>
<h1>Main Heading</h1>
<p>Readable body text.</p>

Hands-On Activity

Create an HTML page with an external CSS file that:

Uses Google Fonts to style a heading with a custom font.
Styles a paragraph with text-transform, line-height, and a text-shadow.
Applies a bold, italicized style to a <span> with custom letter-spacing.

Sample Solution:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Typography Demo</h1>
    <p>This is a <span class="highlight">highlighted</span> paragraph.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Typography Demo</h1>
    <p>This is a <span class="highlight">highlighted</span> paragraph.</p>
</body>
</html>

/* styles.css */
h1 {
    font-family: 'Lora', serif;
    font-size: 28px;
    text-align: center;
}
p {
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    line-height: 1.6;
    text-shadow: 1px 1px 2px gray;
}
.highlight {
    font-weight: bold;
    font-style: italic;
    letter-spacing: 2px;
}

/* styles.css */
h1 {
    font-family: 'Lora', serif;
    font-size: 28px;
    text-align: center;
}
p {
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    line-height: 1.6;
    text-shadow: 1px 1px 2px gray;
}
.highlight {
    font-weight: bold;
    font-style: italic;
    letter-spacing: 2px;
}