From: Elliot Jay Stocks Date: Mon, 17 Oct 2022 18:37:59 +0000 (+0100) Subject: GFK Q3 content population (#5214) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5cd8a25ea92d8bac555b0ae92747b933fedf0ac5;p=thirdparty%2Fgoogle%2Ffonts.git GFK Q3 content population (#5214) * First version of “Switching from static to variable fonts” article * Adding `switching_from_static_to_variable_fonts_on_your_website` article * Adding `introducing_accessibility_in_typography` article * Adding 3 × `history_of_type` articles * Adding `hangeul` module, incl. 5 × articles * Removing duplicate dir * New `content.md` (Notion export) for “Switching...” * Copy correction to “Switching...” * Temporary image files for “Switching...” * New draft of `introducing_color_fonts` * Correcting tempo. img URLs * Renaming .textproto file extensions * Metadata for John’s articles * Renaming history article slugs * Renaming history to slugs to proper titles * Article ordering in module textproto * Renaming Hangeul article slugs * Hangeul slugs * Correcting .md to .textproto * Article ordering in metadata + removing number from slug * Actual illustration .svg files * Adding new glossary terms * Adding Nick’s module + articles + basic metadata * Adding Darrell’s `alphabet` + `letters` glossary terms * Renaming all new Glossary images to `thumbnail.svg` * Deleting `color_font` duplicate term * Actual copy for “Color fonts” * Actual copy for “CJK” * Actual copy for “Designspace” * Actual copy for “Emoji” * Actual copy for “Rag” * Actual copy for “Reflow” * Actual copy for “Tofu” * Fixes to “Switching...” article * Minor copy tweaks to “Switching...” * Basic content input for a11y article * More marking up for a11y article * Renaming John’s image files * Real images + captions for History 1 * More type history .svg filename corrections * Placing illos + captions for History 3 article * Placing illos + captions for History 2 article * Trying to add in missing img * Placeholder figures for Hangeul articles * Actual Hangeul SVGs, optimized * Renaming relevant Hangeul illos to `thumbnail.svg` * Illo pathname + actual caption for Hangeul 1 * Illo pathname + actual caption for Hangeul 2 * Illo pathname + actual caption for Hangeul 3 * Fix for Hangeul 2 illo filename * Illo pathname + actual caption for Hangeul 4 * Copy tweak for Hangeul 5 * Adding new contributors’ metadata (minus URLs) * Placeholder figures for Nick’s articles * Correcting prev/next on “Switching...” * Module ordering * Removing “Piper Haywood” from Hangeul EP credits * Removing Susanna’s a11y article * Attempting to fix broken URLs in Nick’s module Using https://fonts.google.com/knowledge/ for now while we wait for Nick’s actual URLs. * Correcting `letterform` URL in “Invention of...” * Attempting to fix broken uRLs in Darrell’s module * Removing article titles from `content.md` in Hangeul module --- diff --git a/cc-by-sa/knowledge/contributors.textproto b/cc-by-sa/knowledge/contributors.textproto index 822e1a1c81..9bcea81a0f 100644 --- a/cc-by-sa/knowledge/contributors.textproto +++ b/cc-by-sa/knowledge/contributors.textproto @@ -2,6 +2,10 @@ contributors { name: "Andrew Johnson" personal_site: "https://www.aetherpoint.com/" } +contributors { + name: "Ben Weiner" + personal_site: "" +} contributors { name: "Bram Stein" personal_site: "https://www.bramstein.com" @@ -10,10 +14,18 @@ contributors { name: "Bruce Willen" personal_site: "https://publicmechanics.com" } +contributors { + name: "Cassidy Curtis" + personal_site: "" +} contributors { name: "Cosimo Lupo" personal_site: "https://github.com/anthrotype" } +contributors { + name: "Darrell Penta" + personal_site: "" +} contributors { name: "Dave Crossland" personal_site: "https://twitter.com/davelab6" @@ -50,6 +62,10 @@ contributors { name: "Gerry Leonidas" personal_site: "https://leonidas.net" } +contributors { + name: "Hilary Palmen" + personal_site: "" +} contributors { name: "Jamie Clarke" personal_site: "https://www.jamieclarketype.com" @@ -94,10 +110,30 @@ contributors { name: "Mike Kus" personal_site: "https://www.mikekus.com/" } +contributors { + name: "Minjoo Ham" + personal_site: "" +} +contributors { + name: "Min-Young Kim" + personal_site: "" +} +contributors { + name: "Nick Sherman" + personal_site: "" +} contributors { name: "Niteesh Yadav" personal_site: "https://niteeshyadav.com/" } +contributors { + name: "Oliver Schöndorfer" + personal_site: "" +} +contributors { + name: "Piper Haywood" + personal_site: "" +} contributors { name: "Richard Rutter" personal_site: "https://clagnut.com" @@ -110,6 +146,10 @@ contributors { name: "Rosalie Wagner" personal_site: "http://rosaliewagner.com" } +contributors { + name: "Saki Mafundikwa" + personal_site: "" +} contributors { name: "Santiago Orozco" personal_site: "http://typemade.com" @@ -118,6 +158,14 @@ contributors { name: "Sam Berlow" personal_site: "https://twitter.com/sberlow" } +contributors { + name: "SeHee Lee" + personal_site: "" +} +contributors { + name: "Susanna Zaraysky" + personal_site: "" +} contributors { name: "Thomas Jockin" personal_site: "http://thomasjockin.com" @@ -126,6 +174,10 @@ contributors { name: "Thomas Phinney" personal_site: "https://twitter.com/thomasphinney" } +contributors { + name: "Tom Muller" + personal_site: "" +} contributors { name: "Trent Walton" personal_site: "https://trentwalton.com" diff --git a/cc-by-sa/knowledge/glossary/terms/alphabet/content.md b/cc-by-sa/knowledge/glossary/terms/alphabet/content.md new file mode 100644 index 0000000000..7f1a9614e3 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/alphabet/content.md @@ -0,0 +1,12 @@ +An alphabet typically refers to a [writing system](/glossary/script_writing_system) in which the elemental speech sounds of a language (phonemes) are represented by a set of graphical units, called [letters](/glossary/letters). An individual member of the set is called a letter. + +
+ +![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. diff --git a/cc-by-sa/knowledge/glossary/terms/alphabet/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/alphabet/images/thumbnail.svg new file mode 100644 index 0000000000..e33fe69691 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/alphabet/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/alphabet/term.textproto b/cc-by-sa/knowledge/glossary/terms/alphabet/term.textproto new file mode 100644 index 0000000000..e6324bfae8 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/alphabet/term.textproto @@ -0,0 +1,3 @@ +name: "INSERT_TITLE" +excerpt: "INSERT_EXCERPT" +related_lessons: "INSERT_RELATED_LESSON" diff --git a/cc-by-sa/knowledge/glossary/terms/cjk/content.md b/cc-by-sa/knowledge/glossary/terms/cjk/content.md new file mode 100644 index 0000000000..78e93c2b84 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/cjk/content.md @@ -0,0 +1,9 @@ +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). + +
+ +![ALT](images/thumbnail.svg) + +
+ +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 diff --git a/cc-by-sa/knowledge/glossary/terms/cjk/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/cjk/images/thumbnail.svg new file mode 100644 index 0000000000..79323c16d9 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/cjk/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/cjk/term.textproto b/cc-by-sa/knowledge/glossary/terms/cjk/term.textproto new file mode 100644 index 0000000000..e6324bfae8 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/cjk/term.textproto @@ -0,0 +1,3 @@ +name: "INSERT_TITLE" +excerpt: "INSERT_EXCERPT" +related_lessons: "INSERT_RELATED_LESSON" 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 345a22d3c5..92a1d64f3a 100644 --- a/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md +++ b/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md @@ -1,46 +1,11 @@ -Color, or chromatic, fonts are fonts with two key capabilities non-color, or monochromatic, fonts don't have: +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. -1. They can use many colors in a single glyph or character -1. The font specifies what the colors are - * Though the user may override those colors +
-Contrast with a non-color, or monochromatic font which: +![ALT](images/thumbnail.svg) -1. Can only draw in a single color -1. Cannot specify what the color is, only where "ink" goes - * Some outside entity, such as CSS or a document editor sets the ink color +
-For example, below we see a monochromatic font default rendering: +
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.
-![A monochromatic font with color assigned to each glyph](images/i-want-to-be-colorful.svg) -
A monochromatic font with no color assigned
- -Here is the same set of glyphs from the same font with the color of the ink changed for each glyph. - -![A monochromatic font with color assigned to each glyph](images/am-i-not-colorful.svg) -
A monochromatic font with colors assigned to each glyph
- -The font had no input into these colors, it **only** defined where ink should be placed. - -That's all well and good until we hit an example where: - -1. A single glyph uses multiple colors -1. The colors have semantic meaning - -The classic example, and the only color font most uses encounter at time of writing, is emoji. -This cannot be expressed using "put ink here," it needs multiple specific colors: - -![A glyph with multiple colors with semantic meaning](images/transgender-flag.svg) -
A glyph with multiple colors with semantic meaning
- -Sometimes we need more than simple filled areas. The gradients in this mango bring it to life: - -![A glyph with gradients](images/mango.svg) -
A glyph with gradients
- -Sometimes we need color and gradients to make the best brackets ever made: - -![The world's best ornate brackets](images/ornate-brackets.svg) -
The world's best ornate brackets
- -Google Fonts offers a collection of color fonts, including emoji, for you to play with. \ No newline at end of file +Google Fonts now supports a growing number of color fonts in its library, which can be found at https://fonts.google.com/?coloronly=true diff --git a/cc-by-sa/knowledge/glossary/terms/designspace/content.md b/cc-by-sa/knowledge/glossary/terms/designspace/content.md new file mode 100644 index 0000000000..6a14d33bc7 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/designspace/content.md @@ -0,0 +1,9 @@ +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. + +
+ +![ALT](images/thumbnail.svg) + +
+ +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. diff --git a/cc-by-sa/knowledge/glossary/terms/designspace/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/designspace/images/thumbnail.svg new file mode 100644 index 0000000000..9bd43c0686 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/designspace/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/designspace/term.textproto b/cc-by-sa/knowledge/glossary/terms/designspace/term.textproto new file mode 100644 index 0000000000..e6324bfae8 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/designspace/term.textproto @@ -0,0 +1,3 @@ +name: "INSERT_TITLE" +excerpt: "INSERT_EXCERPT" +related_lessons: "INSERT_RELATED_LESSON" diff --git a/cc-by-sa/knowledge/glossary/terms/emoji/content.md b/cc-by-sa/knowledge/glossary/terms/emoji/content.md new file mode 100644 index 0000000000..288c205cf5 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/emoji/content.md @@ -0,0 +1,13 @@ +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. + +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 ;) + +
+ +![ALT](images/thumbnail.svg) + +
+ +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. + +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 diff --git a/cc-by-sa/knowledge/glossary/terms/emoji/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/emoji/images/thumbnail.svg new file mode 100644 index 0000000000..294cba7734 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/emoji/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/emoji/term.textproto b/cc-by-sa/knowledge/glossary/terms/emoji/term.textproto new file mode 100644 index 0000000000..e6324bfae8 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/emoji/term.textproto @@ -0,0 +1,3 @@ +name: "INSERT_TITLE" +excerpt: "INSERT_EXCERPT" +related_lessons: "INSERT_RELATED_LESSON" diff --git a/cc-by-sa/knowledge/glossary/terms/letters/content.md b/cc-by-sa/knowledge/glossary/terms/letters/content.md new file mode 100644 index 0000000000..89fb727630 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/letters/content.md @@ -0,0 +1,13 @@ +The set of graphical symbols used to represent speech sounds in an [alphabetic](/glossary/alphabet) [writing system](/glossary/script_writing_system) are generally referred to as letters. + +
+ +![ALT](images/thumbnail.svg) + +
+ +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 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/letters/images/thumbnails.svg b/cc-by-sa/knowledge/glossary/terms/letters/images/thumbnails.svg new file mode 100644 index 0000000000..102360935f --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/letters/images/thumbnails.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/letters/term.textproto b/cc-by-sa/knowledge/glossary/terms/letters/term.textproto new file mode 100644 index 0000000000..e6324bfae8 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/letters/term.textproto @@ -0,0 +1,3 @@ +name: "INSERT_TITLE" +excerpt: "INSERT_EXCERPT" +related_lessons: "INSERT_RELATED_LESSON" diff --git a/cc-by-sa/knowledge/glossary/terms/rag/content.md b/cc-by-sa/knowledge/glossary/terms/rag/content.md new file mode 100644 index 0000000000..3bd580f378 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/rag/content.md @@ -0,0 +1,9 @@ +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. + +
+ +![ALT](images/thumbnail.svg) + +
+ +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. diff --git a/cc-by-sa/knowledge/glossary/terms/rag/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/rag/images/thumbnail.svg new file mode 100644 index 0000000000..c28588be66 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/rag/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/rag/term.textproto b/cc-by-sa/knowledge/glossary/terms/rag/term.textproto new file mode 100644 index 0000000000..e6324bfae8 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/rag/term.textproto @@ -0,0 +1,3 @@ +name: "INSERT_TITLE" +excerpt: "INSERT_EXCERPT" +related_lessons: "INSERT_RELATED_LESSON" diff --git a/cc-by-sa/knowledge/glossary/terms/reflow/content.md b/cc-by-sa/knowledge/glossary/terms/reflow/content.md new file mode 100644 index 0000000000..a8d0ecd4c1 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/reflow/content.md @@ -0,0 +1,13 @@ +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. + +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. + +
+ +![ALT](images/thumbnail.svg) + +
+ +On the web and on screens in general, designers tend not to be strict about reflow, because they’re targeting a wide variety of viewports, and it’s the viewport that determines how many words appear per line. This can lead to problems; for instance, a long heading may take up multiple lines on a mobile device, causing the reader to scroll in order to see the body of the content. + +Generally speaking, good typographic practice should allow for reflow and optimize the layout with responsive design methods. diff --git a/cc-by-sa/knowledge/glossary/terms/reflow/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/reflow/images/thumbnail.svg new file mode 100644 index 0000000000..65c351562a --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/reflow/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/reflow/term.textproto b/cc-by-sa/knowledge/glossary/terms/reflow/term.textproto new file mode 100644 index 0000000000..e6324bfae8 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/reflow/term.textproto @@ -0,0 +1,3 @@ +name: "INSERT_TITLE" +excerpt: "INSERT_EXCERPT" +related_lessons: "INSERT_RELATED_LESSON" diff --git a/cc-by-sa/knowledge/glossary/terms/tofu/content.md b/cc-by-sa/knowledge/glossary/terms/tofu/content.md new file mode 100644 index 0000000000..a3adc5071a --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/tofu/content.md @@ -0,0 +1,11 @@ +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. + +
+ +![ALT](images/thumbnail.svg) + +
+ +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. diff --git a/cc-by-sa/knowledge/glossary/terms/tofu/images/thumbnail.svg b/cc-by-sa/knowledge/glossary/terms/tofu/images/thumbnail.svg new file mode 100644 index 0000000000..5892122f80 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/tofu/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/tofu/term.textproto b/cc-by-sa/knowledge/glossary/terms/tofu/term.textproto new file mode 100644 index 0000000000..e6324bfae8 --- /dev/null +++ b/cc-by-sa/knowledge/glossary/terms/tofu/term.textproto @@ -0,0 +1,3 @@ +name: "INSERT_TITLE" +excerpt: "INSERT_EXCERPT" +related_lessons: "INSERT_RELATED_LESSON" 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 new file mode 100644 index 0000000000..757e309e02 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/content.md @@ -0,0 +1,76 @@ +Korea during the reign of King Sejong (1418---1450 CE) was similar to nearly all other literate societies throughout history in that learning and using an [alphabet](/glossary/alphabet) was a privilege reserved for relatively few people. + +As a consequence, alphabets have rarely been designed or optimized to make reading and writing easier. + +In designing Hangeul, however, King Sejong found several opportunities to improve the user experience for both of these activities, reflecting his intention to make the Korean alphabet as user-friendly as possible. + +## Syllable Blocks for Readers + +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. + +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. + +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. + +To offer an oversimplified explanation: A typical syllable block contains a consonant letter placed at the top-left of the block, followed by a vowel letter placed directly to the right or below it, which is followed (where needed) by another consonant letter placed at the bottom of the block. + +
+ +![An English sentence using syllable blocks.](images/hangeul_4_fig_1.svg) + +
+
An example of the English sentence, *The puppy is soft*, using a syllable-block approach.
+ +The use of syllable blocks has several benefits for the reader. + +In one reading experiment, for example, researchers found that American university students enrolled in Korean language courses, from beginner to advanced levels, had faster reading times when Hangeul phrases were presented with letters in block format versus a linear format (i.e., one letter after another, as in English) (Kim & Sohn, 1986). + +More generally, syllable blocks may help facilitate a readers' word processing abilities by making a word's syllable count more obvious. + +The reason why this matters for reading is because, as users of language, we mentally keep track of everything we know about a word, including its syllable count, and we rely on this kind of information to help us recognize words during reading. + +For users of the English alphabet, syllable information is hardly obvious (except, perhaps, for short, one-syllable words), and the number of letters in a word is not a reliable indicator of syllable count. + +For example, *technology* is a 10-letter word with four syllables; *compassion* is a 10-letter word with three syllables; and *blacksmith* is a 10-letter word with two syllables. + +Among other potential advantages, Hangeul's syllable blocks therefore provide readers with a simple yet effective way of gathering syllable information during reading, which reduces the cognitive demands on the user. + +For writers, King Sejong was no less innovative in incorporating usability into his designs. + +
+ +![Three Korean words with English translations.](images/thumbnail.svg) + +
+
Three Korean words of 2, 3, and 4 syllables shown with their corresponding English translations, each with 10 letters but with varying syllable lengths.
+ +## Efficiency for Writers + +Given the convenience of technology, many of us are likely to spend more time writing with a keyboard or keypad than with a pen and paper. + +Throughout history, available technologies have directly influenced how alphabets are written---from a stylus pressed into clay for writing Sumerian in the 4th century BCE, to the brush, ink, and paper used for writing Chinese (by 100 BCE). + +During King Sejong's lifetime, writers followed in the Chinese tradition of using brush, ink, and paper. With the use of these tools as a natural constraint, King Sejong appears to have considered the relationship between the effort required to produce a brush stroke, and the frequency of the letter being written. + +Specifically, he designed Hangeul so that the most frequent vowel sounds are produced using a vertical stroke, while less frequent vowel sounds are produced using a horizontal stroke. + +
+ +![Vertical and horizontal Korean letters.](images/hangeul_4_fig_3.svg) + +
+
Three high-frequency Korean vowels constructed from vertical lines are contrasted with three low-frequency vowels constructed from horizontal lines.
+ +According to some scholars (e.g., Lee, q997), because it's easier to move our fingers vertically than horizontally (whether using a brush or other similar instrument), less effort is required when producing vertical versus horizontal strokes. + +By reserving easier strokes for the most frequent vowels, King Sejong found a thoughtful way of addressing the needs of the writer. + +Such insight may seem inconsequential in the grand scheme of things, but taken together with the many other innovations of Hangeul, it provides additional evidence that the Korean alphabet was designed with a genuine focus on meeting the needs of the people who would use it. + +## References + +Kim, C. W., & Sohn, H. (1986). *A phonetic model for reading: Evidence from Korean.* Studies in the Linguistic Sciences, 16(2), 95--105. + +Lee, S.-O. (1997). Graphical ingenuity in the Korean writing system: With new reference to calligraphy. In Kim-Renaud, Y.-K. (Ed.),*The Korean alphabet: Its history and structure* (pp. 107-116). University of Hawaii Press. diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_1.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_1.svg new file mode 100644 index 0000000000..940e43a9e3 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_3.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_3.svg new file mode 100644 index 0000000000..109a00c58d --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/thumbnail.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/thumbnail.svg new file mode 100644 index 0000000000..c1f4ce6bb2 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto new file mode 100644 index 0000000000..a6c41829cf --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto @@ -0,0 +1,11 @@ +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" +prev_lessons: "making_the_details_matter" +next_lessons: "lessons_from_hangeul" +related_terms: "script_writing_system" +excerpt: "INSERT" 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 new file mode 100644 index 0000000000..bdac36e614 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/content.md @@ -0,0 +1,90 @@ +Nearly 600 years ago, King Sejong the Great of Korea undertook a design challenge for which there was little precedent in human history: He set out to create a new [alphabet](/glossary/alphabet) for the common people of his nation. + +Working against King Sejong was the reality that alphabets take significant time and effort to learn, even under the best conditions. While the privileged members of society had ample time and opportunity to become literate, the vast majority of citizens had no such advantages. + +Therefore, rather than simply creating a new alphabet, King Sejong understood that realizing his vision of mass literacy would depend on creating an alphabet that could be learned quickly and with minimal effort. + +## 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. + +Contributing to difficulty is that these associations, along with other design features of alphabets, tend to be rather arbitrary. + +Learners of the English alphabet, for example, come to understand that the letter *S* corresponds to the sound "S," but there's nothing special about this particular letter that makes this relationship obvious, nor is there any obvious relationship between this letter and other letters of the alphabet. + +Stated simply, alphabets include a lot of information, but most of the time, that information isn't helpful to a learner. + +What distinguishes King Sejong from the alphabet creators that came before him was that he made helpfulness a central part of his design approach. + +## 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. + +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. + +
+ +![28 different Hangeul letters.](images/hangeul_2_fig_1.svg) + +
+
An example of 28 different Hangeul letters, similar in appearance to what they would have looked like when originally created.
+ +Geometry certainly isn't a requirement for letter design, and it's fair to say that humankind has produced alphabets that are aesthetically marvelous. + +Yet this design decision exemplifies an important insight on the part of King Sejong: Because people are likely to encounter geometric shapes in their daily lives, the characters of Hangeul might feel at least partially familiar to new learners, for whom "writing was a mystery, a secret code in the literal sense of the word" (Coulmas, 1989). + +Modern professionals know that incorporating familiarity into the design of technologies supports usability. + +Almost six centuries ago, King Sejong seems to have arrived at this insight on his own, and in sacrificing ornate beauty for geometric simplicity, King Sejong likely lowered a barrier of entry for the people his alphabet was intended to serve. + +## Emphasizing Distinction + +A second feature of Hangeul related to the letter shapes was used to signal a key distinction between consonants and vowels, which are the two primary classes of speech sounds. + +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). + +
+ +![Some Korean Consonant and Vowel letters.](images/hangeul_2_fig_2.svg) + +
+
Examples of Korean Consonant and Vowel letters illustrating visual distinction.
+ +This visual treatment has the effect of signaling differences between the groups of vowel and consonant letters. + +Like many other alphabets, English doesn't rely on different visual cues to call out such groupings, and without explicit training, learners would likely find it impossible to infer that *A*, *E*, *I*, *O*, and *U* are functionally different from the other letters. + +Again, King Sejong appears to have known that this design decision could serve as a useful affordance to the learner of Hangeul, who could rely solely on basic visual cues to differentiate consonants and vowels. + +## Reducing Confusability + +While focusing on simplistic geometric letter designs for Hangeul, King Sejong was also aware that the letters should be easily distinguishable from each other. + +According to some scholars, he seems to have rejected several candidates that would have otherwise fit perfectly well into the geometric aesthetic of Hangeul, but that could have been easily confused by learners (Lee, 2021). + +In particular, he avoided letters that were vertical or horizontal mirror images of each other. + +
+ +![Example of existing and rejected letters.](images/thumbnail.svg) + +
+
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). + +Once again, King Sejong's design decision to emphasize letter distinguishability reflects his intentions of making Hangeul as user-friendly as possible. + +Today, designers understand that presenting people with clear and relevant information is critically important for learnability and usability. In many respects, King Sejong was remarkably ahead of his time in creating Hangeul with this principle in mind. + +In the next article, we'll examine several more design features of Hangeul that brilliantly solve problems for the people who use it. + +## References + +Coulmas, F. (1989). *The writing systems of the world*. Blackwell Publishing. + +Ehri, L. C. & Roberts, T. (2006). *The roots of learning to read and write: Acquisition of letters and phonemic awareness*. In D.K. Dickinson & S. B. Neuman (Eds.) *Handbook of early literacy research* (Vol. 2, pp. 113--34). Guilford Publications. + +Lee, S.-O. (1997). Graphical ingenuity in the Korean writing system: With new reference to calligraphy. In Kim-Renaud, Y.-K. (Ed.),*The Korean alphabet: Its history and structure* (pp. 107-116). University of Hawaii Press. diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_1.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_1.svg new file mode 100644 index 0000000000..5cc6ae2103 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_2.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_2.svg new file mode 100644 index 0000000000..d6265e3e10 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/thumbnail.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/thumbnail.svg new file mode 100644 index 0000000000..ac1af263b1 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/lesson.textproto b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/lesson.textproto new file mode 100644 index 0000000000..22341629ca --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/lesson.textproto @@ -0,0 +1,15 @@ +name: "Designing for Learnability" +authors: "Darrell Penta" +reviewers: "Cassidy Curtis" +reviewers: "Minjoo Ham" +reviewers: "Min-Young Kim" +reviewers: "SeHee Lee" +topics: "hangeul" +prev_lessons: "introduction_to_hangeul" +next_lessons: "making_the_details_matter" +related_terms: "geometric" +related_terms: "monospaced" +related_terms: "diacritic_accent_marks" +related_terms: "uppercase_lowercase" +related_terms: "letters" +excerpt: "INSERT" diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/content.md b/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/content.md new file mode 100644 index 0000000000..b764788fbc --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/content.md @@ -0,0 +1,62 @@ +In most societies throughout history, the ability to read and write was an exclusive privilege of the elite, who wielded literacy as an "instrument of social control" over the non-literate population of common people (Coulmas, 1989). + +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]). + +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. + +As we'll see throughout the course of several articles, Hangeul reflects King Sejong's profound desire to overcome the design flaws that are inherent to most other alphabets, making him one of the first genuine UX practitioners in history. + +## Where Do Alphabets Come From? + +Scholars have long recognized King Sejong's alphabet for its technological innovations---it's even been called "one of the great intellectual achievements of [humankind]" (Sampson, 2015). + +It's not simply the number of innovations or the degree of innovativeness reflected in Hangeul that makes it so remarkable; rather, it's that it is innovative at all. + +In fact, as a species, we've been surprisingly unimaginative when it comes to our alphabets. + +Since the invention of writing in Mesopotamia more than 5000 years ago, there have only been maybe three other occasions in which a culture independently invented an alphabet on its own. + +
+ +![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.
+ +All the world's subsequent alphabets have, at a minimum, been informed by these early examples, and nearly all have been direct adaptations. + +From a sociocultural standpoint, the adaptation approach has enormous benefits: For any pre-literate society, adopting an existing alphabet from another society means gaining access to a transformative technology, more or less for free. + +However, because no two languages are identical, adaptation isn't a plug-and-play process. To account for linguistic differences, our ancestors have routinely found it necessary to make changes to the form and function of their adapted alphabets. + +In most cases, these changes make the modified alphabet functional, but still imperfect. King Sejong acknowledged as much in *Hunminjeongeum*, the document in which he formally describes Hangeul, explaining that the modified Chinese writing system traditionally used in Korea was not well-suited for representing the Korean language. (Korean and Chinese belong to different language families and bear little structural resemblance to each other.) + +Of course, history tells us that the inconveniences of using an imperfect alphabet don't ordinarily result in a total redesign. So what was different about King Sejong? + +## The Need for a New Alphabet + +In essence, King Sejong recognized that legacy writing systems, no matter how modified they are, have a critical usability issue: They take a long time to learn. + +This wasn't an issue that negatively affected the aristocracy, who had all the resources to become functionally literate. Rather, to those in power in Korea and in other literate societies, this actually worked to their benefit, which is why they had little incentive to make alphabets easier to learn. + +But King Sejong knew that his intended audience of common people had little time and leisure for learning. + +Thus, to realize his grand and radical vision of bringing literacy to the masses, he knew that he would need to devise an alphabet unlike any other---one that put the needs of the user first. + +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. + +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. + +For thoroughness, however, I'll note here that Hangeul is commonly called an alphabet, but it could more accurately be described as a *featural* writing system (and, in fact, may be considered the first such writing system of its kind!). + +## References + +Coulmas, F. (1989). *The writing systems of the world*. Blackwell Publishing. + +Sampson, G. (2015). *Writing systems* (2nd ed.). Equinox Publishing. diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/images/thumbnail.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/images/thumbnail.svg new file mode 100644 index 0000000000..0cca35565d --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/lesson.textproto b/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/lesson.textproto new file mode 100644 index 0000000000..5ac2e9623a --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/introduction_to_hangeul/lesson.textproto @@ -0,0 +1,12 @@ +name: "Introduction to Hangeul, the Korean alphabet" +authors: "Darrell Penta" +reviewers: "Cassidy Curtis" +reviewers: "Minjoo Ham" +reviewers: "Min-Young Kim" +reviewers: "SeHee Lee" +topics: "hangeul" +next_lessons: "designing_for_learnability" +related_terms: "alphabet" +related_terms: "letters" +related_terms: "script_writing_system" +excerpt: "INSERT" diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/content.md b/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/content.md new file mode 100644 index 0000000000..9e7958a9ae --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/content.md @@ -0,0 +1,55 @@ +Throughout his lifetime (1397–1450), King Sejong the Great of Korea was both passionate and vocal about his conviction that every person, regardless of their position in society, should have the opportunity to become literate. + +Because he understood the usability limitations of existing [alphabets](/glossary/alphabet), he saw an opportunity to completely re-imagine how a writing system could work. + +Specifically, in designing Hangeul, he broke from thousands of years of tradition by purposefully creating an alphabet that was easy to learn, easy to read, and easy to write---and he defied the strict societal norms of his day by using his creation to help common citizens become literate. + +The story of King Sejong and the creation of the Korean alphabet surely offers some lessons for today's design challenges, whether our intention is to make a website more readable or to transform the lives of those around us. + +## Solving for the People + +The first lesson for human-centered design is to be principled and predictable. + +What is clear from an examination of Hangeul is that King Sejong had a firm grasp on the principles he wanted to employ for his alphabet, and he consistently incorporated these principles into his designs---for example, using different visual treatments to help differentiate consonant [letters](/glossary/letters) from vowel letters. + +When learning a new technology, there may be nothing less helpful than arbitrary design; on the other hand, good design affords us the benefit of predictability, and good design is (almost!) always principled. + +Another important lesson from Hangeul is to care deeply about Information Architecture. + +Objectively, most of King Sejong's innovations revolve around new or improved ways of providing meaningful information to users. + +One of the most notable ways he accomplished this, for instance, was in his use of letter shapes that resemble the speech organs used when producing their corresponding sounds. + +As humans, it's in our nature to seek meaning from the chaos of information we encounter (which is one reason why we tend to perceive familiar shapes in clouds). + +As designers, we can help the people who use our designs by being deliberate in how we present the information we have to share. + +The third lesson to consider is to embrace your constraints. + +Arguably, what allowed King Sejong to produce an alphabet that was so distinguishable from others was that he fully embraced the constraints he faced--for example, aiming to create letters that could be easily read and easily written, rather than just settling on optimizing for one of these experiences. + +It's understandable that, when we're faced with really hard design challenges, we often look for shortcuts or work-arounds, but the common saying, *Necessity is the mother of invention*, bears some truth. + +The fourth lesson from Hangeul is to focus on solving the hardest problems. + +History tells us that designing alphabets is a hard enough problem to solve that our species has resorted mostly to recycling old solutions. + +King Sejong could have set out simply to design a new alphabet, but part of his brilliance was in recognizing the hardest problem: How to create an alphabet that could quickly be learned by people who would be learning under the least optimal conditions. + +The more we empathize with others, the more likely we are to recognize the hardest problems; and the more we focus on solving these problems, the more likely we are to produce designs that improve the human condition. + +This point leads us finally to our last lesson, which is to work with empathy. + +King Sejong spent years of his life laboring to solve a problem that he personally did not experience. That is, although he was literate, he believed deeply in the importance of bringing literacy to his people, even though such an outcome would threaten the very power structure of which he was at the top. + +Empathy is central to the philosophy of modern-day UX design, but there's never a bad time to remind ourselves of just why this is so important. + +## From the Past to the Future + +We don't often think of alphabets as tools that are capable of harming or helping others, but looking back in history at the creation of Hangeul, we can see that this is very much the case. + +For those of us that work with the artifacts of language, the story of King Sejong might serve as a reminder that there are always opportunities to bring about positive change through our efforts, even when we're faced with seemingly insurmountable design challenges. + +It is encouraging that today's type-designers, typographers, and UX practitioners are already leading the charge, making the world's writing more readable, designing type that supports individual accessibility needs, and, through initiatives like [Noto](https://fonts.google.com/noto?query=open), helping to ensure that the alphabets from an increasing number of endangered languages can be used with modern technology. + +Perhaps if he were alive today, King Sejong would be delighted to see so many others carrying on in his spirit. diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/images/thumbnail.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/images/thumbnail.svg new file mode 100644 index 0000000000..749cdbb0c5 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/lesson.textproto b/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/lesson.textproto new file mode 100644 index 0000000000..c221cd3ca5 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/lesson.textproto @@ -0,0 +1,12 @@ +name: "Lessons from Hangeul" +authors: "Darrell Penta" +reviewers: "Cassidy Curtis" +reviewers: "Minjoo Ham" +reviewers: "Min-Young Kim" +reviewers: "SeHee Lee" +topics: "hangeul" +prev_lessons: "an_alphabet_for_reading_and_writing" +related_terms: "alphabet" +related_terms: "letters" +related_terms: "script_writing_system" +excerpt: "INSERT" 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 new file mode 100644 index 0000000000..632bd459d8 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/content.md @@ -0,0 +1,76 @@ +King Sejong the Great began designing a new [alphabet](/glossary/alphabet) for the Korean language in the mid-15th century in the hopes of bringing literacy to common citizens. + +Although he was inspired by the design of Chinese, Tibetan Phags-Pa, and other alphabets, he understood that learning any alphabet is inherently difficult, and that to realize his goal, he would need to create a system that was radically different from all the others. + +Looking through a modern-day User Experience (UX) lens, we can say that King Sejong found his solution through Information Architecture, or the structuring of information in a way that supports the end-users' goals. + +## 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. + +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. + +In the case of King Sejong specifically, the challenge at hand was in how to make these details matter. + +It can be easy to overlook the importance of solving this problem, because once we've learned an alphabet, we typically don't need to focus our attention on letter details (unless, of course, we are in the business of working with type!). + +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\";"}) + +
+ +![Correct and incorrect versions of a lowercase looptail letter G.](images/hangeul_3_fig_1.svg) + +
+
Example of a stimulus used in an experiment, showing a lowercase looptail letter *G* ([g]{style="font-family:\"Times New Roman\";"}), along with three additional incorrect versions in which various parts of the correct letter are subtly transformed.
+ +Although people routinely encounter (and successfully use) the letters and letter variants of their alphabet, this study highlights an important point: When you're learning an alphabet, there are lots of details to keep track of, but they don't always matter in meaningful ways. + +When King Sejong approached the design of Hangeul, he focused his attention on including details that would make it easier for folks to learn the alphabet. + +## A Blueprint for Articulation + +One of the most innovative design properties of Hangeul is that it provides its users with a basic blueprint for articulation. + +That is, the shapes of the consonant letters were designed to work as iconic representations of the major speech organs involved in producing their corresponding sounds, including the lips, tongue, and teeth. + +
+ +![Korean letters and their relevant speech organs.](images/hangeul_3_fig_2.svg) + +
+
Five letters from the Korean alphabet superimposed over line drawings of human speech organs, with each letter corresponding to a different speech organ. Below each letter, the approximate sound in English is given.
+ +Although people are unlikely to reference this blueprint once they've become proficient in the alphabet, to the learner, it could be quite beneficial. + +Evidence from modern cognitive science, for example, suggests that many aspects of human cognition are [embodied](https://en.wikipedia.org/wiki/Embodied_cognition), meaning that we encode abstract concepts not only in our minds, but in our perceptual and sensori-motor systems as well. + +Within this framework, it might be argued that Hangeul uses a visual reminder of the body's role in producing speech sounds, which could facilitate learning by engaging the learner's physical being. + +## Building Off of a Base + +King Sejong's approach of mapping important speech details to visual details didn't stop at modeling letters after speech organs; rather, Hangeul incorporates a principle in which sounds that share similar vocalization properties are modeled on a common base letter. + +
+ +![Three Korean letter from one base letter.](images/thumbnail.svg) + +
+
The Korean letters corresponding to the English sounds "N", "D", and "T". The *N* letter is considered the base shape, and the *D* and *T* letters add one and two lines respectively to the base.
+ +For example, if you focus on what's happening in your mouth as you pronounce the "N" sound (i.e., as though you were slowly saying the word *Nice*), you'll notice that you're making a continuous vibration while your tongue is placed somewhere behind the top row of teeth. + +In Hangeul, the letter corresponding to the "N" sound would be treated as the symbolic base. If you next focus on producing the "D" sound, you'll notice that your tongue is in the same position as before, but that the vibration is initially stopped; and with the "T" sound, that you've both stopped vibration and added a burst of air with your tongue in the same position. + +In Hangeul, these sound dimensions are reflected by adding one line to the original base letter *(N)* for the *D* letter, and by adding two lines for the *T* letter. + +This same paradigm is used throughout Hangeul, making it the world's first alphabet to incorporate linguistic sound features at this level of detail. (Consequently, linguists often describe it as a *featural writing system* rather than an alphabet). + +While the letter designs in every alphabet might be considered arbitrary to some extent, the fact that the letters of Hangeul differ in predictable and meaningful ways is likely to help learners develop a useful mental model about how the alphabet works. + +This attention to the small details of letter design exemplifies King Sejong's desire to solve problems for the benefit of his intended audience. + +In the next article, we'll take a look at how King Sejong approached the creation of Hangeul with an understanding of different use cases. diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_1.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_1.svg new file mode 100644 index 0000000000..09e84f85e9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_2.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_2.svg new file mode 100644 index 0000000000..749cdbb0c5 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/thumbnail.svg b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/thumbnail.svg new file mode 100644 index 0000000000..f254a20e80 --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/lesson.textproto b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/lesson.textproto new file mode 100644 index 0000000000..5db74a42dc --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/lesson.textproto @@ -0,0 +1,16 @@ +name: "Making the Details Matter" +authors: "Darrell Penta" +reviewers: "Cassidy Curtis" +reviewers: "Minjoo Ham" +reviewers: "Min-Young Kim" +reviewers: "SeHee Lee" +topics: "hangeul" +prev_lessons: "designing_for_learnability" +next_lessons: "an_alphabet_for_reading_and_writing" +related_terms: "alternates" +related_terms: "legibility" +related_terms: "readability" +related_terms: "type_designer" +related_terms: "typographer" +related_terms: "uppercase_lowercase" +excerpt: "INSERT" diff --git a/cc-by-sa/knowledge/modules/hangeul/module.textproto b/cc-by-sa/knowledge/modules/hangeul/module.textproto new file mode 100644 index 0000000000..701206c04c --- /dev/null +++ b/cc-by-sa/knowledge/modules/hangeul/module.textproto @@ -0,0 +1,7 @@ +name: "Hangeul" +lessons: "introduction_to_hangeul" +lessons: "designing_for_learnability" +lessons: "making_the_details_matter" +lessons: "an_alphabet_for_reading_and_writing" +lessons: "lessons_from_hangeul" +excerpt: "TBC" 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 new file mode 100644 index 0000000000..75c56ac854 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/content.md @@ -0,0 +1,61 @@ +Imagine copying an entire book, letter by letter, word by word over hundreds of pages—by hand! Sometimes your hands and back would be sore—something that became a popular refrain for medieval copyists or scribes who, upon completion, often wrote, “three fingers write, but the whole body aches.” And, many centuries before electricity, when the sun set each day, you’d continue writing by candlelight. When you made a mistake, you’d take a small penknife and scratch away the offending ‘typo’, and try again. For more than a thousand years, that’s pretty much how books were reproduced. They were typically copied on-demand. So you’d first have to borrow a copy, then usually pay a professional scribe to copy it. Weeks, months, or even years later, your new book would be ready. This painfully slow and laborious process was costly, and was reflected in the price of books, which for centuries remained scarce and expensive. + +In East Asia, that situation would change with the introduction of woodblock printing. By the ninth century, and likely even earlier, the Chinese were printing whole books with woodcuts. Entire pages were cut in relief in wood, inked, then printed by rubbing the back of the paper. The Chinese also invented printing with individual [characters](/glossary/character) that could be reused. In the mid-eleventh century, during the early Song Dynasty, Bi Sheng invented movable (or rearrangeable) type made from baked clay—although his invention, unlike woodblock printing, was not widely adopted. By the early thirteenth century, metal movable [type](/glossary/type) was being used in Korea. Movable type would not be adopted in Europe until the mid-fifteenth century. Its European inventor, or reinventor, was an ingenious German goldsmith and entrepreneur living in the city of Mainz. + +Johannes Gutenberg, some time in the 1440s, found a way, using an ingenious handheld mold, to cast individual letters from an alloy mostly of lead and tin. This alloy has a low melting point and cools quickly, enabling Gutenberg and his team to rapidly produce hundreds of thousands of pieces of metal type. Another great thing about Gutenberg’s fonts was that they were recyclable. When the type became damaged or worn, then it could simply be melted down and recast into crisp new letters. + +
+ +![ALT](images/GFKhistoftype1_metaltype.svg) + +
+ +
Movable type reproduces individual characters or glyphs as discrete pieces of metal type (also called sorts), printed in relief.
+ +## The first European fonts + +The very first fonts in Europe were modeled on contemporary gothic calligraphy—the kind used for formal documents and books. Gutenberg wasn’t trying to revolutionize the alphabet—his aim was to mass produce books. So it made complete sense to make his fonts resemble the [calligraphy](/glossary/calligraphy) that scribes used in manuscript or handwritten books—letters that readers were familiar with. + +
+ +![ALT](images/GFKhistoftype1_gutenberggothic.svg) + +
+ +
Typeface of the Gutenberg Bible, c. 1454
+ +## The first roman fonts + +Printing soon spread from Germany to neighboring countries, even crossing the Alps to the south and establishing itself in the Italian Peninsula by the early 1460s, where the combination of active trade routes and a vibrant financial environment supported new endeavors. Throughout Europe, for writing, various regional forms of gothic script were used. In Italy and the Iberian peninsula, a rounder and more open form of gothic called Rotunda was popular. It was used for most kinds of documents and books, but when it came to producing works by classical authors, the likes of Cicero, Seneca, and Lucretius, for example, then an entirely different kind of script was sometimes used. As a [typeface](/glossary/typeface), it eventually came to be called roman. + +
+ +![ALT](images/GFKhistoftype1_earlyroman.svg) + +
+ +
A typical 15th-century roman typeface
+ +This new typeface was based on contemporary humanist script which was a hybrid that modeled its lowercase alphabet on the Carolingian minuscule, first developed in the eighth and ninth centuries under the rule of Charlemagne, but that really came of age during the twelfth-century. This particular late style of Carolingian minuscule was to prove incredibly influential as it was the style copied, developed, and promoted by the founder of the Italian Renaissance, Petrarch. From the 1450s, this lowercase alphabet was increasingly paired with Roman capitals based on those used in first-century Roman inscriptions. By the next decade, the two alphabets had evolved into a unified script, with the lowercase alphabet even taking on some of the characteristics of the Roman capitals, like [serifs](/glossary/serif), for example. + +So, when the very first printers in Italy, German immigrants Arnold Pannartz and Conrad Sweynheym, set up their printing press in Subiaco in the hills outside of Rome, they began by printing the classical Roman authors. And they modeled their new typeface on contemporary humanist scripts. However, it’s important to note that the early roman typefaces, whether they be that of Sweynheym and Pannartz or the roman by Johannes da Spira in Venice (1469) appear not to have slavishly reproduced any single manuscript exemplar. Creating a typeface modeled on [handwriting](/glossary/handwriting) demands many compromises, and so it is better to think of the earliest roman types as ‘inspired’ by contemporary humanist scripts. + +## Nicholas Jenson and the archetypal roman + +The very earliest roman typefaces still displayed some Gothic characteristics, but a watershed in the design of roman typefaces came in 1470, when Frenchman Nicholas Jenson established a print shop in Venice. His new roman typeface pretty much erased any hint of Gothic script from its design, and the Jenson roman quickly became the model for scores of subsequent roman typefaces. As humanism and its enthusiasm for classical culture spread across Europe, the antique letters—roman fonts—went with them. For the humanists, Gothic represented the dark past, roman the bright new future! + +
+ +![ALT](images/GFKhistoftype1_jenson_new.svg) + +
+ +
Roman typeface by Nicholas Jenson (1476)
+ +## Aldus Manutius + +The early roman fonts of the fifteenth century are often called Venetian. Typically, they were rather low in [contrast](/glossary/contrast) (meaning that there was little difference between the thick and thin parts of letters), and this tended to make them appear a little [dark](/glossary/color) on the page. However, roman typeface design would undergo another change in the 1490s, when the great Venetian printer-publisher Aldus Manutius commissioned a new roman typeface from the Bolognese punchcutter, Francesco Griffo. The style is often associated with Bembo, a 20th century revival of Aldus’s roman typeface named after Cardinal Pietro Bembo, whose book _De Aetna_ (1496), was the first to be printed with this new typeface. Aldus’s new typeface united the designs of uppercase and lowercase letters by reducing the weight and height of the capital letters, reducing the overall contrast of the letters, and by making the serifs more uniform in design across both cases. These Aldine designs would go on to influence the great French [type designers](/glossary/type_designer) of the next century. + +## Blackletter and roman today + +These days, [blackletter](/glossary/blackletter) typefaces are seldom used to set long texts. Most readers are unfamiliar with the [letterforms](/glossary/letterform), and would struggle to read lengthy texts in blackletter. However, blackletter or gothic fonts are still popular for branding, associated with all-things medieval, horror literature and movies, heavy metal music, and even beer branding. And some of the oldest newspapers still use blackletter fonts in their mastheads. You might think that the use of blackletter serves to highlight the newspaper’s age, a way of telegraphing, ‘we have a pedigree, we’re well established.’ But Stanley Morison (1889–1967), a British historian of [typography](/glossary/typography), suggested instead that when newspapers commonly began to use blackletter mastheads from the 1700s, their publishers simply wanted the blackest, boldest font available—and, long before the advent of bold display typefaces in the 1800s, blackletter was the only style that fit the bill. diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_earlyroman.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_earlyroman.svg new file mode 100644 index 0000000000..1fe05b92b9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_earlyroman.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_gutenberggothic.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_gutenberggothic.svg new file mode 100644 index 0000000000..3c7996b3a0 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_gutenberggothic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_jenson_new.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_jenson_new.svg new file mode 100644 index 0000000000..db78c3d2d9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_jenson_new.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_metaltype.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_metaltype.svg new file mode 100644 index 0000000000..4037fd0312 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_metaltype.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/lesson.textproto b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/lesson.textproto new file mode 100644 index 0000000000..47c459961e --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/lesson.textproto @@ -0,0 +1,13 @@ +name: "The invention of type" +authors: "John Boardley" +reviewers: "Gerry Leonidas" +reviewers: "Ben Weiner" +topics: "type history" +prev_lessons: "" +next_lessons: "what_have_the_romans_ever_done_for_us" +related_terms: "blackletter" +related_terms: "calligraphy" +related_terms: "latin" +related_terms: "letterform" +related_terms: "type_design" +excerpt: "INSERT_EXCERPT" 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 new file mode 100644 index 0000000000..af5305963f --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/content.md @@ -0,0 +1,63 @@ +In Europe, by the seventeenth century roman fonts outnumbered [blackletter](/glossary/blackletter). And throughout most of Europe, besides in German speaking lands and parts of Northern Europe, roman fonts were now the natural first choice for most kinds of documents and books. + +The seventeenth century marked an explosion in printed matter, from broadsides and standalone art prints to books and pamphlets, leading some to complain that this glut would ultimately devalue books. Gottfried Leibniz, the famed seventeenth-century polymath, famously bemoaned the “horrible mass of books which keeps on growing.” However, this flood of books not only got people thinking about how to better catalog and categorize books (leading eventually to the discipline of bibliography), but it also affected book design and drove the demand for new typefaces. + +## Constructed alphabets + +In 1692, during the reign of Louis XIV, the French Royal Academy of Sciences commissioned a typeface family for the Imprimerie Royale, the King’s official printer in Paris. Produced by a committee, the typeface best-known as the _romain du roi_ or King’s Roman marks a watershed in typeface design. The King’s Roman was designed on a grid, very much like a sheet of graph paper. This approach to letter design was not entirely new. Already in the fifteenth and early sixteenth centuries, artists, architects, and mathematicians had recreated [Latin](/glossary/latin) alphabets on geometric principles. Two centuries earlier, the calligrapher and poet Felice Feliciano, the architect Leon Battista Alberti, the mathematician Luca Pacioli, and the brilliant German artist and printmaker Albrecht Dürer produced constructed roman alphabets based on a square and drawn ostensibly with compass and straight-edge alone. However, those alphabets appeared to have had no appreciable influence on contemporary type design, remaining little more than textbook novelties. However, the new King’s Roman, the first actual typeface to fully implement these rational design principles, was to prove remarkably influential. + +
+ +![ALT](images/GFKhistoftype3.svg) + +
+ +
From a geometrically constructed alphabet by Albrecht Dürer (1525).
+ +When we say ‘rational’ or ‘rationalized’ with regard to type design, we are describing the underlying or guiding design principles behind the design of the letterforms. So, for example, in earlier romans, we can still see the influence of the broad-nib pen. Rationalization is about removing or turning down the dial on these calligraphic or [handwritten](/glossary/handwriting) features of the design. The resulting typefaces then appear rather more machine-made than hand-made. + +
+ +![ALT](images/GFKhistoftype3_bracketedserifs.svg) + +
+ +
Bracketed serifs.
+ +## Dutch type + +The sixteenth century was a period of rapid expansion in the printing industry, and with it the demand for more type. By the seventeenth century, important centers of typefounding appeared beyond the Italian Peninsula and France, most notably throughout the Low Countries. Among a number of talented [type designers](/glossary/type_designer) working in the Low Countries at this time was Christoffel van Dijck. He established a type foundry in Amsterdam in 1647. In his roman type designs, his lowercase letters are a little narrower, and some of his capitals wider; and, overall the letter-spacing is a fraction tighter than in most of the earlier French designs. This combined with a slightly lower [x-height](/glossary/x_height) (or shorter extenders) makes the type feel, as it’s often described, ‘compact’ or ‘robust.’ When Van Dijck died in 1669, his son briefly took over the business, but then when he too died within three years of his father, everything went up for auction, and most of the type was bought by the Elzevirs, the famed Dutch printer-publishing dynasty. + +## Transitional type + +In the eighteenth century, two other type designers appeared who would leave a lasting impression on the field of type design. William Caslon, from Worcestershire in the English West Midlands, first turned to punchcutting in the 1720s. His typefaces display some French influences, but are predominantly inspired by Dutch types like those of Christoffel van Dijck. When Caslon began designing typefaces, the former Dutch designs were among the most popular in England. Caslon’s designs were also influenced by contemporary calligraphy, notably the fashion for Roundhand, a rounded, formal, high contrast calligraphic script, whose aesthetic appears to have influenced Caslon’s letters—both roman and italic. Caslon’s romans are among the last of the great and popular Old Style typefaces. Caslon was most famously used in the first printed version of the United States Declaration of Independence printed in July, 1776. + +
+ +![ALT](images/GFKmetaltype3_romananditalicofwilliamcaslon.svg) + +
+ +
Roman and italic typefaces by William Caslon, c. 1734.
+ +After making his fortune in japanning (varnished lacquerware), John Baskerville, from the emerging industrial city of Birmingham, also in the West Midlands, turned to printing in the 1750s. He was an exceptional typographer and had very clear ideas about how his pages should appear: High contrast letters, plenty of white space, and very crisp printing. He achieved his typographically light, bright, and spacious pages not only by designing his own typefaces, but also by producing new inks and papers. + +
+ +![ALT](images/GFKhistoftype3_baskerville.svg) + +
+ +
A modern revival of Baskerville’s roman and italic.
+ +Typically, rougher paper requires more pressure from the printing press to ensure even printing. However, higher pressures also means more ‘ink squeeze’ (the amount ink bleeds into and spreads across the paper). Baskerville collaborated with paper maker James Whatman to produce a new kind of smooth paper often called ‘wove paper.’ We can think of smoother paper in letterpress printing as analogous to higher screen resolution, with smoother paper being able to support printing of finer or sharper detail in much the same way as more pixels are able to reproduce finer details on screen. With new inks and very smooth new paper only gentle pressure from the press (called a kiss impression) was required, thus reducing ink squeeze and making for a beautifully crisp print. Benjamin Franklin, at the time living in England and paying frequent visits to Baskerville, was among Baskerville’s most enthusiastic patrons and advocates. Others, however, were critical of Baskerville’s type, complaining that the contrast in his typefaces was so high that reading them could hurt your eyes! In overall design, Caslon’s were more influenced by Dutch designs, whereas Baskerville owes more to Garamont and his contemporaries, and to pioneering [Transitional](/glossary/transitional_neo_classical) typefaces like the King’s Roman. + +
+ +![ALT](images/GFKhistoftype3_evolutionofstress.svg) + +
+ +
From the fifteenth century the stress of letters moved from oblique to upright.
+ +The King’s Roman and Baskerville are known as ‘Transitional’ typefaces because they sit between Old Style and Modern typefaces. From the first romans of the fifteenth century to those of eighteenth, the predominant design trend was a move to upright stress ([axis](/glossary/axis_in_type_design) of rounded letters moved to the perpendicular), and higher [contrast](/glossary/contrast) letterforms with sharper details—a trend that would be further exploited by the likes of Giambattista Bodoni and Firmin Didot in their so-called Modern typeface designs. diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3.svg new file mode 100644 index 0000000000..bd2225b097 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3_baskerville.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3_baskerville.svg new file mode 100644 index 0000000000..740c093a86 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3_baskerville.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3_bracketedserifs.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3_bracketedserifs.svg new file mode 100644 index 0000000000..a3e838167b --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3_bracketedserifs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3_evolutionofstress.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3_evolutionofstress.svg new file mode 100644 index 0000000000..59ff50eaab --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKhistoftype3_evolutionofstress.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKmetaltype3_romananditalicofwilliamcaslon.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKmetaltype3_romananditalicofwilliamcaslon.svg new file mode 100644 index 0000000000..76ccc9f061 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKmetaltype3_romananditalicofwilliamcaslon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/lesson.textproto b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/lesson.textproto new file mode 100644 index 0000000000..d68a98d356 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/lesson.textproto @@ -0,0 +1,15 @@ +name: "Transitional faces" +authors: "John Boardley" +reviewers: "Gerry Leonidas" +reviewers: "Ben Weiner" +topics: "type_history" +prev_lessons: "what_have_the_romans_ever_done_for_us" +next_lessons: "fitting_the_line" +related_terms: "blackletter" +related_terms: "contrast" +related_terms: "italic" +related_terms: "latin" +related_terms: "letterform" +related_terms: "transitional_neo_classical" +related_terms: "type_design" +excerpt: "INSERT_EXCERPT" 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 new file mode 100644 index 0000000000..fa67dfefe9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/content.md @@ -0,0 +1,49 @@ +We can be thankful to the Romans for a number of technological innovations and inventions, including aqueducts, sanitation, irrigation, medicine, education, calendar reform, and even underfloor heating. However, there is yet another Roman invention that is even more familiar and ubiquitous. Adapted from the [Greek](/glossary/greek_script) alphabet, in turn borrowed from the Phoenicians, it’s the [Latin](/glossary/latin) or Roman alphabet. Take a trip to Rome, and you can still see one of the finest examples of these letters inscribed on the base of Trajan’s Column, completed in 113 CE. But these letterforms, or ‘monumental capitals’, went the way of the Roman empire, and eventually fell out of use, evolving into numerous entirely different regional scripts. + +
+ +![ALT](images/GFKhistoftype2_romansquarecapitals.svg) + +
+ +
Roman square capitals from the base of Trajan’s Column in Rome, c. 113 CE.
+ +## Renaissance influencers + +From the fourteenth century, beginning in Florence, Italy, those letters would be given a second life by the humanists. Humanism was a new intellectual movement that arose in Italy in the late fourteenth century, and was the driving force behind the Italian Renaissance. Those humanists considered Greco-Roman antiquity to be a golden age tragically extinguished with the fall of the western Roman Empire in the fifth century CE. They saw the time period from the end of Roman influence to their own day as a kind of ‘middle’ or ‘dark’ age. They made it their mission to rescue classical scholarship, language, and art. For the humanists, gothic script, a product of the Middle Ages, needed to be replaced with something more Roman, in much the same way that they believed gothic or medieval architecture should be replaced by classical designs. + +In the fifteenth century, when Europeans first began printing, almost all books and documents were written in various forms of gothic script, so it was entirely natural to make printed books and documents resemble what everyone was familiar with—and so printers used gothic or [blackletter](/glossary/blackletter) fonts. During the fifteenth century, only a small fraction of books used roman [typefaces](/glossary/typeface). Even in Italy, the birthplace of the humanist script, Roman type was typically reserved for works by classical authors—Roman authors, Roman type! But almost everything else, from law books, to vernacular texts, religious books, and books for students, was invariably printed with blackletter fonts. + +But in the sixteenth century, especially from the 1530s, the balance continued to shift away from blackletter to roman typefaces. Why did that happen? What changed? Well, every age has its influencers, and the fifteenth and sixteenth centuries were no different. During the early years of print, we might say that the humanists were the predominant influencers in Europe. + +## Garamont and Co. + +By the end of the fifteenth century, not only did the cities of the Italian Peninsula constitute the major print center of Europe, but they were also the foremost suppliers of typefaces. However, from the 1530s that began to change, and soon most typefaces were designed and produced in France. Part of this was due to the rise of France as a major economic hub and center of print. Also, especially in Paris, experiments began in printing books historically always printed in gothic, like prayer books, with roman typefaces. The wider adoption of roman type was also influenced by humanist and philologist Geoffroy Tory who, in his 1529 book _Champfleury_, championed both the French vernacular and the use of roman typefaces. The adoption of roman type was also accelerated by the French Court’s insistence that works in the vernacular (in French) be printed in roman types, rather than blackletter. Among those to satisfy the growing demand for roman typefaces was a new generation of punchcutters. Among them were Claude Garamont (also spelled Garamond), Robert Granjon, Antoine Augereau, and Pierre Haultin, to name a few. + +
+ +![ALT](images/GFKhistoftype2_garamond.svg) + +
+ +
EB Garamond, a modern revival of Claude Garamont’s roman and italic.
+ +The designs of Garamont and his talented French contemporaries soon replaced those of Aldus, first in France and eventually even in the Italian Peninsula. They would prove remarkably influential, spawning scores of roman typefaces in the new French Renaissance style. They differed most markedly from their predecessors by having higher [contrast](/glossary/contrast) and more refined modulation. This feature combined with looser letterspacing affects the overall typographic [color](/glossary/color) of the page, making it lighter in appearance. Again it’s an example of a deliberate move away from the gothic aesthetic to a lighter, airier, more ‘classical’ typographic page. + +## Inventing italic + +The sixteenth century also gave us [italic](/glossary/italic). The great Venetian printer Aldus Manutius commissioned the Bolognese designer and punchcutter Francesco Griffo to create a new typeface for a new series of small-format books—smaller than modern-day paperbacks—first published in 1501. This new typeface was based on a cursive form of humanist minuscule (a kind of cursive Renaissance version of Carolingian minuscule), a slightly less formal and more quickly written style of [handwriting](/glossary/handwriting) initially promoted by Renaissance scholars like Niccolò Niccoli, and later adopted by diplomatic chanceries, including the Papal Chancery. For this reason, it later came to be known as cancellaresca corsiva or chancery cursive. The typeface based on the early forms of these scripts was called Aldine or Aldino in Italy, while elsewhere it came to be known as italic (literally, ‘from Italy’). Perhaps Aldus used this new typeface to make his new small-format books appear a little less formal. The other way he achieved this was by doing away with the lengthy commentaries that typically accompanied these classic texts—with the dual benefit of saving space and making the text appear a little less intimidating, and so accessible to a wider audience. + +
+ +![ALT](images/GFKhistoftype2_aldusandgriffoitalic.svg) + +
+ +
Italic typeface by Francesco Griffo and Aldus Manutius.
+ +The first italic typefaces were paired with upright Roman capitals, but within a couple of decades, they were typically paired with newly designed sloping capitals, which soon became the norm. + +## Roman and italic today + +Nowadays we typically don’t follow Aldus’s example and set entire books in italic—although who’s to say you shouldn’t! Instead, italic has long since been relegated to a secondary or supporting role to Roman. We use it for emphasis, for foreign loan words or phrases, _par exemple, en français_, for quotations, and for things like book, magazine, and movie titles. We might also use it as a standalone typeface on a book cover or for some other display purpose. diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_aldusandgriffoitalic.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_aldusandgriffoitalic.svg new file mode 100644 index 0000000000..3bc87ed86c --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_aldusandgriffoitalic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_garamond.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_garamond.svg new file mode 100644 index 0000000000..2257aff1a0 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_garamond.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_romansquarecapitals.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_romansquarecapitals.svg new file mode 100644 index 0000000000..99a0b2b615 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_romansquarecapitals.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/lesson.textproto b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/lesson.textproto new file mode 100644 index 0000000000..0a16cf34ae --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/lesson.textproto @@ -0,0 +1,15 @@ +name: "What have the Romans ever done for us?" +authors: "John Boardley" +reviewers: "Gerry Leonidas" +reviewers: "Ben Weiner" +topics: "type_history" +prev_lessons: "the_invention_of_type" +next_lessons: "transitional_faces" +related_terms: "blackletter" +related_terms: "color" +related_terms: "calligraphy" +related_terms: "greek_script" +related_terms: "latin" +related_terms: "letterform" +related_terms: "type_design" +excerpt: "INSERT_EXCERPT" diff --git a/cc-by-sa/knowledge/modules/history_of_type/module.textproto b/cc-by-sa/knowledge/modules/history_of_type/module.textproto index 8a3e2b0ff2..897158fb13 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/module.textproto +++ b/cc-by-sa/knowledge/modules/history_of_type/module.textproto @@ -1,4 +1,7 @@ -name: "History of type" +name: "History of Latin type" +lessons: "the_invention_of_type" +lessons: "what_have_the_romans_ever_done_for_us" +lessons: "transitional_faces" lessons: "fitting_the_line" lessons: "justification_hyphenation" lessons: "the_tight_not_touching_style" 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 9554a35df2..9caab9d44e 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,27 +1,50 @@ -[Color fonts](/glossary/color_fonts) allow the font to take more control over the drawing process than just "ink of unknown color goes here," -with the color of the ink set by some external entity. +[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: -On the web text is generally drawn in a color specified in CSS. In a document editor the user can typically choose a color -to use for text. The font has no input into the color beyond where to fill and where not to. The font cannot manipulate the color, -such as to define a gradient, it is strictly binary "ink here or not." +```css +@import url('https://fonts.googleapis.com/css2?family=Blaka+Ink&display=swap'); +.classname { + font-family: "Blaka Ink"; +} +``` -We call fonts that only define where ink of an undefined color goes monochromatic or "non-color." +[ILLO showing output of code] -**TODO: should we have a glossary entry for non-color fonts? Switch to Chromatic and Monochromatic?** +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]. -Color fonts can draw in many colors and can specify what those colors should be. Often they add additional drawing capabilities like -gradients or partial opacity. The most common example most users interact with is emoji. +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: -**TODO a nice emoji example** +```css +.classname { + base-palette: 4; + } +``` -Color can be used for so much more than emoji! +[ILLO showing output of code] -**TODO examples from https://developer.chrome.com/blog/colrv1-fonts/ and IUC45** +[FRO: see also https://codepen.io/jh3y/pen/XWqNoEV] -**TODO talk about changing colors** +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: -Unfortunately, there are many ways to construct color fonts and no single approach is widely supported by browsers or -operating systems. The Google Fonts Web API looks at the [User-Agent](https://caniuse.com/mdn-http_headers_user-agent) -header and sends font in the best supported color font format to try to make color fonts "Just Work." +```css +.classname { + base-palette: 4; + override-colors: 0 #00ffbb, 1 #007744, 2 #004433; + } +``` -**TODO: go into detail? Link out? ...just don't?** \ No newline at end of file +The numbers 0, 1, and 2 here are the index IDs for the color swatches within the palette. + +[ILLO showing output of code] + +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: + +```css +INSERT CSS HERE +``` + +[ILLO showing output of code] + +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 diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/content.md b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/content.md new file mode 100644 index 0000000000..d88a151e03 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/content.md @@ -0,0 +1,125 @@ +For many designers, implementing [variable fonts](/glossary/variable_fonts) on a website might mean treating the project as a blank canvas, and using a brand new [typeface](/glossary/typeface) to experiment with the possibilities variable fonts offer. However, swapping out our static fonts for variable ones can be a useful way of dipping your toes into this new world. Plus, moving from a typeface’s static fonts to its variable cousins offers some advantages: With the overall typographic system tried and tested, we’re not actually changing that much; it’s more of a case of finessing our [typography](/glossary/typography)—and saving some data while we’re at it. + +## Manipulating the first axis + +Let’s test this out and make the move from the static version of [Anybody](https://fonts.google.com/specimen/Anybody/), by Tyler Finck, to its newer, variable version. This font contains three variable axes: [Weight](/glossary/weight_axis) (`wght`), [Italic](/glossary/italic_axis) (`ital`), and [Width](/glossary/width_axis) (`wdth`). But before we get into the axes themselves, we first need to actually load the variable fonts. Assuming we’re using the Google Fonts API (of course, we could always download the font files and [self-host](https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts) them), we’ll update the line in our HTML’s `head`—which is currently using the Regular (400), Regular Italic, Bold (700), and Bold Italic styles—from this: + +```html + +``` + +To this: + +```html + +``` + +All we’re changing here is moving from static instances to a *range* of values, with each `..` surrounded by the minimum and maximum values of the axis. In terms of weight, this range then allows us to use *any* value between 100 and 900 for both our upright and italic text. (We’re also adding another axis, `wdth`, which has a range of 50–150, but more on that in a second.) + +In the static world, we had `font-weight` declarations that look like this: + +```css +body { + font-weight: 400; +} + +strong { + font-weight: 700; +} +``` + +![INSERT_ALT](images/switching_to_vfs_1.svg) + +Well, good news, because they *still* look like that! Although specialized variable axes require us to use `font-variation-settings` to control them, the weight axis has been mapped to the `font-weight` property we all know and love. + +So now let’s get a bit more inventive and harness the power of variable fonts to tweak those weights. We’ll make our `body` text a lot lighter (147 rather than 400) and our `strong` text ever-so-slightly lighter than a usual bold (663 rather than 700): + +```css +body { + font-weight: 147; +} + +strong { + font-weight: 663; +} +``` + +![INSERT_ALT](images/switching_to_vfs_2.svg) + +Note: It’s not just the `strong` element that needs to be updated, but also any HTML element where the browser stylesheet is applying a bold weight. Typically, unless they’ve been overridden already, this includes `b`, `h1` to `h6`, and several other elements, including table headings (`th`) and dictionary definitions (`dd`). These will all need the setting of 663, too (or their own custom weight if you’d prefer). + +## The italic axis + +Next, let’s style our italics. Because Anybody’s italic variations are in a separate font file, we can keep using `font-style: italic`, just as we would with a static font: + +```css +em { + font-style: italic; +} +``` + +![INSERT_ALT](images/switching_to_vfs_3.svg) + +Switching italics on and off in this case is very easy because it essentially just swaps between the two files. When uprights and italics (or [obliques](/glossary/oblique)) are bundled within the same variable font file, we need to employ `font-variation-settings` and use the `slnt` axis—see below. + +## Manipulating an additional axis + +It’s time to move onto our third axis: Width (`wdth`). In this font in particular, width wasn’t exposed until the release of this variable version, so it’s a great excuse to make use of variable fonts’ powers of further refinement. + +Once again, the Width axis has been mapped to familiar CSS: we can manipulate it using the `font-stretch` property. The only difference is that, unlike weight, we need to declare it as a percentage. Let’s give our `span` element the maximum width value of 150%: + +```css +span { + font-stretch: 150%; +} +``` + +![switching_to_vfs_4.svg](images/switching_to_vfs_4.svg) + +And while we’re at it, why not make everything *but* the `span` a little more condensed with a font-stretch value of 72%? + +```css +body { + font-stretch: 72%; +} +``` + +![INSERT_ALT](images/thumbnail.svg) + +With some very subtle tweaks to some already familiar code, we’ve switched from the static to variable version of Anybody, and used the power of variable fonts to give our text more stylistic variation that wouldn’t have been possible before, and all without loading multiple font files. Let’s review our final CSS: + +```css +body { + font-family: "Anybody", sans-serif; + font-stretch: 72%; + font-weight: 147; +} + +strong { + font-weight: 663; +} + +em { + font-style: italic; +} + +span { + font-stretch: 150%; +} +``` + +## Going further + +In this example, we’ve stuck to axes that have been mapped to existing CSS properties. If you’re using a font that has a different axis, such as the aforementioned Slant (`slnt`), you’ll need to use `font-variation-settings` to control that parameter. For example: + +```css +body { + font-variation-settings: "slnt" 0; +} + +em { + font-variation-settings: "slnt" 1; +} +``` + +Note that `font-variation-settings` is also required for any custom axes. For more information, please see [“Styling type on the web with variable fonts.”](/lesson/styling_type_on_the_web_with_variable_fonts) \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_1.svg b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_1.svg new file mode 100644 index 0000000000..3cb4b99057 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_2.svg b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_2.svg new file mode 100644 index 0000000000..f16c404433 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_3.svg b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_3.svg new file mode 100644 index 0000000000..ec2f2bf612 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_4.svg b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_4.svg new file mode 100644 index 0000000000..3e63dc4101 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/switching_to_vfs_4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/thumbnail.svg b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/thumbnail.svg new file mode 100644 index 0000000000..f967c20d30 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file 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 new file mode 100644 index 0000000000..390404c488 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/switching_from_static_to_variable_fonts/lesson.textproto @@ -0,0 +1,12 @@ +name: "Switching from static to variable fonts" +authors: "Elliot Jay Stocks" +reviewers: "Laurence Penney" +topics: "variable_fonts" +topics: "web_fonts" +prev_lessons: "styling_type_on_the_web_with_variable_fonts" +next_lessons: "introducing_parametric_axes" +related_terms: "web_font" +related_terms: "weight_axis" +related_terms: "width_axis" +related_terms: "variable_fonts" +excerpt: "INSERT_EXCERPT" diff --git a/cc-by-sa/knowledge/modules/using_type/module.textproto b/cc-by-sa/knowledge/modules/using_type/module.textproto index a26c4061ae..b4cd7cf8f9 100644 --- a/cc-by-sa/knowledge/modules/using_type/module.textproto +++ b/cc-by-sa/knowledge/modules/using_type/module.textproto @@ -16,5 +16,6 @@ lessons: "self_hosting_web_fonts" lessons: "implementing_open_type_features_on_the_web" lessons: "loading_variable_fonts_on_the_web" lessons: "styling_type_on_the_web_with_variable_fonts" +lessons: "switching_from_static_to_variable_fonts" lessons: "introducing_parametric_axes" excerpt: "When you have a typeface, how can you use it with purpose? Equip yourself with the tools and processes needed to most meaningfully work with type, from setting appropriate measures and considered line heights, to working with web fonts and implementing variable fonts." 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 new file mode 100644 index 0000000000..684476a3e8 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/content.md @@ -0,0 +1,33 @@ +# 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? + +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. + +- **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. + +- **How many stylistic variants are used on the page?** A page that only uses one or two variants (e.g. Regular & Bold) will probably see smaller benefits from variable fonts than a page with multiple weights, widths, italics, etc. + +- **How many variable font files are required to match a similar selection of static fonts?** Some typeface families can be stored entirely in a single variable font file, but some must be split into separate files (e.g. for upright and italic variants). And of course separate typeface families will almost always require separate variable fonts. + +- **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 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 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. + +- **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 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.) + +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/). + +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. + +Finally, it should be noted that the answer to many of the questions listed above can be difficult or impossible to know or control with any given project. It is rare for font vendors to share specifics about how many source files were used to produce a variable font, or how much hinting data is in each font. But in many cases the design and functionality of the typeface is more important when choosing a typeface than technical details about its production and delivery. Still, having some limited understanding of the moving parts can still be helpful for optimizing the performance of any project. + +For more info 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/factors_that_influence_the_efficiency_of_variable_web_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/lesson.textproto new file mode 100644 index 0000000000..793d2d3d96 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/factors_that_influence_the_efficiency_of_variable_web_fonts/lesson.textproto @@ -0,0 +1,9 @@ +name: "Factors that influence the efficiency of variable web fonts" +authors: "Nick Sherman" +reviewers: "Laurence Penney" +reviewers: "Piper Haywood" +topics: "variable_fonts" +prev_lessons: "INSERT" +next_lessons: "INSERT" +related_terms: "variable_fonts" +excerpt: "INSERT" 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 new file mode 100644 index 0000000000..d2f65190e2 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md @@ -0,0 +1,77 @@ +# 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 + +For a simple example of hover interaction, let’s consider hyperlinks that change weight on hover: + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
INSERT_CAPTION
+[Figure #1: Basic hover demo] + +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_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. + +## Multiplexed Weight (and Grades) + +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: + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
INSERT_CAPTION
+[Figure #3: Hover demo of a menu made as a row of separate elements instead of a single line.] + +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. + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
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. + +## 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: + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
INSERT_CAPTION
+[Figure #5: Hover demo with more experimental, non-registered axes.] + +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_CAPTION
+[Figure #6: Hover demo where every letter triggers a fast transition in with a slow transition out.] + +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/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/lesson.textproto new file mode 100644 index 0000000000..84fb459b83 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/lesson.textproto @@ -0,0 +1,9 @@ +name: "Interactive animations with variable fonts" +authors: "Nick Sherman" +reviewers: "Laurence Penney" +reviewers: "Piper Haywood" +topics: "variable_fonts" +prev_lessons: "INSERT" +next_lessons: "INSERT" +related_terms: "variable_fonts" +excerpt: "INSERT" 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 new file mode 100644 index 0000000000..83b35066c7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/content.md @@ -0,0 +1,101 @@ +# 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. + +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. + +Higher-level properties like `font-size`, `width`, `padding`, and `line-height` can be set to responsively adapt a typographic composition to differently-sized containers. One of the most common approaches for changing these values on a web page is to use CSS `@media` queries (or the more recent `@container` queries) to set breakpoints where the values of different properties change according to the available space. + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
INSERT_CAPTION
+[Figure 1: Demo of responsive headline + paragraph using media queries.] + +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_CAPTION
+[Figure 2: Demo similar to Figure 1 but relies more on `%`, `vw`, `calc(`), etc.] + +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. + +## 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). + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
INSERT_CAPTION
+[Figure 3: Illustration showing how even small changes in width can result in significant improvements.] + +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_CAPTION
+[Figure 4: Build on previous demos by responsively adjusting font widths.] + +(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.) + +Special care should be taken when adjusting the width of a typeface, particularly in the context of running body text. Extreme widths can adversely affect readability, negating other benefits in spatial efficiency. + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
INSERT_CAPTION
+[Figure 5: Illustration showing the upper and lower limits of acceptable widths for body text.] + +## Line-filling + +Speaking of width, variable fonts with adjustable widths can be used to make different pieces of text fill their containers without changing the font size. Long words can be condensed to fill the same line length as short words without resorting to artificial transformations. (For a real-world example of this effect in use, see [the 2019 Typographics website](https://2019.typographics.com)). Options for achieving this automatically still require some JavaScript, but tools like [Font-To-Width](http://font-to-width.com) or [fit-to-width](https://github.com/Lorp/fit-to-width) can make it relatively easy. + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
INSERT_CAPTION
+[Figure 6: Illustration of different-length words filling the same width at the same size.] + +## 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. + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
INSERT_CAPTION
+[Figure 7: Illustration showing how smaller extenders avoid inter-line crashes.] + +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. + +A technique that is much less common is to use variable fonts with an axis for adjustable extenders. This means extenders can be shortened or lengthened only as much as needed. In a responsive context, this can happen in tandem with reductions to the line space and other properties. + +
+ +![INSERT_ALT](images/INSERT_SVG.svg) + +
+
INSERT_CAPTION
+[Figure 8: Build on previous demos by responsively adjusting extenders.] + +(As with the adjustment to font widths mentioned above, this technique also requires the use of breakpoints or some minimal JavaScript.) + +Those are just some examples of how you might want to harness the flexibility of variable fonts for various spatial optimizations. 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/optimizing_typographic_space_with_variable_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/lesson.textproto new file mode 100644 index 0000000000..87657bc814 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/lesson.textproto @@ -0,0 +1,9 @@ +name: "Optimizing typographic space with variable fonts" +authors: "Nick Sherman" +reviewers: "Laurence Penney" +reviewers: "Piper Haywood" +topics: "variable_fonts" +prev_lessons: "INSERT" +next_lessons: "INSERT" +related_terms: "variable_fonts" +excerpt: "INSERT" 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 new file mode 100644 index 0000000000..845c297bc4 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/content.md @@ -0,0 +1,43 @@ +# 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? + +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. + +- **[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. + +- **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. + +- **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. + +- **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). + +## 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. + +- **[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. + +- **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. + +## 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. + +- **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. + +- **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. + +The new possibilities with variable fonts offer improvements for everything from micro to macro typography, with benefits for both design and technical development. Almost any website today has the potential to benefit from using them in one way or another, so give them a try if you haven’t already. \ 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 new file mode 100644 index 0000000000..47f843af5e --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/lesson.textproto @@ -0,0 +1,9 @@ +name: "Variable fonts are here" +authors: "Nick Sherman" +reviewers: "Laurence Penney" +reviewers: "Piper Haywood" +topics: "variable_fonts" +prev_lessons: "INSERT" +next_lessons: "INSERT" +related_terms: "variable_fonts" +excerpt: "INSERT" 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 new file mode 100644 index 0000000000..ed610df575 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/content.md @@ -0,0 +1,70 @@ +# 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. + +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. + +## Type Palette #1 +Regular, Bold +(2 variants on 1 axis, made from 2 sources) + +| | w/ static fonts | w/ variable fonts | total savings | % savings +|:--|:--|:--| +| # of font files | 2 | 1 | 1 | 50% +| Total file size | 27 kB | 17 kB | 10 kB | 37% +| Transfer time | 0.05 sec | 0.03 sec | 0.02 sec | 37% +| Additional latency | 0.2 sec | 0.1 sec | 0.1 sec | 50% +| Total load time | 0.25 sec | 0.13 sec | 0.12 sec | 47% + +## Type Palette #2 +Regular, Semibold, Bold +(3 variants on 1 axis, made from 2 sources) + +| | w/ static fonts | w/ variable fonts | total savings | % savings +|:--|:--|:--| +| # of font files | 3 | 1 | 2 | 67% +| Total file size | 41 kB | 17 kB | 24 kB | 59% +| Transfer time | 0.08 sec | 0.03 sec | 0.05 sec | 59% +| Additional latency | 0.3 sec | 0.1 sec | 0.2 sec | 67% +| Total load time | 0.38 sec | 0.13 sec | 0.25 sec | 65% + +## Type Palette #3 +Regular, Semibold, Bold, Condensed Bold +(4 variants on 2 axes, made from 3 sources) + +| | w/ static fonts | w/ variable fonts | total savings | % savings +|:--|:--|:--| +| # of font files | 4 | 1 | 3 | 75% +| Total file size | 55 kB | 17 kB | 38 kB | 69% +| Transfer time | 0.11 sec | 0.03 sec | 0.08 sec | 69% +| Additional latency | 0.4 sec | 0.1 sec | 0.3 sec | 75% +| Total load time | 0.51 sec | 0.13 sec | 0.38 sec | 74% + +## Type Palette #4 +Regular, Semibold, Bold, Narrow, Condensed Bold +(5 variants on 2 axes, made from 4 sources) + +| | w/ static fonts | w/ variable fonts | total savings | % savings +|:--|:--|:--| +| # of font files | 5 | 1 | 4 | 80% +| Total file size | 71 kB | 32 kB | 39 kB | 55% +| Transfer time | 0.14 sec | 0.06 sec | 0.08 sec | 55% +| Additional latency | 0.5 sec | 0.1 sec | 0.4 sec | 80% +| Total load time | 0.64 sec | 0.16 sec | 0.48 sec | 74% + +## Type Palette #5 +Regular, Semibold, Bold, Narrow, Narrow Semibold, Narrow Bold, Condensed Bold +(7 variants on 2 axes, made from 4 sources) + +| | w/ static fonts | w/ variable fonts | total savings | % savings +|:--|:--|:--| +| # of font files | 7 | 1 | 6 | 86% +| Total file size | 102 kB | 32 kB | 70 kB | 69% +| Transfer time | 0.2 sec | 0.06 sec | 0.14 sec | 69% +| Additional latency | 0.7 sec | 0.1 sec | 0.6 sec | 86% +| Total load time | 0.9 sec | 0.16 sec | 0.74 sec | 82% + + +As you can tell from the numbers above, variable fonts can offer significant improvements in performance compared to using multiple static fonts. So even if a set of static fonts allows you the design flexibility you need, your website can still benefit from delivering the equivalent variants with variable fonts. diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/lesson.textproto new file mode 100644 index 0000000000..2dd50b9241 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/web_font_comparisons_variable_vs_static/lesson.textproto @@ -0,0 +1,9 @@ +name: "Web font comparisons: variable vs. static" +authors: "Nick Sherman" +reviewers: "Laurence Penney" +reviewers: "Piper Haywood" +topics: "variable_fonts" +prev_lessons: "INSERT" +next_lessons: "INSERT" +related_terms: "variable_fonts" +excerpt: "INSERT" diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/module.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/module.textproto new file mode 100644 index 0000000000..26d0bc80e4 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/module.textproto @@ -0,0 +1,7 @@ +name: "Using variable fonts on the web" +lessons: "variable_fonts_are_here" +lessons: "web_font_comparisons_variable_vs_static" +lessons: "optimizing_typographic_space_with_variable_fonts" +lessons: "interactive_animations_with_variable_fonts" +lessons: "factors_that_influence_the_efficiency_of_variable_web_fonts" +excerpt: "INSERT_EXCERPT"