From: Elliot Jay Stocks Date: Thu, 27 Oct 2022 12:37:30 +0000 (+0100) Subject: Adding Nick’s new VF animated GIFs back in, plus fixing remaining missing alt text... X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=83d2b219574375571ead86300f884fd1b8ca13fe;p=thirdparty%2Fgoogle%2Ffonts.git Adding Nick’s new VF animated GIFs back in, plus fixing remaining missing alt text (#5477) * 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` * New GIFs (and SVGs) from Nick * Renaming Nick’s GIFs * More Nick GIFs * Placing Nick’s new GIFs in `content.md` * Re-inserting alt text for Nick’s new GIFs * SVG renaming * More alt text re-insertion * Alt text for the color fonts article --- 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/modules/introducing_type/lessons/introducing_color_fonts/content.md b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/content.md index e8ac561860..b23d3bf05c 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 @@ -12,7 +12,7 @@ p {
-![INSERT_ALT](images/color_fonts_1.png) +![A color font specimen showing the word “metal” rendered as intended.](images/color_fonts_1.png)
@@ -34,7 +34,7 @@ p {
-![INSERT_ALT](images/color_fonts_2.png) +![A color font specimen showing the word “metal” rendered in one of the alternate built-in color palettes.](images/color_fonts_2.png)
@@ -52,7 +52,7 @@ The Nabla font contains multiple index IDs for the color swatches within its pal
-![INSERT_ALT](images/color_fonts_3.png) +![A color font specimen showing the word “metal” rendered as intended, with additional color customizations included to add a different color gradient to the bottom of the main face of the type.](images/color_fonts_3.png)
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 aff50e99d8..155f11fe08 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 @@ -37,7 +37,7 @@ For more demanding situations where shifts in positioning aren’t acceptable at
-images/4_4a.gif +![An animated loop showing how text shifts when using non-multiplexed fonts.](images/4_4a.gif)
@@ -67,7 +67,7 @@ Finally, for other special interactive effects, keep in mind that `:hover` isn
-images/4_6.gif +![An animated loop showing how each letter drips with a slime-like effect when the user hovers over them.](images/4_6.gif)
Multiplexed hover effects with more expressive variations, on a letter-by-letter basis.
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 index 1bb542cbd2..848bd427ed 100644 Binary files a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_1.gif 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 index f536cb6472..f9d11d99e5 100644 Binary files a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_2.gif 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 index fbd547771f..f1673913d5 100644 Binary files a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_3.gif 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 index 731f51247e..1748a1868f 100644 Binary files a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4a.gif 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 index 1d8f7c8d0f..5d988b9f2d 100644 Binary files a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4b.gif 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 index 86e18b6652..bae30faf54 100644 Binary files a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_5.gif 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..824ea78e38 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/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 7b8cefc801..13ff56473d 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 @@ -6,7 +6,7 @@ Higher-level properties like `font-size`, `width`, `padding`, and `line-height`
-images/3_1.gif +![An animated loop showing how the content adapts when the container changes in width. The change in text size for the heading appears to jump.](images/3_1.gif)
Static fonts with a layout breakpoint: A single breakpoint changes padding, font sizes, and line-height.
@@ -15,7 +15,7 @@ A smoother and more seamless approach is to reduce the reliance on such queries,
-images/3_2.gif +![An animated loop showing how the content adapts when the container changes in width. The change in text size for the heading is more fluid.](images/3_2.gif)
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.
@@ -28,7 +28,7 @@ The most obvious approach for optimizing a typeface’s spatial proportions is t
-images/3_3.gif +![An animated loop showing how the content adapts when the container changes in width. The more fluid shift in font size is omplimented with a change in width at certain breakpoints, although that change results in a noticeable jump.](images/3_3.gif)
Breakpoint for static fonts with intrinsic layout: Now the font widths also change, but only at a single breakpoint.
@@ -37,7 +37,7 @@ Static typeface families that offer multiple widths sometimes have large differe
-images/3_4.gif +![An animated loop showing how the content adapts when the container changes in width. The more fluid shift in font size is omplimented with a change in width at certain breakpoints, which now also changes fluidly.](images/3_4.gif)
Gradual variable font changes with intrinsic layout: Everything changes smoothly thanks to relative units and the fine-tuning flexibility of variable fonts.
@@ -48,7 +48,7 @@ Special care should be taken when adjusting the width of a typeface, particularl
-images/3_5.svg +![Four paragraphs set in the same typeface, but using a different width setting for each.](images/3_5.svg)
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.
@@ -59,7 +59,7 @@ Speaking of width, variable fonts with adjustable widths can be used to make dif
-images/3_6.svg +![Five lines of type, with a different U.S. city name on each line. All use different widths, but all perfectly fill the same horizontal space.](images/3_6.svg)
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.
@@ -70,7 +70,7 @@ Another approach for optimizing the spatial efficiency of a typeface is related
-images/3_7.svg +![First, a specimen using the word “Glyphs collide”, set over two lines, showing the descenders of “Glyphs” touching the ascenders of “collide”. Then, the same specimen with the ascenders and descenders reduced vertically to avoid the clash.](images/3_7.svg)
Fonts with retractable ascenders and descenders can be used to avoid collisions for tight line spacing.
@@ -81,7 +81,7 @@ A technique that is much less common is to use variable fonts with an axis for a
-images/3_8.gif +![An animated loop showing how the content adapts when the container changes in width. When the container becomes narrow and the lin-height is decreased, the ascenders and descenders shorten accordingly to avoid clashes.](images/3_8.gif)
Variable fonts allow for extenders that shrink or grow as space allows to prevent glyphs from colliding between lines.
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..323ec36abb 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..c275a34cde 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..0aedbc8beb 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..7b87691f83 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..b7921a85a2 --- /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..c259c45a82 --- /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..c8f5e8c3fb --- /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..33eb49a84d 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