Responsive typography in CSS - Mini Project: Build & Apply

Responsive Typography with CSS

📖 Scenario: You are building a simple webpage that looks good on both small and large screens. To do this, you want the text size to change smoothly depending on the screen width.

🎯 Goal: Create a CSS style that makes the main heading text size responsive. The heading should be smaller on narrow screens and larger on wide screens, using modern CSS techniques.

📋 What You'll Learn

Use a CSS variable called --base-font-size to store the font size.

Set the base font size to 1.5rem initially.

Use a CSS clamp() function to make the font size responsive between 1rem and 3rem.

Apply the responsive font size to the h1 element.

Include a media query that adjusts the font size variable for screens wider than 600px.

💡 Why This Matters

🌍 Real World

Responsive typography is essential for websites to look good and be readable on phones, tablets, and desktops.

💼 Career

Web developers use responsive CSS techniques daily to create accessible and user-friendly websites.

1

Create the base font size variable

Write a CSS rule for the :root selector that creates a CSS variable called --base-font-size and sets it to 1.5rem.

CSS

:root {
  /* Define the base font size variable here */
  /* Your code here */
}

Need a hint?

Use :root to define global CSS variables. The syntax is --variable-name: value;

2

Apply the base font size to the heading

Write a CSS rule for the h1 element that sets its font-size to the CSS variable --base-font-size using the var() function.

CSS

:root {
  --base-font-size: 1.5rem;
}

h1 {
  /* Set font-size to the base font size variable here */
  /* Your code here */
}

Need a hint?

Use font-size: var(--base-font-size); inside the h1 selector.

3

Make the font size responsive with clamp()

Update the --base-font-size variable inside :root to use the clamp() function with minimum 1rem, preferred 2vw, and maximum 3rem values.

CSS

:root {
  /* Update the base font size variable to use clamp() here */
  /* Your code here */
}

h1 {
  font-size: var(--base-font-size);
}

Need a hint?

The clamp() function takes three values: minimum, preferred, and maximum font sizes.

4

Add a media query to adjust font size on wider screens

Add a CSS media query for screens wider than 600px that sets --base-font-size to 2rem inside the :root selector.

CSS

:root {
  --base-font-size: clamp(1rem, 2vw, 3rem);
}

h1 {
  font-size: var(--base-font-size);
}

/* Add media query below */
/* Your code here */

Need a hint?

Use @media (min-width: 600px) { :root { --base-font-size: 2rem; } } to override the variable on wider screens.