WEEK 8: Recipe Project/Typography
(March 8-12)

To Do This Week:

Reading:  Typography in 10 minutes  (optional: explore the online book )

Complete the CSS QUIZ  by Tuesday (self-corrected, 5 pts for taking it)

Video Lecture:


Please take the online CSS quiz. Once again, you get the full 5 points if you take the quiz by Thursday March 19th. 0 points if you don’t take the quiz. Try to understand what you got wrong!

Zoom Class:

CSS quiz overview

Typography Principles
Responsive Design questions, reminders

Pod Mini-Project #5 (the last one)
Read and copy the source code of the link below. Apply CSS to achieve good visual hierarchy in the typography. There is no correct method, just follow the directions in the text to apply typographic principles! 

Typography assignment, by former student Natalie Hendren


Recipe projects DUE Friday March 19th
Recipe Projects List


  • validate your project (validate often!)
  • make sure your stylesheet is mobile first, followed by media queries for larger sizes
  • do not copy all css for media queries, only css that you want to change
  • img {width: 100%} will take care of responsive images as long as images are inside an element
  • you need at least one media query, but you may have as many as you need
  • pay attention to visual hierarchy at all levels
  • apply styles to links
  • have a footer with link(s) to your source(s)
  • format your html and css so that it is readable: tab in for nested elements, keep alignments


Design/Visual Hierarchy:

Adobe Kuler – color schemes

CSS Grid Layout

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

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



Typography Error

Principles of Typography | Typography tutorial
Class Notes – week 8

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 demo
/ demo PDF

Typography Tools & Resources:

Working with Fonts