From: Elliot Jay Stocks Date: Thu, 20 Oct 2022 10:26:19 +0000 (+0100) Subject: GFK Q3 content bug fixes (Oct 19) (#5434) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6ebce402c4d1402ecc109f8bd5f550e168ef65d2;p=thirdparty%2Fgoogle%2Ffonts.git GFK Q3 content bug fixes (Oct 19) (#5434) * Excerpt for “CJK” * Rel. lesson for “CJK” * related_lessons for “Alphabet” * Excerpt for “Alphabet” * related_lessons for “Designspace” * Excerpt for “Designspace” * related_lessons in “Tofu” * Excerpt for “Tofu” * related_lessons for “Rag” * Excerpt for “Rag” * related_lessons for “Letters” * Excerpt for “Letters” * related_lessons for “Reflow” * Excerpt for “Reflow” * related_lessons for “Emoji” * Excerpt for “Emoji” * Correcting case in `type_history` topic * Revised content for `variable_fonts_are_here` * Revised content for `web_font_comparisons_variable_vs_static` * Revised content for `optimizing_typographic_space_with_variable_fonts` * Revised content for `interactive_animations_with_variable_fonts` * Revised content for `factors_that_influence_the_efficiency_of_variable_web_fonts` * New VF image files from Nick * Turning full GFK URLs into proper internal format * Placing Nick’s new VF illustrations * Excerpt for “Switching...” * Editing placeholder ALT text everywhere * Fixing broken URLs in Nick’s articles * Fixing “legibility” and “readability” URLs in Darrell’s article * New `thumbnail` SVGs for Nick’s module * New module ordering for homepage * New thumbnails (+ references) for History module * Updating `color` term to differentiate from color fonts * Correcting `related_terms` for Hangeul articles * Module desc. for Hangeul * Numerous copy (mainly punc.) tweaks to Hangeul articles * 5 × Hangeul article `excerpt`s * All ACTUAL alt text, everywhere! * All ACTUAL `excerpt`s, everywhere! * Renaming “Hangeul” module to “Designing Hangeul” * More format tweaking for Hangeul articles * Prev/next lessons for Nick’s module * Temporarily removing problematic GIFs * Adding `thumbnail.svg` back in --- diff --git a/cc-by-sa/knowledge/glossary/terms/cjk/content.md b/cc-by-sa/knowledge/glossary/terms/cjk/content.md index 0b6713e1a2..99c2d3f7d2 100644 --- a/cc-by-sa/knowledge/glossary/terms/cjk/content.md +++ b/cc-by-sa/knowledge/glossary/terms/cjk/content.md @@ -2,7 +2,7 @@ CJK is the shorthand collective name for the Chinese, Japanese, and Korean writi
-![INSERT_ALT](images/thumbnail.svg) +![Characters from Traditional Chinese, Simplified Chinese, Korean, and Japanese, set in Noto Sans.](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/color/content.md b/cc-by-sa/knowledge/glossary/terms/color/content.md index b6f4cdb447..f14d10428f 100644 --- a/cc-by-sa/knowledge/glossary/terms/color/content.md +++ b/cc-by-sa/knowledge/glossary/terms/color/content.md @@ -7,4 +7,6 @@ In [typography](/glossary/typography), color refers to the overall presence of t -Changing a [typeface](/glossary/typeface), or the [weight](/glossary/weight), or the [line height](/glossary/line_height_leading), or any other [typographic treatment](/glossary/typesetting) could be said to affect the overall color of [type](/glossary/type) on the page. \ No newline at end of file +Changing a [typeface](/glossary/typeface), or the [weight](/glossary/weight), or the [line height](/glossary/line_height_leading), or any other [typographic treatment](/glossary/typesetting) could be said to affect the overall color of [type](/glossary/type) on the page. + +Note that typographic color in this sense is unrelated to [color fonts](/glossary/color_fonts). \ No newline at end of file diff --git a/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md b/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md index d1e9733ef1..aaf78252eb 100644 --- a/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md +++ b/cc-by-sa/knowledge/glossary/terms/color_fonts/content.md @@ -2,7 +2,7 @@ Color fonts (also known as chromatic fonts) can use multiple colors in a single
-![INSERT_ALT](images/thumbnail.svg) +![Example of a color font rendered with full color support.](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/designspace/content.md b/cc-by-sa/knowledge/glossary/terms/designspace/content.md index 963f013f0c..9e6edca7da 100644 --- a/cc-by-sa/knowledge/glossary/terms/designspace/content.md +++ b/cc-by-sa/knowledge/glossary/terms/designspace/content.md @@ -2,7 +2,7 @@ A designspace (sometimes written as “design space”) is a system specified du
-![INSERT_ALT](images/thumbnail.svg) +![A representation of designspace, showing the “a” character rendered in different widths and weights.](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/emoji/content.md b/cc-by-sa/knowledge/glossary/terms/emoji/content.md index e85201080f..0ef01d61f2 100644 --- a/cc-by-sa/knowledge/glossary/terms/emoji/content.md +++ b/cc-by-sa/knowledge/glossary/terms/emoji/content.md @@ -4,7 +4,7 @@ The emoji are successors to the original smileys, or emoticons: A sequence of pu
-![INSERT_ALT](images/thumbnail.svg) +![A montage of multiple emoji characters.](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/letters/content.md b/cc-by-sa/knowledge/glossary/terms/letters/content.md index b5fbdfb359..2665b2ac7d 100644 --- a/cc-by-sa/knowledge/glossary/terms/letters/content.md +++ b/cc-by-sa/knowledge/glossary/terms/letters/content.md @@ -2,7 +2,7 @@ The set of graphical symbols used to represent speech sounds in an [alphabetic](
-![INSERT_ALT](images/thumbnail.svg) +![The word “letters” set in both uppercase and lowercase, with the two cases of each letter linked together by a bounding box to signify that they are the same letter despite their different appearances.](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/parametric_axis/content.md b/cc-by-sa/knowledge/glossary/terms/parametric_axis/content.md index 8aceb6e257..7f2d735b6f 100644 --- a/cc-by-sa/knowledge/glossary/terms/parametric_axis/content.md +++ b/cc-by-sa/knowledge/glossary/terms/parametric_axis/content.md @@ -3,7 +3,7 @@ A parametric [axis](/glossary/axis_in_variable_fonts) in a [variable font](/glos
-![INSERT_ALT](images/thumbnail.svg) +![A representation of a parametric font, with the vertical proportions of an “H” crossbar changing over three different settings.](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/rag/content.md b/cc-by-sa/knowledge/glossary/terms/rag/content.md index 7f110c6901..2b4c8f5c11 100644 --- a/cc-by-sa/knowledge/glossary/terms/rag/content.md +++ b/cc-by-sa/knowledge/glossary/terms/rag/content.md @@ -2,7 +2,7 @@ The rag refers to the irregular edge of an unjustified text block. “Ragged rig
-![INSERT_ALT](images/thumbnail.svg) +![A paragraph of text, with the rag highlighted on its right-hand side, demonstrating the negative horizontal space on each line of type between the last glyph on the line and the right side of the bounding box.](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/reflow/content.md b/cc-by-sa/knowledge/glossary/terms/reflow/content.md index eb4374cb76..7e08d39e94 100644 --- a/cc-by-sa/knowledge/glossary/terms/reflow/content.md +++ b/cc-by-sa/knowledge/glossary/terms/reflow/content.md @@ -4,7 +4,7 @@ In print, when a document has already been edited and designed, reflow can be pr
-![INSERT_ALT](images/thumbnail.svg) +![Three text boxes of different widths. The second box is narrower than the first and therefore words have moved down to new lines. The third box is very narrow and the bottom line of text has disappeared outside of the frame.](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/glossary/terms/tofu/content.md b/cc-by-sa/knowledge/glossary/terms/tofu/content.md index 7f7916a48c..37d8dce86f 100644 --- a/cc-by-sa/knowledge/glossary/terms/tofu/content.md +++ b/cc-by-sa/knowledge/glossary/terms/tofu/content.md @@ -2,7 +2,7 @@ When a character is not present in a font, and no fallback option is available,
-![INSERT_ALT](images/thumbnail.svg) +![The phrase “Say no to tofu”, with the “o” in “tofu” replaced with the rectangular tofu symbol.](images/thumbnail.svg)
diff --git a/cc-by-sa/knowledge/knowledge.textproto b/cc-by-sa/knowledge/knowledge.textproto index 038ec2b12a..cc81ffa05c 100644 --- a/cc-by-sa/knowledge/knowledge.textproto +++ b/cc-by-sa/knowledge/knowledge.textproto @@ -1,5 +1,7 @@ -modules: "using_type_in_ar_and_vr" +modules: "using_variable_fonts_on_the_web" modules: "history_of_type" +modules: "designing_hangeul" modules: "introducing_type" modules: "choosing_type" modules: "using_type" +modules: "using_type_in_ar_and_vr" diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/content.md b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/content.md similarity index 69% rename from cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/content.md rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/content.md index 0a6f7ea036..afb6fb0c79 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/content.md +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/content.md @@ -1,14 +1,14 @@ -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. +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 +## 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](/glossary/spaces) and punctuation used to demarcate word boundaries. +For example, as you’re reading this sentence in English, you’ll recognize that the letters are placed one after another, with [spaces](/glossary/spaces) and punctuation used to demarcate word boundaries. While these [orthogrpahic](/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. @@ -21,13 +21,13 @@ To offer an oversimplified explanation: A typical syllable block contains a cons ![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.
+
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. +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. @@ -35,7 +35,7 @@ For users of the English alphabet, syllable information is hardly obvious (excep 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. +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. @@ -46,13 +46,13 @@ For writers, King Sejong was no less innovative in incorporating usability into
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 +## 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). +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. +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. @@ -63,14 +63,13 @@ Specifically, he designed Hangeul so that the most frequent vowel sounds are pro
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. +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 +### 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. +- 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/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_1.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_1.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_1.svg 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/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_3.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_3.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/images/hangeul_4_fig_3.svg 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/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto similarity index 68% rename from cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto index a6c41829cf..d4b521ae81 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_alphabet_for_reading_and_writing/lesson.textproto @@ -7,5 +7,7 @@ reviewers: "SeHee Lee" topics: "hangeul" prev_lessons: "making_the_details_matter" next_lessons: "lessons_from_hangeul" +related_terms: "alphabet" +related_terms: "letters" related_terms: "script_writing_system" -excerpt: "INSERT" +excerpt: "Part 4 in our in-depth look at the creation of Hangeul, the Korean alphabet." diff --git a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/content.md b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/content.md new file mode 100644 index 0000000000..e8066cce44 --- /dev/null +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/content.md @@ -0,0 +1,61 @@ +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](/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](/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](/glossary/script_writing_system) as [alphabets](/glossary/alphabet), and to the graphic symbols of writing systems as [*letters*](/glossary/letters), even in cases where these terms are technically incorrect. + +My goal in doing so is to illustrate the story of Hangeul without having introduce too much linguistic terminology, especially because the main ideas I’d like to share do not depend critically on making distinctions that might otherwise be important to scholars. + +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/an_introduction_to_hangeul/images/thumbnail.svg b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/lesson.textproto similarity index 79% rename from cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/lesson.textproto rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/lesson.textproto index 8de1589f19..4c09a88982 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/an_introduction_to_hangeul/lesson.textproto @@ -9,4 +9,4 @@ next_lessons: "designing_for_learnability" related_terms: "alphabet" related_terms: "letters" related_terms: "script_writing_system" -excerpt: "INSERT" +excerpt: "Part 1 in our in-depth look at the creation of Hangeul, the Korean alphabet." diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/content.md b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/content.md similarity index 62% rename from cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/content.md rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/content.md index 0fda1df453..214bf375db 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/content.md +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/content.md @@ -4,23 +4,23 @@ Working against King Sejong was the reality that alphabets take significant time 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 +## Making information helpful -Learning any alphabet is difficult, in part, because it requires learners to memorize the associations between the alphabet's [letters](/glossary/letters) and the sounds or other parts of language that they represent. +Learning any alphabet is difficult, in part, because it requires learners to memorize the associations between the alphabet’s [letters](/glossary/letters) and the sounds or other parts of language that they represent. Contributing to difficulty is that these associations, along with other design features of alphabets, tend to be rather arbitrary. -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. +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. +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 +## Relying on geometry -One of the first things a person might notice about Hangeul is how [geometrically](/glossary/geometric) patterned the letters are. In fact, by comparison to most of the world's alphabets, Hangeul may be the most geometric in nature. +One of the first things a person might notice about Hangeul is how [geometrically](/glossary/geometric) patterned the letters are. In fact, by comparison to most of the world’s alphabets, Hangeul may be the most geometric in nature. -In crafting the 28 basic letters of the alphabet (many of which are preserved in the 24 letters of today's Korean alphabet), King Sejong made extensive use of consistent-weight, straight lines, parallel lines, right angles, and circles, emphasizing a natural box-like uniformity that anticipates modern-day [monospacing](/glossary/monospaced) principles. +In crafting the 28 basic letters of the alphabet (many of which are preserved in the 24 letters of today’s Korean alphabet), King Sejong made extensive use of consistent-weight, straight lines, parallel lines, right angles, and circles, emphasizing a natural box-like uniformity that anticipates modern-day [monospacing](/glossary/monospaced) principles.
@@ -29,19 +29,19 @@ In crafting the 28 basic letters of the alphabet (many of which are preserved in
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. +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). +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 +## 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. +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](/glossary/diacritic_accent_marks), but somewhat similar in concept). @@ -54,11 +54,11 @@ The vowel letters, on the other hand, are simpler, consisting of a single vertic 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. +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 +## 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. @@ -75,16 +75,14 @@ In particular, he avoided letters that were vertical or horizontal mirror images People who have learned the English alphabet might not be surprised to discover that among the most commonly confused letters are those that seem to be mirrored copies, including the [lowercase](/glossary/uppercase_lowercase) letters *d*, *b*, *p*, and *q* (Ehri & Roberts, 2006). -Once again, King Sejong's design decision to emphasize letter distinguishability reflects his intentions of making Hangeul as user-friendly as possible. +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. +In the next article, we’ll examine several more design features of Hangeul that brilliantly solve problems for the people who use it. -## References +### 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. +- 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/designing_hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_1.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_1.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_1.svg 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/designing_hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_2.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_2.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/images/hangeul_2_fig_2.svg diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/thumbnail.svg b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/lesson.textproto similarity index 65% rename from cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/lesson.textproto rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/lesson.textproto index a14b77adfa..85fa009319 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/designing_for_learnability/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/designing_for_learnability/lesson.textproto @@ -7,9 +7,7 @@ reviewers: "SeHee Lee" topics: "hangeul" prev_lessons: "an_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: "alphabet" related_terms: "letters" -excerpt: "INSERT" +related_terms: "script_writing_system" +excerpt: "Part 2 in our in-depth look at the creation of Hangeul, the Korean alphabet." diff --git a/cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/content.md b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/content.md new file mode 100644 index 0000000000..6c07be1082 --- /dev/null +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/content.md @@ -0,0 +1,37 @@ +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/designing_hangeul/lessons/lessons_from_hangeul/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/lesson.textproto similarity index 78% rename from cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/lesson.textproto rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/lesson.textproto index c221cd3ca5..bafb359bc1 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/lessons_from_hangeul/lesson.textproto @@ -9,4 +9,4 @@ prev_lessons: "an_alphabet_for_reading_and_writing" related_terms: "alphabet" related_terms: "letters" related_terms: "script_writing_system" -excerpt: "INSERT" +excerpt: "Part 5 in our in-depth look at the creation of Hangeul, the Korean alphabet." diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/content.md b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/content.md similarity index 58% rename from cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/content.md rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/content.md index 5e5246ffc7..0f75b11f95 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/content.md +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/content.md @@ -2,36 +2,36 @@ King Sejong the Great began designing a new [alphabet](/glossary/alphabet) for t 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. +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 +## Attention to the details Being an alphabet designer is similar in some respects to being a [type designer](/glossary/type_designer) or [typographer](/glossary/typographer) in that much of the job means focusing on all the small details that define [letters](/glossary/letters), both as individual units and as members of a set. -But there's an important distinction. +But there’s an important distinction. While type specialists can manipulate letter details and employ stylistic variations to achieve various effects, including improving [legibility](/glossary/legibility) and [readability](/glossary/readability) or evoking [emotive responses](https://fonts.google.com/knowledge/choosing_type/emotive_considerations_for_choosing_typefaces), they still need to preserve the basic forms of individual letters; by comparison, an alphabet designer must, ideally, decide how all the small details to should be combined to *create* a set of usable letters. In the case of King Sejong specifically, the challenge at hand was in how to make these details matter. -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!). +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. +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](/glossary/uppercase_lowercase) "looptail" letter *G* ([g]{style="font-family:\"Times New Roman\";"}) when it was presented in a set that included three other incorrect versions. (Note that the letter *G* has two distinct lowercase allographs, or, in the context of type, [alternates](/glossary/alternates): g\|[g]{style="font-family:\"Times New Roman\";"}) +For example, in a [recent study](https://psycnet.apa.org/record/2018-13691-001) involving college students at a well-known American university, less than 30% of participants could correctly identify the [lowercase](/glossary/uppercase_lowercase) “looptail” letter *G* when it was presented in a set that included three other incorrect versions. (Note that the letter *G* has two distinct lowercase allographs, or, in the context of type, [alternates](/glossary/alternates):
![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.
+
Example of a stimulus used in an experiment, showing a lowercase looptail letter G, 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. +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 +## 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. @@ -44,33 +44,33 @@ That is, the shapes of the consonant letters were designed to work as iconic rep
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. +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. +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 +## 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. +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.
+
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. +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, 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). +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. +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. +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/designing_hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_1.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_1.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_1.svg 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/designing_hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_2.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_2.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/images/hangeul_3_fig_2.svg diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/thumbnail.svg b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/lesson.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/lesson.textproto similarity index 57% rename from cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/lesson.textproto rename to cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/lesson.textproto index 5db74a42dc..fa06d3ed56 100644 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/making_the_details_matter/lesson.textproto +++ b/cc-by-sa/knowledge/modules/designing_hangeul/lessons/making_the_details_matter/lesson.textproto @@ -7,10 +7,7 @@ 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" +related_terms: "alphabet" +related_terms: "letters" +related_terms: "script_writing_system" +excerpt: "Part 3 in our in-depth look at the creation of Hangeul, the Korean alphabet." diff --git a/cc-by-sa/knowledge/modules/designing_hangeul/module.textproto b/cc-by-sa/knowledge/modules/designing_hangeul/module.textproto new file mode 100644 index 0000000000..557e093bfc --- /dev/null +++ b/cc-by-sa/knowledge/modules/designing_hangeul/module.textproto @@ -0,0 +1,7 @@ +name: "Hangeul" +lessons: "an_introduction_to_hangeul" +lessons: "designing_for_learnability" +lessons: "making_the_details_matter" +lessons: "an_alphabet_for_reading_and_writing" +lessons: "lessons_from_hangeul" +excerpt: "In designing Hangeul, the Korean alphabet, King Sejong the Great of Korea (1397–1450) 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." diff --git a/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/content.md b/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/content.md deleted file mode 100644 index b1d714d3b3..0000000000 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/an_introduction_to_hangeul/content.md +++ /dev/null @@ -1,62 +0,0 @@ -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](/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](/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](/glossary/script_writing_system) as [alphabets](/glossary/alphabet), and to the graphic symbols of writing systems as [*letters*](/glossary/letters), even in cases where these terms are technically incorrect. - -My goal in doing so is to illustrate the story of Hangeul without having introduce too much linguistic terminology, especially because the main ideas I'd like to share do not depend critically on making distinctions that might otherwise be important to scholars. - -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/lessons_from_hangeul/content.md b/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/content.md deleted file mode 100644 index 9e7958a9ae..0000000000 --- a/cc-by-sa/knowledge/modules/hangeul/lessons/lessons_from_hangeul/content.md +++ /dev/null @@ -1,55 +0,0 @@ -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/module.textproto b/cc-by-sa/knowledge/modules/hangeul/module.textproto deleted file mode 100644 index b8c8549bc8..0000000000 --- a/cc-by-sa/knowledge/modules/hangeul/module.textproto +++ /dev/null @@ -1,7 +0,0 @@ -name: "Hangeul" -lessons: "an_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 index e99d1e83c3..df87626711 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/content.md @@ -6,7 +6,7 @@ Johannes Gutenberg, some time in the 1440s, found a way, using an ingenious hand
-![INSERT_ALT](images/GFKhistoftype1_metaltype.svg) +![A representation of metal type.](images/thumbnail.svg)
@@ -18,7 +18,7 @@ The very first fonts in Europe were modeled on contemporary gothic calligraphy
-![INSERT_ALT](images/GFKhistoftype1_gutenberggothic.svg) +![A traced scan of a Gutenberb Bible.](images/GFKhistoftype1_gutenberggothic.svg)
@@ -30,7 +30,7 @@ Printing soon spread from Germany to neighboring countries, even crossing the Al
-![INSERT_ALT](images/GFKhistoftype1_earlyroman.svg) +![A traced scan of an early Roman typeface.](images/GFKhistoftype1_earlyroman.svg)
@@ -46,7 +46,7 @@ The very earliest roman typefaces still displayed some Gothic characteristics, b
-![INSERT_ALT](images/GFKhistoftype1_jenson_new.svg) +![A traced scan of a Roman typeface designed by Jenson.](images/GFKhistoftype1_jenson_new.svg)
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 deleted file mode 100644 index 4037fd0312..0000000000 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/GFKhistoftype1_metaltype.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/thumbnail.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/thumbnail.svg index 7672f2d520..4037fd0312 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/thumbnail.svg +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/the_invention_of_type/images/thumbnail.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/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 index 41207a9112..ab6e4e99f6 100644 --- 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 @@ -8,4 +8,4 @@ related_terms: "blackletter" related_terms: "calligraphy" related_terms: "latin" related_terms: "letterform" -excerpt: "INSERT_EXCERPT" +excerpt: "The European advent of printing and the invention of fonts." diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/content.md index 0d646a21ec..9af78c4442 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/content.md @@ -8,7 +8,7 @@ In 1692, during the reign of Louis XIV, the French Royal Academy of Sciences co
-![INSERT_ALT](images/GFKhistoftype3.svg) +![A traced scan of Dürer’s “A” character.](images/GFKhistoftype3.svg)
@@ -18,7 +18,7 @@ When we say ‘rational’ or ‘rationalized’ with regard to type design, we
-![INSERT_ALT](images/GFKhistoftype3_bracketedserifs.svg) +![Bracketed and non-bracketed serifs overlaid to highlight their differing forms.](images/GFKhistoftype3_bracketedserifs.svg)
@@ -34,7 +34,7 @@ In the eighteenth century, two other type designers appeared who would leave a l
-![INSERT_ALT](images/GFKmetaltype3_romananditalicofwilliamcaslon.svg) +![A scan of typefaces designed by Caslon.](images/thumbnail.svg)
@@ -44,7 +44,7 @@ After making his fortune in japanning (varnished lacquerware), John Baskerville,
-![INSERT_ALT](images/GFKhistoftype3_baskerville.svg) +![The word “Baskerville” set in upright and italic versions of a modern Baskerville-style typeface.](images/GFKhistoftype3_baskerville.svg)
@@ -54,7 +54,7 @@ Typically, rougher paper requires more pressure from the printing press to ensur
-![INSERT_ALT](images/GFKhistoftype3_evolutionofstress.svg) +![Two “o” characters, with lines overlaid to show the different angle of stress.](images/GFKhistoftype3_evolutionofstress.svg)
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 deleted file mode 100644 index 76ccc9f061..0000000000 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/GFKmetaltype3_romananditalicofwilliamcaslon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/thumbnail.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/thumbnail.svg index 7672f2d520..76ccc9f061 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/thumbnail.svg +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/images/thumbnail.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/lesson.textproto b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/lesson.textproto index cb15f89889..ce18535531 100644 --- 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 @@ -11,4 +11,4 @@ related_terms: "italic" related_terms: "latin" related_terms: "letterform" related_terms: "transitional_neo_classical" -excerpt: "INSERT_EXCERPT" +excerpt: "The rise of roman fonts and the French typographic revolution." diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/content.md index d0ac56c612..64abef2909 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/content.md @@ -2,7 +2,7 @@ We can be thankful to the Romans for a number of technological innovations and i
-![INSERT_ALT](images/GFKhistoftype2_romansquarecapitals.svg) +![A scan of an image showing the engravings on Trajan’s Column.](images/thumbnail.svg)
@@ -22,7 +22,7 @@ By the end of the fifteenth century, not only did the cities of the Italian Peni
-![INSERT_ALT](images/GFKhistoftype2_garamond.svg) +![“The word Garamonts set in upright and italic versions of the modern EB Garamond typeface.”](images/GFKhistoftype2_garamond.svg)
@@ -36,7 +36,7 @@ The sixteenth century also gave us [italic](/glossary/italic). The great Venetia
-![INSERT_ALT](images/GFKhistoftype2_aldusandgriffoitalic.svg) +![A scan of an image showing an early italic typeface.](images/GFKhistoftype2_aldusandgriffoitalic.svg)
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 deleted file mode 100644 index 99a0b2b615..0000000000 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/GFKhistoftype2_romansquarecapitals.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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/thumbnail.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/thumbnail.svg index 7672f2d520..99a0b2b615 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/thumbnail.svg +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/what_have_the_romans_ever_done_for_us/images/thumbnail.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/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 index e0c2e9b1ee..ca883ff764 100644 --- 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 @@ -11,4 +11,4 @@ related_terms: "calligraphy" related_terms: "greek_script" related_terms: "latin" related_terms: "letterform" -excerpt: "INSERT_EXCERPT" +excerpt: "How roman fonts overtook blackletter to dominate European typography." 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 index d88a151e03..175b227d82 100644 --- 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 @@ -28,7 +28,7 @@ strong { } ``` -![INSERT_ALT](images/switching_to_vfs_1.svg) +![A representation of the type as controlled by the preceding CSS. All of the text is set in its default weight, except for the word “weight”, which is bold.](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. @@ -44,7 +44,7 @@ strong { } ``` -![INSERT_ALT](images/switching_to_vfs_2.svg) +![A representation of the type as controlled by the preceding CSS. All of the text is set in a very light weight, except for the word “weight”, which is slightly lighter than the default bold.](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). @@ -58,7 +58,7 @@ em { } ``` -![INSERT_ALT](images/switching_to_vfs_3.svg) +![A representation of the type as controlled by the preceding CSS. The word “italics” is now italicized.](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. @@ -84,7 +84,7 @@ body { } ``` -![INSERT_ALT](images/thumbnail.svg) +![A representation of the type as controlled by the preceding CSS. The word “width” is now set in a wider width.](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: 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 index 3539c31f29..e769cd5274 100644 --- 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 @@ -4,4 +4,5 @@ reviewers: "Laurence Penney" reviewers: "Piper Haywood" topics: "variable_fonts" related_terms: "variable_fonts" -excerpt: "INSERT" +prev_lessons: "interactive_animations_with_variable_fonts" +excerpt: "Which specific font qualities make the biggest impact on efficiency?" diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md index c39fd35636..aff50e99d8 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md @@ -6,7 +6,7 @@ For a simple example of hover interaction, let’s consider hyperlinks that chan
-![INSERT_ALT](images/4_1.gif) +![An animated loop showing the effects of the styling discussed in the preceding text.](images/4_1.gif)
Basic weight change on hover.
@@ -15,7 +15,7 @@ The effect is rather sudden, switching between weights instantly on hover. With
-![INSERT_ALT](images/4_2.gif) +![An animated loop showing the effects of font weight being animated, and how it affects elements around it.](images/4_2.gif)
Subtle hover animation with variable fonts.
@@ -26,7 +26,7 @@ It’s very common for bolder weights of a typeface to occupy more space, which
-![INSERT_ALT](images/4_3.gif) +![An animated loop showing how the text still grows in horizontal space, but doesn’t affect the other elements around it.](images/4_3.gif)
Hover animation with each element in separate fixed containers to prevent layout shift.
@@ -43,7 +43,7 @@ images/4_4a.gif
-![INSERT_ALT](images/4_4b.gif) +![An animated loop showing how no text shifts when using multiplexed fonts.](images/4_4b.gif)
Multiplexed fonts prevent shifts in the layout by maintaining the same width requirements across variants.
@@ -58,7 +58,7 @@ Multiplexing isn’t limited to just standard variations in weight or grades eit
-![INSERT_ALT](images/4_5.gif) +![An animated loop showing the way different elements of the type’s design can be manipulated.](images/4_5.gif)
Multiplexed hover animations with variations other than standard weight.
diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4a.gif b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4a.gif new file mode 100644 index 0000000000..731f51247e Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/images/4_4a.gif differ diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/lesson.textproto index fc0b9d2c05..37d223e235 100644 --- 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 @@ -4,4 +4,6 @@ reviewers: "Laurence Penney" reviewers: "Piper Haywood" topics: "variable_fonts" related_terms: "variable_fonts" -excerpt: "INSERT" +prev_lessons: "optimizing_typographic_space_with_variable_fonts" +next_lessons: "factors_that_influence_the_efficiency_of_variable_web_fonts" +excerpt: "Variable font animations can provide subtle effects for user interactions and visual semantics, or they can be used for more dramatic special effects." diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/content.md b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/content.md index 5e06df7148..9fc8dbacfa 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/content.md +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/content.md @@ -59,7 +59,7 @@ Speaking of width, variable fonts with adjustable widths can be used to make dif
-![INSERT_ALT](images/3_6.svg) +![Five lines of type, with a different U.S. city name on each line. All use different widths, but all perfectly fill the same horizontal space.](images/3_6.svg)
Variable fonts can be automatically condensed or expanded to fit different pieces of text on the same line length without changing the font size or resorting to synthetic squooshing.
@@ -70,7 +70,7 @@ Another approach for optimizing the spatial efficiency of a typeface is related
-![INSERT_ALT](images/3_7.svg) +![First, a specimen using the word “Glyphs collide”, set over two lines, showing the descenders of “Glyphs” touching the ascenders of “collide”. Then, the same specimen with the ascenders and descenders reduced vertically to avoid the clash.](images/3_7.svg)
Fonts with retractable ascenders and descenders can be used to avoid collisions for tight line spacing.
diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_6.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_6.svg deleted file mode 100644 index f02ff945ce..0000000000 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_6.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_7.svg b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_7.svg deleted file mode 100644 index 890374df38..0000000000 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/images/3_7.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/optimizing_typographic_space_with_variable_fonts/lesson.textproto index 11dc68dbc3..a6540e4319 100644 --- 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 @@ -4,4 +4,6 @@ reviewers: "Laurence Penney" reviewers: "Piper Haywood" topics: "variable_fonts" related_terms: "variable_fonts" -excerpt: "INSERT" +prev_lessons: "web_font_comparisons_variable_vs_static" +next_lessons: "interactive_animations_with_variable_fonts" +excerpt: "Variable fonts offer much more flexibility for typesetting in both printed and digital media, and this flexibility is especially beneficial in the context of responsive design." diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/lesson.textproto b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/lesson.textproto index 1d4a7b0c22..d28df165ef 100644 --- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/lesson.textproto +++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/variable_fonts_are_here/lesson.textproto @@ -4,4 +4,5 @@ reviewers: "Laurence Penney" reviewers: "Piper Haywood" topics: "variable_fonts" related_terms: "variable_fonts" -excerpt: "INSERT" +next_lessons: "web_font_comparisons_variable_vs_static" +excerpt: "What are the practical benefits of variable fonts in real-world design projects? And what are the implications of variable fonts’ flexibility in day-to-day design work?" 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 index fc5656f6d7..5afd1cba29 100644 --- 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 @@ -4,4 +4,6 @@ reviewers: "Laurence Penney" reviewers: "Piper Haywood" topics: "variable_fonts" related_terms: "variable_fonts" -excerpt: "INSERT" +prev_lessons: "variable_fonts_are_here" +next_lessons: "optimizing_typographic_space_with_variable_fonts" +excerpt: "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.”"