week 8 – Typography

Typography Error

 

Principles of Typography

visual hierarchy example

recommended reading: rhythm in web typography

typography css reference

Rules of Thumb:

  • chunk text (analyze the text)
  • organize text for visual hierarchy, create difference and repetition
  • organize for rhythm and tension (explore what baseline rhythm is)
  • choose 1-2 fonts (make differences with weight, size, style, color)
  • create difference in text areas (contrast, proportion, space)
  • keep line length to 45-90 characters per line or 10-15 words
  • use padding on text boxes with borders
  • for text body, use CSS rules: “line-height: 1.5;” and “text-align: left”
  • create strong lines of continuance (verticals, rule lines, borders, gutters and alignment)
  • avoid underline and bold for emphasis ( italic is best)
  • repeat styles for similar semantic elements to create repetition

Typography Example, by Natalie Hendren

————————————————

Typography demo
/ demo PDF

Typography Tools & Resources:

Working with Fonts

 

———————————–

Build Recipe HTML

Recipe HTML and CSS

To fix iOS viewport reset, place this meta tag in <head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">