Generalize and normalize font sizes.

1 files changed, 29 insertions, 14 deletions

diff --git a/css/main.scss b/css/main.scss
index 9424be6..787cae0 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -11,6 +11,27 @@ $base-font-size: 11.2px;
 $base-line-height: (1.2 * $base-font-size);
 $base-font-family: "helvetica neue", arial, helvetica, sans-serif;
 
+/* size headings using classic scale of 16, 18, 24, 36, relative to 14px (original base font size) */
+
+$rel-12-font-size: 12/14 * $base-font-size;
+$rel-16-font-size: 16/14 * $base-font-size;
+$rel-18-font-size: 18/14 * $base-font-size;
+$rel-24-font-size: 24/14 * $base-font-size;
+$rel-36-font-size: 36/14 * $base-font-size;
+
+$h1-font-size: $rel-36-font-size;
+$h2-font-size: $rel-16-font-size;
+$h3-font-size: $rel-16-font-size;
+$h4-font-size: $base-font-size;
+$h5-font-size: $base-font-size;
+$h6-font-size: $base-font-size;
+
+$front-leadin-font-size: $rel-18-font-size;
+$caption-font-size: $rel-16-font-size;
+$meta-font-size: $rel-12-font-size;
+$ligature-font-size: 1.3 * $base-font-size;
+$compact-font-size: 0.7 * $base-font-size;
+
 /* @group Reset */
 
 @import "normalize";
@@ -27,31 +48,27 @@ pre, code, kbd, tt, samp, tt {
 /* @group Font sizes & margins */
 
 p, ul, ol, dl, address, table, pre, form, fieldset {
-	font-size: 1em /* 14px */;
+	@include normalize-font-size($base-font-size);
 	margin-bottom: 0.5em; 
 }
 
-/* size headings using classic scale of 16, 18, 24, 36 */
-
 /* @end */
 
 /* @group Headings */
 
 h1 {
-	font-size: 2.571em /* 36px */;
 	line-height:1em /* 36px */;
 	margin-top:0.1667em /* 6px */;
 	margin-bottom:0.5833em /* 21px */;
 }
 h1 span {
-	font-size: 0.5em;
+	@include normalize-font-size($front-leadin-font-size, $h1-font-size);
 	line-height: 1;
 	color: #999;
 	display: block;
 	margin-bottom: 0.3em;
 }
 h2, h3 {
-	font-size:1.143em /* 16px */;
 	margin-top:0;
 	padding-bottom: 0.5em;
 	margin-bottom:0.5em /* 8px */; 
@@ -60,11 +77,9 @@ h2, h3 {
 }
 h4 {
 	margin-top:1em /* 21px */;
-	font-size:1em /* 14px */;
 	margin-bottom: 0.5em;
 }
 h5, h6 {
-	font-size:1em /* 14px */;
 	margin-bottom: 0.5em;
 }
 
@@ -101,9 +116,9 @@ table {
 }
 
 caption {
+	@include normalize-font-size($caption-font-size);
 	font-weight: bold;
 	padding-bottom: 0.4375em; /* 7px */
-	font-size:1.144em; /* 16px */
 }
 
 thead th {
@@ -163,9 +178,9 @@ del {
 }
 
 pre {
+	@include normalize-font-size($compact-font-size);
 	white-space: pre;
 	width: 100%;
-	font-size: 0.7em;
 	overflow: hidden;
 	border-top: 3px double #C7C7C7;
 	border-bottom: 3px double #C7C7C7;
@@ -245,10 +260,10 @@ label {
 /* @group Meta */
 
 form .help {
+	@include normalize-font-size($meta-font-size);
 	display: block;
 	color: #777;
 	font-style: normal;
-	font-size: 0.857em; /* 12px */
 }
 
 /* @end */
@@ -256,8 +271,8 @@ form .help {
 /* @group Form controls */
 
 input, textarea, select, button {
+	@include normalize-font-size($base-font-size);
 	font-family: inherit;
-	font-size: 1em;
 	line-height: inherit;
 }
 
@@ -338,9 +353,9 @@ button.link {
 /* @end */
 
 .amp {
+	@include normalize-font-size($ligature-font-size);
 	font-family: "Bell MT", "Adobe Caslon Pro", "Goudy Old Style";
 	font-style: italic;
-	font-size: 1.3em;
 	line-height: 0.7;
 	margin: 0 0.2em 0 0.1em;
 }
@@ -426,7 +441,7 @@ h5.micro,
 h6.micro,
 p.micro,
 span.micro {
-	font-size: 0.7em;
+	@include normalize-font-size($compact-font-size);
 	line-height: 1.5em;
 	display: block;
 }