From: Elliot Jay Stocks Date: Tue, 25 Oct 2022 16:02:25 +0000 (+0100) Subject: Further GFK content tweaks, October 25 (#5470) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=907052b3ed0c3cc67d72ec121084ce74f023ef02;p=thirdparty%2Fgoogle%2Ffonts.git Further GFK content tweaks, October 25 (#5470) * 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 * Updating to Bungee example * Fixing broken URLs in Nick’s articles * Fixing “legibility” and “readability” URLs in Darrell’s article * Updating CSS based on my CodePen * New `thumbnail` SVGs for Nick’s module * prev / next for color fonts article * Copy changes to color fonts article * Removing my CodePen note * Final(?) copy tweaks to “Introducing color fonts” * New module ordering for homepage * New thumbnails (+ references) for History module * Updating `color` term to differentiate from color fonts * Correcting `related_terms` for Hangeul articles * Module desc. for Hangeul * Numerous copy (mainly punc.) tweaks to Hangeul articles * 5 × Hangeul article `excerpt`s * All ACTUAL alt text, everywhere! * All ACTUAL `excerpt`s, everywhere! * Renaming “Hangeul” module to “Designing Hangeul” * More format tweaking for Hangeul articles * Prev/next lessons for Nick’s module * Temporarily removing problematic GIFs * Adding `thumbnail.svg` back in * Formatting fixes for Nick’s VF table Markdown * VF module excerpt from Nick * Additions to `kerning` glossary term from Thomas Phinney * New URLs for contributors * Renaming "Hangeul" to "Designing Hangeul" * Sentence-casing titles in Hangeul module * Adding `topics: "type_history"` to Hangeul articles * Color fonts `thumbnail.svg` for article + glossary * Excerpt for `color_fonts` in keeping with content copy * Copy tweaks to `color_fonts` Glossary term * More links for `tofu` * More links for `reflow` * More links for `rag` * Copy tweaks to `letters` * More links for `emoji` * More links for `designspace` * More links for `CJK` * More links for `color_fonts` * Copy tweaks to `alphabet` --- diff --git a/cc-by-sa/knowledge/glossary/terms/alphabet/content.md b/cc-by-sa/knowledge/glossary/terms/alphabet/content.md index 7f1a9614e3..2c9edfd04a 100644 --- a/cc-by-sa/knowledge/glossary/terms/alphabet/content.md +++ b/cc-by-sa/knowledge/glossary/terms/alphabet/content.md @@ -2,11 +2,11 @@ An alphabet typically refers to a [writing system](/glossary/script_writing_syst
-![The Old and Modern English alphabet](images/thumbnail.svg) +![The Old and Modern English alphabet.](images/thumbnail.svg)
Examples of the Old and Modern English alphabet.
In common typological classifications, linguists principally differentiate alphabets from other types of writing systems such as [syllabaries](https://en.wikipedia.org/wiki/Syllabary), where graphical units represent syllables, and logographies, where graphical units represent entire words (or other meaningful, decomposable units of language, called morphemes). -In practice, however, writing systems frequently rely on more than one approach to represent language. For example, modern American English is written using both alphabetic letters and non-alphabetic symbols (e.g., 1, 2 , 3, @, &), many of which can be seen on standard computer keyboards. +In practice, however, writing systems frequently rely on more than one approach to represent language. For example, modern American English is written using both alphabetic letters and non-alphabetic symbols (e.g., 1, 2 , 3, @, &), many of which can be seen on standard computer keyboards. diff --git a/cc-by-sa/knowledge/glossary/terms/cjk/content.md b/cc-by-sa/knowledge/glossary/terms/cjk/content.md index 99c2d3f7d2..907b3256fb 100644 --- a/cc-by-sa/knowledge/glossary/terms/cjk/content.md +++ b/cc-by-sa/knowledge/glossary/terms/cjk/content.md @@ -1,4 +1,4 @@ -CJK is the shorthand collective name for the Chinese, Japanese, and Korean writing systems, all of which include Chinese characters and derivatives. The “C” represents both the traditional version and simplified version of Chinese; the “J” represents Japanese Hiragana, Katakana, and Kanji (the latter being Chinese characters used in Japanese); and the “K” represents the Korean Hangeul and Hanja (the latter being Chinese characters used in Korean). +CJK is the shorthand collective name for the Chinese, Japanese, and Korean [writing systems](/glossary/script_writing_system), all of which include Chinese [characters](/glossary/character) and derivatives. The “C” represents both the traditional version and simplified version of Chinese; the “J” represents Japanese Hiragana, Katakana, and Kanji (the latter being Chinese characters used in Japanese); and the “K” represents the Korean Hangeul and Hanja (the latter being Chinese characters used in Korean).
@@ -6,4 +6,4 @@ CJK is the shorthand collective name for the Chinese, Japanese, and Korean writi
-These languages each have many thousands of characters and therefore their fonts also contain many glyphs (and Latin glyphs, too), which is why the individual writing systems—including the traditional and simplified versions of Chinese—are separated out into their own dedicated fonts, such as [Noto Sans Traditional Chinese](https://fonts.google.com/noto/specimen/Noto+Sans+TC). It’s unusual for a single CJK font to contain more than a single writing system. \ No newline at end of file +These languages each have many thousands of characters and therefore their [fonts](/glossary/font) also contain many [glyphs](/glossary/glyph) (and [Latin](/glossary/latin) glyphs, too), which is why the individual writing systems—including the traditional and simplified versions of Chinese—are separated out into their own dedicated fonts, such as [Noto Sans Traditional Chinese](https://fonts.google.com/noto/specimen/Noto+Sans+TC). It’s unusual for a single CJK font to contain more than a single writing system. \ No newline at end of file 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 aaf78252eb..22e2d165d2 100644 --- a/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md +++ b/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md @@ -1,4 +1,4 @@ -Color fonts (also known as chromatic fonts) can use multiple colors in a single glyph, rather than a flat single color used by non-color (monochromatic) fonts. The default color values are also contained within the font file itself, although these can be overridden by the designer. +Color [fonts](/glossary/font) (also known as chromatic fonts) can use multiple colors in a single [glyph](/glossary/glyph), rather than a flat single color used by non-color (monochromatic) fonts. The default color values are also contained within the font file itself, although these can be overridden by the designer.
@@ -6,6 +6,4 @@ Color fonts (also known as chromatic fonts) can use multiple colors in a single
-
On the left, a regular, non-color font uses one color throughout; on the right, the same typeface, rendered as a color font, employs multiple colors.
- -Google Fonts now supports a growing number of color fonts in its library, which can be found at https://fonts.google.com/?coloronly=true +Google Fonts now supports a growing number of color fonts in its library. To narrow the library selection to color fonts, visit [fonts.google.com/?coloronly=true](https://fonts.google.com/?coloronly=true) or press the “Show only color fonts” toggle. diff --git a/cc-by-sa/knowledge/glossary/terms/color_fonts/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/color_fonts/images/thumbnail.svg index 6a5891bab3..a3c63b44a7 100644 --- a/cc-by-sa/knowledge/glossary/terms/color_fonts/images/thumbnail.svg +++ b/cc-by-sa/knowledge/glossary/terms/color_fonts/images/thumbnail.svg @@ -1,74 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/color_fonts/images/thumbnail_old.svg b/cc-by-sa/knowledge/glossary/terms/color_fonts/images/thumbnail_old.svg new file mode 100644 index 0000000000..6a5891bab3 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/color_fonts/images/thumbnail_old.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/glossary/terms/color_fonts/term.textproto b/cc-by-sa/knowledge/glossary/terms/color_fonts/term.textproto index 505576d7bf..7e5ce3530e 100644 --- a/cc-by-sa/knowledge/glossary/terms/color_fonts/term.textproto +++ b/cc-by-sa/knowledge/glossary/terms/color_fonts/term.textproto @@ -1,4 +1,3 @@ name: "Color fonts" -excerpt: "A font that can use multiple colors and specifies what they should be, as opposed to just specifying where 'ink' in the foreground color should go but not what that color should be." +excerpt: "A font that can use multiple colors in a single glyph, rather than a flat single color used by non-color (monochromatic) fonts." related_lessons: "introducing_color_fonts" -related_content_urls: "https://www.youtube.com/embed/uaihftkZc68" diff --git a/cc-by-sa/knowledge/glossary/terms/designspace/content.md b/cc-by-sa/knowledge/glossary/terms/designspace/content.md index 9e6edca7da..d6b387db81 100644 --- a/cc-by-sa/knowledge/glossary/terms/designspace/content.md +++ b/cc-by-sa/knowledge/glossary/terms/designspace/content.md @@ -1,4 +1,4 @@ -A designspace (sometimes written as “design space”) is a system specified during the type design process that controls how a variable font’s appearance changes, via interpolation from the master designs and glyph substitution, as its variation axes are adjusted. +A designspace (sometimes written as “design space”) is a system specified during the [type](/glossary/type) design process that controls how a [variable font](/glossary/variable_fonts)’s appearance changes, via interpolation from the [master](/glossary/masters) designs and [glyph](/glossary/glyph) substitution, as its variation [axes](/glossary/axis_in_variable_fonts) are adjusted.
@@ -6,4 +6,4 @@ A designspace (sometimes written as “design space”) is a system specified du
-Each variation axis can be conceived as a dimension in the font’s design space, so each distinct set of axis values implies a unique location in the design space, and each unique location results in a unique instance. For example, a variable font with Weight and Width axes has a two-dimensional design space, containing all variants of Weight and Width. Some advanced variable fonts, such as parametric fonts, have 10 or more axes; therefore they have design spaces of 10 or more dimensions. +Each variation axis can be conceived as a dimension in the font’s designspace, so each distinct set of axis values implies a unique location in the designspace, and each unique location results in a unique [instance](/glossary/instance). For example, a variable font with [Weight](/glossary/weight_axis) and [Width](/glossary/width_axis) axes has a two-dimensional designspace, containing all variants of Weight and Width. Some advanced variable fonts, such as [parametric fonts](/glossary/parametric_font), have 10 or more axes; therefore they have designspaces of 10 or more dimensions. diff --git a/cc-by-sa/knowledge/glossary/terms/emoji/content.md b/cc-by-sa/knowledge/glossary/terms/emoji/content.md index 0ef01d61f2..0faba87d26 100644 --- a/cc-by-sa/knowledge/glossary/terms/emoji/content.md +++ b/cc-by-sa/knowledge/glossary/terms/emoji/content.md @@ -1,4 +1,4 @@ -An emoji is a pictogram intended to convey emotional meaning, usually used as a supplement to text in order to clarify intent (for example, a “winking face” emoji to signify sarcasm) or instead of emotive text (for example, a “thumbs up” emoji as an affirmative response). Although sometimes referred to as “smileys” due to the many facial expressions available as emoji, the full range of emoji is much larger than facial expressions. +An emoji is a pictogram intended to convey emotional meaning, usually used as a supplement to [text](/glossary/text_copy) in order to clarify intent (for example, a “winking face” emoji to signify sarcasm) or instead of emotive text (for example, a “thumbs up” emoji as an affirmative response). Although sometimes referred to as “smileys” due to the many facial expressions available as emoji, the full range of emoji is much larger than facial expressions. The emoji are successors to the original smileys, or emoticons: A sequence of punctuation glyphs to imitate an expression, such as a semi-colon and right parenthesis used to convey a wink ;) @@ -8,6 +8,6 @@ The emoji are successors to the original smileys, or emoticons: A sequence of pu -The complete set (over 1,874 in version 15) is defined by the Unicode Consortium with contributions from hardware and software makers, as well as communications specialists. Unicode assigns each emoji a number known as a code point, allowing devices to treat emoji as characters in a font — and indeed modern operating systems have emoji fonts built in. Each maker designs emoji in their own style, so the smiley face character on an Apple device is different from the smiley face in Windows or Android. +The complete set (over 1,874 in version 15) is defined by the [Unicode](/glossary/unicode) Consortium with contributions from hardware and software makers, as well as communications specialists. Unicode assigns each emoji a number known as a code point, allowing devices to treat emoji as characters in a font — and indeed modern operating systems have emoji fonts built in. Each maker designs emoji in their own style, so the smiley face character on an Apple device is different from the smiley face in Windows or Android. -Depending on the system, it may be possible to override the default emoji font and achieve cross-platform consistency. For example, on a website with a monochrome style, a designer might choose the black and white [Noto Emoji](https://fonts.google.com/noto/specimen/Noto+Emoji). \ No newline at end of file +Depending on the system, it may be possible to override the default emoji [font](/glossary/font) and achieve cross-platform consistency. For example, on a website with a monochrome style, a designer might choose the black and white [Noto Emoji](https://fonts.google.com/noto/specimen/Noto+Emoji). \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/letters/content.md b/cc-by-sa/knowledge/glossary/terms/letters/content.md index 2665b2ac7d..b72ac2c8e2 100644 --- a/cc-by-sa/knowledge/glossary/terms/letters/content.md +++ b/cc-by-sa/knowledge/glossary/terms/letters/content.md @@ -8,6 +8,6 @@ The set of graphical symbols used to represent speech sounds in an [alphabetic]( In linguistics, the atomic units of a writing system are called graphemes (similar in concept to [characters](/glossary/character) in [typography](/glossary/typography)); letters, which are associated with alphabets, constitute just one type of grapheme. -In everyday discourse, however, people often use the term letters in a less restrictive sense. For example, they may refer to both the phonograms of the English alphabet (e.g., A, B, C) and to the signs/symbols used in the non-alphabetic Cherokee syllabary (e.g., ​​ Ꭰ, Ꭷ, Ꭽ) as letters. +In everyday discourse, however, people often use the term letters in a less restrictive sense. For example, they may refer to both the phonograms of the English alphabet (e.g., A, B, C) and to the signs/symbols used in the non-alphabetic Cherokee syllabary (e.g., ​​Ꭰ, Ꭷ, Ꭽ) as letters. In contrast, the term commonly used when referring to logograms, which are graphemes associated with writing systems like Chinese (e.g., 雨、月、人), is characters. In typography, phonograms, signs, symbols, and logograms may all be classified as characters. \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/rag/content.md b/cc-by-sa/knowledge/glossary/terms/rag/content.md index 2b4c8f5c11..a58e0725ce 100644 --- a/cc-by-sa/knowledge/glossary/terms/rag/content.md +++ b/cc-by-sa/knowledge/glossary/terms/rag/content.md @@ -1,4 +1,4 @@ -The rag refers to the irregular edge of an unjustified text block. “Ragged right” is another term for left-justified text, and “ragged left” means right-justified. +The rag refers to the irregular edge of an [unjustified](/glossary/alignment_justification) [text](/glossary/text_copy) block. “Ragged right” is another term for left-justified text, and “ragged left” means right-justified.
@@ -6,4 +6,4 @@ The rag refers to the irregular edge of an unjustified text block. “Ragged rig
-Center-aligned type has two rags: both left and right. Fully justified text has no rag, since glyphs touch both the right and left sides of the text block. +Center-aligned [type](/glossary/type) has two rags: both left and right. Fully justified text has no rag, since glyphs touch both the right and left sides of the text block. diff --git a/cc-by-sa/knowledge/glossary/terms/reflow/content.md b/cc-by-sa/knowledge/glossary/terms/reflow/content.md index 7e08d39e94..6ef9156cd6 100644 --- a/cc-by-sa/knowledge/glossary/terms/reflow/content.md +++ b/cc-by-sa/knowledge/glossary/terms/reflow/content.md @@ -1,4 +1,4 @@ -When a typographic change is made to text—such as increasing the font size, switching to a different weight, or moving to an entirely new font—it’s likely the lines of type will re-flow; that is, words that were set on one line prior to the change may then move to the line above or below. +When a [typographic change](/glossary/typography) is made to [text](/glossary/text_copy)—such as increasing the [font](/glossary/font) size, switching to a different [weight](/glossary/weight), or moving to an entirely new font—it’s likely the lines of [type](/glossary/type) will re-flow; that is, words that were set on one line prior to the change may then move to the line above or below. In print, when a document has already been edited and designed, reflow can be problematic, such as text being cropped from the page when it no longer fits in its containing block. diff --git a/cc-by-sa/knowledge/glossary/terms/tofu/content.md b/cc-by-sa/knowledge/glossary/terms/tofu/content.md index 37d8dce86f..cf69d40d43 100644 --- a/cc-by-sa/knowledge/glossary/terms/tofu/content.md +++ b/cc-by-sa/knowledge/glossary/terms/tofu/content.md @@ -1,4 +1,4 @@ -When a character is not present in a font, and no fallback option is available, the missing character is replaced with a symbol that has come to be known as “tofu” due to its resemblance to a block of tofu. +When a [character](/glossary/character) is not present in a [font](/glossary/font), and no fallback option is available, the missing character is replaced with a symbol that has come to be known as “tofu” due to its resemblance to a block of tofu.
@@ -8,4 +8,4 @@ When a character is not present in a font, and no fallback option is available, Software for general use, such as web browsers and Microsoft Word, use font fallback systems to make tofu rare. Professional applications, such as Adobe Creative Cloud suite, inform users when a character is not available in the selected font. -Tofu should be avoided at all costs and is arguably worse than no text appearing at all, because it makes the text inaccessible and the author or brand appear unprofessional. The Noto fonts (“no tofu”) are an attempt to provide fonts for as many writing systems as possible, whether as the intended fonts or as fallback fonts. +Tofu should be avoided at all costs and is arguably worse than no text appearing at all, because it makes the [text](/glossary/text_copy) inaccessible and the author or brand appear unprofessional. The [Noto fonts](https://fonts.google.com/noto/fonts) (“no tofu”) are an attempt to provide fonts for as many [writing systems](/glossary/script_writing_system) as possible, whether as the intended fonts or as fallback fonts. diff --git a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto index d4b521ae81..3810ddc6a6 100644 --- a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto @@ -1,10 +1,11 @@ -name: "An Alphabet for Reading and Writing" +name: "An alphabet for reading and writing" authors: "Darrell Penta" reviewers: "Cassidy Curtis" reviewers: "Minjoo Ham" reviewers: "Min-Young Kim" reviewers: "SeHee Lee" topics: "hangeul" +topics: "type_history" prev_lessons: "making_the_details_matter" next_lessons: "lessons_from_hangeul" related_terms: "alphabet" diff --git a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/lesson.textproto index 4c09a88982..12a864c458 100644 --- a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/lesson.textproto @@ -5,6 +5,7 @@ reviewers: "Minjoo Ham" reviewers: "Min-Young Kim" reviewers: "SeHee Lee" topics: "hangeul" +topics: "type_history" next_lessons: "designing_for_learnability" related_terms: "alphabet" related_terms: "letters" diff --git a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/lesson.textproto index 85fa009319..fe32498936 100644 --- a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/lesson.textproto @@ -1,10 +1,11 @@ -name: "Designing for Learnability" +name: "Designing for learnability" authors: "Darrell Penta" reviewers: "Cassidy Curtis" reviewers: "Minjoo Ham" reviewers: "Min-Young Kim" reviewers: "SeHee Lee" topics: "hangeul" +topics: "type_history" prev_lessons: "an_introduction_to_hangeul" next_lessons: "making_the_details_matter" related_terms: "alphabet" diff --git a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/lesson.textproto index bafb359bc1..e47b92ef10 100644 --- a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/lesson.textproto @@ -5,6 +5,7 @@ reviewers: "Minjoo Ham" reviewers: "Min-Young Kim" reviewers: "SeHee Lee" topics: "hangeul" +topics: "type_history" prev_lessons: "an_alphabet_for_reading_and_writing" related_terms: "alphabet" related_terms: "letters" diff --git a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/lesson.textproto index fa06d3ed56..ef269257b0 100644 --- a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/lesson.textproto @@ -1,10 +1,11 @@ -name: "Making the Details Matter" +name: "Making the cetails matter" authors: "Darrell Penta" reviewers: "Cassidy Curtis" reviewers: "Minjoo Ham" reviewers: "Min-Young Kim" reviewers: "SeHee Lee" topics: "hangeul" +topics: "type_history" prev_lessons: "designing_for_learnability" next_lessons: "an_alphabet_for_reading_and_writing" related_terms: "alphabet" diff --git a/cc-by-sa/knowledge/modules/designing_hangeul/module.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/module.textproto index 557e093bfc..04dc2b0358 100644 --- a/cc-by-sa/knowledge/modules/designing_hangeul/module.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/module.textproto @@ -1,4 +1,4 @@ -name: "Hangeul" +name: "Designing Hangeul" lessons: "an_introduction_to_hangeul" lessons: "designing_for_learnability" lessons: "making_the_details_matter" diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/content.md b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/content.md index 9caab9d44e..e8ac561860 100644 --- a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/content.md +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/content.md @@ -1,50 +1,59 @@ [Color fonts](/glossary/color_fonts) (also known as chromatic fonts) can use multiple colors, including gradients, in a single glyph, rather than the flat, single color used by typical, non-color (monochromatic) fonts. This relatively new technology allows designers to set the color palette within the font to express themselves with color in a way that would previously not be possible outside of advanced graphics applications. -[ILLO: color fonts montage] + To use a color font from Google Fonts, simply reference the family as you would any other font: ```css -@import url('https://fonts.googleapis.com/css2?family=Blaka+Ink&display=swap'); -.classname { - font-family: "Blaka Ink"; +@import url('https://fonts.googleapis.com/css2?family=Nabla&display=swap'); + +p { + font-family: "Nabla"; } ``` -[ILLO showing output of code] +
-This should render the font with its default color values, which are contained within the font file itself. At the time of writing, browser support for color fonts is not yet universal. This means that the type should always be rendered, but the colors or variable font axes may not appear as intended in browsers that don’t support the [COLRv1](https://caniuse.com/colr-v1) standard. However, thankfully the Google Fonts API supports these browsers with SVG fonts and attempts to get as close to the original intent as possible. You can read more about this implementation at [INSERT]. +![INSERT_ALT](images/color_fonts_1.png) -The type designer has the power to include not just one, but a whole set of default color palettes within the font file. We can make use of these with the base-palette declaration, as in this example, where we select the a particular palette option: +
-```css -.classname { - base-palette: 4; - } -``` +This should render the font with its default color values, which are contained within the font file itself. At the time of writing, browser support for color fonts is not yet universal. This means that the type should always be rendered, but the colors or variable font axes may not appear as intended in browsers that don’t support the [COLRv1](https://caniuse.com/colr-v1) standard. However, the Google Fonts API supports these browsers with SVG fonts and attempts to get as close to the original intent as possible. You can read more about this implementation on [“COLRv1 Color Gradient Vector Fonts in Chrome 98.”](https://developer.chrome.com/blog/colrv1-fonts/) -[ILLO showing output of code] - -[FRO: see also https://codepen.io/jh3y/pen/XWqNoEV] - -The number 4 here is the index ID of the fifth (numbering starts at 0) color palette provided by the font itself. -Of course, if we wish to use colors not defined by the type designer in the base palettes, we can completely customize them ourselves using the [`override-colors`](https://caniuse.com/mdn-css_at-rules_font-palette-values_override-colors) property: +The type designer has the power to include not just one, but a whole set of default color palettes within the font file. We can make use of these with the `base-palette` declaration, as in this example, where we select the the 3rd palette option: ```css -.classname { - base-palette: 4; - override-colors: 0 #00ffbb, 1 #007744, 2 #004433; - } +p { + font-family: "Nabla"; + font-palette: --myPalette; +} + +@font-palette-values --myPalette { + font-family: "Nabla"; + base-palette: 3; +} ``` -The numbers 0, 1, and 2 here are the index IDs for the color swatches within the palette. +
+ +![INSERT_ALT](images/color_fonts_2.png) + +
-[ILLO showing output of code] +The number 3 here is the index ID of the 3rd color palette provided by the font itself. (Note that numbering starts at 0.) Of course, if we wish to use colors not defined by the type designer in the base palettes, we can completely customize them ourselves using the [`override-colors`](https://caniuse.com/mdn-css_at-rules_font-palette-values_override-colors) property, or even choose to just override one at a time. -Most people will first encounter color fonts via emoji, and emoji is a great example of how gradients can provide even more expression over flat color. In this example, let’s use CSS to turn a simple smiley purple and blue: +The Nabla font contains multiple index IDs for the color swatches within its palette. Here, we’re using the 3rd base palette and just changing the 6th color swatch: ```css -INSERT CSS HERE +@font-palette-values --myPalette { + font-family: "Nabla"; + base-palette: 3; + override-colors: 6 #FFB978; +} ``` -[ILLO showing output of code] +
+ +![INSERT_ALT](images/color_fonts_3.png) + +
-Google Fonts now supports a growing number of color fonts in its library, which can be found at [fonts.google.com](https://fonts.google.com/?coloronly=true). For more information on color fonts, please read this introductory post on the Chrome Developers blog, COLRv1 Color Gradient Vector Fonts in Chrome 98. \ No newline at end of file +Google Fonts now supports a growing number of color fonts in its library. To narrow the library selection to color fonts, visit [fonts.google.com/?coloronly=true](https://fonts.google.com/?coloronly=true) or press the “Show only color fonts” toggle. diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/color_fonts_1.png b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/color_fonts_1.png new file mode 100644 index 0000000000..b7c128a579 Binary files /dev/null and b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/color_fonts_1.png differ diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/color_fonts_2.png b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/color_fonts_2.png new file mode 100644 index 0000000000..c06611982a Binary files /dev/null and b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/color_fonts_2.png differ diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/color_fonts_3.png b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/color_fonts_3.png new file mode 100644 index 0000000000..b27d6b5bed Binary files /dev/null and b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/color_fonts_3.png differ diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/thumbnail.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/thumbnail.svg index 0926d4fba0..a3c63b44a7 100644 --- a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/images/thumbnail.svg +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_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/introducing_type/lessons/introducing_color_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/lesson.textproto index 6e16443a5b..39af83a426 100644 --- a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/lesson.textproto +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/lesson.textproto @@ -3,5 +3,6 @@ authors: "Rod Sheeter" reviewers: "Elliot Jay Stocks" reviewers: "Cosimo Lupo" topics: "color_fonts" -# TODO do we have prev_lessons, next_lessons, or related_terms? +prev_lessons: "introducing_alternate_glyphs" +next_lessons: "introducing_variable_fonts" excerpt: "Color fonts allow the font to use many colors and to have an opinion about what those colors should be."