Adds inital dropcaps

public/_includes/story.md

@@ -0,0 +1,81 @@
+# Introducing Moriston
+
+<p class="dropcap-container" data-dropcap="W"><span class="js-dropcap dropcap">W</span>hile waiting outside the Evolution store on Spring Street, between Greene and Mercer in Soho, I saw a 50’s _Rollfast_ bicycle leaning against a tree. Even amongst the building inscriptions, the historical archives I visited, the hand painted signs we tracked down, and the other pockets of inspiration native to New York, the spark for Moriston came from this otherwise pedestrian source.</p>
+
+The design of the bicycle itself was gorgeous. My companions and fellow Lost Type Co-op contributors agreed there was something special about the characterful _R_ monogram on the bike frame. Yet, it was the logotype that caught my eye.
+
+Set in ultra-bold italic high contrast sans caps, its letterforms were familiar, struck me as an under-explored genre in type.
+
+It occurred to me that, if you stripped away the idiosyncratic round-top _A_, and the exaggerated contrast, these letterforms became gothic sans caps. I could imagine them adhering to a structure similar to the Benton Gothics.
+
+<figure>
+![](http://blog.losttype.com/media/2013/10/12.jpg)
+<figcaption>
+  <p>Image that helps clarify what it means to have something similar to the Benton Gothics.</p>
+</figcaption>
+</figure>
+
+What would happen if an entire family was built this way? An early 20<sup>th</sup> century grotesque, shifted into new territory through noticeable higher contrast? Could the increased contrast modify the aesthetic tone without sacrificing legibility, or feeling forced?
+
+## LT visits NY
+
+[Perhaps re-frame this paragraph to say, all this started on that trip to New York, but following that, the actual design work began there, too? That gives you the opportunity to talk about the Lost Type field trips here, instead of explaining them up-front.]
+
+These questions lingered as I first started drawing Moriston on that first trip to New York City in the fall of 2013. I travelled there for The Lost Type Co-op’s annual … I took hundreds of photographs of forgotten type and lettering, and visited [The Lubalin Study Centre](http://lubalincenter.cooper.edu/) archive which was overwhelming in itself. … My earliest sketches focused on the more idiosyncratic display qualities (the round-top A for instance), but over the following months I began to shift my focus towards turning this idea into a functional type family.
+
+<figure>
+<div class="mw-50">
+![](/media/lubalin-newyork-1.jpg)
+</div>
+<div class="mw-50">
+![](/media/lubalin-newyork-2.jpg)
+</div>
+<figcaption class="mwl-50">
+  <p>When we arrived at Lubalin Center, Sasha had already pulled a few dozen pieces for us. Pictured here, Sasha shows off an original Alvin Lustig catalog design, and leafs from Massimo Vignelli’s [Unimark New York Subway Style guide](http://thestandardsmanual.com).</p></figcaption>
+</figure>
+
+## Moriston visits Vancouver
+
+Early on in the process I brought some proofs to a lunch with [Ross Milne](https://twitter.com/sincerelyross), a talented type designer who lives in Vancouver as well, and he offered some very interesting feedback and suggestions. We began to make this a regular event, and we’d meet every month or two to go over my progress. My favorite part of a critique with Ross is that his comments often make me think, more so than make me want to immediately make changes.
+
+Typically, contrast necessarily increases in bolder weights of a typeface; this is a mechanism to open space in the counterforms.  The early proofs that I showed Ross were stuck between using this feature as a tool, and using it as an aesthetic quality. He pushed me to accentuate that higher contrast … and take it past functionality and into confident aesthetic decision making. Once this quality was pushed in the black weight (which at this point was being designed on its own as an exploration) it really began to sing in a way I was pleased with. It was striking and felt more unique, and the qualities in the black began to call the shots for my mental image of the family.
+
+<figure>
+<div class="mwl-75">
+![](http://kennethormandy.com/media/riley-cran-moriston-interpolation-test.png)
+</div>
+<figcaption class="mwl-25">
+  <p>Here, Riley Cran is working on the extremes of a typeface: the boldest weight and the lightest weight are original master. This allows the in-between weights to be mathematically generated using interpolation.</p>
+  <p>Interpolation is commonly used by type designers both as a sketching technique, and for generating the final weights of a typeface.</p>
+  <footer>Riley Cran, <cite>Moriston interpolation tests</cite>, 2015.</footer></figcaption>
+</figure>
+
+At this point I began thinking about how this family could be expanded, and what lighter weights could look like. As I mentioned earlier, I saw the caps initially as being part of a benton gothic sort of structure (News Gothic, Franklin Gothic, etc.), but in the development of the black exploration I had made several decisions which were perhaps a bit cross-genre. They worked well in the black, but it required some thought as to how these qualities would effect the entire family. For instance the single story <em>a</em> had become one of the main aesthetic tone shifts for the black weight, and also a convenient way to avoid having to draw an ultra bold high contrast <em>a</em> which would have had a very different tone.
+
+I also was closing terminations very horizontally, which I realized gave the idea of lighter weights a more swiss feeling, closer to something like Univers which I hadn’t really considered as a potential influence until this time. The challenge at this point was to find a model of some kind that would allow me incorporate this higher contrast black into a functional family who’s various weights felt related and worked together.
+
+## Glenmoriston
+
+One influence was Miller & Richards Grotesque #7, produced around the turn of the century. It was around this time that the sans serif really came into its own, with ideas from Scottish type founders like Miller & Richards, American type founders like Morris Fuller Benton at ATF, and other designers/foundries producing designs that influence each other and travel across the globe.
+
+I liked the idea that Miller & Richards work must have crossed the sea at some point and arrived in NYC. My family on my mother’s side did the same, immigrating from Scotland to Ellis Island at a similar point in time. My Grandfather, Glenn Morrison Chronister was actually named after a place in Scotland, Glenmoriston, which is a river glen in the Scottish Highlands that feeds Loch Ness.
+
+I never got a chance to meet Glenn, but I grew up in a family that always told me I was the son he never had, and that he would be interested in the work I was doing. Seizing the opportunity to honor his name, and the birth country of my family on both sides, the typeface is named Moriston.
+
+## At first light
+
+My first light weights were very character in themselves, for better or worse. They weren’t so much an adaptation of the black, as they were an attempt to ‘bolt on’ a geometric light weight to the black weight explorations I had done, and see what the middle of the family could potentially look like.
+
+This is partially because I let my personal tastes as a graphic designer leak into the project a bit, taking influence from 1970s geometric typefaces from ITC, with larger x-heights and wider proportions. The obvious first results of these tests were that the higher contrast of the black was influencing the middle of the family too much, and that something should be done about that. My attempts to resolve the contrast across the family to match how I saw the family working in my head unfortunately distracted me a bit too much from the larger decisions about the proportions and compatibility of these two extremes (light and black).
+
+## Types of critiques
+
+I took proofs to NYC for the first [Typographics conference](http://typographics.com), and had a chance to show them to a several type designers I admire, including [Christian Schwartz](http://commercialtype.com), [Cyrus Highsmith](http://www.fontbureau.com/people/CyrusHighsmith/), [Erik Van Blokland](http://letterror.com) and [Berton Hasebe](http://www.bertonhasebe.com). As is the case when you solicit multiple critiques, some of the feedback was competing, but there were a few unanimous comments that really changed my thinking about this family. They saw the disparate qualities of my light and black masters immediately. They pointed to the effect these differences were having on the middle of the family, and the fundamental proportion problems that could be solved by narrowing the light. All of these critiques were very valuable, and I went home to Vancouver with a head full of ideas.
+
+It was very refreshing to return to the large ideas of what Moriston was supposed to be. I had been doing so much work to solve problems that were solved quite swiftly by aligning the proportions between the styles and rethinking some of the fundamentals that made this typeface feel more as I imaged it would.
+
+## Redrawn, for you
+
+The redrawing moved swiftly as I was so acquainted with this family already, and so excited to see it coming to life. The new proportions allowed it to work much better in text than I would have initially imagined, especially with the initial very idiosyncratic ideas I had explored. I really began to feel I knew the recipe of what Moriston was better than ever, and it was fascinating to see something I had visualized in my head for literal years, functioning in a way that made sense to my graphic design sensibilities.
+
+Moriston’s generally higher contrast and fuller, rounder curves give it a certain sparkle on the page, or on screen. The bolder weights have retained their character, while the lighter weights have the functionality in text and more neutral feeling I had been hoping for, without losing track of what the family is. It comes with a variety of features including small caps, multiple figure styles and language support for over 30 languages. I am very pleased with where it has ended up, and I can’t wait to see what people make with it

public/css/_base.scss

@@ -22,6 +22,11 @@ sub, sup { // TODO check if this is right once sub, sup OT code is written
   line-height: inherit;
 }
 
+p {
+  margin-top: 0;
+  margin-bottom: $base-line-height * 1em;
+}
+
 [contenteditable] {
   -webkit-user-modify: read-write-plaintext-only;
   -moz-user-modify: read-write-plaintext-only;
@@ -120,7 +125,7 @@ em, i, cite {
     line-height: $base-line-height;
     padding-left: 0;
     padding-right: 0;
-    p:first-of-type {
+    & > p:first-of-type {
       font-size: 1.5rem;
     }
   }
@@ -148,50 +153,54 @@ em, i, cite {
 //
 // No styleguide reference.
 figure {
+  overflow: hidden;
   max-width: 100%;
   margin: 1.252 * 1em 0;
+  clear: both;
+  padding: $gutter / 2;
   img {
     width: 100%;
+    margin: 0;
+    display: block;
+    margin: 0 auto;
   }
   @media (min-width: $media-wide) {
+    background-color: $gray-lighter;
     margin-top: $base-line-height * 2em;
     margin-bottom: $base-line-height * 2em;
-    background-color: $gray-lighter;
     padding: $gutter;
   }
   @media (min-width: $media-huge) {
     padding: ($gutter * 2) ($base-line-height * 2em);
     & > img {
       display: block;
       width: auto;
-      max-width: 120%;
+      max-width: $max-width * 1.5;
+      // max-width: 120%;
       margin: 0 auto;
     }
   }
 }
 
 figcaption {
-  max-width: 35rem;
   color: $gray;
-  margin: 0 auto;
-  padding-top: $base-line-height * 1em;
-  clear: both;
+  padding: $gutter;
+  box-sizing: border-box;
+  background-color: $gray-lighter;
+
+  // margin: 0 auto;
+  // float: left;
+  clear: left;
   @media (min-width: $media-wide) {
-    max-width: $max-width;
+    background-color: transparent;
+    max-width: 100%;
+    float: none;
     font-size: $font-size-small;
     line-height: 1.525;
-    margin: 0 auto;
-    padding-top: 1.525 * 1em;
-    // margin-left: 0;
-    // margin-right: auto;
   }
   @media (min-width: $media-huge) {
     font-size: inherit;
     line-height: $base-line-height;
-    width: $max-width * 0.666;
-    font-weight: 400;
-    margin-left: $max-width * 0.333;
-    margin-right: auto;
   }
 }
 

public/css/_layout.scss

@@ -166,3 +166,30 @@
 .mw-25 {
   max-width: 25%;
 }
+
+.mwl-100,
+.mwl-75,
+.mwl-50,
+.mwl-25 {
+  float: left;
+  display: inline;
+  clear: none;
+}
+
+@media (min-width: $media-mid) {
+  .mwl-100 {
+    max-width: 100%;
+  }
+
+  .mwl-75 {
+    max-width: 75%;
+  }
+
+  .mwl-50 {
+    max-width: 50%;
+  }
+
+  .mwl-25 {
+    max-width: 25%;
+  }
+}

public/css/index.scss

@@ -20,6 +20,7 @@
 @import "module/box";
 @import "module/clock";
 @import "module/animation";
+@import "module/dropcap";
 @import "module/conic-gradient";
 
 // State

public/css/module/_dropcap.scss

@@ -0,0 +1,38 @@
+// Dropcap
+//
+// A dropcap for a post. The markup is generated automatically, with the
+// span coming from a Handlebars helper, and the `line-height` alignment
+// and other features coming from [Dropcap.js](https://github.com/adobe-webplatform/dropcap.js).
+//
+// Markup:
+// <p class="dropcap-container" data-dropcap="A"><span class="js-dropcap dropcap">A</a>nd so the trip has
+// come to an end. I’m writing this from my apartment in San Francisco. I was one of the first to leave
+// this morning, while everyone was still sleeping off their hangover. It was a weird and sad feeling to
+// walk out that apartment, as this past week has been somewhat magical.</p>
+//
+// Styleguide: module.dropcap
+.dropcap {
+  text-transform: uppercase;
+  text-indent: 0;
+  font-family: $font-family-sans;
+  font-weight: 900;
+  margin-right: $base-line-height * 0.5rem;
+}
+
+.dropcap-container {
+  text-indent: -0.5rem;
+  &[data-dropcap="A"],
+  &[data-dropcap="L"],
+  &[data-dropcap="W"],
+  &[data-dropcap="V"] {
+    text-indent: -1rem;
+  }
+
+
+  // Temp
+  text-transform: lowercase;
+  .caps {
+    text-transform: lowercase !important;
+    font-feature-settings: normal;
+  }
+}

public/index.jade

@@ -1,5 +1,5 @@
 doctype
-html
+html(lang="en-us")
   head
     title Morison
     link(href="/css/index.css" rel="stylesheet")
@@ -93,6 +93,10 @@ html
       .container#record
         include _includes/record
 
+    #story
+      //- include _includes/story.md
+      .story!= partial("_includes/story")
+
     script(src="https://rawgit.com/kennethormandy/big-ideas-text/master/dist/big-ideas-text.js")
     script(src="https://rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js")
     script(src="/js/index.js")

public/js/index.es

@@ -2,9 +2,11 @@ require('fontfaceobserver')
 var Editable = require('contenteditable')
 var contentEditable = document.querySelectorAll('[contenteditable]')
 var nodes = document.querySelectorAll('.js-scaleText')
+var dropcap = require('dropcap.js')
 var record = require('./record.es')
 var clock = require('./clock.es')
 var hasClass = require('./hasClass.es')
+var elDropcap = document.querySelectorAll('.js-dropcap')
 
 var scaleText = function (nodes) {
   bigIdeasText(nodes, { maxfontsize: 250, minfontsize: 30 })
@@ -52,6 +54,7 @@ observer
     console.log('Moriston is available!')
     scaleText(nodes)
     editableInit()
+    window.Dropcap.layout(elDropcap, 3)
   }, function () {
     console.log('Moriston is not available')
   })