michaelarob / responsive-typography

Use media queries to enhance the typography of a website for different screen sizes.

summary	time	deliverables
Use media queries to enhance the typography of a website for different screen sizes.	1 hour	1 HTML file, 1 CSS file

Responsive typography

Overview

• Fork this repository.
• Add the correct responsive typography properties to the content of this website.
• Only the following properties need to be added:
  • margin
  • padding
  • font
  • font-size
  • line-height
• DO NOT change the HTML.
• Some of the CSS is already complete.
• Run it through Markbot and make sure it passes all the checks.

---

Details

• Typefaces: Crimson Text
• Left/right text padding: 1rem
• Standard media query widths: 38em, 60em, 90em
• For the best vertical rhythm: remove the top margins from things & add bottom margins equal to the line-height. Follow the font-size and margin settings in the screen sizes cheat sheet.

---

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

• Final screenshots in the “screenshots” folder.
• Watch this video to see how it interacts.

---

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.