From: Elliot Jay Stocks Date: Tue, 18 Oct 2022 15:56:15 +0000 (+0100) Subject: GFK Q3 content bug fixes (#5427) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=673b2594b9105160c41b236e6b0fc87dba27d8e5;p=thirdparty%2Fgoogle%2Ffonts.git GFK Q3 content bug fixes (#5427) * Excerpt for “CJK” * Rel. lesson for “CJK” * related_lessons for “Alphabet” * Excerpt for “Alphabet” * related_lessons for “Designspace” * Excerpt for “Designspace” * related_lessons in “Tofu” * Excerpt for “Tofu” * related_lessons for “Rag” * Excerpt for “Rag” * related_lessons for “Letters” * Excerpt for “Letters” * related_lessons for “Reflow” * Excerpt for “Reflow” * related_lessons for “Emoji” * Excerpt for “Emoji” * Correcting case in `type_history` topic * Revised content for `variable_fonts_are_here` * Revised content for `web_font_comparisons_variable_vs_static` * Revised content for `optimizing_typographic_space_with_variable_fonts` * Revised content for `interactive_animations_with_variable_fonts` * Revised content for `factors_that_influence_the_efficiency_of_variable_web_fonts` * New VF image files from Nick * Turning full GFK URLs into proper internal format * Placing Nick’s new VF illustrations * Excerpt for “Switching...” * Editing placeholder ALT text everywhere * Fixing broken URLs in Nick’s articles * Fixing “legibility” and “readability” URLs in Darrell’s article --- diff --git a/cc-by-sa/knowledge/glossary/terms/alphabet/term.textproto b/cc-by-sa/knowledge/glossary/terms/alphabet/term.textproto index 5d4e345673..fb6a0ba3a4 100644 --- a/cc-by-sa/knowledge/glossary/terms/alphabet/term.textproto +++ b/cc-by-sa/knowledge/glossary/terms/alphabet/term.textproto @@ -1,2 +1,3 @@ -name: "INSERT_TITLE" -excerpt: "INSERT_EXCERPT" +name: "Alphabet" +excerpt: "A writing system in which the elemental speech sounds of a language are represented by a set of graphical units, called letters." +related_lessons: "an_alphabet_for_reading_and_writing" diff --git a/cc-by-sa/knowledge/glossary/terms/cjk/content.md b/cc-by-sa/knowledge/glossary/terms/cjk/content.md index 78e93c2b84..0b6713e1a2 100644 --- a/cc-by-sa/knowledge/glossary/terms/cjk/content.md +++ b/cc-by-sa/knowledge/glossary/terms/cjk/content.md @@ -2,7 +2,7 @@ CJK is the shorthand collective name for the Chinese, Japanese, and Korean writi
-![ALT](images/thumbnail.svg) +![INSERT_ALT](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/cjk/term.textproto b/cc-by-sa/knowledge/glossary/terms/cjk/term.textproto index 5d4e345673..f4fa094d3a 100644 --- a/cc-by-sa/knowledge/glossary/terms/cjk/term.textproto +++ b/cc-by-sa/knowledge/glossary/terms/cjk/term.textproto @@ -1,2 +1,3 @@ -name: "INSERT_TITLE" -excerpt: "INSERT_EXCERPT" +name: "CJK" +excerpt: "The shorthand collective name for the Chinese, Japanese, and Korean writing systems." +related_lessons: "an_introduction_to_hangeul" diff --git a/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md b/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md index 92a1d64f3a..d1e9733ef1 100644 --- a/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md +++ b/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md @@ -2,7 +2,7 @@ Color fonts (also known as chromatic fonts) can use multiple colors in a single
-![ALT](images/thumbnail.svg) +![INSERT_ALT](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/designspace/content.md b/cc-by-sa/knowledge/glossary/terms/designspace/content.md index 6a14d33bc7..963f013f0c 100644 --- a/cc-by-sa/knowledge/glossary/terms/designspace/content.md +++ b/cc-by-sa/knowledge/glossary/terms/designspace/content.md @@ -2,7 +2,7 @@ A designspace (sometimes written as “design space”) is a system specified du
-![ALT](images/thumbnail.svg) +![INSERT_ALT](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/designspace/term.textproto b/cc-by-sa/knowledge/glossary/terms/designspace/term.textproto index 5d4e345673..ca794f1ce9 100644 --- a/cc-by-sa/knowledge/glossary/terms/designspace/term.textproto +++ b/cc-by-sa/knowledge/glossary/terms/designspace/term.textproto @@ -1,2 +1,3 @@ -name: "INSERT_TITLE" -excerpt: "INSERT_EXCERPT" +name: "Designspace" +excerpt: "A system specified during the type design process that controls how a variable font’s appearance changes, via interpolation from the master designs." +related_lessons: "factors_that_influence_the_efficiency_of_variable_web_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/emoji/content.md b/cc-by-sa/knowledge/glossary/terms/emoji/content.md index 288c205cf5..e85201080f 100644 --- a/cc-by-sa/knowledge/glossary/terms/emoji/content.md +++ b/cc-by-sa/knowledge/glossary/terms/emoji/content.md @@ -4,7 +4,7 @@ The emoji are successors to the original smileys, or emoticons: A sequence of pu
-![ALT](images/thumbnail.svg) +![INSERT_ALT](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/emoji/term.textproto b/cc-by-sa/knowledge/glossary/terms/emoji/term.textproto index 5d4e345673..031a68d7b6 100644 --- a/cc-by-sa/knowledge/glossary/terms/emoji/term.textproto +++ b/cc-by-sa/knowledge/glossary/terms/emoji/term.textproto @@ -1,2 +1,3 @@ -name: "INSERT_TITLE" -excerpt: "INSERT_EXCERPT" +name: "Emoji" +excerpt: "A pictogram intended to convey emotional meaning, usually used as a supplement to text in order to clarify intent." +related_lessons: "introducing_color_fonts" diff --git a/cc-by-sa/knowledge/glossary/terms/letters/content.md b/cc-by-sa/knowledge/glossary/terms/letters/content.md index 89fb727630..b5fbdfb359 100644 --- a/cc-by-sa/knowledge/glossary/terms/letters/content.md +++ b/cc-by-sa/knowledge/glossary/terms/letters/content.md @@ -2,7 +2,7 @@ The set of graphical symbols used to represent speech sounds in an [alphabetic](
-![ALT](images/thumbnail.svg) +![INSERT_ALT](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/letters/term.textproto b/cc-by-sa/knowledge/glossary/terms/letters/term.textproto index 5d4e345673..34afe9d952 100644 --- a/cc-by-sa/knowledge/glossary/terms/letters/term.textproto +++ b/cc-by-sa/knowledge/glossary/terms/letters/term.textproto @@ -1,2 +1,4 @@ -name: "INSERT_TITLE" -excerpt: "INSERT_EXCERPT" +name: "Letters" +excerpt: "The set of graphical symbols used to represent speech sounds in an alphabetic writing system." +related_lessons: "an_alphabet_for_reading_and_writing" +related_lessons: "designing_for_learnability" diff --git a/cc-by-sa/knowledge/glossary/terms/parametric_axis/content.md b/cc-by-sa/knowledge/glossary/terms/parametric_axis/content.md index ae328ede11..8aceb6e257 100644 --- a/cc-by-sa/knowledge/glossary/terms/parametric_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/parametric_axis/content.md @@ -3,7 +3,7 @@ A parametric [axis](/glossary/axis_in_variable_fonts) in a [variable font](/glos
-![ALT](images/thumbnail.svg) +![INSERT_ALT](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/rag/content.md b/cc-by-sa/knowledge/glossary/terms/rag/content.md index 3bd580f378..7f110c6901 100644 --- a/cc-by-sa/knowledge/glossary/terms/rag/content.md +++ b/cc-by-sa/knowledge/glossary/terms/rag/content.md @@ -2,7 +2,7 @@ The rag refers to the irregular edge of an unjustified text block. “Ragged rig
-![ALT](images/thumbnail.svg) +![INSERT_ALT](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/rag/term.textproto b/cc-by-sa/knowledge/glossary/terms/rag/term.textproto index 5d4e345673..85988bff76 100644 --- a/cc-by-sa/knowledge/glossary/terms/rag/term.textproto +++ b/cc-by-sa/knowledge/glossary/terms/rag/term.textproto @@ -1,2 +1,4 @@ -name: "INSERT_TITLE" -excerpt: "INSERT_EXCERPT" +name: "Rag" +excerpt: "The irregular edge of an unjustified text block." +related_lessons: "understanding_measure_line_length" +related_lessons: "avoiding_widows_orphans" diff --git a/cc-by-sa/knowledge/glossary/terms/reflow/content.md b/cc-by-sa/knowledge/glossary/terms/reflow/content.md index a8d0ecd4c1..eb4374cb76 100644 --- a/cc-by-sa/knowledge/glossary/terms/reflow/content.md +++ b/cc-by-sa/knowledge/glossary/terms/reflow/content.md @@ -4,7 +4,7 @@ In print, when a document has already been edited and designed, reflow can be pr
-![ALT](images/thumbnail.svg) +![INSERT_ALT](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/reflow/term.textproto b/cc-by-sa/knowledge/glossary/terms/reflow/term.textproto index 5d4e345673..e808bf5ad7 100644 --- a/cc-by-sa/knowledge/glossary/terms/reflow/term.textproto +++ b/cc-by-sa/knowledge/glossary/terms/reflow/term.textproto @@ -1,2 +1,4 @@ -name: "INSERT_TITLE" -excerpt: "INSERT_EXCERPT" +name: "Reflow" +excerpt: "The act of words, or parts of words, moving from one line of type to the line above or below because of a typographic change." +related_lessons: "breaking_the_rules" +related_lessons: "the_foundations_of_web_typography" diff --git a/cc-by-sa/knowledge/glossary/terms/tofu/content.md b/cc-by-sa/knowledge/glossary/terms/tofu/content.md index a3adc5071a..7f7916a48c 100644 --- a/cc-by-sa/knowledge/glossary/terms/tofu/content.md +++ b/cc-by-sa/knowledge/glossary/terms/tofu/content.md @@ -2,7 +2,7 @@ When a character is not present in a font, and no fallback option is available,
-![ALT](images/thumbnail.svg) +![INSERT_ALT](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/tofu/term.textproto b/cc-by-sa/knowledge/glossary/terms/tofu/term.textproto index 5d4e345673..e34004c748 100644 --- a/cc-by-sa/knowledge/glossary/terms/tofu/term.textproto +++ b/cc-by-sa/knowledge/glossary/terms/tofu/term.textproto @@ -1,2 +1,3 @@ -name: "INSERT_TITLE" -excerpt: "INSERT_EXCERPT" +name: "Tofu" +excerpt: "A symbol that has come to be known as “tofu”, displayed when a character is not present in a font and no fallback option is available." +related_lessons: "language_support_in_fonts" diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/content.md b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/content.md index 757e309e02..0a6f7ea036 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/content.md +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/content.md @@ -8,9 +8,9 @@ In designing Hangeul, however, King Sejong found several opportunities to improv Alphabets can differ not only in terms of the designs and functions of individual [letters](/glossary/letters), but also in terms of how the letters are combined to capture human speech. -For example, as you're reading this sentence in English, you'll recognize that the letters are placed one after another, with [spaces](https://fonts.google.com/knowledge/glossary/spaces) and punctuation used to demarcate word boundaries. +For example, as you're reading this sentence in English, you'll recognize that the letters are placed one after another, with [spaces](/glossary/spaces) and punctuation used to demarcate word boundaries. -While these [orthogrpahic](https://fonts.google.com/knowledge/glossary/script_writing_system) conventions may seem intuitive for those who are literate in English, other alphabets use a variety of approaches when cominbing letters into larger units. +While these [orthogrpahic](/glossary/script_writing_system) conventions may seem intuitive for those who are literate in English, other alphabets use a variety of approaches when cominbing letters into larger units. When considering how the letters of Hangeul should be combined, King Sejong ultimately decided that they should be assembled into syllable blocks, with one block equal to one syllable for any word. diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/content.md b/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/content.md similarity index 87% rename from cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/content.md rename to cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/content.md index b764788fbc..b1d714d3b3 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/content.md +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/content.md @@ -2,7 +2,7 @@ In most societies throughout history, the ability to read and write was an exclu In the mid-15th century, King Sejong the Great of Korea publicly expressed his distress with this imbalance of power, recognizing that, without literacy, the majority of his country's citizens had no way to advocate for themselves. -Despite being at the top of the power structure in Korea, King Sejong was determined to solve this problem by designing a revolutionary [alphabet](https://fonts.google.com/knowledge/glossary/alphabet), called Hangeul (See [A Note About Terminology]). +Despite being at the top of the power structure in Korea, King Sejong was determined to solve this problem by designing a revolutionary [alphabet](/glossary/alphabet), called Hangeul (See [A Note About Terminology]). By modern User Experience (UX) standards, Hangeul might be the most user-friendly alphabet ever created, and it's surely the only one to have been purposefully designed with a systematic focus on usability. @@ -23,7 +23,7 @@ Since the invention of writing in Mesopotamia more than 5000 years ago, there ha ![Texts in four scripts.](images/thumbnail.svg) -
A montage of texts written in Sumerian, Egyptian, Chinese, and Meso-American [scripts](https://fonts.google.com/knowledge/glossary/script_writing_system), intended to show the our species' creativity and ingenuity in devising alphabets.
+
A montage of texts written in Sumerian, Egyptian, Chinese, and Meso-American [scripts](/glossary/script_writing_system), intended to show the our species' creativity and ingenuity in devising alphabets.
All the world's subsequent alphabets have, at a minimum, been informed by these early examples, and nearly all have been direct adaptations. @@ -49,7 +49,7 @@ In the next article, we'll explore how rose to meet this challenge. ## A Note About Terminology -For the sake of simplicity, I refer to all [writing systems](https://fonts.google.com/knowledge/glossary/script_writing_system) as [alphabets](https://fonts.google.com/knowledge/glossary/alphabet), and to the graphic symbols of writing systems as [*letters*](https://fonts.google.com/knowledge/glossary/letters), even in cases where these terms are technically incorrect. +For the sake of simplicity, I refer to all [writing systems](/glossary/script_writing_system) as [alphabets](/glossary/alphabet), and to the graphic symbols of writing systems as [*letters*](/glossary/letters), even in cases where these terms are technically incorrect. My goal in doing so is to illustrate the story of Hangeul without having introduce too much linguistic terminology, especially because the main ideas I'd like to share do not depend critically on making distinctions that might otherwise be important to scholars. diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/images/thumbnail.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/lesson.textproto b/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/lesson.textproto similarity index 84% rename from cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/lesson.textproto rename to cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/lesson.textproto index 5ac2e9623a..8de1589f19 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/lesson.textproto +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/lesson.textproto @@ -1,4 +1,4 @@ -name: "Introduction to Hangeul, the Korean alphabet" +name: "An introduction to Hangeul, the Korean alphabet" authors: "Darrell Penta" reviewers: "Cassidy Curtis" reviewers: "Minjoo Ham" diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/content.md b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/content.md index bdac36e614..0fda1df453 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/content.md +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/content.md @@ -6,7 +6,7 @@ Therefore, rather than simply creating a new alphabet, King Sejong understood th ## Making Information Helpful -Learning any alphabet is difficult, in part, because it requires learners to memorize the associations between the alphabet's [letters](https://fonts.google.com/knowledge/glossary/letters) and the sounds or other parts of language that they represent. +Learning any alphabet is difficult, in part, because it requires learners to memorize the associations between the alphabet's [letters](/glossary/letters) and the sounds or other parts of language that they represent. Contributing to difficulty is that these associations, along with other design features of alphabets, tend to be rather arbitrary. @@ -18,9 +18,9 @@ What distinguishes King Sejong from the alphabet creators that came before him w ## Relying on Geometry -One of the first things a person might notice about Hangeul is how [geometrically](https://fonts.google.com/knowledge/glossary/geometric) patterned the letters are. In fact, by comparison to most of the world's alphabets, Hangeul may be the most geometric in nature. +One of the first things a person might notice about Hangeul is how [geometrically](/glossary/geometric) patterned the letters are. In fact, by comparison to most of the world's alphabets, Hangeul may be the most geometric in nature. -In crafting the 28 basic letters of the alphabet (many of which are preserved in the 24 letters of today's Korean alphabet), King Sejong made extensive use of consistent-weight, straight lines, parallel lines, right angles, and circles, emphasizing a natural box-like uniformity that anticipates modern-day [monospacing](https://fonts.google.com/knowledge/glossary/monospaced) principles. +In crafting the 28 basic letters of the alphabet (many of which are preserved in the 24 letters of today's Korean alphabet), King Sejong made extensive use of consistent-weight, straight lines, parallel lines, right angles, and circles, emphasizing a natural box-like uniformity that anticipates modern-day [monospacing](/glossary/monospaced) principles.
@@ -43,7 +43,7 @@ A second feature of Hangeul related to the letter shapes was used to signal a ke In essence, the majority of the alphabet's consonant letters are complex, consisting of multiple lines that meet at right angles or lines that converge in triangular configurations. -The vowel letters, on the other hand, are simpler, consisting of a single vertical or horizontal line, complemented with one or two dots placed together on either side of the line (not [diacritics](https://fonts.google.com/knowledge/glossary/diacritic_accent_marks), but somewhat similar in concept). +The vowel letters, on the other hand, are simpler, consisting of a single vertical or horizontal line, complemented with one or two dots placed together on either side of the line (not [diacritics](/glossary/diacritic_accent_marks), but somewhat similar in concept).
@@ -73,7 +73,7 @@ In particular, he avoided letters that were vertical or horizontal mirror images
Top row showing existing Hangeul letters; bottom row showing mirrored versions that were rejected.
-People who have learned the English alphabet might not be surprised to discover that among the most commonly confused letters are those that seem to be mirrored copies, including the [lowercase](https://fonts.google.com/knowledge/glossary/uppercase_lowercase) letters *d*, *b*, *p*, and *q* (Ehri & Roberts, 2006). +People who have learned the English alphabet might not be surprised to discover that among the most commonly confused letters are those that seem to be mirrored copies, including the [lowercase](/glossary/uppercase_lowercase) letters *d*, *b*, *p*, and *q* (Ehri & Roberts, 2006). Once again, King Sejong's design decision to emphasize letter distinguishability reflects his intentions of making Hangeul as user-friendly as possible. diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/content.md b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/content.md index 632bd459d8..5e5246ffc7 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/content.md +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/content.md @@ -6,11 +6,11 @@ Looking through a modern-day User Experience (UX) lens, we can say that King Sej ## Attention to the Details -Being an alphabet designer is similar in some respects to being a [type designer](https://fonts.google.com/knowledge/glossary/type_designer) or [typographer](https://fonts.google.com/knowledge/glossary/typographer) in that much of the job means focusing on all the small details that define [letters](/glossary/letters), both as individual units and as members of a set. +Being an alphabet designer is similar in some respects to being a [type designer](/glossary/type_designer) or [typographer](/glossary/typographer) in that much of the job means focusing on all the small details that define [letters](/glossary/letters), both as individual units and as members of a set. But there's an important distinction. -While type specialists can manipulate letter details and employ stylistic variations to achieve various effects, including improving [legibility and readability](https://fonts.google.com/knowledge/glossary/legibility_readability) or evoking [emotive responses](https://fonts.google.com/knowledge/choosing_type/emotive_considerations_for_choosing_typefaces), they still need to preserve the basic forms of individual letters; by comparison, an alphabet designer must, ideally, decide how all the small details to should be combined to *create* a set of usable letters. +While type specialists can manipulate letter details and employ stylistic variations to achieve various effects, including improving [legibility](/glossary/legibility) and [readability](/glossary/readability) or evoking [emotive responses](https://fonts.google.com/knowledge/choosing_type/emotive_considerations_for_choosing_typefaces), they still need to preserve the basic forms of individual letters; by comparison, an alphabet designer must, ideally, decide how all the small details to should be combined to *create* a set of usable letters. In the case of King Sejong specifically, the challenge at hand was in how to make these details matter. @@ -18,7 +18,7 @@ It can be easy to overlook the importance of solving this problem, because once But again, by modern UX standards, it's not hard to see why most alphabets fall short on providing useful details to learners. -For example, in a [recent study](https://psycnet.apa.org/record/2018-13691-001) involving college students at a well-known American university, less than 30% of participants could correctly identify the [lowercase](https://fonts.google.com/knowledge/glossary/uppercase_lowercase) "looptail" letter *G* ([g]{style="font-family:\"Times New Roman\";"}) when it was presented in a set that included three other incorrect versions. (Note that the letter *G* has two distinct lowercase allographs, or, in the context of type, [alternates](https://fonts.google.com/knowledge/glossary/alternates): g\|[g]{style="font-family:\"Times New Roman\";"}) +For example, in a [recent study](https://psycnet.apa.org/record/2018-13691-001) involving college students at a well-known American university, less than 30% of participants could correctly identify the [lowercase](/glossary/uppercase_lowercase) "looptail" letter *G* ([g]{style="font-family:\"Times New Roman\";"}) when it was presented in a set that included three other incorrect versions. (Note that the letter *G* has two distinct lowercase allographs, or, in the context of type, [alternates](/glossary/alternates): g\|[g]{style="font-family:\"Times New Roman\";"})
diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/content.md index 75c56ac854..e99d1e83c3 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/content.md @@ -6,7 +6,7 @@ Johannes Gutenberg, some time in the 1440s, found a way, using an ingenious hand
-![ALT](images/GFKhistoftype1_metaltype.svg) +![INSERT_ALT](images/GFKhistoftype1_metaltype.svg)
@@ -18,7 +18,7 @@ The very first fonts in Europe were modeled on contemporary gothic calligraphy
-![ALT](images/GFKhistoftype1_gutenberggothic.svg) +![INSERT_ALT](images/GFKhistoftype1_gutenberggothic.svg)
@@ -30,7 +30,7 @@ Printing soon spread from Germany to neighboring countries, even crossing the Al
-![ALT](images/GFKhistoftype1_earlyroman.svg) +![INSERT_ALT](images/GFKhistoftype1_earlyroman.svg)
@@ -46,7 +46,7 @@ The very earliest roman typefaces still displayed some Gothic characteristics, b
-![ALT](images/GFKhistoftype1_jenson_new.svg) +![INSERT_ALT](images/GFKhistoftype1_jenson_new.svg)
diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_tight_not_touching_style/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_tight_not_touching_style/content.md index b324d5c758..151f1af148 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_tight_not_touching_style/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_tight_not_touching_style/content.md @@ -10,7 +10,7 @@ In the 1960s, the introduction of photo-typesetting made it possible to set type What does scaling have to do with letter spacing? -When you change the font size in a document, the forms of the letters remain the same—they just get bigger or smaller. That’s called linear scaling (“scaling” type simply means enlarging or reducing it). But, because of inherent limitations of the human visual system—which responds in a nonlinear way to changes in scale1— letterforms behave differently at different sizes. Scaling that takes the human eye into account is known as non-linear scaling or [optical sizing](https://fonts.google.com/knowledge/glossary/optical_sizes). (Although, as Tim Ahrens notes, “Optical is not the most appropriate term here, since the issues involved are perceptual and related to human vision more than the laws of optics.”)3 +When you change the font size in a document, the forms of the letters remain the same—they just get bigger or smaller. That’s called linear scaling (“scaling” type simply means enlarging or reducing it). But, because of inherent limitations of the human visual system—which responds in a nonlinear way to changes in scale1— letterforms behave differently at different sizes. Scaling that takes the human eye into account is known as non-linear scaling or [optical sizing](/glossary/optical_sizes). (Although, as Tim Ahrens notes, “Optical is not the most appropriate term here, since the issues involved are perceptual and related to human vision more than the laws of optics.”)3 In the digital age, we’re all accustomed to scalable type: When you create a document, you can make the text any size you like. But if you’ve ever tried to use a display typeface for a footnote, you may have found it difficult to read—the text can be too light overall, details like serifs can be insubstantial or disappear entirely, and the letters can seem to trip over each other. On the other hand, if you’ve ever set a headline in a typeface designed for long-form reading, it may have looked clunky—too heavy, with inelegant details and overly-wide letter spacing. diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/content.md index af5305963f..0d646a21ec 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/content.md @@ -8,7 +8,7 @@ In 1692, during the reign of Louis XIV, the French Royal Academy of Sciences co
-![ALT](images/GFKhistoftype3.svg) +![INSERT_ALT](images/GFKhistoftype3.svg)
@@ -18,7 +18,7 @@ When we say ‘rational’ or ‘rationalized’ with regard to type design, we
-![ALT](images/GFKhistoftype3_bracketedserifs.svg) +![INSERT_ALT](images/GFKhistoftype3_bracketedserifs.svg)
@@ -34,7 +34,7 @@ In the eighteenth century, two other type designers appeared who would leave a l
-![ALT](images/GFKmetaltype3_romananditalicofwilliamcaslon.svg) +![INSERT_ALT](images/GFKmetaltype3_romananditalicofwilliamcaslon.svg)
@@ -44,7 +44,7 @@ After making his fortune in japanning (varnished lacquerware), John Baskerville,
-![ALT](images/GFKhistoftype3_baskerville.svg) +![INSERT_ALT](images/GFKhistoftype3_baskerville.svg)
@@ -54,7 +54,7 @@ Typically, rougher paper requires more pressure from the printing press to ensur
-![ALT](images/GFKhistoftype3_evolutionofstress.svg) +![INSERT_ALT](images/GFKhistoftype3_evolutionofstress.svg)
diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/content.md index fa67dfefe9..d0ac56c612 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/content.md @@ -2,7 +2,7 @@ We can be thankful to the Romans for a number of technological innovations and i
-![ALT](images/GFKhistoftype2_romansquarecapitals.svg) +![INSERT_ALT](images/GFKhistoftype2_romansquarecapitals.svg)
@@ -22,7 +22,7 @@ By the end of the fifteenth century, not only did the cities of the Italian Peni
-![ALT](images/GFKhistoftype2_garamond.svg) +![INSERT_ALT](images/GFKhistoftype2_garamond.svg)
@@ -36,7 +36,7 @@ The sixteenth century also gave us [italic](/glossary/italic). The great Venetia
-![ALT](images/GFKhistoftype2_aldusandgriffoitalic.svg) +![INSERT_ALT](images/GFKhistoftype2_aldusandgriffoitalic.svg)
diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/lesson.textproto index 390404c488..a612ffb6bb 100644 --- a/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/lesson.textproto +++ b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/lesson.textproto @@ -9,4 +9,4 @@ related_terms: "web_font" related_terms: "weight_axis" related_terms: "width_axis" related_terms: "variable_fonts" -excerpt: "INSERT_EXCERPT" +excerpt: "Swapping out our static fonts for variable ones can be a useful way of dipping your toes into this new world. With the overall typographic system tried and tested, it’s just of a case of finessing our typography—and saving some data while we’re at it." diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/content.md b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/content.md index 684476a3e8..84234291bc 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/content.md +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/content.md @@ -1,10 +1,8 @@ -# Factors that influence the efficiency of variable web fonts - -Variable fonts are often more efficient than their static counterparts in terms of both total [file size](https://fonts.google.com/knowledge/) and [server requests](https://fonts.google.com/knowledge/) since they provide a range of stylistic variations from just one font file as opposed to multiple. But what factors are the most critical? Which specific font qualities make the biggest impact on efficiency? +Variable fonts are often more efficient than their static counterparts in terms of both total [file size](/glossary/file_size) and [server requests](https://gigapress.net/reduce-http-requests/) since they provide a range of stylistic variations from just one font file as opposed to multiple. But what factors are the most critical? Which specific font qualities make the biggest impact on efficiency? With so many moving parts involved—for both font technology and web design/development—the most significant factors may change from one project to the next. Having said that, here is a general overview of the most noteworthy aspects involved: -- **What is the quality of the internet connection?** [File sizes](https://fonts.google.com/knowledge/glossary/file_size) are obviously a major factor in optimizing the speed of any web page. However, another factor that is often overlooked is the *number* of files and [server requests](https://fonts.google.com/knowledge/) involved. Depending on the specifics of a visitor’s internet connection and the settings of the server where the files live, it can sometimes be faster to load a single variable font even if its file size is slightly larger than the total size for a matching set of static fonts. +- **What is the quality of the internet connection?** [File sizes](/glossary/file_size) are obviously a major factor in optimizing the speed of any web page. However, another factor that is often overlooked is the *number* of files and [server requests](https://gigapress.net/reduce-http-requests/) involved. Depending on the specifics of a visitor’s internet connection and the settings of the server where the files live, it can sometimes be faster to load a single variable font even if its file size is slightly larger than the total size for a matching set of static fonts. - **How many glyphs are in the fonts?** It’s no surprise that fonts containing more glyphs will have larger file sizes. The increases are typically less severe for variable fonts though than for a set of matching static fonts. @@ -14,17 +12,17 @@ With so many moving parts involved—for both font technology and web design/dev - **How irregular is the typeface?** Different typeface designs require different amounts of font data. A simple sans-serif typeface can be represented with fewer data points than an elaborate serif typeface. These differences affect the compression and efficiency of font file sizes for static and variable fonts differently. -- **How many axes of variation are involved?** Every [axis](https://fonts.google.com/knowledge/glossary/axis_in_variable_fonts) of stylistic variation increases file size requirements. A variable font with both weight and width axes will have a larger file size than if it only offered a single weight axis. It is worth noting, however, that fonts with multiple axes of variation typically provide much more efficiency in terms of potential variants per kilobyte. +- **How many axes of variation are involved?** Every [axis](/glossary/axis_in_variable_fonts) of stylistic variation increases file size requirements. A variable font with both weight and width axes will have a larger file size than if it only offered a single weight axis. It is worth noting, however, that fonts with multiple axes of variation typically provide much more efficiency in terms of potential variants per kilobyte. -- **How many source designs were used to produce the variable font?** Almost all variable fonts work by interpolating multiple underlying [source designs](https://fonts.google.com/knowledge/glossary/masters) that were drawn to be compatible with each other. Some typeface families require more source designs to complete their intended [designspace](https://fonts.google.com/knowledge/), which usually results in larger variable font files. +- **How many source designs were used to produce the variable font?** Almost all variable fonts work by interpolating multiple underlying [source designs](/glossary/masters) that were drawn to be compatible with each other. Some typeface families require more source designs to complete their intended [designspace](https://superpolator.com/designspace.html), which usually results in larger variable font files. -- **How much [hinting](https://fonts.google.com/knowledge/glossary/hinting) data is included in the fonts, if any?** Minimal hinting for typical modern rendering environments will likely require less data than intense hinting for low-resolution screens and old operating systems. +- **How much [hinting](/glossary/hinting) data is included in the fonts, if any?** Minimal hinting for typical modern rendering environments will likely require less data than intense hinting for low-resolution screens and old operating systems. -- **What “flavor” of OpenType font data is used?** Modern variable fonts are generated in the [OpenType](https://fonts.google.com/knowledge/glossary/open_type) font format. But there are two major standards (or “flavors”) for outline data in OpenType—CFF and TTF—each with different implications for font file sizes, among other things. CFF-flavored variable fonts typically have smaller sizes than their TTF-flavored equivalents, but they aren’t supported quite as widely. +- **What “flavor” of OpenType font data is used?** Modern variable fonts are generated in the [OpenType](/glossary/open_type) font format. But there are two major standards (or “flavors”) for outline data in OpenType—CFF and TTF—each with different implications for font file sizes, among other things. CFF-flavored variable fonts typically have smaller sizes than their TTF-flavored equivalents, but they aren’t supported quite as widely. -- **What kind of compression is used for the fonts?** Uncompressed .otf or .ttf fonts will have much larger file sizes before they’ve been converted to the [.woff or .woff2 web font formats](https://fonts.google.com/knowledge/). (Side note: All browsers that support variable fonts also support the .woff2 format, so variable web fonts should almost always be delivered as .woff2 files.) +- **What kind of compression is used for the fonts?** Uncompressed .otf or .ttf fonts will have much larger file sizes before they’ve been converted to the [.woff or .woff2 web font formats](https://en.wikipedia.org/wiki/Web_Open_Font_Format). (Side note: All browsers that support variable fonts also support the .woff2 format, so variable web fonts should almost always be delivered as .woff2 files.) -To see how some of these factors play out in real-world comparisons between static and variable fonts, check out the [tables of web font comparisons](https://fonts.google.com/knowledge/). +To see how some of these factors play out in real-world comparisons between static and variable fonts, check out the [tables of web font comparisons](/lesson/web_font_comparisons_variable_vs_static). Some web font services like Google Fonts incorporate intelligent functionality to detect specifics about a user’s system or a page’s design and serve font data in the most efficient way accordingly. For example, if weight and width axes are available but only weight variants are used, a different font with limited functionality and a smaller file size can be served. Or if a page is being viewed in an environment where hinting data is ignored and is thus irrelevant (as is typically the case in macOS web browsers), a font file can be delivered with all hinting removed to minimize data transfer. These kinds of file optimizations and serving techniques can be impractical (or impossible) to set up on your own without access to the fonts’ original source files, but web font services like Google Fonts include them automatically without any extra effort. diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/images/thumbnail.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/images/thumbnail.svg index 7672f2d520..9273393bcc 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/images/thumbnail.svg +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/images/thumbnail.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md index d2f65190e2..d48af86cf0 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md @@ -1,5 +1,3 @@ -# Interactive animations with variable fonts - Variable fonts allow for seamless, fluid blending between stylistic variants, making them excellent candidates for simple, lightweight animations. Variable font animations can provide subtle effects for user interactions and visual semantics, or they can be used for more dramatic special effects. ## Simple Hover Effects @@ -8,70 +6,69 @@ For a simple example of hover interaction, let’s consider hyperlinks that chan
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/4_1.gif)
-
INSERT_CAPTION
-[Figure #1: Basic hover demo] +
Basic weight change on hover.
The effect is rather sudden, switching between weights instantly on hover. With variable fonts, though, it’s possible smooth the effect using a simple transition:
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/4_2.gif)
-
INSERT_CAPTION
-[Figure #2: Hover demo using the `transition` property] - -Instead of jumping between static weights, the change is continuous. Just be careful not to make animations too long – even one-second animations can feel tedious for quick hover interactions. +
Subtle hover animation with variable fonts.
-## Multiplexed Weight (and Grades) +Instead of jumping between static weights, the change is continuous. Just be careful not to make animations too long—even one-second animations can feel tedious for quick hover interactions. -It’s very common for bolder weights of a typeface to occupy more space, which causes subtle shifts in positioning. For menus and other small pieces of text, such shifts can be minimized by isolating elements from each other in separate containers: +It’s very common for bolder weights of a typeface to occupy more space, which causes subtle shifts in positioning. For menus and other small pieces of text, such shifts can be minimized by isolating elements from each other in separate fixed containers:
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/4_3.gif)
-
INSERT_CAPTION
-[Figure #3: Hover demo of a menu made as a row of separate elements instead of a single line.] +
Hover animation with each element in separate fixed containers to prevent layout shift.
+ +## Multiplexed Weight and Grades -For more demanding situations where shifts in positioning aren’t acceptable at all, you can use “[multiplexed](https://fonts.google.com/knowledge/glossary/multiplexed_duplexed_uniwidth)” fonts, designed specifically to use the same amount of space across a range of variants. When the Regular and Bold weights occupy the same amount of horizontal spacing, the hover effect feels more seamless. It is also crucial for use within paragraphs of body text where layout shifts would be too distracting otherwise. +For more demanding situations where shifts in positioning aren’t acceptable at all, you can use “[multiplexed](/glossary/multiplexed_duplexed_uniwidth)” fonts, designed specifically to occupy the same amount of space across a range of variants. When the Regular and Bold weights occupy the same amount of horizontal spacing, the hover effect feels more seamless. It is also crucial for use within paragraphs of body text where layout shifts would be too distracting otherwise.
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/4_4a.gif)
-
INSERT_CAPTION
-[Figure #4: Hover demo with multiplexed weights.] -On a related note, some variable fonts also offer a “[grade](https://fonts.google.com/knowledge/glossary/grade_axis)” axis separate from (and often in addition to) the standard [weight](https://fonts.google.com/knowledge/glossary/weight_axis) axis. This allows for multiplexed adjustments to a typeface’s apparent weight even if its standard weight axis would otherwise affect spacing. +
-Not all variable fonts offer multiplexed variations, but there is a [growing selection](https://v-fonts.com/tags/C9) available. And it’s worth noting that almost all [monospaced](https://fonts.google.com/knowledge/glossary/monospaced) variable fonts are naturally multiplexed. +![INSERT_ALT](images/4_4b.gif) + +
+
Multiplexed fonts prevent shifts in the layout by maintaining the same width requirements across variants.
+ +On a related note, some variable fonts also offer a “[grade](/glossary/grade_axis)” axis separate from (and often in addition to) the standard [weight](/glossary/weight_axis) axis. This allows for multiplexed adjustments to a typeface’s apparent weight even if its standard weight axis would otherwise affect spacing. + +Not all variable fonts offer multiplexed variations, but there is a [growing selection](https://v-fonts.com/tags/C9) available. And it’s worth noting that almost all [monospaced](/glossary/monospaced) variable fonts are naturally multiplexed. ## Multiplexing Beyond Weight -Multiplexing isn’t limited to just standard variations in weight or grades either. For example, some variable fonts have an adjustable [italic](https://fonts.google.com/knowledge/glossary/italic_axis) axis that doesn’t affect spacing. Other variable fonts may offer multiplexed variations that are much more unusual, allowing for more stylized special effects: +Multiplexing isn’t limited to just standard variations in weight or grades either. For example, some variable fonts have an adjustable [italic](/glossary/italic_axis) axis that doesn’t affect spacing. Other variable fonts may offer multiplexed variations that are much more unusual, allowing for more stylized special effects:
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/4_5.gif)
-
INSERT_CAPTION
-[Figure #5: Hover demo with more experimental, non-registered axes.] +
Multiplexed hover animations with variations other than standard weight.
Finally, for other special interactive effects, keep in mind that `:hover` isn’t limited to just hyperlinks. For example, you can wrap arbitrary elements in their own `span` elements and use that for triggering hover effects. You can also tweak the timing of a transition to make it faster or slower:
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/4_6.gif) -
-
INSERT_CAPTION
-[Figure #6: Hover demo where every letter triggers a fast transition in with a slow transition out.] +
Multiplexed hover effects with more expressive variations, on a letter-by-letter basis.
Interactivity is a virtually infinite space for experience design, and variable fonts offer that much more room for exploration. For more ideas on using variable fonts, see the [other articles listed under the topic of variable fonts](https://fonts.google.com/knowledge/topics/variable_fonts). diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_1.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_1.gif new file mode 100644 index 0000000000..1bb542cbd2 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_1.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_2.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_2.gif new file mode 100644 index 0000000000..f536cb6472 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_2.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_3.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_3.gif new file mode 100644 index 0000000000..fbd547771f Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_3.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4a.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4a.gif new file mode 100644 index 0000000000..731f51247e Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4a.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4b.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4b.gif new file mode 100644 index 0000000000..1d8f7c8d0f Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4b.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_5.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_5.gif new file mode 100644 index 0000000000..86e18b6652 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_5.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_6.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_6.gif new file mode 100644 index 0000000000..e27e21fa59 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_6.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/thumbnail.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/thumbnail.svg index 7672f2d520..a907e84d13 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/thumbnail.svg +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/thumbnail.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/content.md b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/content.md index 83b35066c7..80119ada4b 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/content.md +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/content.md @@ -1,6 +1,4 @@ -# Optimizing typographic space with variable fonts - -In addition to their [technical benefits](https://fonts.google.com/knowledge/), variable fonts offer much more flexibility for typesetting in both printed and digital media. This flexibility is especially beneficial in the context of responsive design where the presentation of content adapts to different formats and contexts. +In addition to their [technical benefits](/lesson/web_font_comparisons_variable_vs_static), variable fonts offer much more flexibility for typesetting in both printed and digital media. This flexibility is especially beneficial in the context of responsive design where the presentation of content adapts to different formats and contexts. The most common considerations for designing a responsive composition are tied to the availability of space. When space is limited (e.g. on small screens), the content’s presentation must be optimized accordingly—line lengths are constrained, whitespace is minimized, and the potential contrast in size between small and large elements is reduced. In these situations, even very small changes in formatting can provide significant improvements in readability and visual hierarchy. @@ -8,45 +6,41 @@ Higher-level properties like `font-size`, `width`, `padding`, and `line-height`
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/3_1.gif)
-
INSERT_CAPTION
-[Figure 1: Demo of responsive headline + paragraph using media queries.] +
Static fonts with a layout breakpoint: A single breakpoint changes padding, font sizes, and line-height.
A smoother and more seamless approach is to reduce the reliance on such queries, and instead try to make use of relative values that scale fluidly.
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/3_2.gif)
-
INSERT_CAPTION
-[Figure 2: Demo similar to Figure 1 but relies more on `%`, `vw`, `calc(`), etc.] +
Static fonts with intrinsic layout: The widths of the fonts remain fixed, but padding, font sizes, and line-heights change more smoothly with relative units.
-Variable fonts allow for seamless adaptation to extend even further down to the lowest-level details in the typeface. Typographic glyphs that would otherwise be fixed in [static fonts](https://fonts.google.com/knowledge/) can now fluidly morph to better fit their containers. +Variable fonts allow for seamless adaptation to extend even further down to the lowest-level details in the typeface. Typographic glyphs that would otherwise be fixed in traditional static fonts can now fluidly morph to better fit their containers. ## Width -The most obvious approach for optimizing a typeface’s spatial proportions is tied to a fairly common design axis in variable fonts: Width. Even small changes in the width of a typeface can allow for more characters per line, and thus more words per line and more even line breaks—especially when dealing with narrow [line lengths](https://fonts.google.com/knowledge/glossary/measure_line_length). +The most obvious approach for optimizing a typeface’s spatial proportions is tied to a fairly common design axis in variable fonts: Width. Even small changes in the width of a typeface can allow for more characters per line, and thus more words per line and more even line breaks—especially when dealing with narrow [line lengths](/glossary/measure_line_length).
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/3_3.gif)
-
INSERT_CAPTION
-[Figure 3: Illustration showing how even small changes in width can result in significant improvements.] +
Breakpoint for static fonts with intrinsic layout: Now the font widths also change, but only at a single breakpoint.
Static typeface families that offer multiple widths sometimes have large differences between one width and the next, but variable fonts allow for intermediate variants so adjustments can be more fine-tuned and subtle.
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/3_4.gif)
-
INSERT_CAPTION
-[Figure 4: Build on previous demos by responsively adjusting font widths.] +
Gradual variable font changes with intrinsic layout: Everything changes smoothly thanks to relative units and the fine-tuning flexibility of variable fonts.
(As of October 2022, the lack of support for [interpolated values and unit division](https://css.oddbird.net/rwd/interpolation/) in CSS means smooth control over variable font width still requires either a series of closely-spaced breakpoints to adjust the font variations incrementally, or a dash of JavaScript to help set font width values seamlessly with a single intrinsic formula. Tools like [Typetura](https://typetura.com) can be helpful for this kind of intrinsic control.) @@ -54,11 +48,10 @@ Special care should be taken when adjusting the width of a typeface, particularl
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/3_5.svg)
-
INSERT_CAPTION
-[Figure 5: Illustration showing the upper and lower limits of acceptable widths for body text.] +
Avoid extremely narrow or wide font variants for paragraph text, as they can harm readability when typesetting anything more than a few words at a time.
## Line-filling @@ -66,23 +59,21 @@ Speaking of width, variable fonts with adjustable widths can be used to make dif
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/3_6.svg)
-
INSERT_CAPTION
-[Figure 6: Illustration of different-length words filling the same width at the same size.] +
Variable fonts can be automatically condensed or expanded to fit different pieces of text on the same line length without changing the font size or resorting to synthetic squooshing.
## Extenders -Another approach for optimizing the spatial efficiency of a typeface is related to the clearance needed for minimal [line space](https://fonts.google.com/knowledge/glossary/line_height_leading). This is typically limited by the distance the [cap height](https://fonts.google.com/knowledge/glossary/cap_height) and [ascenders/descenders](https://fonts.google.com/knowledge/glossary/ascenders_descenders) extend beyond the bounds of the [x-height](https://fonts.google.com/knowledge/glossary/x_height). Shorter extenders allow for a smaller line space by preventing glyphs from colliding between lines. +Another approach for optimizing the spatial efficiency of a typeface is related to the clearance needed for minimal [line space](/glossary/line_height_leading). This is typically limited by the distance the [cap height](/glossary/cap_height) and [ascenders/descenders](/glossary/ascenders_descenders) extend beyond the bounds of the [x-height](/glossary/x_height). Shorter extenders allow for a smaller line space by preventing glyphs from colliding between lines.
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/3_7.svg)
-
INSERT_CAPTION
-[Figure 7: Illustration showing how smaller extenders avoid inter-line crashes.] +
Fonts with retractable ascenders and descenders can be used to avoid collisions for tight line spacing.
Some typefaces address this by simply minimizing the length of extenders across the board. It may look slightly unusual in settings where a small line space isn’t needed, but it allows for tighter settings when needed. @@ -90,11 +81,10 @@ A technique that is much less common is to use variable fonts with an axis for a
-![INSERT_ALT](images/INSERT_SVG.svg) +![INSERT_ALT](images/3_8.gif)
-
INSERT_CAPTION
-[Figure 8: Build on previous demos by responsively adjusting extenders.] +
Variable fonts allow for extenders that shrink or grow as space allows to prevent glyphs from colliding between lines.
(As with the adjustment to font widths mentioned above, this technique also requires the use of breakpoints or some minimal JavaScript.) diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_1.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_1.gif new file mode 100644 index 0000000000..8ac5d3fcf6 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_1.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_2.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_2.gif new file mode 100644 index 0000000000..d29a40d7ec Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_2.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_3.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_3.gif new file mode 100644 index 0000000000..7da4b08743 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_3.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_4.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_4.gif new file mode 100644 index 0000000000..9e64d0943f Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_4.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_5.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_5.svg new file mode 100644 index 0000000000..ec670e118b --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_6.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_6.svg new file mode 100644 index 0000000000..f02ff945ce --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_7.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_7.svg new file mode 100644 index 0000000000..890374df38 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_8.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_8.gif new file mode 100644 index 0000000000..d04db1630d Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_8.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/thumbnail.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/thumbnail.svg index 7672f2d520..60dfdda7cb 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/thumbnail.svg +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/thumbnail.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/content.md b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/content.md index 845c297bc4..49beeec812 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/content.md +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/content.md @@ -1,42 +1,40 @@ -# Variable fonts are here. Now what? - -Modern [variable fonts](https://fonts.google.com/knowledge/glossary/variable_fonts) have become [supported](https://v-fonts.com/support) in all the major web browsers since the technology was introduced in 2016. In that time, much has been written about what variable fonts are and the nuts and bolts for setting them up on your own website. But what are the practical benefits of variable fonts in real-world design projects? There is no shortage of animations showing new variable fonts fluidly transitioning between stylistic variations of weight, width, etc. But what are the implications of that flexibility for day-to-day design work? +Modern [variable fonts](/glossary/variable_fonts) have become [supported](https://v-fonts.com/support) in all the major web browsers since the technology was introduced in 2016. In that time, much has been written about what variable fonts are and the nuts and bolts for setting them up on your own website. But what are the practical benefits of variable fonts in real-world design projects? There is no shortage of animations showing new variable fonts fluidly transitioning between stylistic variations of weight, width, etc. But what are the implications of that flexibility for day-to-day design work? This article outlines some techniques for using variable fonts from a practical typographic perspective. Some of the techniques are explored in more detail with their own in-depth articles. The list isn’t exhaustive, and some of the techniques rely on features that don’t exist in all variable fonts, but hopefully it’s helpful for understanding the benefits of variable fonts for a wide range of typographic techniques. ## Compress -Before we even discuss the typographic implications of variable fonts, it’s worth taking a moment to review some of the technological benefits they provide compared to traditional “[static](https://fonts.google.com/knowledge/)” web fonts. +Before we even discuss the typographic implications of variable fonts, it’s worth taking a moment to review some of the technological benefits they provide compared to traditional “static” web fonts. -- **[Increased efficiency](https://fonts.google.com/knowledge/)**: Perhaps the most significant benefit of variable fonts from a technical perspective is that they offer improved efficiency in [many ways](https://fonts.google.com/knowledge/), increasing the speed of loading and rendering a web page by reducing requirements for [file size](https://fonts.google.com/knowledge/glossary/file_size), [server requests](https://fonts.google.com/knowledge/), etc. compared to a comparable collection of static fonts. +- **[Increased efficiency](/lesson/web_font_comparisons_variable_vs_static)**: Perhaps the most significant benefit of variable fonts from a technical perspective is that they offer improved efficiency in [many ways](/lesson/factors_that_influence_the_efficiency_of_variable_web_fonts), increasing the speed of loading and rendering a web page by reducing requirements for [file size](/glossary/file_size), [server requests](https://gigapress.net/reduce-http-requests/), etc. compared to a comparable collection of static fonts. -- **Simplified file management**: While it’s still recommended to implement variable fonts as a [progressive enhancement](https://fonts.google.com/knowledge/) (with static fallback fonts for the small percentage of users on browsers that don’t support the technology), having a wide range of stylistic variation contained in a single font file, with a single [@font-face declaration](https://fonts.google.com/knowledge/), makes it much faster and simpler to experiment with design variations than it would be with static fonts. Want to see how the headlines will look if they’re slightly narrower? You can check quickly by changing a single number, instead of having to set up references for entirely separate font files. +- **Simplified file management**: While it’s still recommended to implement variable fonts as a [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) (with static fallback fonts for the small percentage of users on browsers that don’t support the technology), having a wide range of stylistic variation contained in a single font file, with a single [@font-face rule](https://css-tricks.com/snippets/css/using-font-face-in-css/), makes it much faster and simpler to experiment with design variations than it would be with static fonts. Want to see how the headlines will look if they’re slightly narrower? You can check quickly by changing a single number, instead of having to set up references for entirely separate font files. -- **Automatic adjustments**: Similarly, there are some font variations you might otherwise need to specify explicitly with separate static fonts that can instead be applied automatically with variable fonts, without the need for additional font files, `@font-face` declarations, or changes to `font-variation-settings`. For example, the [optical size axis](https://fonts.google.com/knowledge/glossary/optical_size_axis) can be set to automatically match computed usage sizes, and (in some browsers) other properties like weight can be [set](https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/Specifying_a_system_font_in_web_content_to_support_platform_text_resize_without_browser_or_platform_assistive_technology_zoom.) to automatically match a user’s system preferences. +- **Automatic adjustments**: Similarly, there are some font variations you might otherwise need to specify explicitly with separate static fonts that can instead be applied automatically with variable fonts, without the need for additional font files, `@font-face` declarations, or changes to `font-variation-settings`. For example, the [optical size axis](/glossary/optical_size_axis) can be set to automatically match computed usage sizes, and (in some browsers) other properties like weight can be [set](https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/Specifying_a_system_font_in_web_content_to_support_platform_text_resize_without_browser_or_platform_assistive_technology_zoom.) to automatically match a user’s system preferences. -- **Variable system fonts as fallbacks**: One of the under-appreciated benefits of using variable fonts that were produced according to the [official specifications](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg) for [registered axes](https://fonts.google.com/knowledge/) is that some platforms provide variable fonts that can work quite well as fallback fonts, allowing for much better results in situations where custom third-party variable fonts aren’t otherwise supported. This is especially helpful when using web fonts in email designs, but can also reduce stylistic jumps caused by the [flash of unstyled text](https://fonts.google.com/knowledge/glossary/fout). +- **Variable system fonts as fallbacks**: One of the under-appreciated benefits of using variable fonts that were produced according to the [official specifications](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg) for [registered axes](/glossary/axis_in_variable_fonts) is that some platforms provide variable fonts that can work quite well as fallback fonts, allowing for much better results in situations where custom third-party variable fonts aren’t otherwise supported. This is especially helpful when using web fonts in email designs, but can also reduce stylistic jumps caused by the [flash of unstyled text](/glossary/fout). ## Finesse In addition to their technical benefits, variable fonts also provide designers with the power to fine-tune typographic compositions in ways that were previously impractical or impossible. This is especially useful for web design and other dynamic media. -- **[Adjusting to tight spaces](https://fonts.google.com/knowledge/)**: In the world of responsive design, block-level elements can stretch and squeeze to better fit their containers. With variable fonts, it’s now much easier to also allow the typefaces to shapeshift according to the available space. +- **[Adjusting to tight spaces](/lesson/optimizing_typographic_space_with_variable_fonts)**: In the world of responsive design, block-level elements can stretch and squeeze to better fit their containers. With variable fonts, it’s now much easier to also allow the typefaces to shapeshift according to the available space. -- **[Animating interactions](https://fonts.google.com/knowledge/)**: Because variable fonts offer seamless transitions between stylistic variants, they can be used for simple animations to smooth out effects for user interactions, like making a link bolder when someone hovers over it. +- **[Animating interactions](/lesson/interactive_animations_with_variable_fonts)**: Because variable fonts offer seamless transitions between stylistic variants, they can be used for simple animations to smooth out effects for user interactions, like making a link bolder when someone hovers over it. -- **Compensating for different reading conditions**: With the rise of [Dark Mode](https://fonts.google.com/knowledge/) and user preferences for alternate color schemes, plus sensors for ambient light conditions, typographic compositions can be improved by compensating for differences in how our computers (and our eyes) handle text in different reading environments. Variable fonts offer much more flexibility to fine-tune these adjustments. +- **Compensating for different reading conditions**: With the rise of [dark mode](https://en.wikipedia.org/wiki/Light-on-dark_color_scheme) and user preferences for alternate color schemes, plus sensors for ambient light conditions, typographic compositions can be improved by compensating for differences in how our computers (and our eyes) handle text in different reading environments. Variable fonts offer much more flexibility to fine-tune these adjustments. ## Express While the opportunities for subtle typographic compensations with variable fonts are powerful, more dramatic design techniques allow for even more creative expression. -- **Multiplexed effects**: Some variable fonts are produced with “[multiplexed](https://fonts.google.com/knowledge/glossary/multiplexed_duplexed_uniwidth)” variations which work well for subtle interface cues (e.g. hover effects) but can also be used for more expressive special effects, like overlapping text, or animating glyphs individually. +- **Multiplexed effects**: Some variable fonts are produced with “[multiplexed](/glossary/multiplexed_duplexed_uniwidth)” variations which work well for subtle interface cues (e.g. hover effects) but can also be used for more expressive special effects, like overlapping text, or animating glyphs individually. - **Stylistic gradients and patterns**: The flexibility of variable fonts allows for effects where different properties like weight or width can be changed in arbitrary increments across a selection of elements. Words can start with narrow glyphs and end with wide glyphs, or lines can get successively heavier. - **Variable color fonts**: The advent of [color font](https://material.io/blog/color-fonts-are-here) technology has evolved alongside variable font technology, and the techniques can be combined to produce [variable color fonts](https://v-fonts.com/tags/C20). Fonts that exist at the intersection of both technologies are rare, but—not surprisingly—they can be quite playful and interesting. -- **Unusual designspaces**: While most variable fonts are designed within a fairly typical [designspace](https://fonts.google.com/knowledge/)—sticking to the [registered axes](https://fonts.google.com/knowledge/) of variation like [weight](https://fonts.google.com/knowledge/glossary/weight_axis), [width](https://fonts.google.com/knowledge/glossary/width_axis), and [optical size](https://fonts.google.com/knowledge/glossary/optical_size_axis)—much more is possible with the technology. Adjustable options for things like [softness](https://fonts.google.com/knowledge/glossary/softness_axis), [wonkiness](https://fonts.google.com/knowledge/glossary/wonky_axis), [casualness](https://fonts.google.com/knowledge/glossary/casual_axis), or any number of other [unusual design variations](https://v-fonts.com/tags/C5) allow type to behave like it never has before. +- **Unusual designspaces**: While most variable fonts are designed within a fairly typical [designspace](https://superpolator.com/designspace.html)—sticking to the [registered axes](/glossary/axis_in_variable_fonts) of variation like [weight](/glossary/weight_axis), [width](/glossary/width_axis), and [optical size](/glossary/optical_size_axis)—much more is possible with the technology. Adjustable options for things like [softness](/glossary/softness_axis), [wonkiness](/glossary/wonky_axis), [casualness](/glossary/casual_axis), or any number of other [unusual design variations](https://v-fonts.com/tags/C5) allow type to behave like it never has before. - **Reacting to various inputs**: Variable fonts can be made to react to obvious factors like those mentioned above. But any input can theoretically be used to affect variable font settings: a user’s mouse position, page scrolling, mobile tilt sensors, physical knobs, audio input, ambient light detectors, pressure sensors, data about time, weather, geolocation, stocks, or pretty much anything—the sky is the limit. diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/images/thumbnail.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/images/thumbnail.svg index 7672f2d520..0b8b63fe84 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/images/thumbnail.svg +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/images/thumbnail.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/lesson.textproto index c7215bc217..1d4a7b0c22 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/lesson.textproto +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/lesson.textproto @@ -1,4 +1,4 @@ -name: "Variable fonts are here" +name: "Variable fonts are here. Now what?" authors: "Nick Sherman" reviewers: "Laurence Penney" reviewers: "Piper Haywood" diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/content.md b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/content.md index ed610df575..90a029bfb7 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/content.md +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/content.md @@ -1,11 +1,11 @@ -# Web font comparisons: variable vs. static - How efficient are variable web fonts when compared to static fonts? As with most questions related to typography, the answer—for better or worse—is “it depends”. -Though exact numbers will vary for every project, examining a few typical scenarios can be useful for general reference. Below are examples of fairly standard typographic palettes along with comparative statistics about the effects on file sizes and loading times. +Though exact numbers will vary for every project, examining a few typical scenarios can be useful for general reference. Below are examples of fairly standard typographic palettes along with comparative estimates about the effects on file sizes and loading times. The test results below are based on a fairly standard sans-serif typeface ([HEX Franklin](https://hex.xyz/HEX_Franklin/)) with about 325 glyphs and fairly basic OpenType features and auto-hinting. The static fonts were CFF-flavored and the variable fonts were TTF-flavored. (CFF-flavored variable fonts provide even smaller file sizes comparatively, but weren’t used for the test because they aren’t as widely supported.) All the test fonts were compressed in the WOFF2 web font format. +Load time estimates are based on a standard of 500 kB per second for transfer times and 0.1 second per file for additional latency. These are ballpark numbers that won’t be as relevant for every project, but can be used as a starting point for other estimates. + ## Type Palette #1 Regular, Bold (2 variants on 1 axis, made from 2 sources) diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/images/thumbnail.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/images/thumbnail.svg index 7672f2d520..31bd9df9a7 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/images/thumbnail.svg +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/images/thumbnail.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/cc-by-sa/knowledge/topics/type_history/topic.textproto b/cc-by-sa/knowledge/topics/type_history/topic.textproto index 38037b9a63..659586faf4 100644 --- a/cc-by-sa/knowledge/topics/type_history/topic.textproto +++ b/cc-by-sa/knowledge/topics/type_history/topic.textproto @@ -1 +1 @@ -name: "Type History" +name: "Type history"