CSS Typography

Typography can play a huge role in the visual aesthetic and emotional identity of a web page.

Typographic Properties

• Line Height
• Distance between lines of text on a page (Golden Ratio of 1.5x font).
• Font-Size
• Actual size of lettering. Should be at least 16 px on modern pages.
• https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake****
• Line Length
• Not a CSS property but rather a standard.
• Should be about 50-75 characters per line on a desktop .
• http://baymard.com/blog/line-length-readability****
• Letter Spacing
• Spacing between individual letters—try to avoid cramping
• Sans-Serif vs Serif
• Sans-serif are fonts sans their serifs—no tails. They’re easier to read online

Typography Activity

Using the following JSBin link create the CSS to modify the typography of each of the body paragraphs.

Be sure to modify the following CSS properties for each paragraph of your page:

• font-family
• font-size
• font-weight
• line-height

Hint!: You will need to do two things to accomplish this task:

• Create classes for each paragraph
• Add in styles for each class

You can breakout the output of the JSBin by clicking this button: