Fonts / weights / sizing

assets/custom-fonts.scss

@@ -1,158 +1,139 @@
-/* fraunces-regular - latin */
+/* bitter-300 - latin */
 @font-face {
-  font-family: 'Fraunces';
+  font-family: 'Bitter';
   font-style: normal;
-  font-weight: 400;
+  font-weight: 300;
   src: local(''),
-       url('/fonts/Fraunces9ptSoft-Thin.woff2') format('woff2');
+       url('../fonts/bitter-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/bitter-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-/* fraunces-italic - latin */
+/* bitter-300italic - latin */
 @font-face {
-  font-family: 'Fraunces';
+  font-family: 'Bitter';
   font-style: italic;
-  font-weight: 400;
+  font-weight: 300;
   src: local(''),
-       url('/fonts/Fraunces9ptSoft-ThinItalic.woff2')  format('woff2');
+       url('../fonts/bitter-v16-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/bitter-v16-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-/* Metropolis-regular - latin */
+/* fraunces-200 - latin */
 @font-face {
-  font-family: 'Metropolis';
+  font-family: 'Fraunces';
   font-style: normal;
-  font-weight: 400;
+  font-weight: 200;
   src: local(''),
-       url('/fonts/Metropolis-Light.woff2') format('woff2'),
-       url('/fonts/Metropolis-Light.woff') format('woff');
+       url('../fonts/fraunces-v3-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/fraunces-v3-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-/* Metropolis-italic - latin */
+/* fraunces-200italic - latin */
 @font-face {
-  font-family: 'Metropolis';
+  font-family: 'Fraunces';
   font-style: italic;
-  font-weight: 400;
+  font-weight: 200;
   src: local(''),
-       url('/fonts/Metropolis-LightItalic.woff2')  format('woff2'),
-       url('/fonts/Metropolis-LightItalic.woff')  format('woff');
+       url('../fonts/fraunces-v3-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/fraunces-v3-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-/* bitter-300 - latin */
+/* spectral-200 - latin */
 @font-face {
-  font-family: 'Bitter';
+  font-family: 'Spectral';
   font-style: normal;
-  font-weight: 300;
+  font-weight: 200;
   src: local(''),
-       url('../fonts/bitter-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/bitter-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/spectral-v6-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/spectral-v6-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-/* bitter-300italic - latin */
+/* spectral-200italic - latin */
 @font-face {
-  font-family: 'Bitter';
+  font-family: 'Spectral';
   font-style: italic;
-  font-weight: 300;
+  font-weight: 200;
   src: local(''),
-       url('../fonts/bitter-v16-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/bitter-v16-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/spectral-v6-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/spectral-v6-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-
-/* commissioner-regular - latin */
+/* Metropolis-regular - latin */
 @font-face {
-  font-family: 'Commissioner';
+  font-family: 'Metropolis';
   font-style: normal;
   font-weight: 400;
   src: local(''),
-       url('/fonts/Commissioner-Light.woff2') format('woff2');
+       url('/fonts/Metropolis-Light.woff2') format('woff2'),
+       url('/fonts/Metropolis-Light.woff') format('woff');
 }
 
-/* commissioner-italic - latin */
+/* Metropolis-italic - latin */
 @font-face {
-  font-family: 'Commissioner';
+  font-family: 'Metropolis';
   font-style: italic;
   font-weight: 400;
   src: local(''),
-       url('/fonts/Commissioner-LightItalic.woff2') format('woff2');
+       url('/fonts/Metropolis-LightItalic.woff2')  format('woff2'),
+       url('/fonts/Metropolis-LightItalic.woff')  format('woff');
 }
 
-/* eb-garamond-regular - latin */
+/* commissioner-regular - latin */
 @font-face {
-  font-family: 'EB Garamond';
+  font-family: 'Commissioner';
   font-style: normal;
   font-weight: 400;
   src: local(''),
-       url('../fonts/eb-garamond-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/eb-garamond-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* eb-garamond-600 - latin */
-@font-face {
-  font-family: 'EB Garamond';
-  font-style: normal;
-  font-weight: 600;
-  src: local(''),
-       url('../fonts/eb-garamond-v14-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/eb-garamond-v14-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('/fonts/Commissioner-Light.woff2') format('woff2');
 }
 
-/* eb-garamond-italic - latin */
+/* commissioner-italic - latin */
 @font-face {
-  font-family: 'EB Garamond';
+  font-family: 'Commissioner';
   font-style: italic;
   font-weight: 400;
   src: local(''),
-       url('../fonts/eb-garamond-v14-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/eb-garamond-v14-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* eb-garamond-600italic - latin */
-@font-face {
-  font-family: 'EB Garamond';
-  font-style: italic;
-  font-weight: 600;
-  src: local(''),
-       url('../fonts/eb-garamond-v14-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/eb-garamond-v14-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('/fonts/Commissioner-LightItalic.woff2') format('woff2');
 }
 
-/* alegreya-sans-regular - latin */
+/* sarabun-300 - latin */
 @font-face {
-  font-family: 'Alegreya Sans';
+  font-family: 'Sarabun';
   font-style: normal;
   font-weight: 400;
   src: local(''),
-       url('../fonts/alegreya-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/alegreya-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/sarabun-v8-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/sarabun-v8-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-/* alegreya-sans-italic - latin */
+/* sarabun-300italic - latin */
 @font-face {
-  font-family: 'Alegreya Sans';
+  font-family: 'Sarabun';
   font-style: italic;
   font-weight: 400;
   src: local(''),
-       url('../fonts/alegreya-sans-v13-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/alegreya-sans-v13-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/sarabun-v8-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/sarabun-v8-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-/* alegreya-sans-700 - latin */
+/* sarabun-500 - latin */
 @font-face {
-  font-family: 'Alegreya Sans';
+  font-family: 'Sarabun';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   src: local(''),
-       url('../fonts/alegreya-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/alegreya-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/sarabun-v8-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/sarabun-v8-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-/* alegreya-sans-700italic - latin */
+/* sarabun-500italic - latin */
 @font-face {
-  font-family: 'Alegreya Sans';
+  font-family: 'Sarabun';
   font-style: italic;
-  font-weight: 700;
+  font-weight: 500;
   src: local(''),
-       url('../fonts/alegreya-sans-v13-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/alegreya-sans-v13-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/sarabun-v8-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../fonts/sarabun-v8-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 {{ with $.Site.Params.customtextFontFamily }}

assets/scaffold.scss

@@ -207,7 +207,7 @@ form {
   @extend .#{$buttonTextColor};
   }
   .action.text {
-    @extend .db, .mb4, .ttu, .tracked, .b, .link ;
+    @extend .db, .mb4, .ttu, .tracked, .fw5, .link ;
   }
 }
 

config.toml

@@ -34,7 +34,7 @@ enableEmoji = true
   logo = "/img/blogophonic-mark-dark.png"
   mainSections = ["blog", "project", "talk"]
   show_social_links = true
-  navallcaps = true
+  navallcaps = false
   # Default image for social sharing and search engines. 
   # Place image file in `static` folder and specify image name here.
   sharing_image = "/img/papillons.jpg"
@@ -46,14 +46,14 @@ enableEmoji = true
   textFontFamily = "sans-serif"
   headingFontFamily = "sans-serif"
   # alternatively, use a built-in font-family
-  # serif options: Fraunces / EB Garamond / Bitter
-  # sans-serif options: Commissioner / Alegreya Sans / Metropolis
+  # serif options: Bitter / Fraunces / Spectral
+  # sans-serif options: Commissioner / Metropolis / Sarabun
   customtextFontFamily = "Commissioner"
-  customheadingFontFamily = "Fraunces"
+  customheadingFontFamily = "Spectral"
 
   # use a built-in color theme
   # one of: forest / grayscale / peach / plum /
-  #         poppy / sky / violet / water
+  #         poppy  / violet    / water / sky  / 
   theme = "sky"
 
   # or, leave theme empty & make your own palette

content/elements/index.html

@@ -10,34 +10,34 @@
 
 <div class="flex-l">
   <div class="w-50-l pr4-l">
-    <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">Font Sizes</h6>
+    <h4 class="ttu tracked black-70 pv3 mt5 bt b--black-30">Font Sizes</h4>
     <div class="w-100 overflow-x-auto">
       <table class="w-100 mb2">
         <tbody>
           <tr>
-            <td class="tc f-headline b b--black-10 bg-white-60 v-base">A</td>
-            <td class="tc f-subheadline b b--black-10 bg-white-60 v-base">A</td>
-            <td class="tc f1 b b--black-10 bg-white-60 v-base">A</td>
-            <td class="tc f2 b b--black-10 bg-white-60 v-base">A</td>
-            <td class="tc f3 b b--black-10 bg-white-60 v-base">A</td>
-            <td class="tc f4 b b--black-10 bg-white-60 v-base">A</td>
-            <td class="tc f5 b b--black-10 bg-white-60 v-base">A</td>
-            <td class="tc f6 b b--black-10 bg-white-60 v-base">A</td>
+            <td class="tc f-headline b b--black-30 bg-white-60 v-base">A</td>
+            <td class="tc f-subheadline b b--black-30 bg-white-60 v-base">A</td>
+            <td class="tc f1 b b--black-30 bg-white-60 v-base">A</td>
+            <td class="tc f2 b b--black-30 bg-white-60 v-base">A</td>
+            <td class="tc f3 b b--black-30 bg-white-60 v-base">A</td>
+            <td class="tc f4 b b--black-30 bg-white-60 v-base">A</td>
+            <td class="tc f5 b b--black-30 bg-white-60 v-base">A</td>
+            <td class="tc f6 b b--black-30 bg-white-60 v-base">A</td>
           </tr>
           <tr>
-            <td class="tc black-50 f6 fw2 pa1">6rem<br>(96px)</td>
-            <td class="tc black-50 f6 fw2 pa1">5rem<br>(80px)</td>
-            <td class="tc black-50 f6 fw2 pa1">3rem<br>(48px)</td>
-            <td class="tc black-50 f6 fw2 pa1">2.25rem<br>(36px)</td>
-            <td class="tc black-50 f6 fw2 pa1">1.5rem<br>(24px)</td>
-            <td class="tc black-50 f6 fw2 pa1">1.25rem<br>(20px)</td>
-            <td class="tc black-50 f6 fw2 pa1">1rem<br>(16px)</td>
-            <td class="tc black-50 f6 fw2 pa1">.875rem<br>(14px)</td>
+            <td class="tc black-70 f6 fw2 pa1">6rem<br>(96px)</td>
+            <td class="tc black-70 f6 fw2 pa1">5rem<br>(80px)</td>
+            <td class="tc black-70 f6 fw2 pa1">3rem<br>(48px)</td>
+            <td class="tc black-70 f6 fw2 pa1">2.25rem<br>(36px)</td>
+            <td class="tc black-70 f6 fw2 pa1">1.5rem<br>(24px)</td>
+            <td class="tc black-70 f6 fw2 pa1">1.25rem<br>(20px)</td>
+            <td class="tc black-70 f6 fw2 pa1">1rem<br>(16px)</td>
+            <td class="tc black-70 f6 fw2 pa1">.875rem<br>(14px)</td>
           </tr>
         </tbody>
       </table>
     </div>
-    <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">Type Samples</h6>
+    <h4 class="ttu tracked black-70 pv3 mt5 bt b--black-30">Type Samples</h4>
     <h1 class="f-headline measure-narrow lh-solid">Head&shy;line</h1>
     <h1 class="f-subheadline measure-narrow lh-solid">Sub&shy;head&shy;line</h1>
     <h1 class="f2 f1-ns measure-narrow lh-title">Level 1 Heading</h1>
@@ -49,7 +49,7 @@ <h3 class="f3">Level 3 Heading</h3>
     <p class="measure lh-copy">Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo.</p>
     <h4 class="f4">Level 4 Heading</h4>
     <p class="measure lh-copy">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur.</p>
-    <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">More Type Samples</h6>
+    <h4 class="ttu tracked black-70 pv3 mt5 bt b--black-30">More Type Samples</h4>
     <blockquote class="ml0 pl3 bl bw2 b--black-20">
       <p class="lh-copy measure">Discipline in typography is a prime virtue. Individuality must be secured by means that are rational. Distinction needs to be won by simplicity and restraint. It is equally true that these qualities need to be infused wiht a certain spirit and vitality, or they degenerate into dullness and mediocrity.</p>
       <cite class="f6 i">―Stanley Morison</cite>
@@ -75,7 +75,7 @@ <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">More Type Samples</h6>
     </dl>
   </div>
   <div class="w-50-l pl4-l">
-    <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">Sample Forms</h6>
+    <h4 class="ttu tracked black-70 pv3 mt5 bt b--black-30">Sample Forms</h4>
     <form name="sample-submission" method="post" accept-charset="utf-8">
       <fieldset id="sample-inputs">
         <legend>Sample Form</legend>
@@ -111,7 +111,7 @@ <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">Sample Forms</h6>
         </div>
       </div>
     </form>
-    <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">Sample Table</h6>
+    <h4 class="ttu tracked black-70 pv3 mt5 bt b--black-30">Sample Table</h4>
     <table class="collapse ba bw1 b--moon-gray mv4 w-100">
       <thead>
         <tr>
@@ -146,7 +146,7 @@ <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">Sample Table</h6>
         </tr>
       </tbody>
     </table>
-    <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">Sample Highlight Shortcode</h6>
+    <h4 class="ttu tracked black-70 pv3 mt5 bt b--black-30">Sample Highlight Shortcode</h4>
     {{< highlight css >}}.grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -156,7 +156,7 @@ <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">Sample Highlight Shortco
   margin: 0px auto;
   max-width: 1440px;
 }{{< /highlight >}}
-    <h6 class="ttu tracked black-30 pv3 mt5 bt b--black-10">Sample Figure Shortcode</h6>
+    <h4 class="ttu tracked black-70 pv3 mt5 bt b--black-30">Sample Figure Shortcode</h4>
     {{< figure src="https://via.placeholder.com/1024x768/DDD/EEE?text=4:3" alt="A sample 4:3 ratio image" caption="This is an image caption provided through a figure shortcode using figcaption." >}}
   </div>
 </div>

layouts/_default/list.html

@@ -2,8 +2,8 @@
 <main class="page-main pa4" role="main">
   <section class="blog-intro mw7 center mb5">
     <h2 class="f2 f1-ns lh-solid tc center fw4">{{ .Title | markdownify }}</h2>
-    {{ with .Description }}<p class="f6 f5-ns measure lh-copy tc center">{{ . | markdownify }}</p>{{ end }}
-    {{ if .Params.show_author_byline }}<p class="f7 measure lh-copy tc center i">{{ if .Params.author }}Written by {{ .Params.author }}{{ end }}</p>{{ end }}
+    {{ with .Description }}<p class="f5 measure lh-copy tc center">{{ . | markdownify }}</p>{{ end }}
+    {{ if .Params.show_author_byline }}<p class="f6 measure lh-copy tc center i">{{ if .Params.author }}Written by {{ .Params.author }}{{ end }}</p>{{ end }}
   </section>
   <section class="blog-content mw7 center">
     {{ $caller := . }}

layouts/about/list.html

@@ -8,8 +8,8 @@
     {{ $header := printf "/%s/%s" .Section "header/index.md" }}
     {{ with site.GetPage $header }}
       <header class="page-header bb b--black-10 bw1 pb4 mb5 {{ if .Params.text_align_right }}tr{{ end }}">
-      {{ if .Params.show_title_as_headline }}<h1 class="f2 f1-m f-headline-l fw5-ns mv4 lh-solid tracked-tight-ns db">{{ $page.Title | markdownify }}</h1>
-      {{ else }}<h1 class="f2 f1-m f-headline-l fw5-ns mv4 lh-solid tracked-tight-ns db">{{ .Params.headline | markdownify }}</h1>{{ end }}
+      {{ if .Params.show_title_as_headline }}<h1 class="f2 f1-m f-headline-l fw4 mv4 lh-solid tracked-tight-ns db">{{ $page.Title | markdownify }}</h1>
+      {{ else }}<h1 class="f2 f1-m f-headline-l fw4 mv4 lh-solid tracked-tight-ns db">{{ .Params.headline | markdownify }}</h1>{{ end }}
       {{ with .Content}}
         <div class="pt2 f4 measure-wide lh-copy dib">{{ . | markdownify }}</div>
       {{ end }}
@@ -31,7 +31,7 @@ <h2 class="about-main f2 fw7 tl">{{ . | markdownify }}</h2>
             {{ end }}
           {{ else }}
             {{ with .Title }}  
-            <h1 class="f2 f1-m f-headline-l fw5-ns mv4 lh-solid tracked-tight-ns">{{ . | markdownify }}</h1>
+            <h1 class="f2 f1-m f-headline-l fw4 mv4 lh-solid tracked-tight-ns">{{ . | markdownify }}</h1>
             {{ end }}
           {{ end }}
           {{ if .Params.show_intro }}
@@ -56,7 +56,7 @@ <h1 class="f2 f1-m f-headline-l fw5-ns mv4 lh-solid tracked-tight-ns">{{ . | mar
                 <img src="{{ $avatar }}" class="h4 w4 dib {{if eq . "rounded"}}br3{{end}}{{if eq . "circle"}}br-100{{end}}" alt="avatar">
               {{ end }}
             {{ end }}
-            <h2 class="f-subheadline f4-ns fw6">{{ .Params.author }}</h2>
+            <h2 class="f-subheadline f4-ns fw4">{{ .Params.author }}</h2>
             <h5 class="f-subheadline f4 fw2 ttu tracked">{{ .Params.role | markdownify }}</h5>
             {{ if .Params.show_social }}
               <div class="site-social-links db dtc-l v-mid w-100 w-33-l tc pv2">