Responsive Typography

Description

Forking this CodePenopen in new window - Complete the tasks in the comments below. Remember, when we develop mobile first, the initial style will automatically target the smallest breakpoint, once there is more room, at a minimum width of x take what's already there and add to it.

Requirements and Marks

The following requirements must be met in order to complete the assignment successfully:

Set a background style on the body 0/1 Setup default font styles on the body 0/1 Set appropriate padding for more space around the edges and center the layout at the largest breakpoint 0/3

Style 3 Distinct font sets at these three breakpoints:

  1. Default Mobile 0/1
  2. 650px 0/1
  3. 960px 0/1

For each breakpoint, set the following properties:

  1. Spacing between 0/3
  2. Font Family 0/3
  3. Font Size 0/3
  4. Line height 0/3

Use relative units of measurement (REM)

Submission

Submit CodePen URL in Brightspace