Responsive typography in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the base font size using a relative unit for better scaling.

CSS

body {
  font-size: [1];
}

Drag options to blanks, or click blank then click option'

A1rem

B20px

C16px

D150%

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed pixel sizes like 16px limits responsiveness.

Using percentages without context can be confusing.

Using 1rem sets the font size relative to the root element, which helps with responsive scaling.

2fill in blank

medium

Complete the media query to increase font size on screens wider than 600px.

CSS

@media (min-width: 600px) {
  body {
    font-size: [1];
  }
}

Drag options to blanks, or click blank then click option'

A100%

B1rem

C14px

D1.25rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using smaller font sizes inside media queries defeats the purpose.

Using fixed pixel sizes can reduce flexibility.

Increasing font size to 1.25rem on larger screens improves readability.

3fill in blank

hard

Fix the error in the CSS to make the heading font size responsive using clamp().

CSS

h1 {
  font-size: clamp([1], 5vw, 3rem);
}

Drag options to blanks, or click blank then click option'

A2rem

B1rem

C16px

D10vw

Attempts:

3 left

💡 Hint

Common Mistakes

Using viewport width units as minimum size can make text too small.

Using pixel units inside clamp() is valid but less flexible than rem.

The minimum font size should be a reasonable size like 2rem to ensure readability on small screens.

4fill in blank

hard

Fill both blanks to create a responsive paragraph font size that scales between 1rem and 1.5rem.

CSS

p {
  font-size: clamp([1], 2vw, [2]);
}

Drag options to blanks, or click blank then click option'

A1rem

B1.25rem

C1.5rem

D2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping minimum and maximum values.

Using fixed pixel sizes instead of relative units.

The font size will never go below 1rem or above 1.5rem, scaling smoothly with viewport width.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets the root font size responsively using clamp().

CSS

:root {
  font-size: clamp([1], [2], [3]);
}

Drag options to blanks, or click blank then click option'

A14px

B1vw

C18px

D16px

Attempts:

3 left

💡 Hint

Common Mistakes

Using viewport units for min or max values.

Mixing units inconsistently.

This sets the root font size to never go below 14px, scale with viewport width at 1vw, and never exceed 18px.