-</figure>
-
<figcaption>Typeface: [AR One Sans](https://fonts.google.com/specimen/AR+One+Sans)</figcaption>
+</figure>
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
-</figure>
-
<figcaption>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.</figcaption>
+</figure>
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.
-</figure>
-
<figcaption>Typeface: [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans)</figcaption>
+</figure>
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.
-</figure>
-
<figcaption> 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.</figcaption>
+</figure>
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.
-</figure>
-
<figcaption> 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.</figcaption>
+</figure>
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.
-</figure>
-
<figcaption>Typeface: [Commissioner](https://fonts.google.com/specimen/Commissioner)</figcaption>
+</figure>
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
-</figure>
-
<figcaption>Typeface: [Readex Pro](https://fonts.google.com/specimen/Readex+Pro)</figcaption>
+</figure>
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
-</figure>
-
<figcaption>Typeface: [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans)</figcaption>
+</figure>
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
-</figure>
-
<figcaption>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.</figcaption>
+</figure>
Negative values make the scanlines thinner, and positive values make them thicker.
-</figure>
-
<figcaption>Typeface: [Geologica](https://fonts.google.com/specimen/Geologica)</figcaption>
+</figure>
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.
-</figure>
-
<figcaption>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%.</figcaption>
+</figure>
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.
-</figure>
-
<figcaption>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.</figcaption>
+</figure>
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.
-</figure>
-
<figcaption>Typeface: [Tilt Prism](https://fonts.google.com/specimen/Tilt+Prism)</figcaption>
+</figure>
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.
-</figure>
-
<figcaption>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.</figcaption>
+</figure>
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.
-</figure>
-
<figcaption>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.</figcaption>
+</figure>
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.
-</figure>
-
<figcaption>Typeface: [Tilt Prism](https://fonts.google.com/specimen/Tilt+Prism)</figcaption>
+</figure>
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.
projects / thirdparty / google / fonts.git / commitdiff
