Use small-caps for image captions

LkeMitchll · Mar 28, 2021 · 6214bcd · 6214bcd
1 parent 2a0008b
commit 6214bcd
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 3 deletions.
diff --git a/lib/fonts.sh b/lib/fonts.sh
@@ -0,0 +1,114 @@
+#! /bin/bash
+
+pyftsubset\
+      Blanco-Regular.woff \
+      --output-file="Blanco-Regular.subset.woff2" \
+      --flavor=woff2 \
+      --layout-features="ccmp,locl,mark,kern,liga,calt,ss01,ss02,smcp"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD,U+0250-02AF" &&
+
+pyftsubset\
+      Blanco-Regular.woff \
+      --output-file="Blanco-Regular.subset.woff" \
+      --flavor=woff \
+      --layout-features="ccmp,locl,mark,kern,liga,calt,ss01,ss02,smcp"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD,U+0250-02AF" &&
+
+pyftsubset\
+      Blanco-Italic.woff \
+      --output-file="Blanco-Italic.subset.woff2" \
+      --flavor=woff2 \
+      --layout-features="ccmp,locl,mark,mkmk,kern,liga,calt"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD" &&
+
+pyftsubset\
+      Blanco-Italic.woff \
+      --output-file="Blanco-Italic.subset.woff" \
+      --flavor=woff \
+      --layout-features="ccmp,locl,mark,mkmk,kern,liga,calt"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD" &&
+
+pyftsubset\
+      Blanco-Medium.woff \
+      --output-file="Blanco-Medium.subset.woff2" \
+      --flavor=woff2 \
+      --layout-features="ccmp,locl,mark,mkmk,kern,liga,calt"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD" &&
+
+pyftsubset\
+      Blanco-Medium.woff \
+      --output-file="Blanco-Medium.subset.woff" \
+      --flavor=woff \
+      --layout-features="ccmp,locl,mark,mkmk,kern,liga,calt"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD" &&
+
+pyftsubset\
+      GT-America-Extended-Medium.woff \
+      --output-file="GT-America-Extended-Medium.subset.woff2" \
+      --flavor=woff2 \
+      --layout-features="ccmp,locl,mark,mkmk,kern,liga,calt"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD" &&
+
+pyftsubset\
+      GT-America-Extended-Medium.woff \
+      --output-file="GT-America-Extended-Medium.subset.woff" \
+      --flavor=woff \
+      --layout-features="ccmp,locl,mark,mkmk,kern,liga,calt"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD" &&
+
+pyftsubset\
+      Blanco-Italic.woff \
+      --output-file="Blanco-Italic.subset.woff2" \
+      --flavor=woff2 \
+      --layout-features="ccmp,locl,mark,mkmk,kern,liga,calt"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD" &&
+
+pyftsubset\
+      pitch-web-semibold.woff \
+      --output-file="pitch-web-semibold.subset.woff2" \
+      --flavor=woff2 \
+      --layout-features="locl,calt"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD" &&
+
+pyftsubset\
+      pitch-web-semibold.woff \
+      --output-file="pitch-web-semibold.subset.woff" \
+      --flavor=woff \
+      --layout-features="locl,calt"\
+      --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
+      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,\
+      U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD" &&
+
+pyftsubset\
+      pitch-web-semibold-italic.woff \
+      --output-file="pitch-web-semibold-italic.subset.woff2" \
+      --flavor=woff2 \
+      --layout-features="locl,calt"\
+      --unicodes="U+0020-007F"
+
+pyftsubset\
+      pitch-web-semibold-italic.woff \
+      --output-file="pitch-web-semibold-italic.subset.woff" \
+      --flavor=woff \
+      --layout-features="locl,calt"\
+      --unicodes="U+0020-007F"
diff --git a/src/about.html b/src/about.html
@@ -35,7 +35,7 @@ <h2 class="tertiary-title | gap">Information</h2>
   {% responsiveImage heroImage, "threeQuarters" %}
   <p class="measure | push-down leading-crushed">
     <small>
-      <strong>Image</strong> {{ heroImage.fields.description }}
+      <strong class="small-caps | pad-r-small">Image</strong> {{ heroImage.fields.description }}
     </small>
   </p>
 </article>

diff --git a/src/assets/css/base/typography.css b/src/assets/css/base/typography.css
@@ -6,6 +6,12 @@ p {
   margin: 0;
 }
 
+.small-caps {
+  font-weight: normal;
+  font-feature-settings: "smcp" 1;
+  text-transform: lowercase;
+}
+
 h1,
 h2,
 h3,

diff --git a/src/assets/css/utilities.css b/src/assets/css/utilities.css
@@ -80,6 +80,10 @@
 
 /* u: Pad */
 
+.pad-r-small {
+  padding-right: var(--space-small);
+}
+
 .pad-r-large {
   padding-right: var(--space-large);
 }

diff --git a/src/assets/fonts/Blanco-Regular.subset.woff b/src/assets/fonts/Blanco-Regular.subset.woff
diff --git a/src/assets/fonts/Blanco-Regular.subset.woff2 b/src/assets/fonts/Blanco-Regular.subset.woff2
diff --git a/src/uses.html b/src/uses.html
@@ -44,15 +44,15 @@ <h2 class="tertiary-title | gap">Table of contents</h2>
     {% responsiveImage deskImage, "half" %}
     <p class="measure | leading-crushed">
       <small>
-        <strong>Image</strong> {{ deskImage.fields.description }}
+        <strong class="small-caps | pad-r-small">Image</strong> {{ deskImage.fields.description }}
       </small>
     </p>
   </section>
   <section class="flow">
     {% responsiveImage macImage, "half" %}
     <p class="measure | leading-crushed">
       <small>
-        <strong>Image</strong> {{ macImage.fields.description }}
+        <strong class="small-caps | pad-r-small">Image</strong> {{ macImage.fields.description }}
       </small>
     </p>
   </section>