From: Elliot Jay Stocks Date: Mon, 28 Nov 2022 19:39:00 +0000 (+0000) Subject: GFK Q4 nearly ready for launch (#5629) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1ec50aa13e2c5fe37875b4694f03ef4be86abb3e;p=thirdparty%2Fgoogle%2Ffonts.git GFK Q4 nearly ready for launch (#5629) * Test commit * Thumbnail for `cjk_typesetting_rules` * Thumbnail for `japanese_typography_basics` * Thumbnail for `the_evolution_of_hangeul_type_design` * Thumbnail for `type_classification_in_cjk` * Thumbnail for `how_type_influences_readability` * Thumbnail for `pairing_typefaces_based_on_their_construction_using_the_font_matrix` * New `readability_06.svg` — down to 512 kb! * Renaming CJK module * Renaming Readability module * CJK module `excerpt` * Actioning Susanna’s additional edit suggestions * `figcaption` elements for 3 × history articles * Updating VF syncing article re: new Typeface app feature * Fixing missing comma * Correcting typo in `modern_type` * Copy edits to `modern_type` * Copy edits to `display_type` * Copy edits to `from_metal_to_digital` * Corrections to CJK prev/next articles * Copy edits to `type_classification_in_cjk` + metadata * Splitting `type_classification_in_cjk` into 3 articles * Inserting `related_terms: "script_writing_system"` into all CJK articles * Updating CJK module ordering in light of splitting * Dave’s re-write of the CJK module `excerpt` * Create authenticity_ex1_mock.jpg * Placing `authenticity_ex1_mock.jpg` in article * Create authenticity_ex2_mock.jpg * Placing `authenticity_ex2_mock.jpg` in article * New version of `authenticity_ex1_mock.jpg` * Alt text for `adding_an_authentic_natural_touch_to_type` * Adding `authenticity_ex1_EXTRA.svg` illo * Placing `authenticity_ex1_EXTRA.svg` in article * New `authenticity_ex1_EXTRA.svg` * Name change: `how_to_make_type_feel_authentic` * New article name in module ordering * Correcting prev/next in new `using_type` articles * Excerpt for `how_to_make_type_feel_authentic` * Excerpt for `from_type_to_logotype` * Excerpt for `vertical_spacing_and_line_height_in_design_systems` * Excerpt tweaks to `pairing_typefaces_based...` * Excerpt for `how_typefaces...` * Actioning missing alt text in all `history_of_type` articles * Actioning missing alt text in all `how_typefaces...` * Actioning missing alt text in `how_type_influences_readability` * Fixing missing link in `how_to_make_type_feel_authentic` * Fixing errors found by checker before merge * Another URL fix * 6 × excerpts for all CJK articles * Excerpts for Readability module + both articles * Copy edit to accessibility article * Fixing missing URL in `fitting_the_line` * Fixing missing URLs in `justification_hyphenation` * Fix Knowledge Graph CI Co-authored-by: nathan-williams --- diff --git a/.github/workflows/knowledge_graph.py b/.github/workflows/knowledge_graph.py index 162322536f..b72fd002d4 100644 --- a/.github/workflows/knowledge_graph.py +++ b/.github/workflows/knowledge_graph.py @@ -252,23 +252,22 @@ def _check_image_files(knowledge: KnowledgeContent) -> bool: result = True image_files = list(knowledge.knowledge_dir.glob("**/images/*")) for image_file in image_files: - if image_file.name == "thumbnail.svg": + if _is_svg(image_file): + if image_file.stat().st_size > MAX_VECTOR_IMAGE_SIZE_KB * 1024: + print("File exceeds max size of %s KB:" % MAX_VECTOR_IMAGE_SIZE_KB, image_file.relative_to(knowledge.knowledge_dir)) + result = False root = minidom.parseString(image_file.read_text()).documentElement if root.tagName != "svg": print("Root element must be :", image_file.relative_to(knowledge.repo_root)) result = False - has_view_box = "viewBox" in root.attributes - has_width_and_height = "width" in root.attributes and "height" in root.attributes - if not has_view_box and not has_width_and_height: - print("Must specify viewBox and/or width+height on :", image_file.relative_to(knowledge.knowledge_dir)) - result = False - if not _is_svg(image_file): - if image_file.stat().st_size > MAX_RASTER_IMAGE_SIZE_KB * 1024: - print("File exceeds max size of %s KB:" % MAX_RASTER_IMAGE_SIZE_KB, image_file.relative_to(knowledge.knowledge_dir)) + has_view_box = "viewBox" in root.attributes + has_width_and_height = "width" in root.attributes and "height" in root.attributes + if not has_view_box and not has_width_and_height: + print("Must specify viewBox and/or width+height on :", image_file.relative_to(knowledge.knowledge_dir)) result = False else: - if image_file.stat().st_size > MAX_VECTOR_IMAGE_SIZE_KB * 1024: - print("File exceeds max size of %s KB:" % MAX_VECTOR_IMAGE_SIZE_KB, image_file.relative_to(knowledge.knowledge_dir)) + if image_file.stat().st_size > MAX_RASTER_IMAGE_SIZE_KB * 1024: + print("File exceeds max size of %s KB:" % MAX_RASTER_IMAGE_SIZE_KB, image_file.relative_to(knowledge.knowledge_dir)) result = False return result diff --git a/cc-by-sa/knowledge/knowledge.textproto b/cc-by-sa/knowledge/knowledge.textproto index 85186efdd2..c2b0b5a34b 100644 --- a/cc-by-sa/knowledge/knowledge.textproto +++ b/cc-by-sa/knowledge/knowledge.textproto @@ -1,7 +1,7 @@ modules: "using_variable_fonts_on_the_web" modules: "history_of_type" -modules: "cjk" -modules: "readability" +modules: "type_in_china_japan_and_korea" +modules: "readability_and_accessibility" modules: "designing_hangeul" modules: "introducing_type" modules: "choosing_type" diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/lesson.textproto b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/lesson.textproto index 38042ab0d8..e35606ebc9 100644 --- a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/lesson.textproto +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/lesson.textproto @@ -18,4 +18,4 @@ related_terms: "weight" related_terms: "style" prev_lessons: "pairing_typefaces_by_the_same_type_designer_or_type_foundry" next_lessons: "exploring_x_height_the_em_square" -excerpt: "A detailed approach in combining typefaces based on their construction." +excerpt: "A detailed approach to combining typefaces based on their construction." diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/lesson.textproto b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/lesson.textproto deleted file mode 100644 index fd9e537a27..0000000000 --- a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/lesson.textproto +++ /dev/null @@ -1,10 +0,0 @@ -name: "CJK Typesetting Rules" -authors: "Min-Young Kim" -reviewers: "Lisa Huang" -reviewers: "Minjoo Ham" -reviewers: "Shoko Mugikura" -topics: "cjk" -related_terms: "cjk" -prev_lessons: "type_classification_in_cjk" -next_lessons: "japanese_typography_basics" -excerpt: "INSERT_EXCERPT" diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/lesson.textproto b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/lesson.textproto deleted file mode 100644 index 13e1a77ad1..0000000000 --- a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/lesson.textproto +++ /dev/null @@ -1,10 +0,0 @@ -name: "Japanese typography basics" -authors: "Min-Young Kim" -reviewers: "Lisa Huang" -reviewers: "Minjoo Ham" -reviewers: "Shoko Mugikura" -topics: "cjk" -related_terms: "cjk" -prev_lessons: "cjk_typesetting_rules" -next_lessons: "the_evolution_of_hangeul_type_design" -excerpt: "INSERT_EXCERPT" diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/content.md b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/content.md deleted file mode 100644 index eaf0a1b623..0000000000 --- a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/content.md +++ /dev/null @@ -1,169 +0,0 @@ -[Typefaces](/glossary/typeface) have various classification categories—[sans serif](/glossary/sans_serif), [serif](/glossary/serif), rounded, [humanist](/glossary/humanist_old_style), [geometric](/glossary/geometric), and so on. Do these classifications apply equally to other scripts too? The short answer is: No, because each script has its own culture, and these classifications were created for Latin typefaces. So what is it like in CJK? - -In Japan and Korea, the same words are used—but different phonetics—for serif and sans serif. Mincho (Japanese) and Myeongjo (Korean) for serif, and Gothic for sans serif in both Japanese and Korean. For the past couple of decades, there have been few trials in Korea to create original Korean words for serif and sans serif, such as Batang and Buri for serif, and Dotum and Minburi for sans, but still Myeongjo and Gothic remains the popular choice. - -In China, the situation is a little different, where the serif is called Song Ti (宋体), or sometimes Mingchao Ti or Ming Ti (明朝体 or 明体), to go together with the Japanese and Korean names. The sans is called Hei Ti (黑体). - -In terms of type classifications, Japanese and Korean have more similarities than with Chinese. All CJK fonts also have display style as one of the classifications, but in Japan and Korea, this style is know as “design fonts” and in China “decorative fonts.” - -## Chinese type classification - -The categories in Chinese type classification can be seen as a set of names from the most popular styles that appeared throughout Chinese type history, all the way to our contemporary times. Even with digital technologies, and the multiple mechanical printing techniques, there is—and always has been—a strong connection to handwritten calligraphy. Thus, Chinese typeface categories with styles related to calligraphy are still popular even today, due to the very nature of the characters (more organic than mechanical). Styles that are less calligraphic appeared very late in history (first in woodblock printing with Songti and Mingti), as ways to respond to the needs of their time and follow the contemporary trends (Yuanti and Heiti). - -As Chinese type evolved mostly independently from Latin, the groups or styles are different. Chinese (digital) type classification can be presented in seven categories, from the most “traditional” style to the most “modern.” Here are the major categories: - -### Kaiti (楷体) or “Regular style” - -Kaiti style is related to the calligraphic Regular Script (楷书), with “regular” denoting “official” or “formal.” Regular Script is the last calligraphic style that appeared in the history of Chinese calligraphy (around the 7th century). Other than carrying the movements of the brush (traditionality, warmth, liveliness), it’s a separate category to the Handwritten one because Kaiti obeys a number of proportions and details that make it more “standardized.” - -
- -![Sample of Kaiti style Chinese typefaces - Kaiti, Kai, both Macintosh system fonts](images/A_kaiti.svg) - -
- -### Handwritten style or Cursive style (手写体, 行书) - -Typefaces with a handwritten style in Chinese can vary significantly depending on the tool influencing the shapes or the speed of the movements. - -
- -![Sample of Handwritten style Chinese typefaces - Liu Jian Mao Cao (GF), Xingkai SC, HanziPen (Mac OS)](images/B_handwritten_cursive.svg) - -
- -### Songti (宋体) - -Songti style typefaces have design features made to fit woodblock carving (straight lines, diamond shaped serifs, accentuated contrast). It was the dominant style used for woodblock printing, which was the main technique used for Chinese printing since the Song dynasty (960–1279) all the way until the Ming dynasty (1368–1644). As it’s the style used for the biggest part of Chinese typography history, it’s the most familiar and popular one for texts, even today. - -
- -![Sample of Songti style Chinese typeface - Noto Serif CJK (GF)](images/C_songti.svg) - -
- -### FangSongti (仿宋体) - -FangSongti means “pseudo-Songti”. It’s a style derived from Songti, but with slightly more movement than its precursor (subtle slant of horizontal strokes, sharper serifs and endings, stiffer curves), and is most often suited to classical editorial usage as of the last couple of decades. - -
- -![Sample of FangSongti style Chinese typeface - STFangsong (Mac OS)](images/D_fangsongti.svg) - -
- -### Heiti (黑体) - -With 黑 [hei] meaning “black” or “dark” and 体 [ti] meaning “style,” this is the equivalent of sans serif in Latin script. The first Heiti typefaces appeared recently in Chinese type history (very early 20th century), with the influence of typefaces imported from Europe. Contemporary digital designs made Heiti one of the most popular styles in the digital realm. - -
- -![Sample of Heiti style Chinese typeface - Noto Sans CJK (GF)](images/E_heiti.svg) - -
- -Yuanti (圆体) is a sub-group of Heiti, because even though it is a rounded style (rounded tips and corners), it is the only other style without any serifs. - -
- -![Sample of Yuanti style Chinese typeface - Yuanti (Mac OS)](images/F_yuanti.svg) - -
- -### Decorative or Artistic (展示体, 美术体) - -This category can be related as “Display” or “Titling” styles in Latin, with all kinds of playfulness, personality, and quirkiness allowed by the versatility of Chinese characters (remember that this is an organic writing system first!). - -
- -![Sample of Decorative style Chinese typefaces - ZCOOL QingKe HuangYou, ZCOOL KuaiLe (GF)](images/G_decorative_artistic.svg) - -
- -### About the names - -You may have noticed how some names start the same, but end up with either “-ti” or “-shu”. In Chinese, 书 [shu] means “calligraphic style” in the context of 书法 [shufa] for calligraphy. And 体 [ti] means “typographic style” in the context of 字体 [ziti] for typography. A typographic style is very often named after its calligraphic style, or contains a reference to its style directly in the name. - -## Japanese type classification - -The term “modern serif” in Latin type refers to a classification called _didone,_ such as Bodoni and Didot. However, in Japanese typography, the definition of a modern serif is a little different. Let’s first look at an old-style serif: - -
- -![Sample of old-style JP serif - Zen Old Mincho, Shippori Mincho](images/01.svg) - -
- -The very first Japanese metal type was designed as an old-style serif, because the use of a traditional east Asian brush for writing was common at the time, and the letterforms were easy to apply to serif designs. - -The characteristics of a traditional Japanese old-style serif has a lot in common with an old-style serif in Latin: Small, delicate counters and letter size, elegantly lingering brush strokes—but not so much that it becomes more script design than serif—and organic, natural curves. - -
- -![Sample of modern JP serif -Noto Serif JP, Toppan Bunkyu Mincho](images/02.svg) - -
- -Modern serif classification in Japanese typography is on the opposite side from the old-style serif. It has relatively large and dynamic counter size, simpler strokes, clean elements, and sometimes low contrast between vertical and horizontal strokes. For example, [Noto Serif JP](https://fonts.google.com/noto/specimen/Noto+Serif+JP), while it respects the traditional letterform, is designed with low contrast and distinctive elements, employing wider counters to improve readability on screen. - -
- -![Close-up Noto Serif JP for its modern characteristic](images/03.svg) - -
- -The definition of old-style and modern for sans serif goes the same as serif, but for the modern style, there are two kinds of interpretation: Humanist modern san serif—popular for Latin—and a more systematic and geometric sans serif. Let’s see the difference. - -
- -![Sample of old-style JP sans - Zen kaku gothic](images/04.svg) - -
- -
- -![Sample of modern JP sans - Noto Sans JP, M Plus 1p](images/05.svg) - -
- -As we covered earlier, Noto JP pursues modern elements and strokes while honoring the traditional letterform. If you look at M Plus 1p, however, the counter and letter size is prominently larger, and the movement of strokes are more systematic. It is not strictly geometric all the way in terms of the circles and curves, but has the nuance of a systematic structure. - -## Korean type classification - -The basic type classification of serif and sans for Korean has a lot in common with Japanese, but since Korean letterforms are fundamentally geometric and have less variety in terms of curves than Japanese, the characteristics to look when understanding the classification is a little different. - -Korean old-style serifs also have small counters, but not always the small letter size. However, the strokes could be more brush-like and lingering, rather than systematic. The unique part is that although most old-style serifs in Latin and Japanese would have humanist brush strokes, because they developed from brush writing, Korean old-style serifs are the other way around: They follow the original geometric letterform of the Hangeul from Hunminjeongum. For more information, read our [Designing Hangeul](/lesson/an_introduction_to_hangeul) collection of articles by Darrell Penta. - -
- -![Comparison of old-style and modern KR serif - Gowun Batang VS. Noto Serif, Nanum Myeongjo. Show what parts expresses geometric/humanisticness](images/06.svg) - -
- -Modern serifs in Korean could have several different characteristics. [Noto Serif KR](https://fonts.google.com/noto/specimen/Noto+Serif+KR) is a classic modern serif, with humanist letterforms and distinctive elements. Nanum Myeongjo is a more unusual modern serif, with stiff elements, and larger than Noto Serif KR. Even though the typeface has a strong uniqueness, as long as it’s intended for text usage, it’s considered a modern serif, not a display. - -The sans serif classification in Korean is more of a development of the design rather than a classification category. Typical old-style Korean sans serifs will have full-width square letterform, and each component has a wider range of different sizing to forcibly fit the square form. - -
- -![Sample of traditional KR sans - Apple Gothic, Adobe Gothic](images/07.svg) - -
- -Modern sans serifs, or any sans serifs designed and released in the past couple of decades, have narrow letter width between 850–970 units (85–97%), for a smoother reading experience and more modern feel. The components are not forcibly stretched or stuffed in; instead, the sizing of components changes within a sensible range to respect the original form of the Hangeul component, while keeping the monospaced letterforms. - -
- -![Sample of modern KR sans - Noto Sans KR, IBM Plex](images/08.svg) - -
- -Most Korean fonts are monospaced by default, but very rarely there are also proportional and kerned sans serifs. Also, there is a Korean-only classification called “Talnemo,” meaning out-of-the-box or non-square, and this is also a proportional and kerned Korean type classification. - -
- -![Sample of non-square KR font - Dongle](images/09.svg) - -
- - Please read [“The evolution of Hangeul type design”](/lesson/the_evolution_of_hangeul_type_design) for more details. diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/lesson.textproto b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/lesson.textproto deleted file mode 100644 index c401d464eb..0000000000 --- a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/lesson.textproto +++ /dev/null @@ -1,10 +0,0 @@ -name: "Type classification in CJK" -authors: "Min-Young Kim" -reviewers: "Lisa Huang" -reviewers: "Minjoo Ham" -reviewers: "Shoko Mugikura" -topics: "cjk" -related_terms: "cjk" -prev_lessons: "cjk_typesetting_rules" -next_lessons: "the_evolution_of_hangeul_type_design" -excerpt: "INSERT_EXCERPT" diff --git a/cc-by-sa/knowledge/modules/cjk/module.textproto b/cc-by-sa/knowledge/modules/cjk/module.textproto deleted file mode 100644 index 3c03ceaadd..0000000000 --- a/cc-by-sa/knowledge/modules/cjk/module.textproto +++ /dev/null @@ -1,6 +0,0 @@ -name: "CJK" -lessons: "type_classification_in_cjk" -lessons: "cjk_typesetting_rules" -lessons: "japanese_typography_basics" -lessons: "the_evolution_of_hangeul_type_design" -excerpt: "INSERT_EXCERPT " diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/content.md index 7fc4785bed..3159eeea51 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/content.md @@ -2,42 +2,45 @@ The nineteenth century witnessed rapid changes in society and industry, which le
-![INSERT_ALT](images/GFKhistoftype5.1.svg) +![A specimen for Abril Fatface.](images/GFKhistoftype5.1.svg)
+
Abril Fatface, a modern interpretation of the Fat Face style that first appeared in the early 19th century.
-Another early example of the new display type was the [Slab Serif](/glossary/slab_serif_egyptian_clarendon). Modern types had reduced serifs to hairline strokes, but in the Slab Serif we see the opposite extreme — very heavy serifs attached to low-contrast, robust, and [bold](/glossary/bold) [letterforms](/glossary/letterform). By the mid-1800s, out of these forms evolved a sub-genre called Clarendon, a style of Slab Serif more suited to text settings — lighter, with more contrast, and larger [x-heights](/glossary/x_height). The Slab Serif, a term coined much later, was at first known as Egyptian. Discoveries in Egypt, at the turn of the 19th century, had led to a period of Egyptomania, and it appears that type founders simply exploited this fashion, borrowing ‘Egyptian’ to convey exotic and different, and also to convey a feeling of incised or inscriptional forms. - +Another early example of the new display type was the [Slab Serif](/glossary/slab_serif_egyptian_clarendon). Modern types had reduced serifs to hairline strokes, but in the Slab Serif we see the opposite extreme—very heavy serifs attached to low-contrast, robust, and [bold](/glossary/bold) [letterforms](/glossary/letterform). By the mid-1800s, out of these forms evolved a sub-genre called Clarendon, a style of Slab Serif more suited to text settings—lighter, with more contrast, and larger [x-heights](/glossary/x_height). The Slab Serif, a term coined much later, was at first known as Egyptian. Discoveries in Egypt, at the turn of the 19th century, had led to a period of Egyptomania, and it appears that type founders simply exploited this fashion, borrowing “Egyptian” to convey exotic and different, and also to convey a feeling of incised or inscriptional forms. ## Revolution -But what prompted the sudden appearance of so many new typefaces and styles? The Industrial Revolution shifted production from handmade to machine made — toward industrial production and machine manufacturing. In time it came to affect every aspect of printing and type making: typecasting, [typesetting](/glossary/typesetting), paper production, book binding, and even the printing press — by the end of the century, all had been mechanized.** **One of the products of the Industrial Revolution, and subsequent economic expansion, was a proliferation of ephemera and display advertising — billboards, posters, and flyers of larger and larger size. +But what prompted the sudden appearance of so many new typefaces and styles? The Industrial Revolution shifted production from handmade to machine made—toward industrial production and machine manufacturing. In time it came to affect every aspect of printing and type making: typecasting, [typesetting](/glossary/typesetting), paper production, book binding, and even the printing press—by the end of the century, all had been mechanized. One of the products of the Industrial Revolution, and subsequent economic expansion, was a proliferation of ephemera and display advertising—billboards, posters, and flyers of larger and larger size. -Type on a poster or billboard needs to be readable from across the street, and so must be considerably larger and bolder. And if they were to stand out among the growing number of competing billboards, then bold and atypical styles and experimental types were more likely to stop people in their tracks. The result was a kind of type explosion, with decorated, floral, chromatic, shadowed, inline, outline, Tuscan, [condensed](/glossary/condensed_narrow_compressed) — all emerging to meet the new demands of display advertising on billboards, flyers and in the thousands of new periodicals and newspapers being published. Display type was not an innovation of the 19th century, but the new designs, bolder in weight, more striking in their letterforms and often used in much larger sizes, were far more widespread and earned their own typographical [classification](/glossary/classification). +Type on a poster or billboard needs to be readable from across the street, and so must be considerably larger and bolder. And if they were to stand out among the growing number of competing billboards, then bold and atypical styles and experimental types were more likely to stop people in their tracks. The result was a kind of type explosion, with decorated, floral, chromatic, shadowed, inline, outline, Tuscan, [condensed](/glossary/condensed_narrow_compressed)—all emerging to meet the new demands of display advertising on billboards, flyers and in the thousands of new periodicals and newspapers being published. Display type was not an innovation of the 19th century, but the new designs, bolder in weight, more striking in their letterforms and often used in much larger sizes, were far more widespread and earned their own typographical [classification](/glossary/classification). -However, casting very large letters in lead is impossible. Large volumes of molten type metal cool at different rates resulting in deformed, cracked, or uneven type. The solution to manufacturing big type was wood. It was ideally suited to larger sizes of letter as it was light, durable, and typically only half the cost of metal type. Although wood type was not entirely new, its use really took off when in 1827, Darius Wells, in New York, invented a router, a mechanized wood-cutting tool enabling mass production. The rapid adoption of wood type was also helped by the ease with which it could be copied. If the router was attached to a pantograph, any wood type could easily be traced around and reproduced at a variety of sizes — often by wily competitors. +However, casting very large letters in lead is impossible. Large volumes of molten type metal cool at different rates resulting in deformed, cracked, or uneven type. The solution to manufacturing big type was wood. It was ideally suited to larger sizes of letter as it was light, durable, and typically only half the cost of metal type. Although wood type was not entirely new, its use really took off when in 1827, Darius Wells, in New York, invented a router, a mechanized wood-cutting tool enabling mass production. The rapid adoption of wood type was also helped by the ease with which it could be copied. If the router was attached to a pantograph, any wood type could easily be traced around and reproduced at a variety of sizes—often by wily competitors.
-![INSERT_ALT](images/GFKhistoftype5.2.svg) +![A scan of a wood type specimen.](images/GFKhistoftype5.2.svg)
+
Early 19th-century reverse contrast typeface in wood.
-When designing typefaces for reading, one works within fairly narrow parameters. Altering the structure and proportions of letterforms or adding novel or unusual accouterments interrupts the rhythm of the text — even if the individual letters are [legible](/glossary/legibility), readers will be distracted by unfamiliar details, and [readability](/glossary/readability) suffers. But when it comes to typefaces for advertising, where the whole purpose is to stand out , then there is much more room for innovation with both the structure and detail of letterforms. Unhindered by the exigencies of readability, typefounders (both metal and wood type) experimented with every aspect of letter design. One experiment by William Caslon IV even turned type inside out, producing the ‘Reverse Contrast’ typeface, perhaps one of the most unusual designs of the early 19th century. From these typefaces that suffered from poor eligibility evolved a less extreme variant of reverse contrast design based on the Clarendons, and named French Clarendon. [Serifs](/glossary/serif) too were experimented with — from slabs of different lengths and thicknesses to wedged, curved, and other highly ornamental forms like the bifurcated Tuscans. +When designing typefaces for reading, one works within fairly narrow parameters. Altering the structure and proportions of letterforms or adding novel or unusual accouterments interrupts the rhythm of the text—even if the individual letters are [legible](/glossary/legibility), readers will be distracted by unfamiliar details, and [readability](/glossary/readability) suffers. But when it comes to typefaces for advertising, where the whole purpose is to stand out , then there is much more room for innovation with both the structure and detail of letterforms. Unhindered by the exigencies of readability, typefounders (both metal and wood type) experimented with every aspect of letter design. One experiment by William Caslon IV even turned type inside out, producing the “Reverse Contrast” typeface, perhaps one of the most unusual designs of the early 19th century. From these typefaces that suffered from poor eligibility evolved a less extreme variant of reverse contrast design based on the Clarendons, and named French Clarendon. [Serifs](/glossary/serif) too were experimented with—from slabs of different lengths and thicknesses to wedged, curved, and other highly ornamental forms like the bifurcated Tuscans.
-![INSERT_ALT](images/GFKhistoftype5.3.svg) +![A selection of different styles of Tuscan.](images/GFKhistoftype5.3.svg)
+
The 19th century witnessed the invention of many new styles of typefaces—and serif designs.
The arrival of the modern advertising poster roughly coincided with the invention of new color printing technologies, like chromolithography, which for the first time ever made color printing practical and affordable. The use of several colors became another way to stand out from the crowd, and the first chromatic wood type appeared in the 1840s, printed or overprinted from several blocks.
-![INSERT_ALT](images/GFKhistoftype5.4.svg) +![Scan of a specimen showing four faces, including William Caslon’s ‘sans serif’ design.](images/GFKhistoftype5.4.svg)
+
Bottom line: William Caslon’s ‘sans serif’, c. 1816.
## The arrival of the sans serif style diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/fitting_the_line/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/fitting_the_line/content.md index fa765a3632..e5f273388b 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/fitting_the_line/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/fitting_the_line/content.md @@ -50,7 +50,7 @@ Today, it’s not unusual for typefaces to be released in “families'' comprisi The extended type family is so much a part of the typographic landscape that we can forget how recent a development it is. [Univers](https://en.wikipedia.org/wiki/Univers), designed for Deberny & Peignot in 1953 by [Adrian Frutiger](https://en.wikipedia.org/wiki/Adrian_Frutiger) and his former student Lucette Girard, is usually credited as the first type family to be systematically planned in this way. -Frutiger had been working for Deberny & Peignot, redrawing classic types for the Lumitype, an early phototypesetting system. When the time came for a sans serif, Charles Peignot was dead set on Futura, but Frutiger asked if he could propose an alternative. Within ten days, he came up with a draft of Univers. In designing Univers, Frutiger looked back at drawings he’d made as a student under Walter Käch at the Kunstgewerbeschule in Zurich. Käch had taught him to model sans serif shapes on classical inscriptions, with modulated stroke weights, making Univers very different from the geometrical [Futura](https://inserturl.com). +Frutiger had been working for Deberny & Peignot, redrawing classic types for the Lumitype, an early phototypesetting system. When the time came for a sans serif, Charles Peignot was dead set on Futura, but Frutiger asked if he could propose an alternative. Within ten days, he came up with a draft of Univers. In designing Univers, Frutiger looked back at drawings he’d made as a student under Walter Käch at the Kunstgewerbeschule in Zurich. Käch had taught him to model sans serif shapes on classical inscriptions, with modulated stroke weights, making Univers very different from the geometrical [Futura](https://en.wikipedia.org/wiki/Futura_(typeface)). The Univers family included twenty-one numbered variants, which were arrayed in a now-famous diagram that recalls the periodic table of elements: diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/content.md index b8b6951f81..2832a0ad36 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/content.md @@ -1,45 +1,49 @@ -In Europe, from the 1440s when Johannes Gutenberg began printing up until the Industrial Revolution, very little changed in terms of the technologies employed to manufacture type and to print. For three and a half centuries printing and its allied trades were very much hand trades, with metal type cast in a hand-held mould, set by human compositors, and printed on a hand-operated printing press.The 19th century witnessed a revolution with the widespread mechanization of every aspect of type production and printing. However, for the next revolution in type, we wouldn't have to wait another 350 years. In the 20th century, the acceleration of change was phenomenal. Within the space of several decades, type had been transformed from hot metal to phototype and then into digital fonts. Free of physical constraints, the design of type could change more profoundly than ever before. +In Europe, from the 1440s when Johannes Gutenberg began printing up until the Industrial Revolution, very little changed in terms of the technologies employed to manufacture type and to print. For three and a half centuries, printing and its allied trades were very much hand trades, with metal type cast in a hand-held mould, set by human compositors, and printed on a hand-operated printing press. The 19th century witnessed a revolution with the widespread mechanization of every aspect of type production and printing. However, for the next revolution in type, we wouldn't have to wait another 350 years. In the 20th century, the acceleration of change was phenomenal. Within the space of several decades, type had been transformed from hot metal to phototype and then into digital fonts. Free of physical constraints, the design of type could change more profoundly than ever before. ## Rise of the sans serif -Although the [sans serif](/glossary/sans_serif) [typeface](/glossary/typeface) first appeared at the start of the 19th century, they were not popularized until the 20th century. What started out as a rather clumsy all-caps alphabet would evolve into a genre that would quickly eclipse serif types. The evolution from grotesque to neo-grotesque was really part of the sans serif letting go of its serif roots. The quirky irregularities and fussy details of the grotesques were reigned in or erased in favor of uniformity. This can be seen in the reduction of contrast in the letterforms, and the design of sans serif [italics](/glossary/italic) based not on cursive exemplars but as slanted or [oblique](/glossary/oblique) versions of [uprights](/glossary/regular_upright) or romans. Helvetica™, designed by Max Miedinger & Eduard Hoffmann in 1957, is a prime example of this evolution of the sans serif.** **Helvetica, initially released as Neue Haas Grotesk, and based on Akzidenz-Grotesk released by the Berthold type foundry in Germany in 1898, is one of the world’s most ubiquitous digital fonts. It became especially popular when it began to be bundled with popular software and operating systems. +Although the [sans serif](/glossary/sans_serif) [typeface](/glossary/typeface) first appeared at the start of the 19th century, they were not popularized until the 20th century. What started out as a rather clumsy all-caps alphabet would evolve into a genre that would quickly eclipse serif types. The evolution from grotesque to neo-grotesque was really part of the sans serif letting go of its serif roots. The quirky irregularities and fussy details of the grotesques were reigned in or erased in favor of uniformity. This can be seen in the reduction of contrast in the letterforms, and the design of sans serif [italics](/glossary/italic) based not on cursive exemplars but as slanted or [oblique](/glossary/oblique) versions of [uprights](/glossary/regular_upright) or romans. Helvetica, designed by Max Miedinger & Eduard Hoffmann in 1957, is a prime example of this evolution of the sans serif. Initially released as Neue Haas Grotesk, and based on Akzidenz-Grotesk released by the Berthold type foundry in Germany in 1898, is one of the world’s most ubiquitous digital fonts. It became especially popular when it began to be bundled with popular software and operating systems.
-![INSERT_ALT](images/GFKhistoftype6.3.svg) +![Type specimen for Akzidenz-Grotesk.](images/GFKhistoftype6.3.svg)
+
Akzidenz-Grotesk released by the Berthold type foundry in 1898, inspired the popular Neo-grotesque style.
-The trend toward simplified or industrial letters, or letters that appear machine-made or constructed, can be seen in typefaces like Paul Renner’s [geometric](/glossary/geometric) sans, Futura™, designed in 1927. But this concept was more fully realized in the typeface DIN 1451 released by Deutsches Institut für Normung (German Institute for Standardization). Just as the [Transitional](/glossary/transitional_neo_classical) typefaces of the 18th century had rationalized their Old Style predecessors, so too, in DIN was an attempt to design a modern standard or template alphabet, a rationalization of the sans serif style. DIN appeared on road signage throughout Germany and even on vehicle license plates. It is the precursor to countless modern sans serif designs. +The trend toward simplified or industrial letters, or letters that appear machine-made or constructed, can be seen in typefaces like Paul Renner’s [geometric](/glossary/geometric) sans, Futura, designed in 1927. But this concept was more fully realized in the typeface DIN 1451, released by Deutsches Institut für Normung (German Institute for Standardization). Just as the [Transitional](/glossary/transitional_neo_classical) typefaces of the 18th century had rationalized their Old Style predecessors, so too, in DIN was an attempt to design a modern standard or template alphabet—a rationalization of the sans serif style. DIN appeared on road signage throughout Germany and even on vehicle license plates. It is the precursor to countless modern sans serif designs.
-![INSERT_ALT](images/GFKhistoftype6.4.svg) +![Type specimen for DIN 1451.](images/GFKhistoftype6.4.svg)
+
DIN 1451, produced by Deutsches Institut für Normung (German Institute for Standardization) in 1931.
-## Light, digital and postmodern type +## Light, digital, and postmodern type -Metal type used in the twentieth century looked and worked in the same way as that used in the fifteenth. Typefounding had undergone a transformation in its method of production, from pieces of metal type laboriously cast one by one in a hand mould to mechanized typecasting with machines like the Monotype caster and Linotype machine. The next transformation would move the embodiment of type from pieces of lead alloy to silhouettes on photographic film. Phototypesetting, a technology invented in the 1890s, and used at first mostly for illustrations and headings, was more widely adopted in the 1960s. Phototypesetting machines like the Diatype worked on the same principle as the mechanical metal type casting machines, but with the three-dimensional letter mold replaced with a negative image of each letter on film. Later those letters, on a strip of film or a disc, were exposed to photosensitive material that was then printed with photo lithography. Phototypesetting sped up composition; but it also meant that printers no longer needed to store literally tons of metal type. However, the technology of phototype was short lived, with photographed exposed alphabets making way for digital ones. +Metal type used in the twentieth century looked and worked in the same way as that used in the fifteenth. Typefounding had undergone a transformation in its method of production, from pieces of metal type laboriously cast one by one in a hand mould, to mechanized typecasting with machines like the Monotype caster and Linotype machine. The next transformation would move the embodiment of type from pieces of lead alloy to silhouettes on photographic film. Phototypesetting, a technology invented in the 1890s, and used at first mostly for illustrations and headings, was more widely adopted in the 1960s. Phototypesetting machines like the Diatype worked on the same principle as the mechanical metal type casting machines, but with the three-dimensional letter mold replaced with a negative image of each letter on film. Later, those letters, on a strip of film or a disc, were exposed to photosensitive material that was then printed with photo lithography. Phototypesetting sped up composition; but it also meant that printers no longer needed to store literally tons of metal type. However, the technology of phototype was short lived, with photographed exposed alphabets making way for digital ones. -From the mid-1980s the personal computer and low-resolution printers put typography into the hands of the public. For hundreds of years designing type had been the domain of skilled punchcutters who served long apprenticeships. But the personal computer and the widespread adoption of the graphical user interface in everyday software opened up graphic design and type design to anyone with an imagination. +From the mid 1980s, the personal computer and low-resolution printers put typography into the hands of the public. For hundreds of years, designing type had been the domain of skilled punchcutters who served long apprenticeships. But the personal computer and the widespread adoption of the graphical user interface in everyday software opened up graphic design and type design to anyone with an imagination. For the first generations of digital graphic designers, low resolution screens, despite their limitations (and perhaps they only appear as limitations in hindsight), inspired new ways of approaching [type design](/glossary/type_designer). Designers also began to consider how this new technology might be used to revive and reimagine hundreds of years of metal type as digital fonts. Software engineers asked how they were to reproduce, say, the fine serifs of a Baskerville or Bodoni typeface on a low resolution display or printer. And graphic designers asked why the appearance was so unfaithful to professional imagesetting.
-![INSERT_ALT](images/GFKhistoftype6.2.svg) +![Type specimen for Oakland.](images/GFKhistoftype6.2.svg)
+
Zuzana Licko’s Oakland (1985) designed on the first Apple Macintosh 128K computer.
-In 1984, the Macintosh computer went on sale and it was quickly exploited by a new generation of talented and enthusiastic digital designers. Among them was Zuzana Licko, who rather than being put off by the inherent limitations imposed by low resolution, experimented with bitmap typefaces that embraced it. Licko‘s Emperor, Oakland, and Universal font families, designed in 1985 on the Apple Macintosh 128K computer (and re-released in 2011 as Lo-Res), celebrated these limitations. Later she went on to produce popular digital revivals of Baskerville (Mrs Eaves) and Bodoni (Filosofia), among others. +In 1984, the Macintosh computer went on sale and it was quickly exploited by a new generation of talented and enthusiastic digital designers. Among them was Zuzana Licko, who—rather than being put off by the inherent limitations imposed by low resolution—experimented with bitmap typefaces that embraced it. Licko‘s Emperor, Oakland, and Universal font families, designed in 1985 on the Apple Macintosh 128K computer (and re-released in 2011 as Lo-Res), celebrated these limitations. Later she went on to produce popular digital revivals of Baskerville (Mrs Eaves) and Bodoni (Filosofia), among others.
-![INSERT_ALT](images/GFKhistoftype6.1.svg) +![Type specimen for Wim Crouwel’s New Alphabet.](images/GFKhistoftype6.1.svg)
+
Wim Crouwel’s New Alphabet, 1967.
Wim Crouwel’s ‘new alphabet’ of 1967 was one of the most reductionist experiments, constructing the alphabet from combinations of horizontal and vertical [strokes](/glossary/stroke) only. Although it was not particularly [legible](/glossary/legibility), it inspired new and novel ways of approaching type design. -The personal computer, and later the Internet in the 1990s, made type design accessible to a much larger audience — one not always equipped with formal design training, and not afraid to experiment with new technologies and designs. With higher resolution displays and outline fonts came thousands of new designs, with everything from everyday informal handwriting and formal [calligraphy](/glossary/calligraphy) to weathered and grunge style lettering reimagined as fonts. Even the chromatic types of the mid-19th-century have been reproduced as layer fonts, and more recently as color fonts that permit embedding additional bitmapped and vector (SVG) textures and elements stored alongside the font outlines. More recently, the growth in support for [variable](/glossary/variable_fonts) fonts, where multiple instances are combined into a single font file and controlled by [axes](/glossary/axis_in_variable_fonts) like weight, slant, and width, has led to their wider use both in print and as web fonts. +The personal computer, and later the Internet in the 1990s, made type design accessible to a much larger audience—one not always equipped with formal design training, and not afraid to experiment with new technologies and designs. With higher resolution displays and outline fonts came thousands of new designs, with everything from everyday informal handwriting and formal [calligraphy](/glossary/calligraphy) to weathered and grunge style lettering reimagined as fonts. Even the chromatic types of the mid-19th-century have been reproduced as layer fonts, and more recently as [color fonts](/glossary/color_fonts) that permit embedding additional bitmapped and vector (SVG) textures and elements stored alongside the font outlines. More recently, the growth in support for [variable](/glossary/variable_fonts) fonts, where multiple instances are combined into a single font file and controlled by [axes](/glossary/axis_in_variable_fonts) like weight, slant, and width, has led to their wider use both in print and as web fonts. diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/justification_hyphenation/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/justification_hyphenation/content.md index eeba99f59b..a75706d97c 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/justification_hyphenation/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/justification_hyphenation/content.md @@ -55,7 +55,7 @@ The rules for hyphenation do depend on the language of the text, though. In Engl Hyphenation and justification were used in handwritten books long before the advent of print. But while the rectangular text area has been the norm in books since late antiquity, readers in earlier centuries seem to have been comfortable, in certain contexts, with an irregular right margin (what we’d call unjustified text today). By the late Middle Ages, though, there was less tolerance for that kind of irregularity, and scribes endeavored to produce solid rectangles of text. -Before starting to write, scribes carefully ruled out a rectangular text area on parchment with a sharp tool, lead, or ink. They justified as they wrote, fitting text to the line by hyphenating, abbreviating, overlapping letters, using [ligatures](https://inserturl.com), and making slight alterations to the widths of letters. Scribes might allow a letter or two to [protrude into the right margin](https://inserturl.com), but on the whole, they went to great lengths to preserve the solid rectangle of the text area, sometimes filling the empty space at the end of a final line with [decoration](https://inserturl.com), or even with arbitrary letters. +Before starting to write, scribes carefully ruled out a rectangular text area on parchment with a sharp tool, lead, or ink. They justified as they wrote, fitting text to the line by hyphenating, abbreviating, overlapping letters, using [ligatures](/glossary/ligature), and making slight alterations to the widths of letters. Scribes might allow a letter or two to [protrude into the right margin](/lesson/breaking_the_rules), but on the whole, they went to great lengths to preserve the solid rectangle of the text area, sometimes filling the empty space at the end of a final line with decoration, or even with arbitrary letters. ## Handset Type diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/content.md b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/content.md index 2f8e719932..861a2682f3 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/content.md +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/content.md @@ -1,10 +1,11 @@ -When John Baskerville introduced his roman [typefaces](/glossary/typeface) in the 1750s, some complained that their contrast was so high that reading them could damage your eyes. During Baskerville’s lifetime, his types were more popular abroad than in England, particularly in France and Italy. And it was there that his typefaces proved most influential. But the persistent trend towards higher contrast typefaces,** **that had begun long before Baskerville, was by no means over. By the 1780s, contrast would be taken to greater extremes with a new style of typeface now termed Modern — in contrast to what we now call Old Style typefaces and their various descendants. They are also known as Didone, a term coined in 1954 as part of the Vox-ATypI typeface [classification](/lesson/making_sense_of_typographic_classifications) system — a fusion of the names of the style’s most famous proponents, Didot and Bodoni. +When John Baskerville introduced his roman [typefaces](/glossary/typeface) in the 1750s, some complained that their [contrast](/glossary/contrast) was so high that reading them could damage your eyes. During Baskerville’s lifetime, his types were more popular abroad than in England, particularly in France and Italy. And it was there that his typefaces proved most influential. But the persistent trend towards higher contrast typefaces, which had begun long before Baskerville, was by no means over. By the 1780s, contrast would be taken to greater extremes with a new style of typeface now termed Modern—in contrast to what we now call Old Style typefaces and their various descendants. They are also known as Didone, a term coined in 1954 as part of the Vox-ATypI typeface [classification](/lesson/making_sense_of_typographic_classifications) system — a fusion of the names of the style’s most famous proponents, Didot and Bodoni.
-![INSERT_ALT](images/GFKhistoftype4.3.svg) +![The word “hamburger” set in Baskerville and Bodoni.](images/GFKhistoftype4.3.svg)
+
Comparing transitional (Baskerville, top) and Modern (Bodoni, below) style. They share similar proportions and an upright axis, but the Modern has a much simplified serif structure and considerably higher contrast.
## The first Moderns @@ -14,25 +15,26 @@ In 1768, Bodoni was invited to run the newly established Stamperia Reale, or Roy Reproduction of the fine details in Bodoni’s type was made possible by exceptionally smooth paper, new inks, and improved type casting methods. Under magnification, Bodoni’s typefaces reveal remarkably crisp outlines and even fill. Bodoni became a celebrity during his own lifetime, for his Modern typefaces and his meticulous typography. And the Modern style took Europe by storm, even reaching America and winning the praise of a printer named Benjamin Franklin, in future to become president of the United States, Franklin wrote to Bodoni in 1787 praising his printing and type: “It is one of the most beautiful that Art has hitherto produced.” Bodoni also counted the Pope and Napoleon as admirers of his work. -As an interesting historical aside, Bodoni and the Didots did not get along. Unable to fault Bodoni’s typefaces and typography, the brothers Didot, Firmin and his older brother Pierre, chose to attack the textual accuracy of Bodoni’s editions, jumping on even the smallest typos. In 1799 Firmin Didot wrote, “As a literary man, I condemn his editions, as a typographer I admire them.” The snub was fueled by national rivalry, snobbery, and no doubt a good amount of jealousy too. +As an interesting historical aside, Bodoni and the Didots did not get along. Unable to fault Bodoni’s typefaces and typography, the brothers Didot, Firmin and his older brother Pierre, chose to attack the textual accuracy of Bodoni’s editions, jumping on even the smallest typos. In 1799 Firmin Didot wrote, “As a literary man, I condemn his editions, as a typographer I admire them.” The snub was fueled by national rivalry, snobbery, and no doubt a good amount of jealousy, too. ## Modern features -In Modern typefaces, the extreme contrast between thick and thin strokes was also carried through to the serifs which were typically very thin (sometimes called hairline) and unbracketed, or very nearly so. Those features, plus their slightly condensed forms and upright axis, all contribute to their verticality or upright stance and has led to them being described as cold and rigid. Nowadays, it is suggested that this characteristic coldness and verticality disqualifies them for use in setting extended texts; however, during the 19th century they were very much book faces. +In Modern typefaces, the extreme contrast between thick and thin strokes was also carried through to the serifs, which were typically very thin (sometimes called hairline) and unbracketed, or very nearly so. Those features, plus their slightly condensed forms and upright axis, all contribute to their verticality or upright stance and has led to them being described as cold and rigid. Nowadays, it is suggested that this characteristic coldness and verticality disqualifies them for use in setting extended texts; however, during the 19th century they were very much book faces.
-![INSERT_ALT](images/GFKhistoftype4.1.svg) +![The word “Didone” with its bracketed serifs highlighted.](images/GFKhistoftype4.1.svg)
-In the earliest Modern style capital letters one would be hard-pressed to find any explicit calligraphic influence, except perhaps in the modulation of the strokes — that is the speed with which thick strokes turn into thin strokes — a modulation characterized by the steel pointed pen calligraphy. However, in the lowercase italics, there are more explicit references to calligraphy; for example, the hairline entry and exit strokes and ball or teardrop shaped terminals — again, these are features already present in contemporary writing manuals. +In the earliest Modern style, capital letters one would be hard-pressed to find any explicit calligraphic influence, except perhaps in the modulation of the strokes—that is, the speed with which thick strokes turn into thin strokes—a modulation characterized by the steel pointed pen calligraphy. However, in the lowercase italics, there are more explicit references to calligraphy; for example, the hairline entry and exit strokes and ball- or teardrop-shaped terminals—again, these are features already present in contemporary writing manuals.
-![INSERT_ALT](images/GFKhistoftype4.2.svg) +![Scan of Bodoni roman and italic specimen.](images/GFKhistoftype4.2.svg)
+
Bodoni roman and italic. Note, in the italic, the calligraphic influence in the hairline in-strokes.
Comparing the Moderns of Didot and Bodoni is difficult because there are so many of them, especially from Bodoni, who produced hundreds. Although typically, there is a little more symmetry or geometry in the letters of Bodoni than in Didot’s Moderns; for example, some of Didot’s romans tend to have asymmetrical or slightly lopsided [counters](/glossary/counter). @@ -40,4 +42,4 @@ The types of Didot and Bodoni were widely copied. The latter more so, owing to B ## Modern-day Moderns -During the early nineteenth century Modern typefaces were hugely popular. They often replaced Old Style and Transitional typefaces for setting extended texts. Nowadays, Modern or Didone typefaces are seldom used for extended texts, but they are often associated with luxury brands and fashion, a trend begun in the 1920s by the likes of Mehemed Fehmy Agha and Alexey Brodovitch, and later popularized through their use in fashion magazines like _Harper's Bazaar_ and _Vogue_. +During the early nineteenth century, Modern typefaces were hugely popular. They often replaced Old Style and Transitional typefaces for setting extended texts. Nowadays, Modern or Didone typefaces are seldom used for extended texts, but they are often associated with luxury brands and fashion—a trend begun in the 1920s by the likes of Mehemed Fehmy Agha and Alexey Brodovitch, and later popularized through their use in fashion magazines like _Harper’s Bazaar_ and _Vogue._ diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/content.md b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/content.md index ad07d840a3..955da40550 100644 --- a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/content.md +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/content.md @@ -84,7 +84,7 @@ If a type family contains two or more [styles](/glossary/style) within an [axis]
-![INSERT_ALT](images/existing_masters.svg) +![An abstract representation of masters and instances: Two “a” characters rendered in light and heavy weights represent the masters at the top, with multiple “a” characters rendered beneath, indicating the full range of weights created as instances.](images/existing_masters.svg)
@@ -94,7 +94,7 @@ Type designers can code layout features in font editing software to control how
-![INSERT_ALT](images/existing_alternates.svg) +![The phrase “ziggy, meet ziggy” set in a sans serif typeface that has alternate glyphs enabled for the z and g characters in the second version of “ziggy.”](images/existing_alternates.svg)
diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/lesson.textproto b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/lesson.textproto index 3118eb16b2..57d8498e2c 100644 --- a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/lesson.textproto +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/lesson.textproto @@ -12,4 +12,4 @@ related_terms: "spaces" related_terms: "masters" related_terms: "licensing" prev_lessons: "introducing_color_fonts" -excerpt: "INSERT_EXCERPT" +excerpt: "An overview of the type design process, from ideation and sketching right through to making fonts and releasing them." diff --git a/cc-by-sa/knowledge/modules/readability/module.textproto b/cc-by-sa/knowledge/modules/readability/module.textproto deleted file mode 100644 index c2f5044df3..0000000000 --- a/cc-by-sa/knowledge/modules/readability/module.textproto +++ /dev/null @@ -1,4 +0,0 @@ -name: "Readability" -lessons: "how_type_influences_readability" -lessons: "introducing_accessibility_in_typography" -excerpt: "INSERT_EXCERPT" diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/content.md b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/content.md similarity index 89% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/content.md rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/content.md index 1780ee89b0..e5944a358d 100644 --- a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/content.md +++ b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/content.md @@ -22,7 +22,7 @@ Find out more about text accessibility in [“Introducing accessibility in typog
-![INSERT_ALT](images/readability_01.svg) +![Two columns of text, with the left column showing examples of indistinct letter shapes and tight line height that causes clashes, and the right showing better distinguishable shapes (to show legibility) and a more open line height (to show readability).](images/readability_01.svg)
Top row: A comparison between less legible type set in Gill Sans and Prosto One (left) with more legible type set in Raleway and Noto Sans (right). Bottom row: A comparison between less readable type (left) with more readable type (right). Both paragraphs are set in Roboto and share the same line-height value, but different font-size values.
@@ -33,7 +33,7 @@ There are physiological mechanisms that determine how well a person can see tex
-![INSERT_ALT](images/readability_02.svg) +![A diagram showing how light is processed by the eye.](images/readability_02.svg)
@@ -56,7 +56,7 @@ The heart of typography focuses on the reader’s interactions with the words as
-![INSERT_ALT](images/readability_03.svg) +![A sentence with the word shapes outlined, then the same shapes repeated below, but without the words, showing how uppercase text creates word shapes that are indistinct.](images/readability_03.svg)
@@ -64,7 +64,7 @@ The word superiority effect also describes why it is easier to read a string of
-![INSERT_ALT](images/readability_04.svg) +![The sentence “The word printed on the paper” with annotations showing where the nouns, articles, verbs, etc. appear.](images/readability_04.svg)
@@ -74,7 +74,7 @@ Readers are surprisingly flexible in their ability to read text that is not spel
-![INSERT_ALT](images/readability_05.svg) +![On the right side, an approximation of a blog post: a heading in large type, then some tags set in small, uppercase type, followed by a paragraph of text. To the left of all of this text, labels show the different font sizes used by each text element.](images/readability_05.svg)
@@ -84,7 +84,7 @@ Some people will experience [crowding](https://www.sciencedirect.com/science/art
-![INSERT_ALT](images/readability_06.svg) +![Four columns of the same text, but with different line height settings. The first is way too tight and causes clashes between letterforms; the last is too open and each line becoems disconnected. The middle two settings, although different from each other, show the approximate range of readable line heights.](images/readability_06.svg)
@@ -94,7 +94,7 @@ To explore settings that might work for your texts, when selecting a font on Goo
-![INSERT_ALT](images/readability_07.png) +![A screenshot of Google Fonts’ Type Tester.](images/readability_07.png)
Google Fonts’ Type Tester, showing text with variable axes.
@@ -105,7 +105,7 @@ Reading is more than seeing the words and understanding the content based on syn
-![INSERT_ALT](images/readability_08.svg) +![“Peace at last” and “Oh, come on! really?!?” set in typefaces that reflect the emotional sentiment of the text.](images/readability_08.svg)
@@ -127,7 +127,7 @@ The shortest form of reading is called glancing, when the reader briefly looks a
-![INSERT_ALT](images/readability_09.svg) +![A diagram showing types of reading—from glanceable to interlude to long form—over an axis of shortest time to longest time.](images/readability_09.svg)
Time to read a source impacts the way in which people read, and what they do while they read. Reading at-a-glance is often done alongside some other task, while reading a long form document generally requires dedication to the reading itself. Most reading is done opportunistically in interludes; while waiting or taking a break.
diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_01.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_01.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_01.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_01.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_02.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_02.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_02.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_02.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_03.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_03.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_03.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_03.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_04.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_04.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_04.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_04.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_05.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_05.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_05.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_05.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_06.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_06.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_06.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_06.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_07.png b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_07.png similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_07.png rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_07.png diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_08.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_08.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_08.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_08.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_09.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_09.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_09.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/readability_09.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/thumbnail.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/lesson.textproto b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/lesson.textproto similarity index 53% rename from cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/lesson.textproto rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/lesson.textproto index a3b5c870fe..592b5df4a7 100644 --- a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/lesson.textproto +++ b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/how_type_influences_readability/lesson.textproto @@ -7,4 +7,4 @@ topics: "readability" related_terms: "legibility" related_terms: "readability" next_lessons: "introducing_accessibility_in_typography" -excerpt: "INSERT_EXCERPT" +excerpt: "Reading is what we do, and readability refers to qualities of a text that make reading easier. This includes content decisions, or format decisions, which help a reader to easily engage with and comprehend the message intended by the author." diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/content.md b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/content.md similarity index 93% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/content.md rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/content.md index bb3686d900..896c8e4a37 100644 --- a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/content.md +++ b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/content.md @@ -1,10 +1,13 @@ Making [text](/glossary/text_copy) [accessible](https://www.google.com/accessibility/) should be part of everyday practice. However, general [typographic](/glossary/typography) practices of optimizing [legibility](/glossary/legibility) and [readability](/glossary/readability) don’t necessarily go all the way towards making text accessible. -First, let’s make sure we define legibility and readability. Both are measures of clarity. Legibility is the measure of how distinguishable individual characters and words are to the eye of the reader. Readability is the measure of how easy it is to read the text overall. +First, let’s make sure we define **legibility** and **readability**. Both are measures of clarity. + +- **Legibility** is the measure of how distinguishable individual characters and words are to the eye of the reader. +- **Readability** is the measure of how easy it is to read the text overall.
-![Two columns of text in red and black ](images/thumbnail.svg) +![Two columns of text, with the left column showing examples of indistinct letter shapes and tight line height that causes clashes, and the right showing better distinguishable shapes (to show legibility) and a more open line height (to show readability).](images/thumbnail.svg)
Top row: A comparison between less legible type set in Gill Sans and Prosto One (left) with more legible type set in Raleway and Noto Sans (right). Bottom row: A comparison between less readable type (left) with more readable type (right). Both paragraphs are set in Roboto and share the same line-height value, but different font-size values.
@@ -21,11 +24,21 @@ The type designers who created [Lexend](https://design.google/library/lexend-rea Mirroring, or flipping, occurs when readers flip or mirror letters and numbers that are the same form when flipped horizontally. For example, a reader could mistake a lowercase letter “b” for a lowercase “d”. Instead of reading the word “bog,” the reader will think the word is “dog.” -A different and more pervasive issue among people with dyslexia and other reading difficulties is the transpositioning of letters. For example, a reader may mistake the word “lion” for “loin,” “line” or “lien.” Transposition is a common experience for people with dyslexia and other reading difficulties, and does not disappear with age. +A different and more pervasive issue among people with dyslexia and other reading difficulties is the transpositioning of letters. For example, a reader may mistake the words “lion” for “loin,” or “line” for “lien.” Transposition is a common experience for people with dyslexia and other reading difficulties, and does not disappear with age. + +To reduce the chances of a reader confusing letters, words and numbers, consider checking the following character pairs to make sure they are distinct enough from each other: -To reduce the chances of a reader confusing letters, words and numbers, consider checking the following character pairs to make sure they are distinct enough from each other: qp db 0O nu il1I a8 a6 6g rn m. +- qp +- db +- 0O +- nu +- il1I +- a8 +- a6 +- 6g +- rn, m -When selecting a typeface—especially a [sans serif](/glossary/sans_serif)—it’s useful to assess the similarities or differences between the uppercase “L”, lowercase “l”, and numeral “1” characters because these letters and numbers look very similar. +When selecting a typeface—especially a [sans serif](/glossary/sans_serif)—it’s useful to assess the similarities or differences between the uppercase “L,” lowercase “l,” and numeral “1” characters because these letters and numbers look very similar. Many shapes are simply mirrored without any further alteration. Lowercase “b,” “d,” “p,” and “q” are the most commonly confused letters. Subtle edits to the letterforms may help to differentiate them as the correct characters. @@ -149,10 +162,10 @@ Read more about [visual acuity and text size](https://www.teachingvisuallyimpair Follow these guidelines for hyperlinks: - Allow user preferences to change the fonts and colors - Change the color of links that have been accessed. Usually, unvisited links are in blue and visited links are in pink. This helps people see which links they have already accessed. -- Embedded content (like documents, spreadsheets, videos, or decks) should have a sentence/link near the embedded content that reads, “Open the [insert content name] in a new window.” +- Embedded content (like documents, spreadsheets, videos, or decks) should have a sentence/link near the embedded content that reads, “Open the [content name] in a new window.” - All hyperlinks are descriptive. Screen reading software often reads links out of context from the surrounding text. Links should clearly describe where the user will be taken or what action it triggers. - - Incorrect: “It’s important to meet accessibility standards. Learn more.” - - Correct: “It’s important to meet accessibility standards.” + - Incorrect: “It’s important to meet accessibility standards. [Learn more](https://fonts.google.com/knowledge).” + - Correct: “It’s important to meet [accessibility standards](https://fonts.google.com/knowledge).” ## Non-text elements and text in images diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_2.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_2.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_2.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_2.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_3.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_3.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_3.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_3.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_4.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_4.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_4.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_4.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_5.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_5.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_5.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_5.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_6.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_6.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_6.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_6.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_7.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_7.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_7.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_7.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_8.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_8.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_8.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/accessibility_8.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/thumbnail.svg b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/lesson.textproto b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/lesson.textproto similarity index 54% rename from cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/lesson.textproto rename to cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/lesson.textproto index 450f50a692..c3da0f28cb 100644 --- a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/lesson.textproto +++ b/cc-by-sa/knowledge/modules/readability_and_accessibility/lessons/introducing_accessibility_in_typography/lesson.textproto @@ -6,4 +6,4 @@ topics: "readability" related_terms: "legibility" related_terms: "readability" prev_lessons: "how_type_influences_readability" -excerpt: "INSERT_EXCERPT" +excerpt: "Making text accessible should be part of everyday practice. However, general typographic practices of optimizing legibility and readability don’t necessarily go all the way towards making text accessible." diff --git a/cc-by-sa/knowledge/modules/readability_and_accessibility/module.textproto b/cc-by-sa/knowledge/modules/readability_and_accessibility/module.textproto new file mode 100644 index 0000000000..48455bad25 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability_and_accessibility/module.textproto @@ -0,0 +1,4 @@ +name: "Readability" +lessons: "how_type_influences_readability" +lessons: "introducing_accessibility_in_typography" +excerpt: "Making our text readable should be our primary goal when setting and manipulating type. Readability—along with the closely related concepts of legibility and accessibility—is at the core of typography, and yet it’s rarely discussed thoroughly in typographic contexts. In these articles, we examine the qualities of type and typography that make reading easier." diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/content.md b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/content.md similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/content.md rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/content.md diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/01.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/01.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/01.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/01.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/02.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/02.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/02.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/02.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/03.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/03.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/03.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/03.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/04.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/04.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/04.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/04.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/05.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/05.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/05.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/05.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/thumbnail.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/lesson.textproto b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/lesson.textproto new file mode 100644 index 0000000000..d4c2ccb728 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/cjk_typesetting_rules/lesson.textproto @@ -0,0 +1,11 @@ +name: "CJK Typesetting Rules" +authors: "Min-Young Kim" +reviewers: "Lisa Huang" +reviewers: "Minjoo Ham" +reviewers: "Shoko Mugikura" +topics: "cjk" +related_terms: "cjk" +related_terms: "script_writing_system" +prev_lessons: "type_classification_in_cjk_korean" +next_lessons: "japanese_typography_basics" +excerpt: "There are four big differences in rules of typesetting between Latin and CJK fonts: Full-width versus monospaced, use of punctuation, balance of the type, and the existence of italic." diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/content.md b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/content.md similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/content.md rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/content.md diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/01.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/01.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/01.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/01.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/02.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/02.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/02.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/02.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/03.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/03.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/03.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/03.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/04.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/04.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/04.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/04.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/05.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/05.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/05.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/05.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/06.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/06.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/06.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/06.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/07.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/07.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/07.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/07.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/thumbnail.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/lesson.textproto b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/lesson.textproto new file mode 100644 index 0000000000..7970795158 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/japanese_typography_basics/lesson.textproto @@ -0,0 +1,11 @@ +name: "Japanese typography basics" +authors: "Min-Young Kim" +reviewers: "Lisa Huang" +reviewers: "Minjoo Ham" +reviewers: "Shoko Mugikura" +topics: "cjk" +related_terms: "cjk" +related_terms: "script_writing_system" +prev_lessons: "cjk_typesetting_rules" +next_lessons: "the_evolution_of_hangeul_type_design" +excerpt: "Japanese typesetting is complicated due to the use of three different kinds of scripts in one language. This article explains the fundamentals, from the structure of Japanese script to the kerning system called Tsume." diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/content.md b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/content.md similarity index 99% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/content.md rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/content.md index 8f95a98e80..bf15a90fd0 100644 --- a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/content.md +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/content.md @@ -1,4 +1,4 @@ -Hangeul, the Korean [script](/glossary/script_writing_system), was created in 1443 and published in 1446. Until then, Korea borrowed Chinese characters to apply them to Korean sounds, as did Japan. Please read [“Type classification in CJK”](/lesson/type_classification_in_cjk) for more information. +Hangeul, the Korean [script](/glossary/script_writing_system), was created in 1443 and published in 1446. Until then, Korea borrowed Chinese characters to apply them to Korean sounds, as did Japan. Please read [“Type classification in CJK”](/lesson/type_classification_in_cjk_korean) for more information. ## A sans serif origin diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/01.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/01.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/01.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/01.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/02.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/02.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/02.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/02.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/03.jpg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/03.jpg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/03.jpg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/03.jpg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/04.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/04.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/04.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/04.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/05.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/05.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/05.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/05.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/06.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/06.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/06.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/06.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/07.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/07.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/07.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/07.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/thumbnail.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/lesson.textproto b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/lesson.textproto similarity index 53% rename from cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/lesson.textproto rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/lesson.textproto index 8ed6a24b8a..7cc3ea1cd5 100644 --- a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/lesson.textproto +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/the_evolution_of_hangeul_type_design/lesson.textproto @@ -5,6 +5,7 @@ reviewers: "Minjoo Ham" reviewers: "Shoko Mugikura" topics: "cjk" related_terms: "cjk" +related_terms: "script_writing_system" prev_lessons: "japanese_typography_basics" next_lessons: "an_introduction_to_hangeul" -excerpt: "INSERT_EXCERPT" +excerpt: "The Korean script Hangeul is one of the youngest scripts, but the evolution was so fast and unique from other scripts. Let’s look at how Hangeul design was developed over the years." diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/content.md b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/content.md new file mode 100644 index 0000000000..f46933aa31 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/content.md @@ -0,0 +1,75 @@ +The categories in Chinese type classification can be seen as a set of names from the most popular styles that appeared throughout Chinese type history, all the way to our contemporary times. Even with digital technologies, and the multiple mechanical printing techniques, there is—and always has been—a strong connection to handwritten calligraphy. Thus, Chinese typeface categories with styles related to calligraphy are still popular even today, due to the very nature of the characters (more organic than mechanical). Styles that are less calligraphic appeared very late in history (first in woodblock printing with Songti and Mingti), as ways to respond to the needs of their time and follow the contemporary trends (Yuanti and Heiti). + +As Chinese type evolved mostly independently from Latin, the groups or styles are different. Chinese (digital) type classification can be presented in seven categories, from the most “traditional” style to the most “modern.” Let’s explore the major categories: + +### Kaiti (楷体) or “Regular style” + +Kaiti style is related to the calligraphic Regular Script (楷书), with “regular” denoting “official” or “formal.” Regular Script is the last calligraphic style that appeared in the history of Chinese calligraphy (around the 7th century). Other than carrying the movements of the brush (traditionality, warmth, liveliness), it’s a separate category to the Handwritten one because Kaiti obeys a number of proportions and details that make it more “standardized.” + +
+ +![Sample of Kaiti style Chinese typefaces - Kaiti, Kai, both Macintosh system fonts](images/A_kaiti.svg) + +
+ +### Handwritten style or Cursive style (手写体, 行书) + +Typefaces with a handwritten style in Chinese can vary significantly depending on the tool influencing the shapes or the speed of the movements. + +
+ +![Sample of Handwritten style Chinese typefaces - Liu Jian Mao Cao (GF), Xingkai SC, HanziPen (Mac OS)](images/B_handwritten_cursive.svg) + +
+ +### Songti (宋体) + +Songti style typefaces have design features made to fit woodblock carving (straight lines, diamond shaped serifs, accentuated contrast). It was the dominant style used for woodblock printing, which was the main technique used for Chinese printing since the Song dynasty (960–1279) all the way until the Ming dynasty (1368–1644). As it’s the style used for the biggest part of Chinese typography history, it’s the most familiar and popular one for texts, even today. + +
+ +![Sample of Songti style Chinese typeface - Noto Serif CJK (GF)](images/C_songti.svg) + +
+ +### FangSongti (仿宋体) + +FangSongti means “pseudo-Songti.” It’s a style derived from Songti, but with slightly more movement than its precursor (subtle slant of horizontal strokes, sharper serifs and endings, stiffer curves), and is most often suited to classical editorial usage as of the last couple of decades. + +
+ +![Sample of FangSongti style Chinese typeface - STFangsong (Mac OS)](images/D_fangsongti.svg) + +
+ +### Heiti (黑体) + +With 黑 [hei] meaning “black” or “dark” and 体 [ti] meaning “style,” this is the equivalent of sans serif in Latin script. The first Heiti typefaces appeared recently in Chinese type history (very early 20th century), with the influence of typefaces imported from Europe. Contemporary digital designs made Heiti one of the most popular styles in the digital realm. + +
+ +![Sample of Heiti style Chinese typeface - Noto Sans CJK (GF)](images/E_heiti.svg) + +
+ +Yuanti (圆体) is a sub-group of Heiti, because even though it is a rounded style (rounded tips and corners), it is the only other style without any serifs. + +
+ +![Sample of Yuanti style Chinese typeface - Yuanti (Mac OS)](images/F_yuanti.svg) + +
+ +### Decorative or Artistic (展示体, 美术体) + +This category can be related as “Display” or “Titling” styles in Latin, with all kinds of playfulness, personality, and quirkiness allowed by the versatility of Chinese characters (remember that this is an organic writing system first!). + +
+ +![Sample of Decorative style Chinese typefaces - ZCOOL QingKe HuangYou, ZCOOL KuaiLe (GF)](images/G_decorative_artistic.svg) + +
+ +### About the names + +You may have noticed how some names start the same, but end up with either “-ti” or “-shu”. In Chinese, 书 [shu] means “calligraphic style” in the context of 书法 [shufa] for calligraphy. And 体 [ti] means “typographic style” in the context of 字体 [ziti] for typography. A typographic style is very often named after its calligraphic style, or contains a reference to its style directly in the name. diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/01.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/01.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/01.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/01.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/02.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/02.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/02.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/02.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/03.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/03.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/03.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/03.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/04.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/04.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/04.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/04.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/05.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/05.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/05.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/05.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/06.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/06.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/06.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/06.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/07.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/07.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/07.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/07.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/08.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/08.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/08.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/08.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/09.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/09.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/09.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/09.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/A_kaiti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/A_kaiti.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/A_kaiti.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/A_kaiti.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/B_handwritten_cursive.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/B_handwritten_cursive.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/B_handwritten_cursive.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/B_handwritten_cursive.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/C_songti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/C_songti.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/C_songti.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/C_songti.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/D_fangsongti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/D_fangsongti.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/D_fangsongti.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/D_fangsongti.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/E_heiti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/E_heiti.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/E_heiti.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/E_heiti.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/F_yuanti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/F_yuanti.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/F_yuanti.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/F_yuanti.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/G_decorative_artistic.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/G_decorative_artistic.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/G_decorative_artistic.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/G_decorative_artistic.svg diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/thumbnail.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/lesson.textproto b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/lesson.textproto new file mode 100644 index 0000000000..32d706ef2d --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_chinese/lesson.textproto @@ -0,0 +1,10 @@ +name: "Type classification in CJK: Chinese" +authors: "Lisa Huang" +reviewers: "Min-Young Kim" +reviewers: "Minjoo Ham" +reviewers: "Shoko Mugikura" +topics: "cjk" +related_terms: "cjk" +related_terms: "script_writing_system" +next_lessons: "type_classification_in_cjk_japanese" +excerpt: "Here, we look at how CJK scripts are classified differently from Latin, and also from each other, with a focus on Chinese." diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/content.md b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/content.md new file mode 100644 index 0000000000..4fb36fa143 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/content.md @@ -0,0 +1,41 @@ +The term “modern serif” in Latin type refers to a classification called _didone,_ such as Bodoni and Didot. However, in Japanese typography, the definition of a modern serif is a little different. Let’s first look at an old-style serif: + +
+ +![Sample of old-style JP serif - Zen Old Mincho, Shippori Mincho](images/01.svg) + +
+ +The very first Japanese metal type was designed as an old-style serif, because the use of a traditional east Asian brush for writing was common at the time, and the letterforms were easy to apply to serif designs. + +The characteristics of a traditional Japanese old-style serif has a lot in common with an old-style serif in Latin: Small, delicate counters and letter size, elegantly lingering brush strokes—but not so much that it becomes more script design than serif—and organic, natural curves. + +
+ +![Sample of modern JP serif -Noto Serif JP, Toppan Bunkyu Mincho](images/02.svg) + +
+ +Modern serif classification in Japanese typography is on the opposite side from the old-style serif. It has relatively large and dynamic counter size, simpler strokes, clean elements, and sometimes low contrast between vertical and horizontal strokes. For example, [Noto Serif JP](https://fonts.google.com/noto/specimen/Noto+Serif+JP), while it respects the traditional letterform, is designed with low contrast and distinctive elements, employing wider counters to improve readability on screen. + +
+ +![Close-up Noto Serif JP for its modern characteristic](images/03.svg) + +
+ +The definition of old-style and modern for sans serif goes the same as serif, but for the modern style, there are two kinds of interpretation: Humanist modern san serif—popular for Latin—and a more systematic and geometric sans serif. Let’s see the difference. + +
+ +![Sample of old-style JP sans - Zen kaku gothic](images/04.svg) + +
+ +
+ +![Sample of modern JP sans - Noto Sans JP, M Plus 1p](images/05.svg) + +
+ +As we covered earlier, Noto JP pursues modern elements and strokes while honoring the traditional letterform. If you look at M Plus 1p, however, the counter and letter size is prominently larger, and the movement of strokes are more systematic. It is not strictly geometric all the way in terms of the circles and curves, but has the nuance of a systematic structure. diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/01.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/01.svg new file mode 100644 index 0000000000..d9553d7c0b --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/01.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/02.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/02.svg new file mode 100644 index 0000000000..860e886a2b --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/02.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/03.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/03.svg new file mode 100644 index 0000000000..ccfda50fdc --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/03.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/04.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/04.svg new file mode 100644 index 0000000000..e6156cc1f9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/04.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/05.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/05.svg new file mode 100644 index 0000000000..1a9151be4a --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/05.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/06.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/06.svg new file mode 100644 index 0000000000..59c7978e25 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/06.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/07.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/07.svg new file mode 100644 index 0000000000..2cb6fc2afd --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/07.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/08.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/08.svg new file mode 100644 index 0000000000..d1444854af --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/08.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/09.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/09.svg new file mode 100644 index 0000000000..f632aa04b7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/09.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/A_kaiti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/A_kaiti.svg new file mode 100644 index 0000000000..b9aae84ef3 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/A_kaiti.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/B_handwritten_cursive.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/B_handwritten_cursive.svg new file mode 100644 index 0000000000..ccbba1ec96 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/B_handwritten_cursive.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/C_songti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/C_songti.svg new file mode 100644 index 0000000000..5567544de7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/C_songti.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/D_fangsongti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/D_fangsongti.svg new file mode 100644 index 0000000000..2d36a52d73 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/D_fangsongti.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/E_heiti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/E_heiti.svg new file mode 100644 index 0000000000..910de511b9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/E_heiti.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/F_yuanti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/F_yuanti.svg new file mode 100644 index 0000000000..8be6360434 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/F_yuanti.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/G_decorative_artistic.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/G_decorative_artistic.svg new file mode 100644 index 0000000000..265fc5a1ea --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/G_decorative_artistic.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/thumbnail.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/thumbnail.svg new file mode 100644 index 0000000000..ccbba1ec96 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/images/thumbnail.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/lesson.textproto b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/lesson.textproto new file mode 100644 index 0000000000..98057633d7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_japanese/lesson.textproto @@ -0,0 +1,11 @@ +name: "Type classification in CJK: Japanese" +authors: "Min-Young Kim" +reviewers: "Lisa Huang" +reviewers: "Minjoo Ham" +reviewers: "Shoko Mugikura" +topics: "cjk" +related_terms: "cjk" +related_terms: "script_writing_system" +prev_lessons: "type_classification_in_cjk_chinese" +next_lessons: "type_classification_in_cjk_korean" +excerpt: "Here, we look at how CJK scripts are classified differently from Latin, and also from each other, with a focus on Japanese." diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/content.md b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/content.md new file mode 100644 index 0000000000..6e997bccf8 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/content.md @@ -0,0 +1,37 @@ +The basic type classification of serif and sans for Korean has a lot in common with Japanese, but since Korean letterforms are fundamentally geometric and have less variety in terms of curves than Japanese, the characteristics to look when understanding the classification is a little different. + +Korean old-style serifs also have small counters, but not always the small letter size. However, the strokes could be more brush-like and lingering, rather than systematic. The unique part is that although most old-style serifs in Latin and Japanese would have humanist brush strokes, because they developed from brush writing, Korean old-style serifs are the other way around: They follow the original geometric letterform of the Hangeul from Hunminjeongum. For more information, read our [Designing Hangeul](/lesson/an_introduction_to_hangeul) collection of articles by Darrell Penta. + +
+ +![Comparison of old-style and modern KR serif - Gowun Batang VS. Noto Serif, Nanum Myeongjo. Show what parts expresses geometric/humanisticness](images/06.svg) + +
+ +Modern serifs in Korean could have several different characteristics. [Noto Serif KR](https://fonts.google.com/noto/specimen/Noto+Serif+KR) is a classic modern serif, with humanist letterforms and distinctive elements. Nanum Myeongjo is a more unusual modern serif, with stiff elements, and larger than Noto Serif KR. Even though the typeface has a strong uniqueness, as long as it’s intended for text usage, it’s considered a modern serif, not a display. + +The sans serif classification in Korean is more of a development of the design rather than a classification category. Typical old-style Korean sans serifs will have full-width square letterform, and each component has a wider range of different sizing to forcibly fit the square form. + +
+ +![Sample of traditional KR sans - Apple Gothic, Adobe Gothic](images/07.svg) + +
+ +Modern sans serifs, or any sans serifs designed and released in the past couple of decades, have narrow letter width between 850–970 units (85–97%), for a smoother reading experience and more modern feel. The components are not forcibly stretched or stuffed in; instead, the sizing of components changes within a sensible range to respect the original form of the Hangeul component, while keeping the monospaced letterforms. + +
+ +![Sample of modern KR sans - Noto Sans KR, IBM Plex](images/08.svg) + +
+ +Most Korean fonts are monospaced by default, but very rarely there are also proportional and kerned sans serifs. Also, there is a Korean-only classification called “Talnemo,” meaning out-of-the-box or non-square, and this is also a proportional and kerned Korean type classification. + +
+ +![Sample of non-square KR font - Dongle](images/09.svg) + +
+ + Please read [“The evolution of Hangeul type design”](/lesson/the_evolution_of_hangeul_type_design) for more details. diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/01.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/01.svg new file mode 100644 index 0000000000..d9553d7c0b --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/01.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/02.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/02.svg new file mode 100644 index 0000000000..860e886a2b --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/02.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/03.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/03.svg new file mode 100644 index 0000000000..ccfda50fdc --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/03.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/04.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/04.svg new file mode 100644 index 0000000000..e6156cc1f9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/04.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/05.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/05.svg new file mode 100644 index 0000000000..1a9151be4a --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/05.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/06.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/06.svg new file mode 100644 index 0000000000..59c7978e25 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/06.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/07.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/07.svg new file mode 100644 index 0000000000..2cb6fc2afd --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/07.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/08.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/08.svg new file mode 100644 index 0000000000..d1444854af --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/08.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/09.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/09.svg new file mode 100644 index 0000000000..f632aa04b7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/09.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/A_kaiti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/A_kaiti.svg new file mode 100644 index 0000000000..b9aae84ef3 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/A_kaiti.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/B_handwritten_cursive.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/B_handwritten_cursive.svg new file mode 100644 index 0000000000..ccbba1ec96 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/B_handwritten_cursive.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/C_songti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/C_songti.svg new file mode 100644 index 0000000000..5567544de7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/C_songti.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/D_fangsongti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/D_fangsongti.svg new file mode 100644 index 0000000000..2d36a52d73 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/D_fangsongti.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/E_heiti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/E_heiti.svg new file mode 100644 index 0000000000..910de511b9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/E_heiti.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/F_yuanti.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/F_yuanti.svg new file mode 100644 index 0000000000..8be6360434 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/F_yuanti.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/G_decorative_artistic.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/G_decorative_artistic.svg new file mode 100644 index 0000000000..265fc5a1ea --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/G_decorative_artistic.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/thumbnail.svg b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/thumbnail.svg new file mode 100644 index 0000000000..ccbba1ec96 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/images/thumbnail.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/lesson.textproto b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/lesson.textproto new file mode 100644 index 0000000000..5c1d1069a8 --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/lessons/type_classification_in_cjk_korean/lesson.textproto @@ -0,0 +1,11 @@ +name: "Type classification in CJK: Korean" +authors: "Min-Young Kim" +reviewers: "Lisa Huang" +reviewers: "Minjoo Ham" +reviewers: "Shoko Mugikura" +topics: "cjk" +related_terms: "cjk" +related_terms: "script_writing_system" +next_lessons: "type_classification_in_cjk_japanese" +next_lessons: "cjk_typesetting_rules" +excerpt: "Here, we look at how CJK scripts are classified differently from Latin, and also from each other, with a focus on Korean." diff --git a/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/module.textproto b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/module.textproto new file mode 100644 index 0000000000..16f63446ae --- /dev/null +++ b/cc-by-sa/knowledge/modules/type_in_china_japan_and_korea/module.textproto @@ -0,0 +1,8 @@ +name: "Type in China, Japan, and Korea" +lessons: "type_classification_in_cjk_chinese" +lessons: "type_classification_in_cjk_japanese" +lessons: "type_classification_in_cjk_korean" +lessons: "cjk_typesetting_rules" +lessons: "japanese_typography_basics" +lessons: "the_evolution_of_hangeul_type_design" +excerpt: "CJK is an acronym for Chinese, Japanese, and Korean scripts. These articles cover the characteristics and how to set type in each. Latin classifications (serif, humanist, geometric, etc.) do not apply directly: In Japan, “Mincho” is similar to serif, while in Korea, it’s “Myeongjo;” “Gothic” is used for sans serif in both Japanese and Korean. In China, serif-like designs are “Song Ti (宋体),” or sometimes “Mingchao Ti” or “Ming Ti (明朝体 or 明体),” to go together with the Japanese and Korean names. The sans are called “Hei Ti (黑体).” All CJK fonts also have a miscellaneous display classification: In Japan and Korea, it’s “design fonts” and in China, “decorative” fonts." \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/lesson.textproto b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/lesson.textproto index 77c6dea885..6c5418025a 100644 --- a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/lesson.textproto +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/lesson.textproto @@ -7,5 +7,6 @@ related_terms: "icon_symbol" related_terms: "sans_serif" related_terms: "typeface" related_terms: "monospaced" +prev_lessons: "a_checklist_for_choosing_type" next_lessons: "vertical_spacing_and_line_height_in_design_systems" -excerpt: "INSERT_EXCERPT" +excerpt: "From a sketch, to typeface selection, to incorporating a mark, to finalizing a full logo, let’s look at every step in the process." diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/content.md b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/content.md similarity index 73% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/content.md rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/content.md index e12c8a4f95..fb519b3216 100644 --- a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/content.md +++ b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/content.md @@ -5,28 +5,25 @@ Consider a magazine cover, where the display [typography](/glossary/typography)
-![INSERT_ALT](images/authenticity_ex1_1.svg) +![The words “The Autumn Issue” set in a script typeface.](images/authenticity_ex1_1.svg)
-
INSERT_CAPTION
This scenario requires a touch of the human hand, and the good news is that we don’t need to manually manipulate the outlines of our type—we can add a more hand-lettered feel by using alternate glyphs with the power of [stylistic sets](/glossary/stylistic_sets) via [OpenType](/glossary/open_type) controls. (Head over to [“Introducing alternate glyphs”](https://fonts.google.com/knowledge/introducing_type/introducing_alternate_glyphs) for an overview.)
-[INSERT illo of type control UI in Figma] +![An approximation of Stylistic Set control in popular design apps’ UI.](images/authenticity_ex1_EXTRA.svg)
-
INSERT_CAPTION
This [font](/glossary/font) actually comes with a number of stylistic sets. To experiment with them, try switching different sets on for different parts of the text. But beware! Not all play nicely together:
-![INSERT_ALT](images/authenticity_ex1_2.svg) +![The words “The Autumn Issue” set in a script typeface, but using different glyphs for some of the characters, which then clash.](images/authenticity_ex1_2.svg)
-
INSERT_CAPTION
Our text is now a bit of a mess, for several reasons: @@ -41,28 +38,27 @@ Here’s our finished example, which balances the fluidity of the human hand wit
-![INSERT_ALT](images/authenticity_ex1_3.svg) +![The words “The Autumn Issue” set in a script typeface, rearranged and resized to sit harmoniously together, without clashes.](images/authenticity_ex1_3.svg)
-
INSERT_CAPTION
+ +Here’s a mockup of our finished piece:
-[INSERT illo of lockup in actual magazine cover context] +![A mockup of a fictional magazine cover using the type as set in the previous image.](images/authenticity_ex1_mock.jpg)
-
INSERT_CAPTION
-The result is an authentic touch that goes much further than simply typing with the font’s defaults. For more on turning type into a logo, be sure to read Tom Muller’s “[INSERT].” And to learn how to work with stylistic sets using CSS, see [“Implementing OpenType features on the web.”](https://fonts.google.com/knowledge/using_type/implementing_open_type_features_on_the_web) +The result is an authentic touch that goes much further than simply typing with the font’s defaults. For more on turning type into a logo, be sure to read Tom Muller’s [“From type to logotype”](/lesson/from_type_to_logotype) article. And to learn how to work with stylistic sets using CSS, see [“Implementing OpenType features on the web.”](https://fonts.google.com/knowledge/using_type/implementing_open_type_features_on_the_web) For our second example, let’s consider a film logo, where the title is meant to be reminiscent of old street signs. A common faux pas is to use a typeface that has a distressed or worn aesthetic, which then loses its impact when we see repeated characters having identical forms:
-![INSERT_ALT](images/authenticity_ex2_1.svg) +![The words “Twenty Seventh Street” set in a distressed serif typeface.](images/authenticity_ex2_1.svg)
-
INSERT_CAPTION
This typeface, [IM Fell English](https://fonts.google.com/specimen/IM+Fell+English?query=im+fell), conveys the feel we’re after really well, but because this is going on a poster that’s going to be reproduced at large sizes, some of the intentional wearing is going to appear obviously repetitive. @@ -70,10 +66,9 @@ Just look at how repeating [characters](/glossary/character)—or repeating sequ
-![INSERT_ALT](images/authenticity_ex2_2.svg) +![Three settings of the words “Twenty Seventh Street” set in a distressed serif typeface, with the similar letterforms highlighted.](images/authenticity_ex2_2.svg)
-
INSERT_CAPTION
Let’s look at how we can introduce some variations here, and this time we won’t be using alternate glyphs via OpenType; instead, we’re going to employ a slightly different version of the same typeface. @@ -81,10 +76,9 @@ Here are the different versions of the T, S, and E characters we’re going to u
-![INSERT_ALT](images/authenticity_ex2_3.svg) +![The characters “TTT,” “SS,” and “EEE,” each set in slightly different versions of the typeface to show the subtle differences.](images/authenticity_ex2_3.svg)
-
INSERT_CAPTION
Using different versions of the same typeface, we keep the underlying structure and familiarity of the letterforms, but introduce enough uneven, rough, imperfect variations to remind the reader that these may very well have been hand-carved into old stone buildings. @@ -92,16 +86,16 @@ Here’s our final lockup:
-![INSERT_ALT](images/authenticity_ex2_4.svg) +![The words “Twenty Seventh Street”, set with a mix of different fonts to avoid repetition of letetrforms.](images/authenticity_ex2_4.svg)
-
INSERT_CAPTION
+ +Here’s a mockup of our finished piece:
-[INSERT illo of lockup in actual poster context] +![A mockup of a fictional poster using the type as set in the previous image.](images/authenticity_ex2_mock.jpg)
-
INSERT_CAPTION
Again, with just a little extra care, we’ve given our type much more authenticity and created an end result that more accurately conveys the feel of the subject the type is attempting to represent. diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_1.svg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_1.svg similarity index 100% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_1.svg rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_1.svg diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_2.svg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_2.svg similarity index 100% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_2.svg rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_2.svg diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_3.svg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_3.svg similarity index 100% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_3.svg rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_3.svg diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_EXTRA.svg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_EXTRA.svg new file mode 100644 index 0000000000..0554853acd --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_EXTRA.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_mock.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_mock.jpg new file mode 100644 index 0000000000..4463c5fc0c Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex1_mock.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_1.svg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_1.svg similarity index 100% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_1.svg rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_1.svg diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_2.svg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_2.svg similarity index 100% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_2.svg rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_2.svg diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_3.svg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_3.svg similarity index 100% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_3.svg rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_3.svg diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_4.svg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_4.svg similarity index 100% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_4.svg rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_4.svg diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_mock.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_mock.jpg new file mode 100644 index 0000000000..ded76c25e3 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/authenticity_ex2_mock.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/thumbnail.svg b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/thumbnail.svg similarity index 100% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/thumbnail.svg rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/images/thumbnail.svg diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/lesson.textproto b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/lesson.textproto similarity index 55% rename from cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/lesson.textproto rename to cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/lesson.textproto index 587f202e69..9b483d8a08 100644 --- a/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/lesson.textproto +++ b/cc-by-sa/knowledge/modules/using_type/lessons/how_to_make_type_feel_authentic/lesson.textproto @@ -1,4 +1,4 @@ -name: "Adding an authentic, natural touch to type" +name: "How to make type feel authentic" authors: "Elliot Jay Stocks" reviewers: "Laurence Penney" reviewers: "Gerry Leonidas" @@ -7,4 +7,4 @@ topics: "families" related_terms: "open_type" prev_lessons: "vertical_spacing_and_line_height_in_design_systems" next_lessons: "installing_and_managing_fonts" -excerpt: "INSERT_EXCERPT" +excerpt: "There are occasions when the uniformity of type strips it off authenticity, but with a few simple tricks, we can re-introduce the human element into our typography." diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/installing_and_managing_fonts/content.md b/cc-by-sa/knowledge/modules/using_type/lessons/installing_and_managing_fonts/content.md index f7b9a32f5e..1789f9141e 100644 --- a/cc-by-sa/knowledge/modules/using_type/lessons/installing_and_managing_fonts/content.md +++ b/cc-by-sa/knowledge/modules/using_type/lessons/installing_and_managing_fonts/content.md @@ -45,7 +45,7 @@ Using variable fonts on the web is relatively straightforward, especially with a One important thing to note is that not all desktop apps populate their font menu in the same way. Sketch, for instance, uses fonts installed locally on your system, whereas Figma combines local fonts with a selection of fonts served from the Google Fonts library—which now includes hundreds of variable fonts. Adobe’s various Creative Cloud apps also combine local fonts with a selection of fonts bundled with the apps (including a few variable fonts). The Adobe Fonts library does not yet provide any variable fonts. -Some font manager apps, such as FontBase, Typeface, and RightFont, allow the Google Fonts library to be synced to your computer, which means they should show up in all font menus. However, note that variable fonts are not currently included in Google Fonts’ Developer API, which means that font manager apps that pick up Google Fonts from the web *do not* currently include Google Fonts’ variable fonts. +Some font manager apps allow the Google Fonts library to be synced to your computer, which means they should show up in all font menus. At the time of writing, Typeface is the only app to sync the entire Google Fonts library, *including* variable fonts. Other apps sync the library, but without variable fonts included. Also, support for variable fonts can differ between apps, falling into one of these four scenarios: diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/installing_and_managing_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/using_type/lessons/installing_and_managing_fonts/lesson.textproto index f3fa2cd0de..3d7cf9b30f 100644 --- a/cc-by-sa/knowledge/modules/using_type/lessons/installing_and_managing_fonts/lesson.textproto +++ b/cc-by-sa/knowledge/modules/using_type/lessons/installing_and_managing_fonts/lesson.textproto @@ -3,7 +3,7 @@ authors: "Elliot Jay Stocks" reviewers: "Laurence Penney" reviewers: "Thomas Phinney" topics: "variable_fonts" -prev_lessons: "adding_an_authentic_natural_touch_to_type" +prev_lessons: "how_to_make_type_feel_authentic" next_lessons: "language_support_in_fonts" related_terms: "variable_fonts" excerpt: "Building and maintaining a font collection on the computer you use for design work is an important part of life as a designer. However, there are a number of ways this process can be optimized—primarily by understanding where font files live, but also by proactively organizing your collection with font management software." diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/lesson.textproto b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/lesson.textproto index 97a88621d1..bb82f9c847 100644 --- a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/lesson.textproto +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/lesson.textproto @@ -8,5 +8,5 @@ related_terms: "cap_height" related_terms: "x_height" related_terms: "baseline" prev_lessons: "from_type_to_logotype" -next_lessons: "adding_an_authentic_natural_touch_to_type" -excerpt: "INSERT_EXCERPT" +next_lessons: "how_to_make_type_feel_authentic" +excerpt: "Discover how inconcistencies in the way that line height is calculated can lead to some headaches when maintaining a design system—and learn how to potentially overcome them." diff --git a/cc-by-sa/knowledge/modules/using_type/module.textproto b/cc-by-sa/knowledge/modules/using_type/module.textproto index 47db49a259..b80a974da2 100644 --- a/cc-by-sa/knowledge/modules/using_type/module.textproto +++ b/cc-by-sa/knowledge/modules/using_type/module.textproto @@ -1,7 +1,7 @@ name: "Using type" lessons: "from_type_to_logotype" lessons: "vertical_spacing_and_line_height_in_design_systems" -lessons: "adding_an_authentic_natural_touch_to_type" +lessons: "how_to_make_type_feel_authentic" lessons: "installing_and_managing_fonts" lessons: "language_support_in_fonts" lessons: "choosing_a_suitable_line_height"