Add contrast axis

diff --git a/cc-by-sa/knowledge/glossary/terms/contrast_axis/content.md b/cc-by-sa/knowledge/glossary/terms/contrast_axis/content.md
new file mode 100644 (file)
index 0000000..1e27740
--- /dev/null
+++ b/cc-by-sa/knowledge/glossary/terms/contrast_axis/content.md
@@ -0,0 +1,20 @@
+"Contrast" (`CTRS` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that describes the stroke width difference between the thick and thin parts of [glyphs](/glossary/glyph). A value of zero indicates no visible or apparent contrast.
+
+The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as:
+
+| Default: | Min: | Max: | Step: |
+| --- | --- | --- | --- |
+| 0 | -100 | 100 | 1 |
+
+Note that the default value is expected to differ per family, rather than be universally set for any implementation of this axis.
+
+<figure>
+
+![An image showing three type specimens, each with an axis slider underneath. The specimen on the left shows the effects of the axis' lowest value. The specimen on the right shows the effects of the axis' highest value.](images/thumbnail.svg)
+<figcaption>The Contrast axis at its extremes, using the <a href="https://fonts.google.com/specimen/Science+Gothic">Science Gothic</a> font.</figcaption>
+
+</figure>
+
+A positive value increases contrast relative to the zero-contrast thickness by making the thin stroke thinner. At a value of 100, the thin stroke has disappeared completely.
+
+A negative value indicates "reverse contrast": the strokes which would conventionally be thick in the writing system are instead made thinner. In western-language fonts, this might be perceived as a 19th-century, "circus" or "old West" effect. At a value of -100, the strokes which would normally be thick have disappeared completely.
\ No newline at end of file

diff --git a/cc-by-sa/knowledge/glossary/terms/contrast_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/contrast_axis/images/thumbnail.svg
new file mode 100644 (file)
index 0000000..faf5fd9
--- /dev/null
+++ b/cc-by-sa/knowledge/glossary/terms/contrast_axis/images/thumbnail.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1920 1080">
+  <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #d2e3fc;
+      }
+
+      .st1 {
+        fill: #1a73e8;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M1241,813h168c13.8,0,25,11.2,25,25h0c0,13.8-11.2,25-25,25h-168c-13.8,0-25-11.2-25-25h0c0-13.8,11.2-25,25-25Z"/>
+  <path class="st1" d="M1240,813h136c13.8,0,25,11.2,25,25h0c0,13.8-11.2,25-25,25h-136c-13.8,0-25-11.2-25-25h0c0-13.8,11.2-25,25-25Z"/>
+  <path class="st0" d="M511,813h168c13.8,0,25,11.2,25,25h0c0,13.8-11.2,25-25,25h-168c-13.8,0-25-11.2-25-25h0c0-13.8,11.2-25,25-25Z"/>
+  <path class="st1" d="M511,813h20c13.8,0,25,11.2,25,25h0c0,13.8-11.2,25-25,25h-20c-13.8,0-25-11.2-25-25h0c0-13.8,11.2-25,25-25Z"/>
+  <g>
+    <path d="M315.5,618.6l91.6-201.6h30l92.9,201.6h-43.3l-20.3-43.2h-90.1l-20.6,43.2h-40ZM391.6,541.4h59.2l-29.5-64.4-29.7,64.4Z"/>
+    <path d="M547.9,618.6v-144h35.7v13.4c2.9-4.9,7.3-8.6,13.2-11.2,6-2.5,14-3.8,24-3.8h7.2c7.2,0,13.4.7,18.6,2,5.2,1.3,9.6,3.4,13,6.1,3.4,2.7,5.9,6.3,7.6,10.6,1.6,4.3,2.4,9.5,2.4,15.4v10.5l-35.7,6.8v-19.2h-50.4v113.3h-35.7Z"/>
+    <path d="M691.3,589.3v-87c0-10.6,2.9-18.1,8.6-22.6,5.7-4.5,15.1-6.8,28.3-6.8h67.4c13.3,0,22.8,2.3,28.4,6.8,5.6,4.5,8.4,12,8.4,22.6v15.4l-35.7,6.9v-19.4h-69.7v82.7h70.3v-20.7l35.7,7.5v14.7c0,11.1-2.8,19.1-8.4,23.8-5.6,4.7-15.1,7.1-28.5,7.1h-68c-13.4,0-22.9-2.4-28.5-7.1-5.6-4.7-8.4-12.6-8.4-23.8Z"/>
+  </g>
+  <g>
+    <path d="M1063.1,618.6l91.3-201.6h22.6l93,201.6h-43.9l-22.9-50.7h-108.9l-23.3,50.7h-7.9ZM1097.5,561h102.5l-51.1-114-51.4,114Z"/>
+    <path d="M1290.7,618.6v-144h35.7v3.7c1.2-1.5,2.9-2.7,5-3.5,2.1-.8,4.6-1.2,7.7-1.2h31.8c7.2,0,13.4.7,18.6,2,5.2,1.3,9.6,3.4,13,6.1,3.4,2.7,5.9,6.3,7.6,10.6,1.6,4.3,2.4,9.5,2.4,15.4v10.2l-35.7,6.8v-44.8h-50.4v138.5h-35.7Z"/>
+    <path d="M1437.2,588.6v-85.5c0-10.6,2.9-18.1,8.6-22.6,5.7-4.5,15.1-6.8,28.3-6.8h67.4c13.3,0,22.8,2.3,28.4,6.8,5.6,4.5,8.4,12,8.4,22.6v15.1l-35.7,6.8v-44.9h-69.7v133.1h70.3v-46.2l35.7,7.3v14.4c0,11.1-2.8,19.1-8.4,23.8-5.6,4.7-15.1,7.1-28.5,7.1h-68c-13.4,0-22.9-2.4-28.5-7.1-5.6-4.7-8.4-12.6-8.4-23.8Z"/>
+  </g>
+</svg>
\ No newline at end of file

diff --git a/cc-by-sa/knowledge/glossary/terms/contrast_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/contrast_axis/term.textproto
new file mode 100644 (file)
index 0000000..6be6986
--- /dev/null
+++ b/cc-by-sa/knowledge/glossary/terms/contrast_axis/term.textproto
@@ -0,0 +1,5 @@
+name: "Contrast axis (CTRS)"
+excerpt: "An axis in some variable fonts that controls the difference between thick and thin strokes, from no contrast to extreme or reversed contrast."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"