New gfk content for q1 (#4398)

* 1st commit: all content, basic formatting, svg links

This is the new Q1 content. Almost all formatting is needed. Excerpts are all missing. There’s absolutely no “related” metadata yet. No alt text, either. But images are all in, renamed to `thumbnail.svg` where appropriate, and structurally everything is there.

* Testing link format

* Adding all CSS v2 API links for axis defs

* Testing Markdown-format tables for axis steps

* Adding 2 gloss links to all axis defs’ opening para

* More links in intro paras

* Inserted all link (blank) into all gloss. terms

Almost all of these links need the URLs added later, but at least they’re now marked up to resemble anything that was underlined in the Google Docs.

* Inserted all (blank) links in articles

Also formatted most of the big tables in new Markdown table format

* Gloss. excerpt test

* Excerpts for all axis definitions

* Remaining (non-axis) glossary excerpts

* Renaming 1 illo per article to `thumbnail`

* Updating illo filename in content to reflect `thumbnail` name change

* Adding prev/next URLs for all new articles

* Captions for all articles

Some still need font credits adding

* Alt text for `a_checklist_for_choosing_type`

* Alt text for `language_support_in_fonts`

* Alt text for `the_foundations_of_web_typography`

* Alt text for `an_overview_of_latin_type_anatomy`

Only a small change, as most alt text was already present for this one.

* Illo alt text for all axis definitions in Glossary

(And  table formatting, too.)

* Updated illos for `cursive_axis` & `wonky_axis`

* Remaining illo alt text for non-axis-related Glossary terms

* Added all related gloss. terms to new articles

* Added all related articles to gloss. terms

* First round of actual URLs on new Gloss. terms

* Actual URLs in all remaining Gloss. terms

* All real URLs for all new articles

And improved checklist formatting

* New Thai & Devanagari illos

Hopefully the final versions

* OG excerpts for all 4 new articles

* New illo as per Dave’s rec + TP copy tweak + illo filenames

* Article ordering within each `module.textproto` file

* Update prev/next for existing articles to reflect new Q1 content

knowledge/glossary/terms/casual_axis/content.md

@@ -0,0 +1,13 @@
+“Casual” (`CASL` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). Along this axis, letterforms adjust from a more serious style to a more casual style, in a manner determined by the type designer. This can mean adjustments in stroke curvature, contrast, and terminals to go from a sturdy, rational “linear” style to a friendly, energetic “casual” style.
+
+The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
+
+| Default: 0 | Min: 0 | Max: 1 | Step: 0.01 |
+
+<figure>
+
+![Two side-by-side type specimens of the word “suited”, each shown with a variable axis represented beneath as a horizontal slider. The first specimen, with the slider most of the way to the left to represent a lower value on the axis, shows straighter letterforms. The second specimen, with the slider most of the way to the right to represent a higher value on the axis, exhibits curvier shapes.](images/thumbnail.svg)
+
+</figure>
+
+In line with the current CSS spec, all custom axes should be referenced in UPPERCASE (only the officially registered variable axes should appear in lowercase). Also, when using the Google Fonts API, the uppercase axes must appear first in the URL.

knowledge/glossary/terms/casual_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Casual axis (CASL)"
+excerpt: "An axis found in some variable fonts. Along this axis, letterforms adjust from a more serious style to a more casual 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"

knowledge/glossary/terms/cursive_axis/content.md

@@ -0,0 +1,13 @@
+“Cursive” (`CRSV` in CSS)  is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts), and controls the substitution of cursive forms. “Off” (0) maintains upright letterforms such as a 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 text with a slant of 0.
+
+The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
+
+| Default: 0.5 | Min: 0 | Max: 1 | Step: 0.1 |
+
+<figure>
+
+![Two side-by-side type specimens of the characters “gwayvz”, each shown with a variable axis represented beneath as an on/off switch. The second specimen, with the switch to the right, uses different forms: A single-storey “g” and “a”, and curvier lines for “w”, “y”, “v”, and “z”.](images/thumbnail.svg)
+
+</figure>
+
+In line with the current CSS spec, all custom axes should be referenced in UPPERCASE (only the officially registered variable axes should appear in lowercase). Also, when using the Google Fonts API, the uppercase axes have to appear first in the URL.

knowledge/glossary/terms/cursive_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Cursive axis (CRSV)"
+excerpt: "An axis found in some variable fonts that controls the substitution of cursive forms."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/glossary/terms/fill_axis/content.md

@@ -0,0 +1,15 @@
+“Fill” (`FILL` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts), intended to provide a treatment of the design that fills in transparent forms with opaque ones (and sometimes 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:
+
+| Default: 0 | Min: 0 | Max: 1 | Step: 0.01 |
+
+This is currently implemented in Google’s Material icons:
+
+<figure>
+
+![Two side-by-side icon specimens, each shown with a variable axis represented beneath as an on/off switch. The first specimen, with the switch to the left, shows the icon shapes outlined. The second specimen, with the switch to the right, shows the icon shapes filled with solid color.](images/thumbnail.svg)
+
+</figure>
+
+In line with the current CSS spec, all custom axes should be referenced in UPPERCASE (only the officially registered variable axes should appear in lowercase). Also, when using the Google Fonts API, the uppercase axes have to appear first in the URL.

knowledge/glossary/terms/fill_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Fill axis (FILL)"
+excerpt: "excerpt: "An axis found in some variable fonts, intended to provide a treatment of the design that fills in transparent forms with opaque ones."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/glossary/terms/grade/content.md

@@ -0,0 +1,14 @@
+
+Originally conceived for printed newspapers to calibrate output from different presses, or different paper stocks, grade is an attempt to keep type appearing consistent across different media, or in certain contexts. Think of a newspaper (matte paper; more ink bleed) that also has a magazine-style weekend supplement (glossy paper; less ink bleed). This is a perfect use case for using different grades to achieve identical typographic [color](/glossary/color) for the [body](/glossary/body) [text](/glossary/text) in both instances.
+
+Unlike [weight](/glossary/weight), which usually has an effect on [width](/glossary/width) as well, grade alters only the thickness of the [letterforms](/glossary/letterform)’ [strokes](/glossary/stroke) without changing the width of the [glyph](/glossary/glyph). Although grade can alter [contrast](/glossary/contrast), it differs from [optical sizing](/glossary/optical_sizes) because its purpose is to compensate for differences in appearance and bring it back towards the intended design.
+
+For screen reading, reversed (white on black or other light colors on dark background) type [appears bolder than normal dark text](/lesson/exploring_typefaces_with_multiple_weights_or_grades) on a light background. With printed text, the opposite is true (although the amount depends on the quality of the paper, as noted). In either case, a slight adjustment via grade can maintain the same visual effect.
+
+<figure>
+
+![The words “Graduation Ceremony” set in the same typeface, but with two different grade settings applied to the fonts, revealed via a sliding doors-like visual representation. Highlights accentuate where details in the letterforms differ between the two versions.](images/thumbnail.svg)
+
+</figure>
+
+In [variable fonts](/glossary/variable_fonts), the [grade axis](/glossary/grade_axis) allows for a level of granular control to create the optimal reading experience.

knowledge/glossary/terms/grade/term.textproto

@@ -0,0 +1,4 @@
+name: "Grade"
+excerpt: "An attempt to keep type appearing consistent across different media, or in certain contexts."
+related_lessons: "exploring_typefaces_with_multiple_weights_or_grades"
+related_lessons: "choosing_typefaces_that_have_optical_sizes"

knowledge/glossary/terms/grade_axis/content.md

@@ -0,0 +1,16 @@
+
+“Grade” (`GRAD` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). Changing [grade](/glossary/grade) allows us to finesse the style from lighter to heavier in typographic [color](/glossary/color) by varying [stroke](/glossary/stroke) thicknesses (or other forms) without any changes to the [type](/glossary/type)’s overall [width](width), inter-letter spacing, or [kerning](/glossary/kerning)—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:
+
+| Default: 0 | Min: -1000 | Max: 1000 | Step: 1 |
+
+Negative grade makes the style lighter, while positive grade makes it heavier. The units are the same as in the weight (`wght`) axis.
+
+<figure>
+
+![Two side-by-side type specimens of the word INSERT, each shown with a variable axis represented beneath as a horizontal slider. The first specimen, with the slider most of the way to the left to represent a lower value on the axis, INSERT. The second specimen, with the slider most of the way to the right to represent a higher value on the axis, INSERT.](](images/thumbnail.svg)
+
+</figure>
+
+In line with the current CSS spec, all custom axes should be referenced in UPPERCASE (only the officially registered variable axes should appear in lowercase). Also, when using the Google Fonts API, the uppercase axes have to appear first in the URL.

knowledge/glossary/terms/grade_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Grade axis (GRAD)"
+excerpt: "An axis found in some variable fonts. Changing grade allows us to finesse the style from lighter to heavier in typographic color."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/glossary/terms/greek_script/content.md

@@ -0,0 +1,12 @@
+
+Greek script is the writing system used for the Greek language. It should not be confused with the erroneously used “Greek” [placeholder text](/glossary/placeholder_text).
+
+<figure>
+
+![A Greek text specimen set in four different typefaces. The text reads “Μια νέα και συναρπαστική λήψη της παραδοσιακής κουζίνας στο κέντρο της πόλης”, which in English translates as, “A new and exciting take on traditional cuisine in the city center.” ](images/thumbnail.svg)
+
+</figure>
+
+The first [typefaces](/glossary/typeface) for the Greek script appeared in the 15th century. The [lowercase](/glossary/uppercase_lowercase) letters closely followed key scribal hands of the period, while the capitals retained their inscriptional roots. Over time Greek typefaces evolved to maintain elements of their cursive roots in the lowercase, while developing a wider range of typographically appropriate forms.
+
+The original [Cyrillic script](/glossary/cyrillic) was based on uppercase Greek [letterforms](/glossary/letterform).

knowledge/glossary/terms/greek_script/term.textproto

@@ -0,0 +1,4 @@
+name: "Greek script"
+excerpt: "The writing system used for the Greek language, not be confused with the erroneously used “Greek” placeholder text."
+related_lessons: "language_support_in_fonts"
+related_lessons: "choosing_reliable_typefaces"

knowledge/glossary/terms/hierarchy/content.md

@@ -0,0 +1,10 @@
+
+Hierarchy refers to the overall structure of a document and the relationship between elements within the [text](/glossary/text). A heading placed above a paragraph gives meaning and context to that paragraph, and implies a hierarchy to the text as a whole. Different levels of headings (in HTML, `h1`, `h2`, `h3`, etc.) further delineate hierarchy within sections of the text.
+
+<figure>
+
+![An article-like layout, with each element wrapped in a bounding box, from the level-one heading that serves as a heading for the entire content, to the level-two heading that relates to the second paragraph, to the pullquote off to one side.](images/thumbnail.svg)
+
+</figure>
+
+As [typographers](/glossary/typographer), our role is to further enhance the meaning and understanding of a text’s hierarchy by applying suitable [typographic treatments](/glossary/typography) to each element.

knowledge/glossary/terms/hierarchy/term.textproto

@@ -0,0 +1,4 @@
+name: "Hierarchy"
+excerpt: "The overall structure of a document and the relationship between elements within the text."
+related_lessons: "introducing_weights_styles"
+related_lessons: "the_foundations_of_web_typography"

knowledge/glossary/terms/homoglyph/content.md

@@ -0,0 +1,14 @@
+
+A homoglyph is a [glyph](/glossary/glyph) with a design that can appear indistinguishable from—or least very similar to—another glyph with a separate meaning.
+
+An uppercase I, lowercase l, and numeral 1 can appear near-identical in some typefaces, which presents a [legibility](/glossary/legibility_readability) problem. If the wrong character is used, it can confuse screen reading software and cause potential issues with searching and sorting. In some typefaces, there can be too subtle a distinction between different [dashes](/glossary/dashes) and the minus [character](/glossary/character).
+
+<figure>
+
+![Various examples of glyphs that appear to be homoglyphs in one typeface, then rendered again in another typeface that intentionally varies their design: Hyphens and minus symbols in one example; “Il1” characters in another. Also shown: An English-language sentence using the “H” character and a Greek-language sentence using the identical-but-semantically-different “Η” character.](images/thumbnail.svg)
+
+</figure>
+
+Homoglyphs also manifest themselves across different languages and/or scripts. An “H” glyph in English is not the same, semantically, as the lookalike “H” glyph (for the “eta” character) in [Greek](/glossary/greek_script), for instance. This isn’t a problem in print, but is an issue for any on-screen type, which is subject to being copied and pasted, and read aloud by screen reading software.
+
+Max Halford has written more on this topic on [Homoglyphs: different characters that look identical](https://maxhalford.github.io/blog/homoglyphs/).

knowledge/glossary/terms/homoglyph/term.textproto

@@ -0,0 +1,3 @@
+name: "Homoglyph"
+excerpt: "A glyph with a design that can appear indistinguishable from—or least very similar to—another glyph with a separate meaning."
+related_lessons: "choosing_reliable_typefaces"

knowledge/glossary/terms/italic_axis/content.md

@@ -0,0 +1,16 @@
+
+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:
+
+| Default: 0 | Min: 0 | Max: 1 | Step: 0.1 |
+
+<figure>
+
+![Two side-by-side type specimens of the word “jumpstart”, each shown with a variable axis represented beneath as an on/off switch. The first specimen, with the switch to the left, uses upright or regular forms. The second specimen, with the switch to the right, uses italic forms.](images/thumbnail.svg)
+
+</figure>
+
+Italic is a [type](/glossary/type) [style](/glossary/style) that’s almost always slanted and is designed to create emphasis in [text](/glossary/text). Originally based on semi-cursive forms, italics are a direct contrast to the [upright](/glossary/regular_upright) style. Unlike [obliques](/glossary/oblique), which are slanted versions of the upright forms, italics have a different structure informed by cursive [handwriting](/glossary/handwriting)—with their own nuances.
+
+Because most italic forms are slanted, for variable fonts, the italic axis and the [slant axis](/glossary/slant_axis) are very closely related. For detailed descriptions on how to use both, please see our [“Styling type on the web with variable fonts”](/lesson/styling_type_on_the_web_with_variable_fonts) article.

knowledge/glossary/terms/italic_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Italic axis (ital)"
+excerpt: "An axis found in some variable fonts that turns the font file’s italic parameter on or off."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/glossary/terms/masters/content.md

@@ -0,0 +1,14 @@
+
+A master is a complete set of [glyphs](/glossary/glyph) designed in one particular [style](/glossary/style) within a [type family](/glossary/family_or_type_family_or_font_family). Often, several masters are designed to work together so that intermediate [weights](/glossary/weight) can be made automatically. For example, a Light master and a Bold master can be interpolated to generate a Regular weight.
+
+Although it’s type designers who are most used to working with masters in font editing software, [variable fonts](/glossary/variable_fonts) have the masters embedded, and can generate intermediate instances on demand, according to requests from the end user.
+
+<figure>
+
+![An abstract representation of masters and instances: Two “a” characters rendered in light and heavy weights represent the masters at the top, with multiple “a” characters rendered beneath, indicating the full range of weights created as instances.](images/thumbnail.svg)
+
+</figure>
+
+It’s possible to create a typeface with many weights using two masters at the extreme ends—perhaps a master for the Hairline weight and a master for the Black weight—but, in practice, an extra master is often used to fine-tune the middle of the spectrum.
+
+Generally speaking, the more instances desired (i.e. the greater the overall weight variation), the more masters are required.

knowledge/glossary/terms/masters/images/masters_2.svg

@@ -0,0 +1 @@
+<svg width="1920" height="1080" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M64.736 666.679c16.622 76.312 77.697 112.58 153.253 112.58 77.823 0 133.735-40.045 133.735-120.135 0-86.89-71.023-111.068-132.098-127.691-97.467-26.444-150.357-51.251-150.357-129.83 0-69.512 52.134-121.646 142.802-121.646 101.875 0 136.631 55.156 144.943 108.801h-16.497c-9.067-55.156-50.371-95.956-130.712-95.956-69.386 0-125.928 37.022-125.928 108.801 0 58.808 30.223 87.519 136.002 115.474 67.874 18.26 147.209 46.09 147.209 140.536 0 80.845-53.645 134.491-152.624 134.491-91.298 0-152.498-48.356-165.343-125.927l15.615.502Zm142.802 194.936V218h14.229v643.615h-14.229Z" fill="#D2E3FC"/><path d="M547.767 660.257c10.955 53.141 53.267 80.089 104.142 80.089 65.23 0 99.105-26.191 99.105-79.207 0-44.704-22.037-72.786-106.031-95.956-113.335-31.86-156.654-70.017-156.654-144.188 0-81.727 67.875-133.483 157.41-133.483 123.031 0 160.808 72.282 166.349 124.29h-69.134c-9.444-36.141-31.985-70.393-98.223-70.393-63.719 0-86.512 33.622-86.512 71.526 0 42.942 22.793 66.742 106.283 88.15 122.653 32.867 158.416 83.238 158.416 151.869 0 91.801-66.742 142.172-173.906 141.668-102.883 0-163.705-56.919-171.387-134.868l70.142.503Zm81.475 202.744V236.889h44.075v626.112h-44.075ZM1038.51 653.584c9.19 43.949 42.19 71.148 91.3 71.148 58.93 0 82.86-28.332 82.86-64.977 0-40.297-20.65-61.705-95.71-83.238-121.768-35.134-161.436-78.075-161.436-151.113 0-87.016 75.556-138.52 165.726-138.52 127.31 0 168.36 67.873 174.15 130.711h-93.81c-6.68-26.193-20.78-59.94-81.1-59.94-53.02 0-70.39 30.474-70.39 57.926 0 37.779 19.77 53.519 100.74 76.438 115.22 32.111 155.52 77.823 155.52 156.528 0 96.838-72.91 146.201-180.46 145.949-111.82 0-174.909-58.304-181.709-141.542l94.319.63Zm44.7-335.344v-77.698h79.72v77.698h-79.72Zm4.29 536.324V750.926h80.21v103.638h-80.21Z" fill="#3C4043"/><path d="M1590.4 639.481a51.475 51.475 0 0 0 18.96 33.572 51.492 51.492 0 0 0 36.95 11.005c21.91 0 34-10.578 34-26.444 0-18.889-12.59-28.712-65.73-41.557-149.6-36.267-181.34-92.178-181.34-169.246 0-86.134 64.22-163.705 209.29-163.705 125.93 0 207.78 50.371 213.07 151.113h-161.69c-3.78-22.667-14.35-42.438-47.6-42.438-19.64 0-32.49 8.311-32.49 25.186 0 19.77 17.38 25.185 71.78 39.289 166.98 43.067 184.36 109.683 183.6 175.291-1.51 108.046-86.13 163.706-222.89 163.706-158.67 0-219.87-72.536-224.4-155.648l168.49-.124Zm2.27-331.568V243.69h105.77v64.223h-105.77Zm0 537.081v-71.778h105.77v71.778h-105.77Z" fill="#D2E3FC"/><path d="M805.5 91.37a5 5 0 0 0 0-10v10ZM51.465 82.834a5 5 0 0 0 0 7.071l31.82 31.82a5 5 0 1 0 7.07-7.071L62.071 86.37l28.284-28.285a5 5 0 1 0-7.07-7.07l-31.82 31.82ZM805.5 81.37H55v10h750.5v-10ZM951 999.084a5 5 0 1 1 0-10v10Zm916.54-8.535a5.005 5.005 0 0 1 0 7.071l-31.82 31.82a5.016 5.016 0 0 1-7.08 0 5.003 5.003 0 0 1 0-7.07l28.29-28.286-28.29-28.284a5.005 5.005 0 0 1 0-7.071 5.012 5.012 0 0 1 7.08 0l31.82 31.82ZM951 989.084h913v10H951v-10Z" fill="#1A73E8"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h1920v1080H0z"/></clipPath></defs></svg>

knowledge/glossary/terms/masters/term.textproto

@@ -0,0 +1,5 @@
+name: "Masters"
+excerpt: "A complete set of glyphs designed in one particular style within a type family, used to create intermediate weights."
+related_lessons: "introducing_weights_styles"
+related_lessons: "exploring_typefaces_with_multiple_weights_or_grades"
+related_lessons: "introducing_variable_fonts"

knowledge/glossary/terms/monospace_axis/content.md

@@ -0,0 +1,14 @@
+
+“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:
+
+| Default: 0 | Min: 0 | Max: 1 | Step: 0.01 |
+
+<figure>
+
+![Two side-by-side type specimens of the word “image”, each shown with a variable axis represented beneath as a horizontal slider. The first specimen, with the slider most of the way to the left to represent a lower value on the axis, shows proportional letterforms. The second specimen, with the slider most of the way to the right to represent a higher value on the axis, shows monospaced forms, where each glyph takes up the same amount of horizontal space.](images/thumbnail.svg)
+
+</figure>
+
+In line with the current CSS spec, all custom axes should be referenced in UPPERCASE (only the officially registered variable axes should appear in lowercase). Also, when using the Google Fonts API, the uppercase axes have to appear first in the URL.

knowledge/glossary/terms/monospace_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Monospace axis (MONO)"
+excerpt: "An axis found in some variable fonts that adjusts the glyphs from a proportional width to a fixed width."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/glossary/terms/optical_size_axis/content.md

@@ -0,0 +1,33 @@
+
+Optical size (controlled with `font-optical-sizing` or `font-variation-setting: ‘opsz’ VALUE` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). It controls the [font](INSERT_URL) file’s [optical size](INSERT_URL) optimizations.
+
+The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
+
+| Default: 14 | Min: 6 | Max: 144 | Step: 0.1 |
+
+<figure>
+
+![Two side-by-side type specimens of the word “glaze”, each shown with a variable axis represented beneath as a horizontal slider. The first specimen, with the slider most of the way to the left to represent a lower value on the axis, shows a small (or body-like) optical size. The second specimen, with the slider most of the way to the right to represent a higher value on the axis, shows a large (or display-like) optical size, with a shorter x-height and greater stroke contrast.](images/thumbnail.svg)
+
+</figure>
+
+Optical sizes in a variable font are different versions of a [typeface](INSERT_URL) optimized for use at singular specific sizes, such as 14 pt or 144 pt. Small (or [body](/glossary/body)) optical sizes tend to have less [stroke](/glossary/stroke) [contrast](/glossary/contrast), more open spacing, and taller [x-heights](/glossary/x_height) than those of their large (or display) counterparts.
+
+The concept is that the numeric value for this axis should match the rendered font size in typographic points (1/72nd of an inch) in print, although browsers instead match it to the CSS px unit, since they have no concept of physical size. A new CSS attribute was introduced to go along with it: `font-optical-sizing`. The default is `auto` (or we can force it to `none` if we’d prefer to turn it off), and this is supported behavior in all modern browsers.
+
+<pre>
+body {
+  font-optical-sizing: auto;
+}
+</pre>
+
+Alternatively, we can set an explicit value by using `font-variation-settings`, like so:
+
+<pre>
+body {
+  font-variation-settings: 'opsz' 16;
+}
+h1 {
+  font-variation-settings: 'opsz' 48;
+}
+</pre>

knowledge/glossary/terms/optical_size_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Optical size axis (opsz)"
+excerpt: "An axis found in some variable fonts that controls the font file’s optical size optimizations."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/glossary/terms/overshoot/content.md

@@ -0,0 +1,12 @@
+
+In [type design](/glossary/type_designer), an overshoot is the part of a [letterform](/glossary/letterform) that extends above or below the vertical dimensions of flatter [glyphs](/glossary/glyph). In the [Latin script](/glossary/latin), common [characters](/glossary/character) with overshoots incorporated into their design include the [lowercase](/glossary/uppercase_lowercase) “o”, which slightly extends above the [x-height](/glossary/x_height) and below the [baseline](/glossary/baseline), and the apex of the uppercase “A”, which extends above the [cap height](/glossary/cap_height).
+
+The purpose of these overshoots is to create the optical illusion that all letterforms are aligned, whether their tops and bottoms are angled, curved, or flat. Without overshoots, our eyes interpret these characters as appearing shorter than the rest.
+
+<figure>
+
+![The characters “A”, “v”, and “o”, set alongside horizontal lines to indicate cap height, x-height, and baseline, with the overshoots accentuated.](images/thumbnail.svg)
+
+</figure>
+
+In practice, there are many elements of a [typeface](/glossary/typeface)’s design that could be considered overshoots, such as the cupped [serifs](/glossary/serif) present on some [old style](/glossary/humanist_old_style) serif typefaces.

knowledge/glossary/terms/overshoot/images/thumbnail.svg

@@ -0,0 +1 @@
+<svg width="1920" height="1080" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="#D2E3FC" d="M50 331h1818.73v10H50zM50 142h1818.73v10H50zM50 853h1818.73v10H50z"/><path d="M204.512 799.479c-.763 3.052-1.145 5.341-1.145 6.867 0 8.774 6.677 15.451 20.029 20.029 13.353 4.578 34.909 8.584 64.666 12.018V863H50v-24.607c29.758-5.342 51.313-10.492 64.666-15.452 13.734-4.959 22.318-12.78 25.752-23.462l212.883-644.372c7.63-8.393 16.977-16.023 28.041-22.89 11.445-7.249 24.416-14.879 38.914-22.891l240.351 690.153c3.816 11.063 11.255 19.647 22.319 25.751 11.445 6.105 28.995 10.492 52.648 13.163V863H494.078v-24.607c25.943-1.526 44.828-4.388 56.654-8.584 11.827-4.579 17.741-11.446 17.741-20.602 0-3.052-.573-6.295-1.717-9.728l-65.238-191.137H268.033l-63.521 191.137Zm178.547-536.786-97.858 294.145h198.576L383.059 262.693Zm682.731 566.543c-9.53 24.417-35.29 41.394-77.251 50.932L799.691 394.314c-3.434-10.3-9.919-18.121-19.457-23.462-9.538-5.723-24.226-10.873-44.065-15.452v-24.607h220.895V355.4c-25.18 3.434-42.729 7.058-52.649 10.873-9.919 3.434-14.878 8.775-14.878 16.024 0 3.052.953 7.058 2.861 12.017l140.782 366.823 132.19-366.823c1.52-4.196 2.29-8.011 2.29-11.445 0-7.249-4.39-12.78-13.16-16.596-8.78-3.815-24.99-7.439-48.65-10.873v-24.607h184.84V355.4c-16.02 3.815-27.85 7.249-35.48 10.301-7.63 3.052-13.54 6.677-17.74 10.873-3.81 4.197-7.05 10.11-9.72 17.74l-161.96 434.922Zm520.77 50.932c-47.31 0-89.09-11.636-125.33-34.908-35.86-23.654-63.71-55.892-83.55-96.713-19.46-41.203-29.19-87.748-29.19-139.633 0-49.978 11.83-97.667 35.48-143.066 23.66-45.782 55.32-82.597 95-110.448 40.06-27.85 83.36-41.775 129.9-41.775 46.93 0 88.32 11.827 124.19 35.48 36.24 23.273 64.09 55.51 83.55 96.713 19.84 41.203 29.75 87.748 29.75 139.633 0 49.978-12.01 97.667-36.05 143.067-24.03 45.399-56.08 82.024-96.14 109.875-39.68 27.85-82.21 41.775-127.61 41.775Zm5.72-503.594c-54.94 0-94.62 19.457-119.03 58.371-24.04 38.533-36.06 90.991-36.06 157.373 0 38.533 8.59 75.158 25.76 109.875 17.55 34.336 39.29 62.187 65.24 83.551 25.94 20.983 50.74 31.475 74.39 31.475 52.27 0 91.18-18.885 116.74-56.655 25.56-37.769 38.34-90.418 38.34-157.945 0-38.914-8.2-75.73-24.6-110.447-16.41-35.099-37.58-63.14-63.53-84.123-25.56-20.983-51.31-31.475-77.25-31.475Z" fill="#D2E3FC"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="340" y="95" width="1368" height="810"><path fill="#C4C4C4" d="M1462 863h246v42h-246zM886 863h246v42H886zM1462 289h246v42h-246zM340 95h104v47H340z"/></mask><g mask="url(#b)"><path d="M204.512 799.479c-.763 3.052-1.145 5.341-1.145 6.867 0 8.774 6.677 15.451 20.029 20.029 13.353 4.578 34.909 8.584 64.666 12.018V863H50v-24.607c29.758-5.342 51.313-10.492 64.666-15.452 13.734-4.959 22.318-12.78 25.752-23.462l212.883-644.372c7.63-8.393 16.977-16.023 28.041-22.89 11.445-7.249 24.416-14.879 38.914-22.891l240.351 690.153c3.816 11.063 11.255 19.647 22.319 25.751 11.445 6.105 28.995 10.492 52.648 13.163V863H494.078v-24.607c25.943-1.526 44.828-4.388 56.654-8.584 11.827-4.579 17.741-11.446 17.741-20.602 0-3.052-.573-6.295-1.717-9.728l-65.238-191.137H268.033l-63.521 191.137Zm178.547-536.786-97.858 294.145h198.576L383.059 262.693Zm682.731 566.543c-9.53 24.417-35.29 41.394-77.251 50.932L799.691 394.314c-3.434-10.3-9.919-18.121-19.457-23.462-9.538-5.723-24.226-10.873-44.065-15.452v-24.607h220.895V355.4c-25.18 3.434-42.729 7.058-52.649 10.873-9.919 3.434-14.878 8.775-14.878 16.024 0 3.052.953 7.058 2.861 12.017l140.782 366.823 132.19-366.823c1.52-4.196 2.29-8.011 2.29-11.445 0-7.249-4.39-12.78-13.16-16.596-8.78-3.815-24.99-7.439-48.65-10.873v-24.607h184.84V355.4c-16.02 3.815-27.85 7.249-35.48 10.301-7.63 3.052-13.54 6.677-17.74 10.873-3.81 4.197-7.05 10.11-9.72 17.74l-161.96 434.922Zm520.77 50.932c-47.31 0-89.09-11.636-125.33-34.908-35.86-23.654-63.71-55.892-83.55-96.713-19.46-41.203-29.19-87.748-29.19-139.633 0-49.978 11.83-97.667 35.48-143.066 23.66-45.782 55.32-82.597 95-110.448 40.06-27.85 83.36-41.775 129.9-41.775 46.93 0 88.32 11.827 124.19 35.48 36.24 23.273 64.09 55.51 83.55 96.713 19.84 41.203 29.75 87.748 29.75 139.633 0 49.978-12.01 97.667-36.05 143.067-24.03 45.399-56.08 82.024-96.14 109.875-39.68 27.85-82.21 41.775-127.61 41.775Zm5.72-503.594c-54.94 0-94.62 19.457-119.03 58.371-24.04 38.533-36.06 90.991-36.06 157.373 0 38.533 8.59 75.158 25.76 109.875 17.55 34.336 39.29 62.187 65.24 83.551 25.94 20.983 50.74 31.475 74.39 31.475 52.27 0 91.18-18.885 116.74-56.655 25.56-37.769 38.34-90.418 38.34-157.945 0-38.914-8.2-75.73-24.6-110.447-16.41-35.099-37.58-63.14-63.53-84.123-25.56-20.983-51.31-31.475-77.25-31.475Z" fill="#1A73E8"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h1920v1080H0z"/></clipPath></defs></svg>

knowledge/glossary/terms/overshoot/term.textproto

@@ -0,0 +1,5 @@
+name: "Overshoot"
+excerpt: "The part of a letterform that extends above or below the vertical dimensions of flatter glyphs."
+related_lessons: "an_overview_of_latin_type_anatomy"
+related_lessons: "exploring_x_height_the_em_square"
+related_lessons: "choosing_a_suitable_line_height"

knowledge/glossary/terms/placeholder_text/content.md

@@ -0,0 +1,10 @@
+
+[Text](/glossary/text_copy) that is set temporarily in place of actual copy is called “placeholder text” or “dummy text.” It often takes the form of “lorem ipsum”—a sequence of words from a work of classical literature that is deliberately intended to not be read (in modern times). This is often erroneously called “Greeked.” The term can also mean display of placeholder text that is rendered as gray bars to speed rendering of the page.
+
+<figure>
+
+![Two columns of placeholder text: The first uses actual lorem ipsum, and the second uses solid blocks to represent the illusion of type.](images/thumbnail.svg)
+
+</figure>
+
+The purpose of any placeholder text, including lorem ipsum, is to indicate that the text is not there to be read, which is why it’s used in design mockups, where the viewer should be focussing on the overall design, and in type specimens, where the reader should be focussing on the [characters](/glossary/character)’ personality and design, and overall [typographic color](color).

knowledge/glossary/terms/placeholder_text/term.textproto

@@ -0,0 +1,4 @@
+name: "Placeholder text"
+excerpt: "Text that is set temporarily in place of actual copy, intended to not be read."
+related_lessons: "why_care_about_typography"
+related_lessons: "choosing_reliable_typefaces"

knowledge/glossary/terms/script_writing_system/content.md

@@ -0,0 +1,12 @@
+
+A script is a collective way of describing a writing system used by multiple languages (and shouldn’t be confused with the [“script” classification](/glossary/script_typeface_style) of [typefaces](/glossary/typeface)). For instance, although English, French, German, Norwegian, and Portuguese are distinct languages—with their own alphabets, conventions, and [diacritic](/glossary/diacritic_accent_marks) usage—they all use the [Latin](/glossary/latin) script.
+
+<figure>
+
+![A montage of multiple scripts from around the world.](images/thumbnail.svg)
+
+</figure>
+
+Other writing systems include [Greek](/glossary/greek_script) (upon which Latin is based), [Cyrillic](/glossary/cyrillic) (originally based on uppercase Greek forms), Arabic, Korean, Indic scripts South and South East Asia, Han characters, and the traditional scripts of Africa.
+
+The combination of a script and a set of conventions for a particular language is referred to as an orthography.

knowledge/glossary/terms/script_writing_system/term.textproto

@@ -0,0 +1,5 @@
+name: "Script (writing system)"
+excerpt: "A collective way of describing a writing system used by multiple languages, not to be confused with the “script” classification of typefaces."
+related_lessons: "language_support_in_fonts"
+related_lessons: "choosing_reliable_typefaces"
+related_lessons: "an_overview_of_latin_type_anatomy"

knowledge/glossary/terms/slant_axis/content.md

@@ -0,0 +1,16 @@
+
+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](oblique) [styles](/glossary/style).
+
+The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
+
+| Default: 0 | Min: -90 | Max: 90 | Step: 1 |
+
+<figure>
+
+![Two side-by-side type specimens of the word phrase “lean-to”, each shown with a variable axis represented beneath as a horizontal slider. The first specimen, with the slider most of the way to the right to represent a higher value on the axis, shows upright forms. The second specimen, with the slider more to the left to represent a low-to-mid value on the axis, shows more slanted forms.](images/thumbnail.svg)
+
+</figure>
+
+Oblique [characters](/glossary/character) follow the structure of the [upright](/glossary/regular_upright) styles, while [italics](/glossary/italic) have a different structure, typically informed by cursive [writing](/glossary/handwriting). Obliques are not necessarily merely [digitally slanted](/lesson/introducing_weights_styles)—optical corrections are often made to avoid distortions and an incorrect distribution of weight. Generally, obliques are less common than italics.
+
+For variable fonts, the [italic axis](/glossary/italic_axis) and the slant axis are very closely related. For detailed descriptions on how to use both, please see our [“Styling type on the web with variable fonts”](/lesson/styling_type_on_the_web_with_variable_fonts) article.

knowledge/glossary/terms/slant_axis/term.textproto

@@ -0,0 +1,3 @@
+name: "Slant axis (slnt)"
+excerpt: "An axis found in some variable fonts that controls the font file’s slant parameter for oblique styles."
+related_lessons: "INSERT_RELATED_LESSONS_AS_MANY_AS_NEEDED"

knowledge/glossary/terms/softness_axis/content.md

@@ -0,0 +1,16 @@
+
+“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:
+
+| Default: 0 | Min: 0 | Max: 100 | Step: 0.01 |
+
+In the [Fraunces](https://fonts.google.com/specimen/Fraunces) [typeface](/glossary/typeface), the softness axis can turn the sharpness and [high-contrast](/glossary/contrast) [serifs](/glossary/serif) into bubble-like forms, and at its softest, the typeface starts to resemble the style of typefaces such as Souvenir or Bookman.
+
+<figure>
+
+![Two side-by-side type specimens of the word “cream”, each shown with a variable axis represented beneath as a horizontal slider. The first specimen, with the slider most of the way to the left to represent a lower value on the axis, show sharper, high-contrast forms. The second specimen, with the slider most of the way to the right to represent a higher value on the axis, is softer, with rounded edges.](images/thumbnail.svg)
+
+</figure>
+
+In line with the current CSS spec, all custom axes should be referenced in UPPERCASE (only the officially registered variable axes should appear in lowercase). Also, when using the Google Fonts API, the uppercase axes have to appear first in the URL.

knowledge/glossary/terms/softness_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Softness axis (SOFT)"
+excerpt: "An axis found in some variable fonts. At the end of this axis, letterforms become more soft and rounded."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/glossary/terms/superscript_subscript/content.md

@@ -0,0 +1,18 @@
+
+Superscript is [text](/glossary/text) formatted to appear smaller than the surrounding text and is usually aligned slightly above the top of the regular [type](/glossary/type); subscript is similar, but aligned slightly below the baseline. In English, superscript is commonly used to add references (for footnotes), copyright or trademark symbols, and in equations for scientific and mathematical texts. Subscript is mainly reserved for chemical compounds.
+
+<figure>
+
+![Montage: A paragraph with a superscript reference to a footnote, a heading with a superscript trademark, and a chemical formula with subscript atomic numbers.](images/thumbnail.svg)
+
+</figure>
+
+Superscript and subscript can be easily applied to text with controls in most user interfaces, from word processors to design applications.
+
+<figure>
+
+![An approximation of the superscript/subscript options often found in applications’ user interfaces.](images/superscript_subscript_2.svg)
+
+</figure>
+
+Although it’s possible for software to synthesize the smaller sizes, it’s best to use the correct superscript and subscript [glyphs](/glossary/glyph) in a [font](/glossary/font) file, if they exist—much like [avoiding faux small caps](/lesson/choosing_type/choosing_reliable_typefaces).

knowledge/glossary/terms/superscript_subscript/term.textproto

@@ -0,0 +1,4 @@
+name: "Superscript & subscript"
+excerpt: "Text formatted to appear smaller than the surrounding text, usually aligned slightly above the top (super) or bottom (sub) of regular type."
+related_lessons: "breaking_the_rules"
+related_lessons: "choosing_reliable_typefaces"

knowledge/glossary/terms/weight_axis/content.md

@@ -0,0 +1,27 @@
+
+Weight (`wght` in CSS) is an axis found in many 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:
+
+| Default: 400 | Min: 1 | Max: 1000 | Step: 1 |
+
+<figure>
+
+![Two side-by-side type specimens of the word “thicken”, each shown with a variable axis represented beneath as a horizontal slider. The first specimen, with the slider most of the way to the left to represent a lower value on the axis, shows a light weight with thin strokes. The second specimen, with the slider most of the way to the right to represent a higher value on the axis, shows a heavy weight with thick strokes.](images/thumbnail.svg)
+
+</figure>
+
+Weight is the overall thickness of a [typeface](/glossary/typeface)’s [strokes](/glossary/stroke) in any given font. The most common weights are [regular](/glossary/regular_upright) and [bold](/glossary/bold), but weights can cover extremes from the very light to the very heavy. With the weight axis in variable fonts, the number of instances or weights is effectively unlimited.
+
+In CSS, we can assign a variable weight property to an element of our choosing:
+
+<pre>
+p {
+  font-weight: 350;
+}
+strong {
+  font-weight: 780;
+}
+</pre>
+
+Unlike in non-variable fonts, the `font-weight` values no longer have to be declared in units of 100. Rather than have body copy set in a regular weight, which would usually sit at 400, we can set it a little lighter, at 350. Similarly, whereas `strong` text would usually be set in a bold weight, most often with a value of 700, we’re setting it at 780: heavier than a bold, but not quite as heavy as an extra bold.

knowledge/glossary/terms/weight_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Weight axis (wght)"
+excerpt: "An axis found in some variable fonts that controls the font file’s weight parameter."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/glossary/terms/width_axis/content.md

@@ -0,0 +1,27 @@
+
+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:
+
+| Default: 100 | Min: 25 | Max: 200 | Step: 0.1 |
+
+<figure>
+
+![Two side-by-side type specimens of the word “spacious”, each shown with a variable axis represented beneath as a horizontal slider. The first specimen, with the slider most of the way to the left to represent a lower value on the axis, shows a very condensed version, taking up very little horziontal space. The second specimen, with the slider most of the way to the right to represent a higher value on the axis, is very wide.](images/thumbnail.svg)
+
+</figure>
+
+Width is the result of how much horizontal space is taken up by a [typeface](/glossary/typeface)’s [characters](/glossary/character). A [condensed](/glossary/condensed_narrow_compressed) face takes up considerably less space than a [wide](/glossary/wide_extended) one.
+
+In CSS, we can assign a variable width to an element of our choosing using the `font-stretch` property. (Despite the name, note that the type is never literally “stretched” by browsers. This property name was chosen to make the concept more accessible to a general audience.)
+
+<pre>
+p {
+  font-stretch: 50%;
+}
+strong {
+  font-stretch: 193%;
+}
+</pre>
+
+Here, our text will be quite narrow—50% is what the type designer has decided is half of the regular (100%) width—and the `strong` text will be almost twice the width of the regular. Width values are always above 0, with 100% being the regular width.

knowledge/glossary/terms/width_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Width axis (wdth)"
+excerpt: "An axis found in some variable fonts that controls the font file’s width parameter."
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/glossary/terms/wonky_axis/content.md

@@ -0,0 +1,16 @@
+
+“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:
+
+| Default: 0 | Min: 0 | Max: 1 | Step: 1 |
+
+In the [Fraunces](INSERT_URL) [typeface](/glossary/typeface), setting wonky to “on” (1) introduces the quirkier leaning of the lowercase n/m/h upright characters, or the bulbous flags of the lowercase b/d/h/k/l italic characters. In static fonts, wonky is also available as an [OpenType stylistic set](/glossary/stylistic_sets).
+
+<figure>
+
+![Two side-by-side type specimens of the two-word phrase “song key”, each shown with a variable axis represented beneath as an on/off switch. The first specimen, with the switch to the left, uses the default forms. The second specimen, with the switch to the right, modified the “s”, “n”, and “k” to use a more unusual, off-kilter design.](images/thumbnail.svg)
+
+</figure>
+
+In line with the current CSS spec, all custom axes should be referenced in UPPERCASE (only the officially registered variable axes should appear in lowercase). Also, when using the Google Fonts API, the uppercase axes have to appear first in the URL.

knowledge/glossary/terms/wonky_axis/term.textproto

@@ -0,0 +1,5 @@
+name: "Wonky axis (WONK)"
+excerpt: "An axis found in some variable fonts that controls the substitution of “wonky” forms.
+related_lessons: "introducing_variable_fonts"
+related_lessons: "designing_with_variable_fonts_in_desktop_apps"
+related_lessons: "styling_type_on_the_web_with_variable_fonts"

knowledge/modules/choosing_type/lessons/a_checklist_for_choosing_type/content.md

@@ -0,0 +1,231 @@
+Every article in [our “Choosing type” section](/module/choosing_type) aims to be a useful guide on a specific aspect of choosing type. For this article, we’re condensing all of that information into one handy checklist—a checklist that can be referenced every single time we ever need to choose a [typeface](/glossary/typeface). Whether you’re selecting the first typeface for a new project, [pairing](/topics/pairing_type) a secondary typeface after the primary selection has been made, updating a brand with something new that retains the feel of the original, or anything in between, this checklist can act as a universal guide.
+
+We’ll start off with the checklist itself—which is also [available on GitHub](https://github.com/elliotjaystocks/choosing-type-checklist/blob/main/checklist.md)—and then spend some time diving into each part of it.
+
+- 1. The typeface suits the purpose of the project
+-- 1a. Its personality will prompt the appropriate emotional response(s) from our audience
+-- 1b. Its design fits the intended use
+- 2. The typeface’s design is comprehensive
+-- 2a. It has enough multi-language support
+-- 2b. It contains legible details
+-- 2c. It has at least the basic weights and styles
+-- 2d. Even better: It has alternate glyphs
+-- 2e. Even better: It has additional weights and styles (or grades)
+-- 2f. Even better: It has multiple widths
+-- 2g. Even better: It has different optical sizes
+- 3. The font files are reliable
+-- 3a. All of the design features checked above are actually included in the font files being used
+-- 3b. The fonts are properly spaced
+- 4. The fonts are usable in the situation(s) required
+-- 4a. If serving as a secondary typeface to a primary choice, there’s a suitable balance between distinction and harmony
+-- 4b. We have, or our client has, the appropriate font license(s)
+
+Let’s explore each item on that list in a little more depth.
+
+## 1. The typeface suits the purpose of the project
+
+It might sound obvious to say that our choice of typeface should suit the purpose of our project, but there are plenty of examples in the wild of designers using typefaces that just don’t work. So how do we tell what type does and doesn’t work? Let’s pick it apart:
+
+### 1a. Its personality will prompt the appropriate emotional response(s) from our audience
+
+The emotional response to the shape of [letterforms](/glossary/letterform) is a very personal experience; when readers first see type, they react to it in an emotional way before anything else.
+
+<figure>
+
+![A montage of different typefaces embodying different characteristics.](images/a_checklist_for_choosing_type_1.svg)
+
+</figure>
+
+Readers needn’t know anything about type to have an emotive response to it. It’s fair to say that most people have a subliminal awareness of historical and cultural trends in design, of which type has played a part. This means we can use some of these conventions to our advantage—as long as we’re aware of how those associations might differ around the globe and change from audience to audience.
+
+Note that although it can be useful to consider emotive considerations as a way of making an initial selection, be sure to follow the rest of this checklist for the more practical ones.
+
+Comic Sans is perfect for setting children’s activity timetables that are displayed in a school playground. It’s perhaps not as appropriate for announcing scientific breakthroughs.
+
+<figure>
+
+![A press release for a scientific announcement, typeset in Comic Sans.](images/a_checklist_for_choosing_type_2.svg)
+
+</figure>
+
+Read more in our article [“Emotive considerations for choosing typefaces”](/lesson/emotive_considerations_for_choosing_typefaces)
+
+### 1b. Its design fits the intended use
+
+An elaborate [script](/glossary/script_typeface_style) typeface, full of flourishes and personality, might look great for a brand’s logo, but is unlikely to work well for [body text](/glossary/body). [Monospaced](/glossary/monospaced) fonts should probably be the only ones considered for typesetting code. Although we might not be aware of all a typeface’s end uses immediately, there are some we can be mindful of.
+
+<figure>
+
+![“The Thing” set very large in a horror-style typeface, then the same typeface used for a paragraph body copy, in which it appears hard to read.](images/a_checklist_for_choosing_type_3.svg)
+<figcaption>[Creepster](https://fonts.google.com/specimen/Creepster).</figure>
+
+</figure>
+
+## 2. The typeface’s design is comprehensive
+
+Before we get into the specifics of actual font files, we need to consider the details in the design of the typeface itself. Has the [type designer](/glossary/type_designer) provided support for multiple languages, included legible details, and made the minimum [weights](/glossary/weight) and [styles](/glossary/style) necessary? Beyond that, does the typeface contain [alternate glyphs](/glossary/alternates), more weights and styles, different [widths](/glossary/width), and perhaps even [optical sizes](/glossary/optical_sizes)?
+
+Let’s explore each in turn and, for detail, be sure to read our article [“Choosing reliable typefaces”](/lesson/choosing_reliable_typefaces)
+
+### 2a. It has enough multi-language support
+
+There’s no point falling in love with a typeface and using it for a brand if it doesn’t contain that one non-[Latin](/glossary/latin) [character](/glossary/character) we need for a regional office address in the website’s footer—it’ll get substituted, stand out, and stop the brand from looking professional.
+
+While a small [glyph](/glossary/glyph) set might be fine for a logo, it’ll soon fall apart if we try to use such a limited typeface for our main text—especially if we’re working on a digital product that allows for user input, or any website powered by a content management system.
+
+<figure>
+
+![“Schöne Grüße aus Kärnten” set in a handwritten-style typeface. The glyphs with diacritics are missing from the font and are instead rendered in a fallback font—one that’s very different in style and proportion from the intended typeface.](images/a_checklist_for_choosing_type_4.svg)
+<figcaption>The glyphs with diacritics are missing from the font and are instead rendered in a fallback font—one that’s very different in style and proportion from the intended typeface.</figcaption>
+
+</figure>
+
+### 2b. It contains legible details
+
+To state that type should be legible is obvious, of course. But, even so, in many popular typefaces, [some glyphs are remarkably similar](/glossary/homoglyph). And, because this similarity leads to potential ambiguity over what characters we’re reading, their design can be detrimental to the overall [legibility](/glossary/legibility_readability) of text set in these typefaces.
+
+When selecting a typeface—especially a [sans serif](/glossary/sans_serif)—it’s useful to assess the similarities between the uppercase “I”, lowercase “l”, and numeral “1” characters. Because the underlying structure of these letters is very close, it’s up to the type designer to distinguish them from one another.
+
+<figure>
+
+![Various examples of glyphs that appear to be homoglyphs in one typeface, then rendered again in another typeface that intentionally varies their design: Hyphens and minus symbols in one example; “Il1” characters in another. Also shown: An English-language sentence using the “H” character and a Greek-language sentence using the identical-but-semantically-different “Η” character.](images/a_checklist_for_choosing_type_5.svg)
+
+</figure>
+
+### 2c. It has at least the basic weights and styles
+
+It’s entirely possible for a typeface to be suitable for a project—especially something like a logo—even if it has only one weight. However, to be usable in most scenarios, having a range of weights and styles is preferable. [Regular](/glossary/regular_upright), [italic](/glossary/italic), and [bold](/glossary/bold) (and bold italic) cover the bases, but the more weights a typeface has, the more flexibility is given to the designer. If they’re contained in a variable font, which offers options in between the usual weights and styles, even better.
+
+<figure>
+
+![[A montage of Regular, Italic, Bold, and Bold Italic  weights and styles.](images/a_checklist_for_choosing_type_6.svg)
+<figcaption>[Source Serif Pro](https://fonts.google.com/specimen/Source+Serif+Pro).</figure>
+
+</figure>
+
+Read more in our article [“Introducing weights & styles”](/lesson/introducing_weights_styles)
+
+### 2d. Even better: It has alternate glyphs
+
+The default characters we see in a typeface aren’t necessarily the only options available to us. Alternate glyphs are often created by type designers to provide a broader palette of typographic possibilities beyond what’s available in the “normal” styles.
+
+While sometimes these are available as separate sibling families, such as Montserrat and Montserrat Alternates, they’re typically made available to us as [OpenType](/glossary/open_type) features within a single font file.
+
+There’s so much typographic power to unlock via OpenType if the features exist within the font: From swash characters that add flourish to your [display](/glossary/display) type, to [fractions](/glossary/fractions) that enable legible recipe ingredients; from proper small caps that prevent abbreviations from appearing to shout at the reader, to intentional control over [the different flavors of numerals](/glossary/numerals_figures); an understanding of OpenType is arguably one of the greatest tools a designer can have.
+
+<figure>
+
+![A montage of OpenType features: The four different flavors of numerals, stylistic sets, fractions, and contextual alternates.](images/thumbnail.svg)
+
+Read more in our articles [“Introducing alternate glyphs”](/lesson/introducing_alternate_glyphs) and [“Implementing OpenType features on the web”](/lesson/implementing_open_type_features_on_the_web)
+
+### 2e. Even better: It has additional weights and styles (or grades)
+
+With most typefaces offering regular, bold, italic, and bold italic weights and styles, it’s reasonable to ask why we might need yet more variation. Those four are usually enough to convey emphasis and hierarchy, especially when paired with other typographic elements, such as changes in font size.
+However, having multiple weights—if not multiple styles—allows far greater flexibility when typesetting large amounts of text, with different typographic elements.
+
+<figure>
+
+![On the left, a heading and paragraph using Bold and Regular weights, respectively. On the right, larger text set in two more extreme weight differences.](images/a_checklist_for_choosing_type_8.svg)
+<figcaption>[Lato](https://fonts.google.com/specimen/Lato) and [Epilogue](https://fonts.google.com/specimen/Epilogue).</figcaption>
+
+</figure>
+
+Read more in our article [“Exploring typefaces with multiple weights or grades”](/lesson/exploring_typefaces_with_multiple_weights_or_grades)
+
+### 2f. Even better: It has multiple widths
+
+An often-overlooked variation within a single type family is width. From a [narrow](/glossary/condensed_narrow_compressed) typeface that allows us to fit more words per line, to an [extra wide](/glossary/wide_extended) face that adds personality, multiple widths offer the typographer more ways to work with type without the need to use more than one family.
+
+Like weights, different widths share the typeface’s skeletal structure, meaning that there’s consistency across all widths, even at the extreme ends of the spectrum. Try combining an expanded width for playful titles, a normal width for body text, and a condensed width for headings:
+
+<figure>
+
+![Three different widths of the same typeface used for three different elements.](images/a_checklist_for_choosing_type_9.svg)
+<figcaption>Different widths of [Encode Sans](https://fonts.google.com/specimen/Encode+Sans)</figcaption>
+
+</figure>
+
+Read more in our article [“Exploring width in type”](/lesson/exploring_width_in_type)
+
+### 2g. Even better: It has different optical sizes
+
+Optical sizing refers to the practice of type foundries creating slightly different versions of a typeface intended to be used at different sizes. Generally speaking, small (body or caption) optical sizes tend to have less [stroke](/glossary/stroke) [contrast](/glossary/contrast), larger [x-heights](/glossary/x_height), wider characters, and more open spacing. Their large (or [display](/glossary/display)) counterparts have refined features and tighter spacing—characteristics that would hinder their readability at small sizes.
+
+If a project requires the use of just one typeface, it can be useful to employ different optical sizes for different scenarios, allowing the type to remain consistent across huge billboard ads and tiny website captions, each tweaked to look right in each scenario.
+
+<figure>
+
+![On the left, text set in four different optical sizes at the intended font sizes for each. On the right, a close-up of each optical size, set at the same font size to emphasize the difference between each.](images/a_checklist_for_choosing_type_10.svg)
+<figcaption>Manipulating the `opsz` variable axis in Amstelvar.</figcaption>
+
+</figure>
+
+Some foundries present their different optical sizes with names such as text (or caption), deck, headline, and display — although it’s worth remembering that such finite distinctions are blurred when using variable fonts. A variable font with an optical size axis can offer a smooth range of choices all the way from text to display.
+
+Read more in our article [“Choosing typefaces that have optical sizes”](/lesson/choosing_typefaces_that_have_optical_sizes)
+
+## 3. The font files are reliable
+
+Having made a sensible (or adventurous!) typeface choice based on everything above, it’s important to ensure that all of those features are available in the font files we’ll be using — and ensure that all features are consistent across the font family.
+
+### 3a. All of the design features checked above are actually included in the font files being used.
+
+Even if we know that these features exist, the particular font file we’re using might not necessarily include the glyphs we need.
+
+There are a number of reasons this could be the case, such as a “lite” or non-“pro” version of the font that’s available at a lower price, or perhaps a version that’s coming from a content delivery network over which we have no control. [Web fonts](/glossary/web_fonts) sold directly from a foundry website aren’t necessarily the same versions that appear on font delivery services such as Google Fonts or Adobe Fonts, so double-check the completeness of your font file.
+
+<figure>
+
+![An abstract depiction of font files being subset.](images/a_checklist_for_choosing_type_11.svg)
+
+</figure>
+
+Read more in our article [“OpenType features in practice”](/lesson/open_type_features_in_practice)
+
+### 3b. The fonts are properly-spaced
+
+While rare, it’s possible to have a font that checks all of our boxes, but lacks decent spacing, which means that it could still look terrible once we start actually setting text with it. Professional fonts should be properly spaced, and they should also contain [kerning pair data](/glossary/kerning_kerning_pairs) that tweaks the spacing between certain glyphs.
+
+<figure>
+
+![The word “readable” with poor spacing, showing some characters too close and others too far away form each other.](images/a_checklist_for_choosing_type_12.svg)
+
+</figure>
+
+## 4. The fonts are usable in the situation(s) required
+
+As well as features being technically present in the files, there are a couple more final considerations when it comes to [type pairing](INSERT_URL) and font licensing:
+
+### 4a. If serving as a secondary typeface to a primary choice, there’s a suitable balance between distinction and harmony
+
+The single biggest challenge we face when pairing type is choosing a secondary typeface that’s different enough from our primary choice, but not too different. Jason Santa Maria, in his book, “On Web Typography,” refers to this as the balance between distinction and harmony:
+
+“[...] you need to choose typefaces that don’t compete too much with each other, but aren’t so similar as to be indistinguishable. [...] When in doubt […] pair a serif and a sans serif. This provides you with what are likely the two most flexible kinds of typefaces, and nearly guarantees you have sufficient variation.”
+
+<figure>
+
+![“If only there was a way we could emphasize it” set in a modern, semi-flared sans serif typeface, except for the word “emphasize”, set in a calligraphic face.](images/a_checklist_for_choosing_type_13.svg)
+<figcaption>Marcellus and Meddon. Although the x-height doesn’t match, note how the lavish ascenders and descenders makes up for it, and the stroke weight appears approximately the same.</figcaption>
+
+</figure>
+
+In music, harmonious sounds are created by notes with significant separation. Combining notes that are too close results in dissonance—just as with type.
+
+Read more in our article [“Pairing typefaces”](/lesson/pairing_typefaces)
+
+### 4b. We have, or our client has, the appropriate font license(s)
+
+Whether fonts are sold or given away for free, each has an associated [license](/glossary/licensing) (and we should have a copy of the license for each font we have a copy of.) When we use a font, that implies we've agreed to those license terms.
+
+We should always check that the end use of our type is covered by the font’s license. There's often a different license required for web fonts to desktop fonts, or even usage in apps and ebooks. The price to license a font for a personal logo may differ from the cost of using it on a news website served to millions of users and it is up to us or our client to confirm the correct usage.
+
+Because price can vary depending on the fonts we choose and their end uses, affordability should also be another constraint to help us narrow our choices.
+
+<figure>
+
+![An abstract representation of licensing, showing a cycle with the foundry or font distributor on one side, and the user on one side, with money and fonts moving between them. Inside, a licensing document.](images/a_checklist_for_choosing_type_14.svg)
+
+</figure>
+
+Read more in our glossary term [“Licensing”](/glossary/licensing)

knowledge/modules/choosing_type/lessons/a_checklist_for_choosing_type/images/a_checklist_for_choosing_type_14.svg

@@ -0,0 +1 @@
+<svg width="1920" height="1080" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="50" y="50" width="1820" height="980"><path fill="#C4C4C4" d="M50 50h1820v980H50z"/></mask><g mask="url(#a)"><path d="m1564.5 592-57.74-100h115.47l-57.73 100ZM1469 383c-5.52 0-10-4.477-10-10s4.48-10 10-10v20Zm105.5-.079V502.005h-20V382.921h20ZM1469 363h85.5v20H1469v-20Zm85.5 19.921c0-.013 0-.012 0 0 0 .01.01.023.01.036.01.026.03.039.03.042v.005c.01 0 .01 0 0-.001a.186.186 0 0 0-.04-.003v-20c10.94 0 20 8.773 20 19.921h-20Z" fill="#D2E3FC"/><path d="M1181 373H496" stroke="#D2E3FC" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/><path d="m348 489 57.735 100h-115.47L348 489Zm103 209c5.523 0 10 4.477 10 10s-4.477 10-10 10v-20Zm-113 .079V578.995h20v119.084h-20ZM451 718h-93v-20h93v20Zm-93-19.921c0 .013.001.012-.001 0-.003-.01-.006-.023-.012-.036a.135.135 0 0 0-.026-.042l-.006-.005.003.001A.205.205 0 0 0 358 698v20c-10.943 0-20-8.773-20-19.921h20Z" fill="#D2E3FC"/><path d="M1424 708H739" stroke="#D2E3FC" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/><path d="M1567.5 753.5c30.25 0 54.75-24.501 54.75-54.75S1597.75 644 1567.5 644s-54.75 24.501-54.75 54.75 24.5 54.75 54.75 54.75Zm0 27.375c-36.55 0-109.5 18.341-109.5 54.75V863h219v-27.375c0-36.409-72.95-54.75-109.5-54.75Z" fill="#3C4043"/><path d="M1044.67 430.3h-50.86c-5.11-14.094-18.494-24.3-34.31-24.3-15.817 0-29.2 10.206-34.31 24.3h-50.857C860.95 430.3 850 441.235 850 454.6v170.1c0 13.365 10.95 24.3 24.333 24.3h170.337c13.38 0 24.33-10.935 24.33-24.3V454.6c0-13.365-10.95-24.3-24.33-24.3Zm-85.17 0c6.691 0 12.166 5.467 12.166 12.15 0 6.682-5.475 12.15-12.166 12.15-6.692 0-12.167-5.468-12.167-12.15 0-6.683 5.475-12.15 12.167-12.15Zm24.333 170.1h-85.167v-24.3h85.167v24.3Zm36.497-48.6H898.666v-24.3h121.664v24.3Zm0-48.6H898.666v-24.3h121.664v24.3Z" fill="#1A73E8"/><path d="M433.75 218.6H406.5c0-30.167-24.389-54.6-54.5-54.6s-54.5 24.433-54.5 54.6h-27.25c-14.988 0-27.25 12.285-27.25 27.3v163.8c0 15.015 12.262 27.3 27.25 27.3h163.5c14.987 0 27.25-12.285 27.25-27.3V245.9c0-15.015-12.263-27.3-27.25-27.3Zm-109 54.6c0 7.507-6.131 13.65-13.625 13.65S297.5 280.707 297.5 273.2v-27.3h27.25v27.3ZM352 191.3c14.987 0 27.25 12.285 27.25 27.3h-54.5c0-15.015 12.262-27.3 27.25-27.3Zm54.5 81.9c0 7.507-6.132 13.65-13.625 13.65-7.494 0-13.625-6.143-13.625-13.65v-27.3h27.25v27.3Z" fill="#3C4043"/><path d="M1302.44 394.35h45.12L1325 334.182l-22.56 60.168ZM1412.2 269h-174.4c-11.99 0-21.8 9.81-21.8 21.8v174.4c0 11.99 9.81 21.8 21.8 21.8h174.4c11.99 0 21.8-9.81 21.8-21.8V290.8c0-11.99-9.81-21.8-21.8-21.8Zm-44.15 179.85-12.42-32.7h-61.48l-12.21 32.7h-22.78l55.7-141.7h20.28l55.7 141.7h-22.79ZM664.669 746.375v-79.5c0-10.931-8.934-19.875-19.852-19.875H505.852C494.933 647 486 655.944 486 666.875v79.5c0 10.931 8.933 19.875 19.852 19.875h138.965c10.918 0 19.852-8.944 19.852-19.875Zm-89.335-9.937c-16.477 0-29.778-13.317-29.778-29.813s13.301-29.813 29.778-29.813c16.478 0 29.779 13.317 29.779 29.813s-13.301 29.813-29.779 29.813Zm129.039-59.626v109.313c0 10.931-8.933 19.875-19.852 19.875H515.778v-19.875h168.743V676.812h19.852Z" fill="#FF6D7F"/></g></svg>

knowledge/modules/choosing_type/lessons/a_checklist_for_choosing_type/lesson.textproto

@@ -0,0 +1,17 @@
+name: "A checklist for choosing type"
+authors: "Elliot Jay Stocks"
+reviewers: "Doug Wilson"
+reviewers: "Gerry Leonidas"
+reviewers: "Laurence Penney"
+reviewers: "Rich Rutter"
+reviewers: "Thomas Phinney"
+topics: "essentials"
+topics: "families"
+prev_lessons: "making_sense_of_typographic_classifications"
+next_lessons: "emotive_considerations_for_choosing_typefaces"
+related_terms: "body"
+related_terms: "weight"
+related_terms: "width"
+related_terms: "open_type"
+related_terms: "optical_sizes"
+excerpt: "A simple but thorough checklist to reference every time we need to choose a new typeface, with each item explained in detail."

knowledge/modules/choosing_type/lessons/emotive_considerations_for_choosing_typefaces/lesson.textproto

@@ -10,6 +10,7 @@ reviewers: "Richard Rutter"
 reviewers: "Santiago Orozco"
 topics: "choosing_type"
 topics: "essentials"
+prev_lessons: "a_checklist_for_choosing_type"
 next_lessons: "choosing_reliable_typefaces"
 related_terms: "typeface"
 excerpt: "The emotional response to the shape of letterforms is a very personal experience, and when readers first see type, they react to it in an emotional way before anything else."

knowledge/modules/choosing_type/module.textproto

@@ -1,4 +1,5 @@
 name: "Choosing type"
+lessons: "a_checklist_for_choosing_type"
 lessons: "emotive_considerations_for_choosing_typefaces"
 lessons: "choosing_reliable_typefaces"
 lessons: "exploring_typefaces_with_multiple_weights_or_grades"

knowledge/modules/introducing_type/lessons/an_overview_of_latin_type_anatomy/content.md

@@ -0,0 +1,26 @@
+
+When talking about [type](/glossary/type), it’s useful to have some familiarity with the terminology used to describe the different parts of a [typeface](/glossary/typeface)’s design. Although it’s true that some terms are very specific, and might only seem relevant when discussing certain parts of a letter (shoulder, spine, foot, etc.), many are essential when we consider [typography](/glossary/typography) as a whole, such as the vertical proportions ([x-height](/glossary/x_height), [baseline](/glossary/baseline), and [cap height](/glossary/cap_height)), or shapes that influence further typographic adjustments ([ascenders, descenders](/glossary/ascenders_descenders), [small caps](/glossary/small_caps), etc.).
+
+<figure>
+
+![A type specimen with horizontal lines in the background, illustrating the font’s vertical metrics: ascender, cap height, x-height, baseline, descender.](images/an_overview_of_latin_type_anatomy_1.svg)
+
+</figure>
+
+We often discuss vertical proportions (or vertical metrics) when talking about optimal typesetting. In multiple lines of text, one of the most important roles played by an appropriate [line height](/glossary/line_height_leading) is to ensure that there’s no clash between descenders in one line and ascenders in the following line. The varying proportions in different typefaces — and in particular their x-heights — [can cause type to appear larger or smaller than others](lesson/exploring_x_height_the_em_square), even when the font size isn’t changed.
+
+<figure>
+
+![A type specimen with parts of the letterforms accentuated to highlight examples of uppercase and lowercase forms, a diacritic, a serif, a ligature, and a small cap.](images/an_overview_of_latin_type_anatomy_2.svg)
+
+</figure>
+
+The Latin script has two cases, which means that each letter has an [uppercase and lowercase](/glossary/uppercase_lowercase) form. Some common building blocks of [characters](/glossary/character) include varying flavors of [diacritics or accent marks](/glossary/diacritic_accent_marks), commonly used in Latin alphabets other than English (although they do appear in some loan words, such as “café” or “naïve”). [Serifs](/glossary/serif) are the marks or lines that can appear at the end of a character’s stroke, and lend their name to the collective name for typefaces that use serifs in their design. A [ligature](/glossary/ligature) is a [glyph](/glossary/glyph) that combines the shapes of certain sequences of characters into a new form that can make for a more harmonious reading experience. As in the illustration, the character sequence of “f” and “i” is often replaced with a “fi” ligature. [Small caps](/glossary/small_caps) are uppercase letterforms with their proportions adjusted for setting within lowercase type, used for acronyms, single words, or a few words at the start of a chapter.
+
+<figure>
+
+![A type specimen with parts of the letterforms accentuated to highlight examples of the counter, diagonal stroke, ink trap, terminal, and stem.](images/thumbnail.svg)
+
+</figure>
+
+There are many elements that make up whole letterforms. A counter refers to the opening of a round letterform such as a “c”. A diagonal stroke is quite literally a diagonal stroke, found on characters such as “y”, “v”, and “k”. [Ink traps](/glossary/ink_trap) are exaggerated incisions where strokes join, intended to lighten parts that would otherwise look too heavy. With the evolution of print technology and on-screen use of type, ink traps in modern typefaces often serve a more stylistic purpose rather than their traditional intent of trapping ink, although they do still make corners look sharper. Bold fonts at small sizes benefit especially, and at large sizes the effect makes for a distinctive stylistic choice. A stem is a letterform’s main vertical stroke. A [terminal](/glossary/terminal) refers to the ending of the stroke. The way a type designer treats terminals is a key factor in the overall typeface design, and has significant effects on legibility as well as stylistic expression.

knowledge/modules/introducing_type/lessons/an_overview_of_latin_type_anatomy/lesson.textproto

@@ -0,0 +1,16 @@
+name: "An overview of Latin type anatomy"
+authors: "Elliot Jay Stocks"
+reviewers: "Doug Wilson"
+reviewers: "Gerry Leonidas"
+reviewers: "Laurence Penney"
+reviewers: "Rich Rutter"
+topics: "essentials"
+topics: "families"
+prev_lessons: "why_care_about_typography"
+next_lessons: "making_sense_of_typographic_classifications"
+related_terms: "x_height"
+related_terms: "ascenders_descenders"
+related_terms: "line_height_leading"
+related_terms: "diacritic_accent_marks"
+related_terms: "ligature"
+excerpt: "A visual guide to the essential building blocks of typefaces that use the Latin script."

knowledge/modules/introducing_type/lessons/why_care_about_typography/lesson.textproto

@@ -10,6 +10,7 @@ reviewers: "Viviana Monsalve"
 reviewers: "Yves Peters"
 topics: "essentials"
 topics: "language_support"
+next_lessons: "an_overview_of_latin_type_anatomy"
 next_lessons: "making_sense_of_typographic_classifications"
 next_lessons: "introducing_weights_styles"
 next_lessons: "choosing_reliable_typefaces"

knowledge/modules/introducing_type/module.textproto

@@ -1,5 +1,6 @@
 name: "Introducing type"
 lessons: "why_care_about_typography"
+lessons: "an_overview_of_latin_type_anatomy"
 lessons: "making_sense_of_typographic_classifications"
 lessons: "exploring_punctuation"
 lessons: "introducing_weights_styles"

knowledge/modules/using_type/lessons/choosing_a_suitable_line_height/lesson.textproto

@@ -11,6 +11,7 @@ reviewers: "Trent Walton"
 reviewers: "Yves Peters"
 topics: "essentials"
 prev_lessons: "exploring_x_height_the_em_square"
+prev_lessons: "language_support_in_fonts"
 next_lessons: "understanding_measure_line_length"
 related_terms: "line_height_leading"
 related_terms: "measure_line_length"

knowledge/modules/using_type/lessons/language_support_in_fonts/content.md

@@ -0,0 +1,189 @@
+
+Each written language uses its own set of [characters](/glossary/character). And if our UI uses multiple languages, then our [typography](/glossary/typography) should vary depending on the language.
+
+[Scripts, or writing systems](/glossary/script_writing_system), are groups that contain characters used by one or more languages. For instance, although English, French, German, Norwegian, and Portuguese are distinct languages—with their own alphabets, conventions, and [diacritic](/glossary/diacritic_accent_marks) usage—they all use the [Latin script](/glossary/latin). Other writing systems include Greek (upon which Latin is based), Cyrillic, Arabic, Korean, Thai, the various scripts of Africa, the closely related Devanagari and Bengali, and the Han characters in use in various Asian languages, including Chinese and also Japanese.
+
+<figure>
+
+![A montage of multiple scripts from around the world.](images/language_support_in_fonts_1.svg)
+
+</figure>
+
+Word length can vary greatly across languages, even those that use the same [glyphs](/glossary/glyph), such as English and German.
+
+<figure>
+
+![English text set alongside a translated German version, showing how German words are longer and therefore take up more vertical space.](images/thumbnail.svg)
+
+</figure>
+
+English is often shorter than other European languages. For instance, German has many compound words that are longer, requiring more lines or different line spacing settings.
+
+## Alignment & direction
+Some writing systems, such as Arabic and Hebrew, are displayed with characters appearing from right to left.
+
+<figure>
+
+![Left-to-right English text set alongside right-to-left Hebrew.](images/language_support_in_fonts_3.svg)
+
+</figure>
+
+UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored to ensure content is easy to understand. For more information, please read [Bidirectionality on Material Design](https://material.io/design/usability/bidirectionality.html#mirroring-elements).
+
+Many writing systems might require different [line-height](/glossary/line_height_leading) and spacing adjustments. Line length, line spacing, and character spacing can vary within a script that is used for many languages.
+
+## Height
+
+Many writing systems require more vertical space than English, so our UI should provide sufficient vertical space to account for this. For instance, while Vietnamese is written with Latin, it has accents that add height to some letters, such as Ớ.
+
+<figure>
+
+![The word “New” set in different languages and scripts: English, Latin Vietnamese, Devanagari Marathi, Bengali, and Khmer.](images/language_support_in_fonts_4.svg)
+
+</figure>
+
+## Vertical typesetting
+
+Vertical typesetting, though less commonly used, can display characters vertically instead of horizontally.
+
+The typography of China, Japan, and Korea is typically monospaced, which means each letter occupies the same amount of space. It is often set left-to-right, top-to-bottom. It can also be set vertically: top-to-bottom and right-to-left.
+
+More than one typeface may need to be used in the same UI to display multilingual content when each language uses a different writing system.
+
+<figure>
+
+![Type set in three columns: Korean, Chinese (Simplified), and Japanese. In each column, type is set left-to-right and top-to-bottom, then vertically, top-to-bottom and right-to-left.](images/language_support_in_fonts_5.svg)
+<figcaption>Above: Type set left-to-right and top-to-bottom. Below: Type set vertically, top-to-bottom and right-to-left.</figcaption>
+
+</figure>
+
+For ease of internationalization, Google has categorized languages into three categories: Latin or Latin-like, tall, and dense.
+
+**Latin or Latin-like typefaces:** The languages of Western, Central, and Eastern Europe and many parts of Africa are typically written in the Latin script. Vietnamese is a notable exception in that, while it uses a localized form of the Latin writing system, its accented glyphs can be much taller than those found in Western European languages. The Greek and Cyrillic writing systems are very similar to Latin in their vertical proportions.
+
+**Tall typefaces:** These are the scripts that require extra line height to accommodate larger glyphs, including South and Southeast Asian and Middle-Eastern languages, like Arabic, Hindi, Telugu, Thai, and Vietnamese.
+
+**Dense typefaces:** These scripts, like the “Tall typefaces,” also require extra line height to accommodate larger glyphs, but additionally take into account the higher density of characters in languages such as Chinese, Japanese, and Korean.
+
+## Noto
+
+In Android, Noto fonts are the default typefaces for all languages not covered by the original Roboto. The set is designed to be visually harmonious across languages and scripts, with compatible heights and stroke thicknesses. The project covers over 150 scripts, each defined in Unicode.
+
+For more about Noto, please visit [the Noto page on Google Fonts](INSERT_URL).
+
+Noto Chinese, Japanese, and Korean (CJK) typefaces each have seven weights that match the original Roboto, with the same weight settings as English.
+
+
+<figure>
+
+![A small specimen of Chinese (Simplified) text and Japanese text.](images/language_support_in_fonts_6.svg)
+
+</figure>
+
+In CJK scripts, line height is slightly larger than Latin-based characters.
+
+<figure>
+
+![Two paragraphs, one at a large font size and the other small, set in Chinese (Simplified) text and Japanese text.](images/language_support_in_fonts_7.svg)
+
+</figure>
+
+## Tall script considerations
+
+Noto supports tall scripts used in South and Southeast Asian and Middle Eastern languages, including Arabic, Hindi, and Thai. Try using the Regular weight, as the Medium weight is unavailable in Noto.
+
+<figure>
+
+![Thai text and Devanagari text.](images/language_support_in_fonts_8.svg)
+
+</figure>
+
+In Thai and Devanagari, the tall script line height is slightly larger than Latin-based characters.
+
+<figure>
+
+![Thai text and Devanagari text.](images/language_support_in_fonts_9.svg)
+
+</figure>
+
+## Language categories reference
+
+|Code | Description | Category |
+| --- | --- | --- |
+| af | Afrikaans | Latin or Latin-like |
+| am | Amharic | Latin or Latin-like |
+| ar | Arabic (Modern Standard) | Tall |
+| az | Azerbaijani | Latin or Latin-like |
+| bg | Bulgarian | Latin or Latin-like |
+| bn | Bengali | Tall |
+| ca | Catalan | Latin or Latin-like |
+| cs | Czech | Latin or Latin-like |
+| cy | Welsh| Latin or Latin-like |
+| da | Danish | Latin or Latin-like |
+| de | German | Latin or Latin-like |
+| el | Greek | Latin or Latin-like |
+| en | English (US) | Latin or Latin-like |
+| en-GB | English (UK) | Latin or Latin-like |
+| es | Spanish (European) | Latin or Latin-like |
+| es-419 | Spanish (Latin American) | Latin or Latin-like |
+| et | Estonian | Latin or Latin-like |
+| eu | Basque | Latin or Latin-like |
+| fa | Persian | Tall |
+| fi | Finnish | Latin or Latin-like |
+| fil | Filipino | Latin or Latin-like |
+| fr | French (European) | Latin or Latin-like |
+| fr-CA | French (Canadian) | Latin or Latin-like |
+| gl | Galician | Latin or Latin-like |
+| gu | Gujarati | Tall |
+| hi | Hindi | Tall |
+| hr | Croatian | Latin or Latin-like |
+| hu | Hungarian | Latin or Latin-like |
+| hy | Armenian | Latin or Latin-like |
+| id | Indonesian | Latin or Latin-like |
+| is | Icelandic | Latin or Latin-like |
+| it | Italian | Latin or Latin-like |
+| iw | Hebrew | Latin or Latin-like |
+| ja | Japanese | Dense
+| ka | Georgian | Latin or Latin-like |
+| kk | Kazakh | Latin or Latin-like |
+| km | Khmer | Tall |
+| kn | Kannada | Tall |
+| ko | Korean | Dense
+| ky | Kirghiz | Latin or Latin-like |
+| lo | Lao | Latin or Latin-like |
+| lt | Lithuanian | Latin or Latin-like |
+| lv | Latvian | Latin or Latin-like |
+| mk | Macedonian | Latin or Latin-like |
+| ml | Malayalam | Tall |
+| mn | Mongolian | Latin or Latin-like |
+| mr | Marathi | Tall |
+| ms | Malay | Latin or Latin-like |
+| my | Burmese (Myanmar) | Tall |
+| ne | Nepali | Tall |
+| nl | Dutch | Latin or Latin-like |
+| no | Norwegian (Bokmål) | Latin or Latin-like |
+| pa | Punjabi | Tall |
+| pl | Polish | Latin or Latin-like |
+| pt | Portuguese (Brazilian) | Latin or Latin-like |
+| pt-PT | Portuguese (European) | Latin or Latin-like |
+| ro | Romanian | Latin or Latin-like |
+| ru | Russian | Latin or Latin-like |
+| si | Sinhala | Tall |
+| sk | Slovak | Latin or Latin-like |
+| sl | Slovenian | Latin or Latin-like |
+| sq | Albanian | Latin or Latin-like |
+| sr | Serbian (Cyrillic) | Latin or Latin-like |
+| sr-Latn | Serbian (Latin) | Latin or Latin-like |
+| sv | Swedish | Latin or Latin-like |
+| sw | Swahili | Latin or Latin-like |
+| ta | Tamil | Tall |
+| te | Telugu | Tall |
+| th | Thai | Tall |
+| tr | Turkish | Latin or Latin-like |
+| uk | Ukrainian | Latin or Latin-like |
+| ur | Urdu | Tall |
+| uz | Uzbek | Latin or Latin-like |
+| vi | Vietnamese | Tall |
+| zh-Hans | Chinese (Simplified) | Dense
+| zh-Hant | Chinese (Traditional) | Dense |
+| zu | Zulu | Latin or Latin-like |