Interior

Layout system

Typography.

Scale

The font sizes are based upon a typographic scale traditionally set by printers, adopted for use on the web. The sizes were originally in point yet have been converted to rem — the resulting size is the equivalent px to what it would have been as point. The base font size is 1rem, with a line-height of 1. The baseline grid is .5rem for the sake of traversing the baseline in small increments. The resulting body font size is — for small viewports 16px — whilst 18px on larger viewports as all font sizes scale up by 112.5%.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.

Pack my box with five dozen liquor jugs.
Pack my box with five dozen liquor jugs.

Names

The traditional names associated with letterpress sizes lend themselves as a naming convention for web typography. Take for example the variable names where I have assigned the font sizes in figure 1.

Font sizes have been assigned to specific elements <h1>...<h6> using variables and the baseline mixin, in the case of styles for the current Interior theme. However they could also be used for class names.

$canon: font-scale(3); // 48px
$double-great-primer: font-scale(2.250); // 36px
$four-line-brevier: font-scale(2); // 32px
$two-line-pica: font-scale(1.5); // 24px
$double-pica: font-scale(1.313); // 21px
$great-primer: font-scale(1.125); // 18px
$english: font-scale(.875); // 14px
$pica: font-scale(.75); // 12px
Figure 1