Add Noto/Roboto script style matching demo #108

_examples/scripts/multiscript-style-match-bold.html

@@ -0,0 +1,64 @@
+---
+breadcrumbs: ["Scripts", "Examples…"]
+title: Multiscript style matching
+description: Here, Roboto’s weight is adjusted to match Noto Bold as a fallback.
+playground: true
+comparison:
+    -
+        font: Roboto-Delta
+        size: fit
+        text: <span class='noto'>我的征途是星辰大海</span> MY CONQUEST
+#        label: Default
+        axes:
+            opsz: 12.1
+            wght: 700
+    -
+        font: Roboto-Delta
+        size: fit
+        text: <span class='noto'>我的征途是星辰大海</span> MY CONQUEST
+#        label: YTUC ≈ YTCH = XTCH
+        axes:
+            opsz: 12.1
+            wght: 700
+            wdth: 108.5
+            YTDE: -200
+            YTUC: 760
+    -
+        font: Roboto-Delta
+        size: fit
+        text: <span class='noto'>我的征途是星辰大海</span> My Conquest is
+#        label: Default
+        axes:
+            opsz: 12.1
+            wght: 700
+    -
+        font: Roboto-Delta
+        size: fit
+        text: <span class='noto'>我的征途是星辰大海</span> My Conquest is
+#        label: YTUC + YTDE ≈ YTCH = XTCH
+        axes:
+            opsz: 12.1
+            wght: 700
+            wdth: 108.5
+            YTDE: -125
+            YTAS: 835
+            YTUC: 760
+            YTLC: 570
+---
+<style>
+    @font-face {
+        font-family: "Noto CJK Simplified";
+        font-weight: normal;
+        src: url("{{site.baseurl}}/fonts/NotoSansCJKsc-hinted/conquest/NotoSansMonoCJKsc-Regular.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Noto CJK Simplified";
+        font-weight: bold;
+        src: url("{{site.baseurl}}/fonts/NotoSansCJKsc-hinted/conquest/NotoSansMonoCJKsc-Bold.woff2") format("woff2");
+    }
+
+    .specimen .noto {
+        font-family: "Noto CJK Simplified", sans-serif;
+    }
+</style>

_examples/scripts/multiscript-style-match-regular.html

@@ -0,0 +1,66 @@
+---
+breadcrumbs: ["Scripts", "Examples…"]
+title: Multiscript style matching
+description: >
+    Line one shows the default, where Roboto uppercase is slightly heavier and shorter.
+    Line two is adjusted to a lighter weight and taller caps.
+    Line three shows the defaults with mixed case,
+    and line four shows the Latin lowercase descenders shortened to match the Chinese descent.
+playground: true
+comparison:
+    -
+        font: Roboto-Delta
+        size: fit
+        text: <span class='noto'>我的征途是星辰大海</span> MY CONQUEST
+#        label: Default
+        axes:
+            opsz: 12.1
+    -
+        font: Roboto-Delta
+        size: fit
+        text: <span class='noto'>我的征途是星辰大海</span> MY CONQUEST
+#        label: YTUC ≈ YTCH = XTCH
+        axes:
+            opsz: 12.1
+            wght: 341
+            wdth: 108.5
+            YTDE: -200
+            YTUC: 760
+    -
+        font: Roboto-Delta
+        size: fit
+        text: <span class='noto'>我的征途是星辰大海</span> My Conquest is
+#        label: Default
+        axes:
+            opsz: 12.1
+    -
+        font: Roboto-Delta
+        size: fit
+        text: <span class='noto'>我的征途是星辰大海</span> My Conquest is
+#        label: YTUC + YTDE ≈ YTCH = XTCH
+        axes:
+            opsz: 12.1
+            wght: 341
+            wdth: 108.5
+            YTDE: -125
+            YTAS: 835
+            YTUC: 760
+            YTLC: 570
+---
+<style>
+    @font-face {
+        font-family: "Noto CJK Simplified";
+        font-weight: normal;
+        src: url("{{site.baseurl}}/fonts/NotoSansCJKsc-hinted/conquest/NotoSansMonoCJKsc-Regular.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Noto CJK Simplified";
+        font-weight: bold;
+        src: url("{{site.baseurl}}/fonts/NotoSansCJKsc-hinted/conquest/NotoSansMonoCJKsc-Bold.woff2") format("woff2");
+    }
+
+    .specimen .noto {
+        font-family: "Noto CJK Simplified", sans-serif;
+    }
+</style>

_includes/sidebar.html

@@ -14,9 +14,10 @@ <h3>Scripts</h3>
 <ul>
     <li><a href="/topics/scripts/">Scripts primer</a></li>
     <li><a href="/topics/scripts/variations">Multiple scripts</a></li>
-    <li><label>Example:</label>
+    <li><label>Examples:</label>
         <ul>
-            <li><a href="/topics/scripts/examples">Multiscript alignment</a></li>
+            <li><a href="/topics/scripts/examples/style-matching">Style matching</a></li>
+            <li><a href="/topics/scripts/examples/alignment">Multiscript alignment</a></li>
         </ul>
     </li>
 </ul>

topics/scripts/examples/style-matching.md

@@ -0,0 +1,13 @@
+---
+layout: article
+breadcrumbs: ["Scripts", "Examples…"]
+sidebar: "Example"
+title: "Multi-script style matching"
+---
+Making your Latin sans serif work with fallback fonts from other scripts is a common need in typography.
+This is well demonstrated by [FauxFoundry](https://www.fauxfoundry.com/), for Greek.
+Here we demonstrate Roboto matching Chinese in Noto, a common fallback for CJK.
+
+{% include inline-example.html example="multiscript-style-match-regular" %}
+
+{% include inline-example.html example="multiscript-style-match-bold" %}