interpolation error fixins in letter c, roman numerals and kerning im…

…provements
huertatipografica · Jul 27, 2020 · be91239 · be91239
1 parent 5a8df6d
commit be91239
Show file tree

Hide file tree

Showing 6 changed files with 399 additions and 269 deletions.
diff --git a/build.sh b/build.sh
@@ -94,6 +94,11 @@ fi
 
 echo
 echo Order files
+
+for ttf in fonts/Piazzolla/variable/ttf/*.ttf; do
+    mv $ttf ${ttf/-VARsetup/''}
+done
+
 if $static; then
     mkdir -p fonts/Piazzolla/static/ttf
     mkdir -p fonts/Piazzolla/static/otf
@@ -109,7 +114,7 @@ echo Freezing Small Caps
 rm -rf fonts/PiazzollaSC
 cp -r fonts/Piazzolla fonts/PiazzollaSC
 cd fonts/PiazzollaSC
-for f in variable/*; do echo && echo Freezing SC version for "$f" && pyftfeatfreeze -f 'smcp' -S -U SC "$f" "${f//Piazzolla/PiazzollaSC}" && rm "$f"; done
+for f in variable/ttf/*; do echo && echo Freezing SC version for "$f" && pyftfeatfreeze -f 'smcp' -S -U SC "$f" "${f//Piazzolla/PiazzollaSC}" && rm "$f"; done
 if $static; then
     for f in static/otf/*; do echo && echo Freezing SC version for "$f" && pyftfeatfreeze -f 'smcp' -S -U SC "$f" "${f//Piazzolla/PiazzollaSC}" && rm "$f"; done
     for f in static/ttf/*; do echo && echo Freezing SC version for "$f" && pyftfeatfreeze -f 'smcp' -S -U SC "$f" "${f//Piazzolla/PiazzollaSC}" && rm "$f"; done
@@ -135,6 +140,7 @@ for ttf in fonts/Piazzolla/variable/ttf/*.ttf; do
     mkdir -p fonts/Piazzolla/variable/woff2
     fonttools ttLib.woff2 compress $ttf
     mv ${ttf/.ttf/.woff2} fonts/Piazzolla/variable/woff2
+    cp fonts/Piazzolla/variable/woff2/* extra/assets
 done
 
 for ttf in fonts/PiazzollaSC/variable/ttf/*.ttf; do

diff --git a/extra/PiazzollaWeightTransition.html b/extra/PiazzollaWeightTransition.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <title>Piazzolla weight transition</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <link rel="stylesheet"
+          href="assets/specimen.css">
+</head>
+
+<body>
+    <div id="app">
+        <div class="title">
+            <h2 class="sc">Piazzolla weight transition</h2>
+            <p><a href="https://huertatipografica.com/">Huerta Tipográfica</a></p>
+        </div>
+        <div class="container">
+            <div class="control">
+                <label>
+                    features
+                    <input type="text"
+                           v-model.number="features"
+                           placeholder='"liga", "smcp"'>
+                    <input type="range"
+                           v-model.number="duration"
+                           min="0.1"
+                           step="0.1"
+                           max="4">
+                </label>
+            </div>
+            <div contenteditable="true"
+                 spellcheck="false"
+                 class="ani block"
+                 :style="`font-feature-settings: ${ features }; animation-duration: ${ duration }s;`">
+                <p>
+                    Edit me…
+                </p>
+            </div>
+        </div>
+    </div>
+</body>
+
+<style>
+    @keyframes fontweighter {
+        0% {
+            font-weight: 100;
+        }
+
+        100% {
+            font-weight: 900;
+        }
+    }
+
+    .ani {
+        margin-top: 1em;
+        font-size: 15em;
+        animation: fontweighter infinite alternate ease-in-out;
+        line-height: 1;
+        margin: 0;
+        animation-duration: 2s;
+    }
+</style>
+
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            features: '',
+            duration: 2,
+        }
+    })
+</script>
+
+</html>
diff --git a/extra/assets/specimen.css b/extra/assets/specimen.css
@@ -3,35 +3,41 @@
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
-    src: url('Piazzolla[opsz\,wght].woff2') format('woff2'),
-         url('../../fonts/Piazzolla/variable/woff2/Piazzolla[opsz\,wght].woff2') format('woff2');
+    src: url("Piazzolla[opsz\,wght].woff2") format("woff2"),
+        url("../../fonts/Piazzolla/variable/woff2/Piazzolla[opsz\,wght].woff2") format("woff2");
 }
 
 @font-face {
     font-family: "Piazzolla";
     font-style: italic;
     font-weight: 100 900;
     font-display: swap;
-    src: url('Piazzolla-Italic[opsz\,wght].woff2') format('woff2'),
-         url('../../fonts/Piazzolla/variable/woff2/Piazzolla-Italic[opsz\,wght].woff2') format('woff2');
+    src: url("Piazzolla-Italic[opsz\,wght].woff2") format("woff2"),
+        url("../../fonts/Piazzolla/variable/woff2/Piazzolla-Italic[opsz\,wght].woff2") format("woff2");
 }
 
 * {
     margin: 0;
 }
+:focus {
+    outline: 0;
+}
 
+::placeholder {
+    color: #ccc;
+}
 body {
     font-family: "Piazzolla";
     line-height: 1.5;
     color: #363641;
-    background: #FAFAFA;
+    background: #fafafa;
 }
 
 #app {
     margin-left: 80px;
 }
 .title {
-    background: #222;
+    background: #363641;
     color: #fff;
     padding: 1em 1em 1.5em 1.5em;
 }