Under Construction. Phase 2: Rough layout and typography

Phase 2 of my boneheaded idea to rebuild my site live is “complete”. This phase was about layout rough-in and beginnings of typography.

The horizontal lines are for reference only, they will (probably) go away.

Here’s a cheat sheet I put together for the various widths, sizes, etc for my “responsive” site design. It probably contains some mistakes.

## The Grid ##

960px grid (call it 92%, this has to be chosen as a rather arbitrary “cornerstone”)

16 * 40 pixel columns, 10px gutters

* 2 columns = 100px, 10px gutters (100 / 960 = 10.4166666666667%, 1.0416666666667% gutters)
* 4 columns = 220px, 10px gutters (220 / 960 = 22.9166666666667%, 1.0416666666667% gutters)
* 6 columns = 340px, 10px gutters (340 / 960 = 35.4166666666667%, 1.0416666666667% gutters)
* 8 columns = 460px, 10px gutters (460 / 960 = 47.9166666666667%, 1.0416666666667% gutters)
* 10 columns = 580px, 10px gutters (580 / 960 = 60.4166666666667%, 1.0416666666667% gutters)
* 12 columns = 700px, 10px gutters (700 / 960 = 72.9166666666667%, 1.0416666666667% gutters)
* 14 columns = 820px, 10px gutters (820 / 960 = 85.4166666666667%, 1.0416666666667% gutters)
* 16 columns = 940px, 10px gutters (940 / 960 = 97.9166666666667, 1.0416666666667% gutters)
* sidebar (6 columns, 30px gutter)

## Typography ##

Assume browser default: 1em = 16px

* base font stack: Georgia, “Times New Roman”, serif
* base font size: 13px (13 / 16 = 0.8125em)
* base line height: 18px (18 / 13 = 1.384615384615385em)
* Heading font stack: “Helvetica Neue Condensed Bold”, “HelveticaNeue-Condensed-Bold”, Arial, Helvetica, sans-serif
* Site title = 55px (55 / 16 = 3.4375em)
* H1 = 34px, 36px line height (34 / 16 = 2.125em, 36 / 34 = 1.058823529411765em)
* H2 = 21px, 27px line height (21 / 16 = 1.3125em, 27 / 21 = 1.285714285714286em)
* H3 = 13px, 18px line height

Here’s a screenshot to preserve the awesomeness for posterity: