You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: cc-by-sa/knowledge/glossary/terms/edpt_axis/content.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -4,17 +4,17 @@
4
4
The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as:
5
5
6
6
| Default: | Min: | Max: | Step: |
7
-
| --- | --- | --- | --- |
8
-
| 100 | 0 | 1000 | 1
7
+
| --------| ----| ----|----- |
8
+
| 100 | 0 | 1000 | 1 |
9
9
10
10
Note that the default value is expected to differ per family, rather than be universally set for any implementation of this axis.
11
11
12
12
<figure>
13
13
14
14
15
+
<figcaption>Note the two-dimensional appearance when the axis is set to 0 when using the <ahref="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
15
16
16
17
</figure>
17
18
18
-
<figcaption>Note the two-dimensional appearance when the axis is set to 0 when using the <ahref="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
19
19
20
-
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.
20
+
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.
Copy file name to clipboardExpand all lines: cc-by-sa/knowledge/glossary/terms/ehlt_axis/content.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -12,9 +12,9 @@ Note that the default value is expected to differ per family, rather than be uni
12
12
<figure>
13
13
14
14
15
+
<figcaption>Note the total lack of an edge when the axis is set to 0 when using the <ahref="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
15
16
16
17
</figure>
17
18
18
-
<figcaption>Note the total lack of an edge when the axis is set to 0 when using the <ahref="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
19
19
20
-
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.
20
+
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.
Copy file name to clipboardExpand all lines: cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/content.md
Copy file name to clipboardExpand all lines: cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/content.md
Copy file name to clipboardExpand all lines: cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/content.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@ For many designers, implementing [variable fonts](/glossary/variable_fonts) on a
2
2
3
3
## Manipulating the first axis
4
4
5
-
Let’s test this out and make the move from the static version of [Anybody](https://fonts.google.com/specimen/Anybody/), by Tyler Finck, to its newer, variable version. This font contains three variable axes: [Weight](/glossary/weight_axis) (`wght`), [Italic](/glossary/italic_axis) (`ital`), and [Width](/glossary/width_axis) (`wdth`). But before we get into the axes themselves, we first need to actually load the variable fonts. Assuming we’re using the Google Fonts API (of course, we could always download the font files and [self-host](https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts) them), we’ll update the line in our HTML’s `head`—which is currently using the Regular (400), Regular Italic, Bold (700), and Bold Italic styles—from this:
5
+
Let’s test this out and make the move from the static version of [Anybody](https://fonts.google.com/specimen/Anybody), by Tyler Finck, to its newer, variable version. This font contains three variable axes: [Weight](/glossary/weight_axis) (`wght`), [Italic](/glossary/italic_axis) (`ital`), and [Width](/glossary/width_axis) (`wdth`). But before we get into the axes themselves, we first need to actually load the variable fonts. Assuming we’re using the Google Fonts API (of course, we could always download the font files and [self-host](https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts) them), we’ll update the line in our HTML’s `head`—which is currently using the Regular (400), Regular Italic, Bold (700), and Bold Italic styles—from this:
@@ -64,7 +64,7 @@ Switching italics on and off in this case is very easy because it essentially ju
64
64
65
65
## Manipulating an additional axis
66
66
67
-
It’s time to move onto our third axis: Width (`wdth`). In this font in particular, width wasn’t exposed until the release of this variable version, so it’s a great excuse to make use of variable fonts’ powers of further refinement.
67
+
It’s time to move onto our third axis: Width (`wdth`). In this font in particular, width wasn’t exposed until the release of this variable version, so it’s a great excuse to make use of variable fonts’ powers of further refinement.
68
68
69
69
Once again, the Width axis has been mapped to familiar CSS: we can manipulate it using the `font-stretch` property. The only difference is that, unlike weight, we need to declare it as a percentage. Let’s give our `span` element the maximum width value of 150%:
And while we’re at it, why not make everything *but* the `span` a little more condensed with a font-stretch value of 72%?
79
+
And while we’re at it, why not make everything *but* the `span` a little more condensed with a font-stretch value of 72%?
80
80
81
81
```css
82
82
body {
@@ -122,4 +122,4 @@ em {
122
122
}
123
123
```
124
124
125
-
Note that `font-variation-settings` is also required for any custom axes. For more information, please see [“Styling type on the web with variable fonts.”](/lesson/styling_type_on_the_web_with_variable_fonts)
125
+
Note that `font-variation-settings` is also required for any custom axes. For more information, please see [“Styling type on the web with variable fonts.”](/lesson/styling_type_on_the_web_with_variable_fonts)
Copy file name to clipboardExpand all lines: cc-by-sa/knowledge/modules/using_type_in_ar_and_vr/lessons/designing_for_ar_vr/content.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -72,14 +72,14 @@ This means extra care is required while designing AR/VR applications. The typefa
72
72
73
73
While both the hardware and software aspects of AR/VR implementation are advancing rapidly, type within them has a lot of catching up to do. For a long time, the need for extra processing power to render text properly has hampered progress. This pushes AR/VR designers to resort to the least CPU-intensive methods to render text, thereby degrading the quality of the text. It also keeps designers from considering rich text applications, thus limiting the potential of AR/VR environments.
74
74
75
-
Future wearables have the potential to replace smartphones and computers. Looking at current progress, it seems that the processing power required for high-quality text rendering may take a while; however, this shouldn’t hinder the progress of AR/VR. One way to help speed up the process is to design applications that take into account the typographic challenges of this medium. In parallel, we can promote the design of typefaces that are specifically developed to optimize the performance of existing rendering systems.
75
+
Future wearables have the potential to replace smartphones and computers. Looking at current progress, it seems that the processing power required for high-quality text rendering may take a while; however, this shouldn’t hinder the progress of AR/VR. One way to help speed up the process is to design applications that take into account the typographic challenges of this medium. In parallel, we can promote the design of typefaces that are specifically developed to optimize the performance of existing rendering systems.
76
76
77
77
Useful links:
78
78
-[The current state of the text in augmented reality](https://niteeshyadav.com/blog/the-current-state-of-the-text-in-augmented-reality-7507/)
0 commit comments