Responsive typography scales in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the purpose of responsive typography scales

Why do web developers use responsive typography scales in their CSS or Sass code?

A To make all text the same size regardless of device

B To fix text color issues on different browsers

C To ensure text sizes adjust smoothly across different screen sizes for better readability

D To prevent text from wrapping on small screens

💡 Hint

Think about how text looks on phones versus big monitors.

Responsive typography scales help text resize smoothly on different devices, improving readability and user experience.

📝 Syntax

intermediate

Identifying correct Sass syntax for a fluid typography scale

Which Sass code snippet correctly creates a fluid font size that scales between 1rem and 2rem as the viewport width changes from 320px to 1200px?

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

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

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

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

💡 Hint

Clamp needs three values separated by commas: min, preferred, max.

The clamp() function requires three comma-separated values: minimum, preferred (which can use viewport units), and maximum font size.

❓ selector

advanced

Choosing the best Sass selector for applying responsive typography

Given a Sass mixin for responsive font sizes, which selector usage applies the mixin only to paragraph text inside articles?

SASS

@mixin responsive-text { font-size: clamp(1rem, 2vw, 1.5rem); }

A article > p { @include responsive-text; }

B p article { @include responsive-text; }

C .article p { @include responsive-text; }

D article p { @include responsive-text; }

💡 Hint

Think about the order of selectors and what they mean.

article p selects all p elements inside article elements. The other options either reverse the order or select different elements.

❓ layout

advanced

Effect of responsive typography on layout with Flexbox

If you apply a responsive font size using Sass to text inside a Flexbox container, what is the most likely effect on the container's layout as the viewport changes?

A The container's height adjusts smoothly to fit the changing text size

B The container's width stays fixed and text overflows

C The container ignores text size changes and stays the same size

D The container breaks Flexbox layout and stacks items vertically

💡 Hint

Think about how Flexbox handles content size changes.

Flexbox containers adjust their size to fit their content, so when text size changes responsively, the container height changes smoothly.

❓ accessibility

expert

Accessibility considerations for responsive typography scales

Which practice best ensures that responsive typography scales remain accessible for users who adjust their browser's default font size?

A Disable user zoom to maintain layout integrity

B Use relative units like rem and avoid fixed pixel sizes for font sizes

C Set font sizes with fixed pixel values to keep consistent appearance

D Use only viewport width units (vw) for font sizes

💡 Hint

Consider how users change font size in browser settings.

Using relative units like rem respects user preferences for font size, improving accessibility. Fixed pixels or only viewport units can ignore user settings.