Problem: Fluid Paragraph Text

easy
15 min
Try to implement fluid typography for a paragraph (<p>) element so that its font size scales between a set minimum and maximum based on the viewport width.

Problem description

Given a paragraph element (<p>), write CSS rules that enable its font size to adjust fluidly between 14px and 20px as the viewport width changes, ensuring readability on all devices.

Goal

Use CSS to maintain legible paragraph text by implementing a fluid font sizing approach without JavaScript.

Constraints

  • The solution must use an external stylesheet styles.css.

  • Do not use JavaScript.

  • Support all modern browsers.

  • The paragraph font size must be at least 14px and at most 20px.

  • Viewport widths should be between 320px and 1600px.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.

Problem: Fluid Paragraph Text

easy
15 min
Try to implement fluid typography for a paragraph (<p>) element so that its font size scales between a set minimum and maximum based on the viewport width.

Problem description

Given a paragraph element (<p>), write CSS rules that enable its font size to adjust fluidly between 14px and 20px as the viewport width changes, ensuring readability on all devices.

Goal

Use CSS to maintain legible paragraph text by implementing a fluid font sizing approach without JavaScript.

Constraints

  • The solution must use an external stylesheet styles.css.

  • Do not use JavaScript.

  • Support all modern browsers.

  • The paragraph font size must be at least 14px and at most 20px.

  • Viewport widths should be between 320px and 1600px.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.