Merge pull request #583 from primer/marketing-type-2018

Updates to Marketing Typography

Author: shawnbot

modules/primer-marketing-support/fonts/Inter-UI-Medium.woff

@@ -1,6 +1,23 @@
 // Type
-$alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
-$alt-mono-font: $mono-font;
+@font-face {
+  font-family: InterUI;
+  font-style: normal;
+  font-weight: $font-weight-normal;
+  src: local("InterUI"), local("InterUI-Regular"), url("/primer-marketing-support/fonts/Inter-UI-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: InterUI;
+  font-style: normal;
+  font-weight: $font-weight-semibold;
+  src: local("InterUI Medium"), local("InterUI-Medium"), url("/primer-marketing-support/fonts/Inter-UI-Medium.woff") format("woff");
+}
+
+$font-mktg: InterUI, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+// Builds upon primer-support/variables/typography.scss
+$h000-size: 64px !default;
+$h000-size-mobile: 48px !default;
 
 // Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
 // i.e. After 40px, we have 48, 64, 80, 96, etc.

modules/primer-marketing-support/fonts/Inter-UI-Regular.woff

@@ -13,6 +13,7 @@
   },
   "files": [
     "index.scss",
+    "fonts",
     "lib"
   ],
   "repository": "https://github.com/primer/primer/tree/master/modules/primer-marketing-support",

modules/primer-marketing-support/lib/variables.scss

@@ -20,16 +20,19 @@ The typography for our marketing pages differs slightly from what is in Primer's
 
 ## Heading Utilities
 
-Use `.alt-h1` – `.alt-h6` to change an element's font, size, and weight on marketing pages.
+Use `.h000-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
 
 ```html title="Heading Utilities"
 
-<p class="alt-h1">Pizza 1</p>
-<p class="alt-h2">Pizza 2</p>
-<p class="alt-h3">Pizza 3</p>
-<p class="alt-h4">Pizza 4</p>
-<p class="alt-h5">Pizza 5</p>
-<p class="alt-h6">Pizza 6</p>
+<p class="h000-mktg">Heading 000</p>
+<p class="h00-mktg">Heading 00</p>
+<p class="h0-mktg">Heading 0</p>
+<p class="h1-mktg">Heading 1</p>
+<p class="h2-mktg">Heading 2</p>
+<p class="h3-mktg">Heading 3</p>
+<p class="h4-mktg">Heading 4</p>
+<p class="h5-mktg">Heading 5</p>
+<p class="h6-mktg">Heading 6</p>
 
 ```
 
@@ -39,13 +42,7 @@ These utilities are meant to be used in addition to Primer's core utilities.
 
 ```html title="Typographic Utilities"
 
-<p class="alt-lead text-gray">I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
-
-<p class="text-gray">I'm a regular paragraph, except I'm gray. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
-
-<p class="text-gray alt-text-small">And I'm a tiny lil' baby paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
-
-<p class="alt-mono-font text-gray">Occasionally we want to use a mono font, there is a utility class for that.</p>
+<p class="lead-mktg text-gray">I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
 
 <p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>
 

modules/primer-marketing-support/package.json

@@ -1,110 +1,88 @@
-// Marketing font utility class
-
-.alt-mono-font {
-  font-family: $alt-mono-font;
-}
-
-//
 // Headings
 
-.alt-h0,
-.alt-h1,
-.alt-h2,
-.alt-h3,
-.alt-h4,
-.alt-h5,
-.alt-h6,
-.alt-lead {
-  -webkit-font-smoothing: antialiased;
-  font-family: $alt-body-font;
+.h00-mktg,
+.h0-mktg,
+.h1-mktg,
+.h2-mktg,
+.h3-mktg,
+.h4-mktg,
+.h5-mktg,
+.h6-mktg,
+.lead-mktg {
+  font-family: $font-mktg;
+  font-weight: $font-weight-semibold;
 }
 
-@mixin alt-h0 {
-  font-size: $h00-size;
-  font-weight: $font-weight-light;
-  @include breakpoint(md) { font-size: 54px; }
-  @include breakpoint(lg) { font-size: 72px; }
+@mixin h000-mktg {
+  font-size: $h000-size-mobile !important;
+  @include breakpoint(md) { font-size: $h000-size !important; }
 }
 
-.alt-h0 {
-  @include alt-h0;
-}
+.h000-mktg { @include h000-mktg; }
 
-@mixin alt-h1 {
-  font-size: 36px;
-  font-weight: $font-weight-light;
-  @include breakpoint(md) { font-size: $h00-size; }
-  @include breakpoint(lg) { font-size: 54px; }
+@mixin h00-mktg {
+  font-size: $h00-size-mobile !important;
+  @include breakpoint(md) { font-size: $h00-size !important; }
 }
 
-.alt-h1 {
-  @include alt-h1;
-}
+.h00-mktg { @include h00-mktg; }
 
-@mixin alt-h2 {
-  font-size: 28px;
-  font-weight: $font-weight-light;
-  @include breakpoint(md) { font-size: 34px; }
-  @include breakpoint(lg) { font-size: 38px; }
+@mixin h0-mktg {
+  font-size: $h0-size-mobile !important;
+  @include breakpoint(md) { font-size: $h0-size !important; }
 }
 
-.alt-h2 {
-  @include alt-h2;
-}
+.h0-mktg { @include h0-mktg; }
 
-@mixin alt-h3 {
-  font-size: 18px;
-  font-weight: $font-weight-normal;
-  @include breakpoint(md) { font-size: $h3-size; }
-  @include breakpoint(lg) { font-size: 22px; }
+@mixin h1-mktg {
+  font-size: $h1-size-mobile !important;
+  @include breakpoint(md) { font-size: $h1-size !important; }
 }
 
-.alt-h3 {
-  @include alt-h3;
-}
+.h1-mktg { @include h1-mktg; }
 
-.alt-h4 {
-  font-size: $h4-size;
-  font-weight: $font-weight-semibold;
+@mixin h2-mktg {
+  font-size: $h2-size-mobile !important;
+  @include breakpoint(md) { font-size: $h2-size !important; }
 }
 
-.alt-h5 {
-  font-size: $h5-size;
-  font-weight: $font-weight-semibold;
-}
+.h2-mktg { @include h2-mktg; }
 
-.alt-h6 {
-  font-size: $h6-size;
-  font-weight: $font-weight-semibold;
+@mixin h3-mktg {
+  font-size: $h3-size-mobile !important;
+  @include breakpoint(md) { font-size: $h3-size !important; }
 }
 
-// Big opening paragraphs
-@mixin alt-lead {
-  -webkit-font-smoothing: antialiased;
-  font-size: 21px;
-  font-weight: $font-weight-light;
-  @include breakpoint(md) { font-size: $h2-size; }
-  @include breakpoint(lg) { font-size: 26px; }
+.h3-mktg { @include h3-mktg; }
+
+.h4-mktg {
+  font-size: $h4-size !important;
 }
 
-.alt-lead {
-  @include alt-lead;
+.h5-mktg {
+  font-size: $h5-size !important;
 }
 
-// For small text
+.h6-mktg {
+  font-size: $h6-size !important;
+}
 
-.alt-text-small {
-  font-size: 14px !important;
+// Big opening paragraphs
+@mixin lead-mktg {
+  font-size: $h3-size;
+  font-weight: $font-weight-normal;
 }
 
+.lead-mktg { @include lead-mktg; }
+
 // Pullquote
 
 @mixin pullquote {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: $spacer;
   margin-bottom: $spacer-4;
-  font-family: $alt-mono-font;
+  font-family: $mono-font;
   font-size: $h4-size;
   line-height: 1.4;
   color: $text-gray;

modules/primer-marketing-type/README.md

@@ -28,7 +28,7 @@ These types of shadows are typically applied to elements with borders, such as t
       <h3 class="m-0">Organization</h3>
     </div>
     <div class="Box-row">
-      <p class="mb-0 alt-text-small text-gray">
+      <p class="mb-0 text-gray">
         Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.
       </p>
     </div>
@@ -56,7 +56,7 @@ Medium box shadows are typically used on editorialized content that needs to app
   <a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
     <div class="bg-blue position-absolute top-0 left-0 py-1 width-full"></div>
     <h3 class="text-gray-dark">Serverless architecture</h3>
-    <p class="alt-text-small text-gray">
+    <p class="text-gray">
       Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.
     </p>
     <ul class="position-absolute bottom-0 pb-3 text-small text-gray list-style-none ">

modules/primer-marketing-type/lib/typography.scss

@@ -206,7 +206,7 @@
 
 /* Set to monospace font */
 .text-mono {
-  font-family: $mono-font;
+  font-family: $mono-font !important;
 }
 
 /* Disallow user from selecting text */