daneden · December 18, 2013 21:38
diff --git a/style.css b/style.css
 /* PX sucks */
 html {
  font: 18px/27px Georgia, serif;
 }

 p {
  font-size: 18px;
 }

 p small {
  font-size: 15px;
 }

 @media screen and (max-width: 400px) {
  html {
    font-size: 15px;
  }
  
  p {
    font-size: 15px;
  }
  
  p small {
    font-size: 12px;
  }
 }

 /* ====================================
 // Bleurgh. Ems are pretty cool, though */
 html {
  font: 112.5%/1.5 Georgia, serif; /* 18px/16px = 1.125 (112.5%) */
 }

 p {
  font-size: 1em;
 }

 p small {
  font-size: .8333em;
 }

 @media screen and (max-width: 400px) {
  html {
    font-size: 93.75%; /* 15px/18px = 0.9375 (93.75%) */
  }
  
  /* This cascades all the way down for all em-based sizes! */
 }

 /* But... */

 /* Bigger context... */
 p.big {
  font-size: 1.25em;
 }

 /* We want <small> to stay the same size... */
 p.big small {
  font-size: .618em; /* Ew. I have to do this EVERY time I change font size for a parent? */
 }

 /* ====================================
 // rems to the rescue! */

 html {
  font: 112.5%/1.5 Georgia, serif;
 }

 p {
  font-size: 1rem;
 }

 /* Because our <small> is inheriting the font size directly from root (<html>), we don't need to worry about the parent font size! */
 p small {
  font-size: .8333rem;
 }

 p.big {
  font-size: 1.25rem;
 }

 @media screen and (max-width: 400px) {
  html {
    font-size: 93.75%;
  }
  
  /* All the font sizes scale down. Woohoo! */
 }

 /* Also, we can maintain ideal column widths regardless of html font size: */

 .column {
  max-width: 40rem;
 }
	/* PX sucks */
	html {
	font: 18px/27px Georgia, serif;
	}

	p {
	font-size: 18px;
	}

	p small {
	font-size: 15px;
	}

	@media screen and (max-width: 400px) {
	html {
	font-size: 15px;
	}

	p {
	font-size: 15px;
	}

	p small {
	font-size: 12px;
	}
	}

	/* ====================================
	// Bleurgh. Ems are pretty cool, though */
	html {
	font: 112.5%/1.5 Georgia, serif; /* 18px/16px = 1.125 (112.5%) */
	}

	p {
	font-size: 1em;
	}

	p small {
	font-size: .8333em;
	}

	@media screen and (max-width: 400px) {
	html {
	font-size: 93.75%; /* 15px/18px = 0.9375 (93.75%) */
	}

	/* This cascades all the way down for all em-based sizes! */
	}

	/* But... */

	/* Bigger context... */
	p.big {
	font-size: 1.25em;
	}

	/* We want <small> to stay the same size... */
	p.big small {
	font-size: .618em; /* Ew. I have to do this EVERY time I change font size for a parent? */
	}

	/* ====================================
	// rems to the rescue! */

	html {
	font: 112.5%/1.5 Georgia, serif;
	}

	p {
	font-size: 1rem;
	}

	/* Because our <small> is inheriting the font size directly from root (<html>), we don't need to worry about the parent font size! */
	p small {
	font-size: .8333rem;
	}

	p.big {
	font-size: 1.25rem;
	}

	@media screen and (max-width: 400px) {
	html {
	font-size: 93.75%;
	}

	/* All the font sizes scale down. Woohoo! */
	}

	/* Also, we can maintain ideal column widths regardless of html font size: */

	.column {
	max-width: 40rem;
	}