-<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>
+<figcaption>In the <a href="https://fonts.google.com/specimen/Workbench">Workbench</a> 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.
-<figcaption>Typeface: [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans)</figcaption>
+<figcaption>Typeface: <a href="https://fonts.google.com/specimen/Shantell+Sans">Shantell Sans</a></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>Note the two-dimensional appearance when the axis is set to 0 when using the [Nabla font](https://fonts.google.com/specimen/Nabla).</figcaption>
+<figcaption>Note the two-dimensional appearance when the axis is set to 0 when using the <a href="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
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
</figure>
-<figcaption>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).</figcaption>
+<figcaption>Note the total lack of an edge when the axis is set to 0 when using the <a href="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
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
-<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>
+<figcaption> The letters ‘thx’ in the <a href="https://fonts.google.com/specimen/Handjet">Handjet</a> 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.
-<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>
+<figcaption> The letters “tak” in the <a href="https://fonts.google.com/specimen/Handjet">Handjet</a> 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.
-<figcaption>Typeface: [Readex Pro](https://fonts.google.com/specimen/Readex+Pro)</figcaption>
+<figcaption>Typeface: <a href="https://fonts.google.com/specimen/Readex+Pro">Readex Pro</a></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
-<figcaption>Typeface: [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans)</figcaption>
+<figcaption>Typeface: <a href="https://fonts.google.com/specimen/Shantell+Sans">Shantell Sans</a></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
-<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>
+<figcaption>In the <a href="https://fonts.google.com/specimen/Workbench">Workbench</a> 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.
-<figcaption>Typeface: [Geologica](https://fonts.google.com/specimen/Geologica)</figcaption>
+<figcaption>Typeface: <a href="https://fonts.google.com/specimen/Geologica">Geologica</a></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.
-<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>
+<figcaption>The letters “tel” in <a href="https://fonts.google.com/specimen/Shantell+Sans">Shantell Sans</a>, 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.
+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 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%).
-<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>
+<figcaption>The letter ‘h’ in the <a href="https://fonts.google.com/specimen/Commissioner">Commissioner</a> 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.
-<figcaption>Typeface: [Tilt Prism](https://fonts.google.com/specimen/Tilt+Prism)</figcaption>
+<figcaption>Typeface: <a href="https://fonts.google.com/specimen/Tilt+Prism">Tilt Prisim</a></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.
-<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>
+<figcaption>In the <a href="https://fonts.google.com/specimen/Wavefont">Wavefont</a> 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.
-<figcaption>Typeface: [Tilt Prism](https://fonts.google.com/specimen/Tilt+Prism)</figcaption>
+<figcaption>Typeface: <a href="https://fonts.google.com/specimen/Tilt+Prism">Tilt Prisim</a></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
