dissoc

Matthew Butterick’s Practical Typography is one of my favorite books. It has been my reference point for anything web-related—including (clearly) this blog—so discovering the second edition was a treat.

The book supports a single-column layout, with consistent body text:

How? Mostly CSS. Here’s how I upgraded this blog.

Font sizes in viewport width units are proportional to the page width. To avoid infinitely scaling fonts, CSS queries override the font size.

html {font-size: 2.15vw;}
@media all and (min-width:1000px) {html {font-size: 21.8px;}}
@media all and (max-width:520px) {html {font-size: 18px;}}

For single-column, elements like .aside are moved inside the body.

@media all and (max-width:520px) {
  .post .aside {
    left: 0;
    float: inherit;
    position: inherit;
    width: 100%;
    text-align: left;
  }
}

Similar CSS is used to move post headers (try resizing this page).

Thanks to Matthew Butterick for the viewport CSS.