Responsive typography in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding viewport units in responsive typography

Which CSS unit is best suited for scaling font size based on the viewport width?

A vw

B em

C px

D rem

💡 Hint

Think about a unit that changes size as the browser window changes width.

The vw unit stands for viewport width and scales the font size relative to the width of the browser window, making it ideal for responsive typography.

📝 Syntax

intermediate

Correct syntax for fluid typography using clamp()

Which CSS snippet correctly uses clamp() to create fluid typography that scales between 1rem and 3rem based on viewport width?

A font-size: clamp(1rem 2vw 3rem);

B font-size: clamp(2vw, 1rem, 3rem);

C font-size: clamp(1rem, 2vw, 3rem);

D font-size: clamp(3rem, 1rem, 2vw);

💡 Hint

Remember the order is min, preferred, max.

The clamp() function takes three values: minimum, preferred, and maximum. Option C correctly sets the font size to never go below 1rem, scale with 2vw, and never exceed 3rem.

❓ rendering

advanced

Result of CSS with clamp() on different viewport widths

Given this CSS, what will be the font size when the viewport width is 500px?

font-size: clamp(1rem, 5vw, 2rem);

Note: 1rem = 16px.

A 32px

B 25px

C 16px

D 40px

💡 Hint

Calculate 5vw at 500px width and compare with min and max.

5vw means 5% of viewport width. 5% of 500px is 25px. The clamp sets minimum 16px, preferred 25px, maximum 32px (2rem). So the font size is 25px.

❓ selector

advanced

CSS selector for responsive typography on headings only

Which CSS selector targets all heading elements (h1 to h6) to apply responsive font sizes?

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

B all-headings { font-size: clamp(1rem, 2vw, 3rem); }

C h1-h6 { font-size: clamp(1rem, 2vw, 3rem); }

D h1, h2, h3, h4, h5, h6 { font-size: clamp(1rem, 2vw, 3rem); }

💡 Hint

Think about how to list multiple selectors in CSS.

Option D correctly lists all heading tags separated by commas. Options B, C, and D are invalid selectors.

❓ accessibility

expert

Ensuring accessible responsive typography

Which practice best improves accessibility when using responsive typography?

A Use relative units like rem and allow user zoom

B Use very small font sizes to fit more text on screen

C Disable browser zoom to maintain layout

D Use fixed pixel font sizes to keep text consistent

💡 Hint

Accessibility means users can adjust text size easily.

Using relative units like rem respects user settings and allows zooming, improving readability and accessibility. Fixed pixels and disabling zoom harm accessibility.