From: Elliot Jay Stocks Date: Wed, 24 Apr 2024 08:36:33 +0000 (+0100) Subject: New GFK axis additions for early 2024 (#7354) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=10f516b0898106215439bfb609680eca63b2e6fd;p=thirdparty%2Fgoogle%2Ffonts.git New GFK axis additions for early 2024 (#7354) * Adding directories, files, initial markup for new axes * Optimised PNGs * Adding generic `alt` text, to be tweaked per-entry later * Pasting in other markup for final entries * `thumbnail.svg` for BLED & SCAN * Term names + related lessons in all `term.textproto` files * Filling in `excerpt` metadata for the new axes * markup for Bounce (BNCE) axis * Editing `alt` and / or `figcaption` for all new axes * Adding internal link to `variable_fonts` entry in all new axes’ intros * Adding links to existing Glossary items in all new axes * Updating all new axis intros to use “code” formatting for 4-char CSS code --- diff --git a/cc-by-sa/knowledge/glossary/terms/arrr_axis/content.md b/cc-by-sa/knowledge/glossary/terms/arrr_axis/content.md new file mode 100644 index 0000000000..e790fe3ec2 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/arrr_axis/content.md @@ -0,0 +1,18 @@ + +“AR Retinal Resolution” (`ARRR` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to optimize text rendering across different resolutions. The axis range values represent PPD (Pixels Per Degree) units, which are directly related to the resolution of different AR headsets. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 10 | 10 | 60 | 1 | + +
+ +![An image showing two 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) + +
+ +
Typeface: [AR One Sans](https://fonts.google.com/specimen/AR+One+Sans)
+ +In practice, this means that parts of the [letterforms](/glossary/letterform)’ [strokes](/glossary/stroke) are tapered — either flaring out at the ends of stems, or (much like [ink traps](/glossary/ink_trap)) indenting where strokes meet. The primary goal of this axis is to ensure the quality of the reading experience is the same for users with low- and high-resolution headsets. Therefore, all adjustments are intended to make the text render appear equal to all users. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/arrr_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/arrr_axis/images/thumbnail.svg new file mode 100644 index 0000000000..ef2b531e3d --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/arrr_axis/images/thumbnail.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/arrr_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/arrr_axis/term.textproto new file mode 100644 index 0000000000..5afbc5b81c --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/arrr_axis/term.textproto @@ -0,0 +1,5 @@ +name: "AR Retinal Resolution axis (ARRR)" +excerpt: "An axis found in some variable fonts that can be used to optimize text rendering across different resolutions." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/bled_axis/content.md b/cc-by-sa/knowledge/glossary/terms/bled_axis/content.md new file mode 100644 index 0000000000..3b2bb1e0c2 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/bled_axis/content.md @@ -0,0 +1,18 @@ + +“Bleed” (`BLED` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to adjust the text’s overall darkness or [typographic color](/glossary/color) by altering its [glyphs](/glossary/glyph)’ shapes such as [strokes](/glossary/stroke) (or other forms). Because it’s only the individual shapes that are changed, there are no changes to the type’s overall [width](/glossary/width), [letter spacing](/glossary/tracking_letter_spacing), or [kerning](/glossary/kerning). Therefore, manipulating this axis will not result in altered line breaks or page layout changes. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | 0 | 100 | 1 | + +
+ +![An image showing two 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) + +
+ +
In the [Workbench](https://fonts.google.com/specimen/Workbench) typeface, note how moving the Bleed axis towards its maximum value expands the width of each individual scanline without altering the actual glyph width or spacing of the letters.
+ +Negative values make the text appear lighter, while positive values make it darker, similarly to the effects of ink bleed or dot gain on paper. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/bled_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/bled_axis/images/thumbnail.svg new file mode 100644 index 0000000000..3ca20c928c --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/bled_axis/images/thumbnail.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/bled_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/bled_axis/term.textproto new file mode 100644 index 0000000000..1657b34850 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/bled_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Bleed axis (BLED)" +excerpt: "An axis found in some variable fonts that can be used to adjust the text’s overall darkness or typographic color by altering its glyphs’ shapes such as strokes." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/bnce_axis/content.md b/cc-by-sa/knowledge/glossary/terms/bnce_axis/content.md new file mode 100644 index 0000000000..acc970a29a --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/bnce_axis/content.md @@ -0,0 +1,17 @@ +“Bounce” (`BNCE` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to reposition letterforms vertically, away from the baseline, creating a more handwritten or organic style. + +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 | + +
+ +![The letters “sha” shown three times, with the central instance showing a default baseline position and the axis range shown below it at a default value of 50%, and then to the left with “s” below the baseline and “a” above, with the axis value shown decreased to 0%, and then to the right with “s” above the baseline and “a” below, with the axis value shown increased to 95%.](images/thumbnail.svg) + +
+ +
Typeface: [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans)
+ +How the letters bounce will relate to each typeface's needs or concept. For example, in [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans), adjusting the axis to its minimum value shifts the “s” character down, but the “a” character up; the “h” character moves only slightly in each direction. This semi-unpredictable behaviour results in the type appearing more like handwriting, and the effect can be further exaggerated by manipulating other axes (in the case of Shantell Sans, [Informality](/glossary/infm_axis) (`INFM`) and [Spacing](/glossary/spac_axis) (`SPAC`) in tandem. diff --git a/cc-by-sa/knowledge/glossary/terms/bnce_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/bnce_axis/images/thumbnail.svg new file mode 100644 index 0000000000..cfba211540 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/bnce_axis/images/thumbnail.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/bnce_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/bnce_axis/term.textproto new file mode 100644 index 0000000000..049b30bc93 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/bnce_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Bounce axis (BNCE)" +excerpt: "An axis found in some variable fonts that can be used to reposition letterforms vertically, away from the baseline, creating a more handwritten or organic style." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/casual_axis/content.md b/cc-by-sa/knowledge/glossary/terms/casual_axis/content.md index b0c815e30d..69991abc2b 100644 --- a/cc-by-sa/knowledge/glossary/terms/casual_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/casual_axis/content.md @@ -1,6 +1,6 @@ “Casual” (`CASL` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). Along this axis, [letterforms](/glossary/letterform) adjust from a more serious style to a more casual style, in a manner determined by the [type designer](/glossary/type_designer). For example, adjusting [stroke](/glossary/stroke) curvature, [contrast](/glossary/contrast), and [terminals](/glossary/terminal) can turn a sturdy and linear (serious) style into a friendly and energetic (casual) style. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/cursive_axis/content.md b/cc-by-sa/knowledge/glossary/terms/cursive_axis/content.md index 8b4997ecc4..b3426fdfa8 100644 --- a/cc-by-sa/knowledge/glossary/terms/cursive_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/cursive_axis/content.md @@ -1,6 +1,6 @@ “Cursive” (`CRSV` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that controls the substitution of cursive forms. “Off” (0) maintains upright [letterforms](/glossary/letterform) such as the double-storey "a" and "g," “auto” (0.5) allows for cursive substitution of cursive forms when combined with the [slant axis](/glossary/slant_axis), and “on” (1) asserts cursive forms even in [upright](/glossary/regular_upright) text with a slant of 0. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/edpt_axis/content.md b/cc-by-sa/knowledge/glossary/terms/edpt_axis/content.md new file mode 100644 index 0000000000..4ce794e32f --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/edpt_axis/content.md @@ -0,0 +1,20 @@ + +“Extrusion Depth” (`EDPT` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to control the depth of three-dimensional letterforms. Values are in thousandths of an [em](/glossary/em) (the current font size). For example, setting Extrusion Depth to 500 will result in a 50%-of-the-em extrusion, which would be 20 px if the font size is set to 40 px. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 100 | 0 | 1000 | 1 + +Note that the default value is expected to differ per family, rather than be universally set for any implementation of this axis. + +
+ +![An image showing two 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) + +
+ +
Note the two-dimensional appearance when the axis is set to 0 when using the [Nabla font](https://fonts.google.com/specimen/Nabla).
+ +The axis was first used in the [Nabla font](https://fonts.google.com/specimen/Nabla) [color font](/glossary/color_fonts), which uses isometric perspective to achieve its three-dimensional look. The extrusion depth, at its maximum setting, creates a deeper or thicker letterform. At its minimum setting, the letterform appears only two-dimensional. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/edpt_axis/images/thumbnail.png b/cc-by-sa/knowledge/glossary/terms/edpt_axis/images/thumbnail.png new file mode 100644 index 0000000000..177db78ce9 Binary files /dev/null and b/cc-by-sa/knowledge/glossary/terms/edpt_axis/images/thumbnail.png differ diff --git a/cc-by-sa/knowledge/glossary/terms/edpt_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/edpt_axis/term.textproto new file mode 100644 index 0000000000..4727ccd58e --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/edpt_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Extrusion Depth axis (EDPT)" +excerpt: "An axis found in some variable fonts that can be used to control the depth of three-dimensional letterforms." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/ehlt_axis/content.md b/cc-by-sa/knowledge/glossary/terms/ehlt_axis/content.md new file mode 100644 index 0000000000..a0f1820c7f --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/ehlt_axis/content.md @@ -0,0 +1,20 @@ + +“Edge Highlight” (`EHLT` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to control the thickness of the highlighted part of edges in three-dimensional [letterforms](/glossary/letterform). Values are in thousandths of an [em](/glossary/em) (at the current font size). For example, setting Extrusion Depth to 500 will result in a 50%-of-the-em extrusion, which would be 20 px if the font size is set to 40 px. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 12 | 0 | 1000 | 1 | + +Note that the default value is expected to differ per family, rather than be universally set for any implementation of this axis. + +
+ +![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) + +
+ +
Note the total lack of an edge when the axis is set to 0 when using the [Nabla font](https://fonts.google.com/specimen/Nabla).
+ +The axis was first used in the [Nabla font](https://fonts.google.com/specimen/Nabla) [color font](/glossary/color_fonts), which uses isometric perspective to achieve its three-dimensional look. The highlighted edge, at its maximum setting, creates greater contrast between the face of the letterform and its extrusion. And, like all components of a color font, can be recolored from its white default. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/ehlt_axis/images/thumbnail.png b/cc-by-sa/knowledge/glossary/terms/ehlt_axis/images/thumbnail.png new file mode 100644 index 0000000000..688f291365 Binary files /dev/null and b/cc-by-sa/knowledge/glossary/terms/ehlt_axis/images/thumbnail.png differ diff --git a/cc-by-sa/knowledge/glossary/terms/ehlt_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/ehlt_axis/term.textproto new file mode 100644 index 0000000000..8016e3bb35 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/ehlt_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Edge Highlight axis (EHLT)" +excerpt: "An axis found in some variable fonts that can be used to control the thickness of the highlighted part of edges in three-dimensional letterforms." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/elgr_axis/content.md b/cc-by-sa/knowledge/glossary/terms/elgr_axis/content.md new file mode 100644 index 0000000000..04cad1fd48 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/elgr_axis/content.md @@ -0,0 +1,24 @@ + +“Element Grid” (`ELGR` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some modular [variable fonts](/glossary/variable_fonts) where [letterforms](/glossary/letterform) are composed using multiple copies of the same element. In these fonts, the Element Grid axis can be used to control how many of the elements are used. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 1 | 1 | 2 | 0.1 | + +
+ +![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 in the middle shows the effects of the axis’ middle value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg) + +
+ +
The letters ‘thx’ in the [Handjet](https://fonts.google.com/specimen/Handjet) typeface are shown three times, with different Element Grid axis locations positioning the elements that construct the letterforms as one per grid unit, two elements overlapping, and two-by-two per grid unit.
+ +As with the [Element Shape](/glossary/elsh_axis) axis, Element Grid alters the structure of the letterforms in a way that may change the minimum font size at which the typeface is legible. These two axes can be combined to produce unique patterns and pleasant visual effects. + +The unit system of the axis is “per grid unit”, so each element for a value of 1 is replaced by 4 elements in a two-by-two pattern for a value of 2. + +The axis tag starts with `EL`, which is an abbreviation of ‘Element’. This prefix is used for the group of axes (ELSH, ELGR, ELXP) that are related to modular typefaces — those with glyphs composed of elements. + +This axis was first introduced in the [Handjet](https://fonts.google.com/specimen/Handjet) typeface. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/elgr_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/elgr_axis/images/thumbnail.svg new file mode 100644 index 0000000000..1f2b96a5ae --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/elgr_axis/images/thumbnail.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/elgr_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/elgr_axis/term.textproto new file mode 100644 index 0000000000..bb690edf00 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/elgr_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Element Grid axis (ELGR)" +excerpt: "An axis found in some modular variable fonts where letterforms are composed using multiple copies of the same element." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/elsh_axis/content.md b/cc-by-sa/knowledge/glossary/terms/elsh_axis/content.md new file mode 100644 index 0000000000..565c114dbb --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/elsh_axis/content.md @@ -0,0 +1,21 @@ +“Element Shape” (`ELSH` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some modular [variable fonts](/glossary/variable_fonts) where letterforms are composed using multiple copies of the same element. In these fonts, the Element Shape axis controls the shape of the element. The element can “snap” from one shape to another, or gradually morph between each one. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | 0 | 100 | 0.1 | + +
+ +![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 in the middle shows the effects of the axis’ middle value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg) + +
+ +
The letters “tak” in the [Handjet](https://fonts.google.com/specimen/Handjet) typeface are shown three times, with different Element Shape axis locations shaping the elements that construct the letterforms into triangles, ovals, and hearts.
+ +As with the [Element Grid](/glossary/elgr_axis) axis, Element Shape alters the structure of the letterforms in a way that may change the minimum font size at which the typeface is legible. + +The axis tag starts with `EL`, which is an abbreviation of ‘Element’. This prefix is used for the group of axes (ELSH, ELGR, ELXP) related to modular typefaces — those with glyphs composed of elements. + +This axis was first introduced in the [Handjet](https://fonts.google.com/specimen/Handjet) typeface. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/elsh_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/elsh_axis/images/thumbnail.svg new file mode 100644 index 0000000000..7ab0c2294c --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/elsh_axis/images/thumbnail.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/elsh_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/elsh_axis/term.textproto new file mode 100644 index 0000000000..9a88e0fcbd --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/elsh_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Element Shape axis (ELSH)" +excerpt: "An axis found in some modular variable fonts where letterforms are composed using multiple copies of the same element." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/fill_axis/content.md b/cc-by-sa/knowledge/glossary/terms/fill_axis/content.md index 8e8572a078..cd5619c962 100644 --- a/cc-by-sa/knowledge/glossary/terms/fill_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/fill_axis/content.md @@ -1,6 +1,6 @@ “Fill” (`FILL` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to turn transparent forms opaque. (Sometimes the corresponding interior opaque forms become transparent to maintain contrasting shapes.) Transitions often occur from the center, a side, or a corner, but can go in any direction. This can be useful in animation or interaction to convey a state transition. The numbers indicate proportion filled, from 0 (no treatment) to 1 (completely filled). -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/flar_axis/content.md b/cc-by-sa/knowledge/glossary/terms/flar_axis/content.md new file mode 100644 index 0000000000..014f0cb582 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/flar_axis/content.md @@ -0,0 +1,17 @@ +“Flare” (`FLAR` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to control how the strokes modulate from their upright parts to their flared extremes. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | 0 | 100 | 1 | + +
+ +![An image showing two 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) + +
+ +
Typeface: [Commissioner](https://fonts.google.com/specimen/Commissioner)
+ +Left at the minimum value, the [strokes](/glossary/stroke) are [monolinear](/glossary/monolinear); at the maximum value, more contrast is introduced to the letterforms. The effect is more noticeable in heavier font weights. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/flar_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/flar_axis/images/thumbnail.svg new file mode 100644 index 0000000000..48898db25e --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/flar_axis/images/thumbnail.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/flar_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/flar_axis/term.textproto new file mode 100644 index 0000000000..029efbc48e --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/flar_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Flare axis (FLAR)" +excerpt: "An axis found in some variable fonts that can be used to control how the strokes modulate from their upright parts to their flared extremes." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/grade_axis/content.md b/cc-by-sa/knowledge/glossary/terms/grade_axis/content.md index 3779359509..33c54b37aa 100644 --- a/cc-by-sa/knowledge/glossary/terms/grade_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/grade_axis/content.md @@ -1,7 +1,7 @@ “Grade” (`GRAD` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to alter [stroke](/glossary/stroke) thicknesses (or other forms) without affecting the [type](/glossary/type)’s overall [width](/glossary/width), inter-letter spacing, or [kerning](/glossary/kerning_kerning_pairs)—unlike altering [weight](/glossary/weight). This means there are no changes to line breaks or page layout. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/hexp_axis/content.md b/cc-by-sa/knowledge/glossary/terms/hexp_axis/content.md new file mode 100644 index 0000000000..df2b3db493 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/hexp_axis/content.md @@ -0,0 +1,17 @@ +“Hyper Expansion” (`HEXP` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to stretch the distance among glyphs by increasing the width of the glyphs themselves and also their connections (in joined writing models) or the spacing (in disconnected writing models). + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | 0 | 100 | 0.1 | + +
+ +![An image showing two 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) + +
+ +
Typeface: [Readex Pro](https://fonts.google.com/specimen/Readex+Pro)
+ +Although at first glance Hyper Expansion may appear similar to the [Width axis](/glossary/width_axis) (`wdth` in CSS), its chief concern is legibility, and specifically with the Arabic script. For detailed information, please read [“The Design of Readex Pro” on the Material Design blog](https://material.io/blog/readex-pro-legibility-arabic-type-design). \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/hexp_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/hexp_axis/images/thumbnail.svg new file mode 100644 index 0000000000..305016d361 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/hexp_axis/images/thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/hexp_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/hexp_axis/term.textproto new file mode 100644 index 0000000000..7f8f7270e9 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/hexp_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Hyper Expansion axis (HEXP)" +excerpt: "An axis found in some variable fonts that can be used to stretch the distance among glyphs by increasing the width of the glyphs themselves and also their connections or the spacing." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/infm_axis/content.md b/cc-by-sa/knowledge/glossary/terms/infm_axis/content.md new file mode 100644 index 0000000000..3b98c8f576 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/infm_axis/content.md @@ -0,0 +1,17 @@ +“Informality” (`INFM` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to introduce irregular shaping (some letters being smaller or larger than others) or adjusted proportions to mimic natural handwriting. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | 0 | 0 | 0 | + +
+ +![An image showing two 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) + +
+ +
Typeface: [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans)
+ +Note that the increased or decreased height of the letterform is context-aware, meaning that an “e”, for example, might shrink when next to some glyphs, and grow when next to others. This semi-unpredictable behaviour results in the type appearing more like handwriting, and — as with the [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans) font — the effect can be further exaggerated by manipulating axes like [Bounce](/glossary/bnce_axis) (`BNCE`) and [Spacing](/glossary/spac_axis) (`SPAC`) in tandem. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/infm_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/infm_axis/images/thumbnail.svg new file mode 100644 index 0000000000..291fd0701f --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/infm_axis/images/thumbnail.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/infm_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/infm_axis/term.textproto new file mode 100644 index 0000000000..ae3c66b4d6 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/infm_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Axis: Informality axis (INFM)" +excerpt: "An axis found in some variable fonts that can be used to introduce irregular shaping or adjusted proportions to mimic natural handwriting." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/italic_axis/content.md b/cc-by-sa/knowledge/glossary/terms/italic_axis/content.md index d82495b2b8..160c5558e6 100644 --- a/cc-by-sa/knowledge/glossary/terms/italic_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/italic_axis/content.md @@ -1,7 +1,7 @@ “Italic” (`ital` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). It controls the [font](/glossary/font) file’s [italic](/glossary/italic) parameter, with italics either turned “off” or “on”, rather than gradually changing over a range. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/monospace_axis/content.md b/cc-by-sa/knowledge/glossary/terms/monospace_axis/content.md index cf048c9867..c8e73dbc87 100644 --- a/cc-by-sa/knowledge/glossary/terms/monospace_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/monospace_axis/content.md @@ -1,7 +1,7 @@ “Monospace” (`MONO` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts), which adjusts the [glyphs](/glossary/glyph) from a proportional width to a fixed [width](/glossary/width). In [monospaced typefaces](/glossary/monospaced), or variable fonts set to a monospaced style, all glyphs take up the same amount of horizontal space. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/morf_axis/content.md b/cc-by-sa/knowledge/glossary/terms/morf_axis/content.md new file mode 100644 index 0000000000..68585b0d7e --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/morf_axis/content.md @@ -0,0 +1,15 @@ +“Morph” (`MORF` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to unconventionally change the shape, size, and position of elements that make up a letterform. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | 0 | 60 | 1 | + +
+ +![An image showing two 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) + +
+ +In the [Kablammo](https://fonts.google.com/specimen/Kablammo) font, moving along the axis from its minimum to maximum value animates the elements that are changing. Some [glyphs](/glossary/glyph) use this to suggest actual movement as the axis is altered. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/morf_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/morf_axis/images/thumbnail.svg new file mode 100644 index 0000000000..2ce3aad45d --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/morf_axis/images/thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/morf_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/morf_axis/term.textproto new file mode 100644 index 0000000000..9fbd139e98 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/morf_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Morph axis (MORF)" +excerpt: "An axis found in some variable fonts that can be used to unconventionally change the shape, size, and position of elements that make up a letterform." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/rond_axis/content.md b/cc-by-sa/knowledge/glossary/terms/rond_axis/content.md new file mode 100644 index 0000000000..4bb7279c3b --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/rond_axis/content.md @@ -0,0 +1,15 @@ +“Roundness” (`ROND` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to change shapes from sharp and angular defaults to rounded versions. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | 0 | 100 | 1 | + +
+ +![In the Wavefont typeface, 2 sets of 4 vertical stroke elements with varying lengths are shown, once with a minimum value of the Roundness axis applied, and again with the maximum value applied so that the terminals of the strokes are fully rounded.](images/thumbnail.svg) + +
+ +In [Wavefont](https://fonts.google.com/specimen/Wavefont), manipulating this axis results in changing the rectangular bar chart style to one that has a large border radius at the top and bottom of each bar. This axis is similar, but subtly different, to the [Softness axis](/glossary/softness_axis) (`SOFT`). \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/rond_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/rond_axis/images/thumbnail.svg new file mode 100644 index 0000000000..02de4d3ca3 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/rond_axis/images/thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/rond_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/rond_axis/term.textproto new file mode 100644 index 0000000000..f983352666 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/rond_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Roundness axis (ROND)" +excerpt: "An axis found in some variable fonts that can be used to change shapes from sharp and angular defaults to rounded versions." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/scan_axis/content.md b/cc-by-sa/knowledge/glossary/terms/scan_axis/content.md new file mode 100644 index 0000000000..d3f6bda503 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/scan_axis/content.md @@ -0,0 +1,18 @@ + +“Scanlines” (`SCAN` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that control the thickness of the scanlines that make up the [glyph](/glossary/glyph) shapes. Because it’s only the scanlines that are changed, there are no changes to the type’s overall [width](/glossary/width), [letter spacing](/glossary/tracking_letter_spacing), or [kerning](/glossary/kerning). Therefore, Manipulating this axis will not result in altered line breaks or page layout changes. + +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 | + +
+ +![An image showing two 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) + +
+ +
In the [Workbench](https://fonts.google.com/specimen/Workbench) typeface, note how moving the Scanline axis towards its maximum value expands the height of each individual scanline.
+ +Negative values make the scanlines thinner, and positive values make them thicker. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/scan_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/scan_axis/images/thumbnail.svg new file mode 100644 index 0000000000..cc790cd496 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/scan_axis/images/thumbnail.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/scan_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/scan_axis/term.textproto new file mode 100644 index 0000000000..eb2eae71bd --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/scan_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Scanlines axis (SCAN)" +excerpt: "An axis found in some variable fonts that control the thickness of the scanlines that make up the glyph shapes." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/shrp_axis/content.md b/cc-by-sa/knowledge/glossary/terms/shrp_axis/content.md new file mode 100644 index 0000000000..432d10013f --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/shrp_axis/content.md @@ -0,0 +1,21 @@ +“Sharpness” (`SHRP` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to adjust the shape of the [letterforms](/glossary/letterform)’ [terminals](/glossary/terminal). At its default value of 0, terminals are blunt, but they become sharper in appearance as the axis moves towards its maximum value of 100%. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | 0 | 100 | 1 | + +
+ +![The letters “nib” in the Geologica typeface are shown twice, once with a minimum value of the Sharpness axis applied, and again with the maximum value applied.](images/thumbnail.svg) + +
+ +
Typeface: [Geologica](https://fonts.google.com/specimen/Geologica)
+ +Type designers can increase the sharpness of their designs in obvious ways, but also with subtle attention to detail. For example, in the Geologica typeface, it’s not just one terminal’s extreme point that gets moved up or down as a result of this sharpening — the adjacent point also shifts down ever so slightly to compensate for this new form, which is especially noticeable in the undershoot at the bottom of the stem of the “b” in the illustration above. + +The number system of the axis is a relative percentage, where the default sharpness is zero and the maximum is 100%. + +This axis is conceptually the opposite of the [Softness axis](/glossary/softness_axis) (`SOFT`). \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/shrp_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/shrp_axis/images/thumbnail.svg new file mode 100644 index 0000000000..848695aba2 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/shrp_axis/images/thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/shrp_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/shrp_axis/term.textproto new file mode 100644 index 0000000000..4e453d9847 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/shrp_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Sharpness axis (SHRP)" +excerpt: "An axis found in some variable fonts that can be used to adjust the shape of the letterforms’ terminals." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/slant_axis/content.md b/cc-by-sa/knowledge/glossary/terms/slant_axis/content.md index 028ba17f16..fcaf466fd1 100644 --- a/cc-by-sa/knowledge/glossary/terms/slant_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/slant_axis/content.md @@ -1,7 +1,7 @@ Slant (`slnt` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). It controls the [font](/glossary/font) file’s [slant](/glossary/slant_axis) parameter for [oblique](/glossary/oblique) [styles](/glossary/style). -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/softness_axis/content.md b/cc-by-sa/knowledge/glossary/terms/softness_axis/content.md index 9abfe79e23..38f186e7da 100644 --- a/cc-by-sa/knowledge/glossary/terms/softness_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/softness_axis/content.md @@ -1,7 +1,6 @@ - “Softness” (`SOFT` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). At the end of this axis, [letterforms](/glossary/letterform) become more soft and rounded. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/spac_axis/content.md b/cc-by-sa/knowledge/glossary/terms/spac_axis/content.md new file mode 100644 index 0000000000..0cc8b3a8c7 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/spac_axis/content.md @@ -0,0 +1,24 @@ + +“Spacing” (`SPAC` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to adjust the spacing among characters overall, as a percentage from the default spacing. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | -100 | 100 | 0.1 | + +
+ +![An image showing two 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) + +
+ +
The letters “tel” with default spacing and the axis range shown below it at a default value of zero, and then to the right the same letter again but spaced far apart, with the axis value shown increased around 33%.
+ +Manipulating this axis has the same effect as adjusting the tracking value (called letter-spacing in CSS); therefore it can alter the personality of the type in the same way as tracking can, and — as with the [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans) font — that effect can be further exaggerated by manipulating axes like [Bounce](/glossary/bnce_axis) (`BNCE`) and [Spacing](/glossary/spac_axis) (`SPAC`) in tandem. + +The number system of the axis is a relative percentage, where the default spacing is zero,the minimum spacing is -100%, and the maximum (widest) spacing is 100%, with values up to one decimal place (e.g. 97.5%). + +Manipulating the Spacing axis can be better than adjusting [tracking](/glossary/tracking_letter_spacing) settings because it’s often much more fine-grained (compared to the CSS `letter-spacing` property) and offers the type designer an opportunity to structure changes to spacing in a sophisticated way, specific to each typeface. Fonts with a Spacing axis can be used to better finesse animations, and apply tracking adjustments in software which do not provide built-in support for tracking yet do support variable fonts. + +For font developers, Google Fonts has commissioned a reference implementation of the Spacing axis, and tools to implement it, at [github.com/googlefonts/roboto-flex-spacing-axis-demo](https://github.com/googlefonts/roboto-flex-spacing-axis-demo). \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/spac_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/spac_axis/images/thumbnail.svg new file mode 100644 index 0000000000..43dce64ba2 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/spac_axis/images/thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/spac_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/spac_axis/term.textproto new file mode 100644 index 0000000000..d318a50d11 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/spac_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Spacing axis (SPAC)" +excerpt: "An axis found in some variable fonts that can be used to adjust the spacing among characters overall, as a percentage from the default spacing." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/volm_axis/content.md b/cc-by-sa/knowledge/glossary/terms/volm_axis/content.md new file mode 100644 index 0000000000..9489094841 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/volm_axis/content.md @@ -0,0 +1,19 @@ +“Volume” (`VOLM` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to exaggerate details of a typeface in order to emphasize its personality. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | 0 | 100 | 1 | + +
+ +![An image showing two 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) + +
+ +
The letter ‘h’ in the [Commissioner](https://fonts.google.com/specimen/Commissioner) typeface is shown twice, once with a minimum value of the Volume axis applied, and again with the maximum value applied.
+ +Changes along the Volume axis expand the surface area or volume of the letterforms, and typically interact with the effects of other axes. For example, in the Commissioner typeface, the Volume axis exaggerates the effects of the [Flare (`FLAR`) axis](/glossary/flar_axis), which controls stroke modulation. + +The number system of the axis is a percentage that starts from a neutral state at 0% and expands the volume to a maximum level of 100%. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/volm_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/volm_axis/images/thumbnail.svg new file mode 100644 index 0000000000..3a909f85b4 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/volm_axis/images/thumbnail.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/volm_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/volm_axis/term.textproto new file mode 100644 index 0000000000..1141600698 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/volm_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Volume axis (VOLM)" +excerpt: "An axis found in some variable fonts that can be used to exaggerate details of a typeface in order to emphasize its personality." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/weight_axis/content.md b/cc-by-sa/knowledge/glossary/terms/weight_axis/content.md index 0702a831ee..f35d7daf2c 100644 --- a/cc-by-sa/knowledge/glossary/terms/weight_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/weight_axis/content.md @@ -1,7 +1,7 @@ “Weight” (`wght` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in many [variable fonts](/glossary/variable_fonts). It controls the [font](/glossary/font) file’s [weight](/glossary/weight) parameter. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/width_axis/content.md b/cc-by-sa/knowledge/glossary/terms/width_axis/content.md index 0a8ba07315..d565319c06 100644 --- a/cc-by-sa/knowledge/glossary/terms/width_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/width_axis/content.md @@ -1,7 +1,7 @@ “Width” (`wdth` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). It controls the [font](/glossary/font) file’s [width](/glossary/width) parameter. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/wonky_axis/content.md b/cc-by-sa/knowledge/glossary/terms/wonky_axis/content.md index 1dd2beaeb0..3dd392d009 100644 --- a/cc-by-sa/knowledge/glossary/terms/wonky_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/wonky_axis/content.md @@ -1,7 +1,7 @@ “Wonky” (`WONK` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts), and, like the [italic axis](/glossary/italic_axis), is binary. It’s used to control the substitution of “wonky” forms. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/xopq_axis/content.md b/cc-by-sa/knowledge/glossary/terms/xopq_axis/content.md index 5735415cf8..eb856b611a 100644 --- a/cc-by-sa/knowledge/glossary/terms/xopq_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/xopq_axis/content.md @@ -1,7 +1,7 @@ “Parametric Thick Stroke” (`XOPQ` in CSS) is a [parametric axis](/glossary/parametric_axis), found in some [variable fonts](/glossary/variable_fonts), for specifying and varying thick [stroke weights](/glossary/stroke), such as stems. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/xrot_axis/content.md b/cc-by-sa/knowledge/glossary/terms/xrot_axis/content.md new file mode 100644 index 0000000000..8e54ff5128 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/xrot_axis/content.md @@ -0,0 +1,20 @@ + +“Rotation in X” (`XROT` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to alter the letterforms so that they appear to rotate in the X dimension, giving the impression that they can interact in a three-dimensional space. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | -180 | 180 | 1 | + +
+ +![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 in the middle shows the effects of the axis’ default value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg) + +
+ +
Typeface: [Tilt Prism](https://fonts.google.com/specimen/Tilt+Prism)
+ +Leaving the axis at its default value of 0 results in the character appearing face-on; manipulating it to its minimum value results in it appearing to turn to the left; manipulating it to its maximum value results in it appearing to turn to the right. + +It may be used in conjunction with other axes controlling Y-transparencies (vertical alignment zones), especially the [Parametric Uppercase Height axis](/glossary/ytuc_axis) (`YTUC`) and [Parametric Descender Depth axis](/glossary/ytde_axis) (`YTDE`). \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/xrot_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/xrot_axis/images/thumbnail.svg new file mode 100644 index 0000000000..7e27eef29f --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/xrot_axis/images/thumbnail.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/xrot_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/xrot_axis/term.textproto new file mode 100644 index 0000000000..250832892a --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/xrot_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Rotation in X axis (XROT)" +excerpt: "An axis found in some variable fonts that can be used to alter the letterforms so that they appear to rotate in the X dimension." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/xtra_axis/content.md b/cc-by-sa/knowledge/glossary/terms/xtra_axis/content.md index 8ce2cba7b2..c0acbbfdff 100644 --- a/cc-by-sa/knowledge/glossary/terms/xtra_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/xtra_axis/content.md @@ -1,7 +1,7 @@ “Parametric Counter Width” (`XTRA` in CSS) is a [parametric axis](/glossary/parametric_axis), found in some [variable fonts](/glossary/variable_fonts), that varies counter widths in the X dimension. It can be used for fine-tuning [justification](/glossary/alignment_justification) (as demonstrated in [TypeNetwork’s example](https://variablefonts.typenetwork.com/topics/spacing/variations)) by affecting the number of [characters](/glossary/character) per line. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/year_axis/content.md b/cc-by-sa/knowledge/glossary/terms/year_axis/content.md new file mode 100644 index 0000000000..9c923bf8b4 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/year_axis/content.md @@ -0,0 +1,20 @@ + +“Year” (`YEAR` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to show the effect of time — metaphorically — on the type used to set the text. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 2000 | -4000 | 4000 | 1 | + +
+ +![An image showing two 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) + +
+ +
The [Climate Crisis font](https://fonts.google.com/specimen/Climate+Crisis) has a ‘Year’ axis that starts in 1979 with fully formed letters and progresses to 2050 where the letters appear melted away to the point that they are almost illegible.
+ +The axis’ first use, in the Climate Crisis font created by Finnish newspaper Helsingin Sanomat, shows how Arctic ice has and will continue to shrink because of climate change, based on current forecasts. It was informed by the US National Snow and Ice Data Center’s Arctic sea ice data from 1979 to 2019, plus the Intergovernmental Panel on Climate Change’s predictions for Arctic sea ice all the way to 2050. + +The design of the [letterforms](/glossary/letterform) change as the axis is manipulated to appear visually similar to melting ice. The number system of the axis uses years as units, so it can be used for many different kinds of historical progressions. Currently it’s defined in the Google Fonts Axis Registry as ranging from the year 4,000 BCE to 4,000 CE. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/year_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/year_axis/images/thumbnail.svg new file mode 100644 index 0000000000..7793b4201a --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/year_axis/images/thumbnail.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/year_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/year_axis/term.textproto new file mode 100644 index 0000000000..f3c63e1287 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/year_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Year axis (YEAR)" +excerpt: "An axis found in some variable fonts that can be used to show the effect of time — metaphorically — on the type used to set the text." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/yela_axis/content.md b/cc-by-sa/knowledge/glossary/terms/yela_axis/content.md new file mode 100644 index 0000000000..ec6daa2c7e --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/yela_axis/content.md @@ -0,0 +1,20 @@ + +“Vertical Element Alignment” (`YELA` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to align elements within modular typefaces’ glyphs to different positions in the Y dimension. + +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 | + +
+ +![An image showing two 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) + +
+ +
In the [Wavefont](https://fonts.google.com/specimen/Wavefont) typeface, 3 sets of 4 vertical stroke elements with varying lengths are shown aligned to the bottom of the em, symmetrically center-aligned, and aligned to the top of the em.
+ +The number system is a percentage and can be understood on a relative basis: The default value is zero, which center-aligns the letterforms; the minimum value of -100% aligns them to the bottom of the em square; the maximum value of 100% aligns them to the top of the em square. + +This axis was first introduced in the [Wavefont](https://fonts.google.com/specimen/Wavefont) typeface. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/yela_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/yela_axis/images/thumbnail.svg new file mode 100644 index 0000000000..607e7fa49a --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/yela_axis/images/thumbnail.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/yela_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/yela_axis/term.textproto new file mode 100644 index 0000000000..2b37984097 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/yela_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Vertical Element Alignment axis (YELA)" +excerpt: "An axis found in some variable fonts that can be used to align elements within modular typefaces’ glyphs to different positions in the Y dimension." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/yrot_axis/content.md b/cc-by-sa/knowledge/glossary/terms/yrot_axis/content.md new file mode 100644 index 0000000000..7bdbbf0906 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/yrot_axis/content.md @@ -0,0 +1,20 @@ + +“Rotation in Y” (`YROT` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to alter the letterforms so that they appear to rotate in the Y dimension, giving the impression that they can interact in a three-dimensional space. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | -180 | 180 | 1 | + +
+ +![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 in the middle shows the effects of the axis’ default value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg) + +
+ +
Typeface: [Tilt Prism](https://fonts.google.com/specimen/Tilt+Prism)
+ +Leaving the axis at its default value of 0 results in the character appearing face-on; manipulating it to its minimum value results in it appearing to turn upwards; manipulating it to its maximum value results in it appearing to turn downwards. + +It may be used in conjunction with other axes controlling Y-transparencies (vertical alignment zones), especially the [Parametric Uppercase Height axis](/glossary/ytuc_axis) (`YTUC`) and [Parametric Descender Depth axis](/glossary/ytde_axis) (`YTDE`). \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/yrot_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/yrot_axis/images/thumbnail.svg new file mode 100644 index 0000000000..3e1bf637b5 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/yrot_axis/images/thumbnail.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/yrot_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/yrot_axis/term.textproto new file mode 100644 index 0000000000..555cbc5fcc --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/yrot_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Rotation in Y axis (YROT)" +excerpt: "An axis found in some variable fonts that can be used to alter the letterforms so that they appear to rotate in the Y dimension." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/ytas_axis/content.md b/cc-by-sa/knowledge/glossary/terms/ytas_axis/content.md index 2381f0719a..d469583b04 100644 --- a/cc-by-sa/knowledge/glossary/terms/ytas_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/ytas_axis/content.md @@ -1,7 +1,7 @@ “Parametric Ascender Height” (`YTAS` in CSS) is a [parametric axis](/glossary/parametric_axis), found in some [variable fonts](/glossary/variable_fonts), for specifying and varying the height of [lowercase](/glossary/uppercase_lowercase) [ascenders](/glossary/ascenders_descenders). -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/ytde_axis/content.md b/cc-by-sa/knowledge/glossary/terms/ytde_axis/content.md index 44b9a8ca68..aaf76af1ba 100644 --- a/cc-by-sa/knowledge/glossary/terms/ytde_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/ytde_axis/content.md @@ -1,7 +1,7 @@ “Parametric Descender Depth” (`YTDE` in CSS) is a [parametric axis](/glossary/parametric_axis), found in some [variable fonts](/glossary/variable_fonts), for specifying and varying the depth of [lowercase](/glossary/uppercase_lowercase) [descenders](/glossary/ascenders_descenders), scaled as negative height. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/ytfi_axis/content.md b/cc-by-sa/knowledge/glossary/terms/ytfi_axis/content.md index 4cb43b63d7..7917623223 100644 --- a/cc-by-sa/knowledge/glossary/terms/ytfi_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/ytfi_axis/content.md @@ -1,7 +1,7 @@ “Parametric Figure Height” (`YTFI` in CSS) is a [parametric axis](/glossary/parametric_axis), found in some [variable fonts](/glossary/variable_fonts), for specifying and varying the height of [figures](/glossary/numerals_figures) by varying their counterforms. -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/ytlc_axis/content.md b/cc-by-sa/knowledge/glossary/terms/ytlc_axis/content.md index 0e28b93769..42e6f82d37 100644 --- a/cc-by-sa/knowledge/glossary/terms/ytlc_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/ytlc_axis/content.md @@ -1,7 +1,7 @@ “Parametric Lowercase Height” (`YTLC` in CSS) is a [parametric axis](/glossary/parametric_axis), found in some [variable fonts](/glossary/variable_fonts), for specifying and varying the height of counters and other spaces between the [baseline](/glossary/baseline) and [x-height](/glossary/x_height). -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/ytuc_axis/content.md b/cc-by-sa/knowledge/glossary/terms/ytuc_axis/content.md index 5941b94818..a91ff43d32 100644 --- a/cc-by-sa/knowledge/glossary/terms/ytuc_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/ytuc_axis/content.md @@ -1,7 +1,7 @@ “Parametric Uppercase Counter Height” (`YTUC` in CSS) is a [parametric axis](/glossary/parametric_axis), found in some [variable fonts](/glossary/variable_fonts), for specifying and varying the height of [uppercase](/glossary/uppercase_lowercase) [letterforms](/glossary/letterform). -The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as: +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: | Default: | Min: | Max: | Step: | | --- | --- | --- | --- | diff --git a/cc-by-sa/knowledge/glossary/terms/zrot_axis/content.md b/cc-by-sa/knowledge/glossary/terms/zrot_axis/content.md new file mode 100644 index 0000000000..822fe4cec0 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/zrot_axis/content.md @@ -0,0 +1,18 @@ + +“Rotation in Z” (`ZROT` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts) that can be used to alter the letterforms so that they appear to rotate in the Z dimension, giving the impression that they can interact in a three-dimensional space. + +The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as: + +| Default: | Min: | Max: | Step: | +| --- | --- | --- | --- | +| 0 | -180 | 180 | 1 | + +
+ +![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 in the middle shows the effects of the axis’ default value. The specimen on the right shows the effects of the axis’ highest value.](images/thumbnail.svg) + +
+ +Leaving the axis at its default value of 0 results in the character appearing face-on; manipulating it to its minimum value results in it appearing to rotate to the left; manipulating it to its maximum value results in it appearing to rotate to the right. + +It may be used in conjunction with other axes controlling Y-transparencies (vertical alignment zones), especially the [Parametric Uppercase Height axis](/glossary/ytuc_axis) (`YTUC`) and [Parametric Descender Depth axis](/glossary/ytde_axis) (`YTDE`). \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/zrot_axis/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/zrot_axis/images/thumbnail.svg new file mode 100644 index 0000000000..64d50be3da --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/zrot_axis/images/thumbnail.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/zrot_axis/term.textproto b/cc-by-sa/knowledge/glossary/terms/zrot_axis/term.textproto new file mode 100644 index 0000000000..6707965d65 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/zrot_axis/term.textproto @@ -0,0 +1,5 @@ +name: "Rotation in Z axis (ZROT)" +excerpt: "An axis found in some variable fonts that can be used to alter the letterforms so that they appear to rotate in the Z dimension." +related_lessons: "introducing_variable_fonts" +related_lessons: "designing_with_variable_fonts_in_desktop_apps" +related_lessons: "styling_type_on_the_web_with_variable_fonts"