Responsive typography scales in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a base font size variable in Sass.

SASS

$base-font-size: [1];

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

A1rem

B16px

C100%

D12pt

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative units like rem or % instead of a fixed pixel value for the base size.

Setting $base-font-size to 16px is a common practice for base font size in responsive typography.

2fill in blank

medium

Complete the code to create a mixin that sets font size responsively using clamp().

SASS

@mixin responsive-font($min, $preferred, $max) {
  font-size: clamp([1], $preferred, $max);
}

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

Acalc($min)

Bmin

C$min

Dcalc(min)

Attempts:

3 left

💡 Hint

Common Mistakes

Using the string 'min' instead of the variable $min.

Using calc() unnecessarily around the variable.

The clamp() function requires the minimum font size as the first argument. Using $min passes the variable correctly.

3fill in blank

hard

Fix the error in the code to correctly calculate the fluid font size using calc() and viewport width.

SASS

$fluid-size: calc([1] + 1vw);

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

A1rem + 1vw

B1vw - 1rem

C1vw + 1rem

D1rem - 1vw

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction which can cause negative or smaller sizes.

Swapping the order but using subtraction.

The fluid font size should add a fixed size (1rem) and a viewport width unit (1vw) to scale responsively.

4fill in blank

hard

Fill both blanks to create a map of font sizes with keys and responsive values using clamp().

SASS

$font-sizes: (
  small: clamp([1], 1vw + 0.5rem, 1rem),
  large: clamp([2], 2vw + 1rem, 3rem)
);

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

A0.75rem

B1rem

C1.5rem

D2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same value for both small and large sizes.

Using values outside typical font size ranges.

The small font size starts at 0.75rem and the large font size starts at 1.5rem as minimum values in clamp().

5fill in blank

hard

Fill all three blanks to create a mixin that applies a responsive font size from a map using a key.

SASS

@mixin font-size($size-key) {
  font-size: map-get($font-sizes, [1]);
  line-height: [2];
  letter-spacing: [3];
}

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

A$size-key

B1.2

C0.05em

Dsize-key

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of the variable for map-get.

Setting line-height or letter-spacing to zero or negative values.

The mixin uses the variable $size-key to get the font size from the map. Line height and letter spacing are set to common readable values.