Typography.

cfollet · Nov 11, 2016 · b8efde1 · b8efde1
1 parent ef0bbc9
commit b8efde1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -15,7 +15,7 @@ body {
 }
 
 html {
-  font-family: $root-font-family;
+  font-family: $serif-font-family;
   font-size: $root-font-size;
   line-height: $root-line-height;
 

diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss
@@ -3,6 +3,7 @@
 // Super small header above the content for site name and short description.
 
 .masthead {
+  font-family: $sans-font-family;
   padding-bottom: 1rem;
   margin-bottom: 3rem;
 

diff --git a/_sass/_posts.scss b/_sass/_posts.scss
@@ -25,6 +25,7 @@
 
 // Meta data line below post title
 .post-date {
+  font-family: $serif-font-family-alt;
   display: block;
   margin-top: -.5rem;
   margin-bottom: 1rem;

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -1,3 +1,8 @@
+@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:500');
+@import url('https://fonts.googleapis.com/css?family=Eczar');
+@import url('https://fonts.googleapis.com/css?family=Rubik:300');
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
+
 $gray-1: #f9f9f9;
 $gray-2: #ccc;
 $gray-3: #767676;
@@ -13,7 +18,13 @@ $blue: #268bd2;
 // $blue: #6a9fb5;
 $brown: #8f5536;
 
-$root-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+$goofy-font-family: "Playfair Display", serif;
+
+$serif-font-family: 'Cormorant Garamond', serif;
+$serif-font-family-alt: 'Eczar', serif;
+
+$sans-font-family: 'Rubik', sans-serif;
+
 $root-font-size: 16px;
 $root-line-height: 1.5;
 
@@ -24,7 +35,7 @@ $link-color: $blue;
 $border-color: #e5e5e5;
 
 $large-breakpoint: 38em;
-$large-font-size: 20px;
+$large-font-size: 21px;
 
-$code-font-family: Menlo, Monaco, "Courier New", monospace;
+$code-font-family: 'Source Code Pro', monospace;
 $code-color: #bf616a;