From: Elliot Jay Stocks Date: Thu, 17 Nov 2022 18:22:51 +0000 (+0000) Subject: GFK Q4 content input (#5488) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=65714009b4b93e3517375f8a27e4c5182b4a1024;p=thirdparty%2Fgoogle%2Ffonts.git GFK Q4 content input (#5488) * Preliminary content insertion, unformatted * `thumbnail.svg` placeholders * CJK module placeholder * Placeholder folders etc. for Afrikan lessons * Basic Afrikan articles’ content input, no formatting * Revised markup from Tom Muller * Content input from Oliver * Initial illo exports for `adding...` article * Initial illo exports for `how_typefaces...` article * Initial illo exports for `history...` articles * Initial illo exports for `CJK` articles * Initial illo exports for `pairing...` article * Images for Min’s 4th CJK article * Placeholder directory etc. for `Vertical...` * Initial illustrations for `Vertical...` * Metadata for font matrix article * Adding Indra as contributor * Adding Bonnie as contributor * Initial CJK markup (need to check dirs) * Inputting Lisa’s additions to CJK class. article * Inputting Seb’s markdown * Actual metadata for “Pairing...” * Actual metadata for “How typefaces...” * Some a11y metadata * Some formatting & metadata for “Adding...” * Placing font matrix article in module hierarchy * Placing “How typefaces...” article in module hierarchy * More metadata for “How typefaces...” * Placing illos in “How typefaces...” * Placing illos + captions + alt for “Font matrix” article * Better markup for “Adding an authentic...” article * Module hierarchy for 3 new `using_type` articles * Contributor credit: Emma Price * Sebastian bailey contrib. metadata * Fix Sebastian URL * Metadata for “From type to...” * Metadata for “Vertical...” * Implementing typos found in CJK GDocs, post-markup * Renaming + metadata for CJK articles * Placing images in `cjk_typesetting_rules` * Placing images in `japanese_typography_basics` * Placing images in `type_classification_in_cjk` * Placing images in `type_development_of_hangeul` * Copy edits to `cjk_typesetting_rules` * Copy edits to `japanese_typography_basics` * Copy edits to `type_classification_in_cjk` * Copy edits to `type_development_of_hangeul` * Renaming to “The evolution of Hangeul type design” * CJK article running order in module * Removing 2 CJK Glossary drafts * Update 06.svg * New `03` illo for `the_evolution_of_hangeul_type_design` * Further copy edits to 4 × CJK articles * Full markup, edits, and illo placing for `from type...` * Illo placements for `vertical...` * Copy edits to `vertical...` * Copy edits to `how_typefaces...` * New `thumbnail` image * New `thumbnail` image * Renaming `vertical` lesson * New `thumbnail` images * New `thumbnail` image * Revised metadata for `how_type_influences_readability` * Placeholder text for readability article * Copy edits to a11y article * Copy edits to CJK articles * Test commit on `pairing_typefaces_based_on_their_construction_using_the_font_matrix` * Copy edits to `pairing_typefaces_based_on_their_construction_using_the_font_matrix` * Exporting illos for Hilary’s readability article * More copy edits to font matrix article * Basic markdown formatting for readability article * Placing illos in readability article * More copy edits to readability article * All alt text for `from_type_to_logotype` * New illo exports for Jamie’s article * New illo exports for 3 × `history_of_type` articles * Placing all `history_of_type` illos * Metadata for `history_of_type` lessons + module * metadata for `readability` lessons + module * Metadata for `cjk` lessons + module * Removing all of Saki’s content from Q4 * Metadata fix * Fixing errors found by PR tests * Trying to fix a few more errors found in the PR checks * Removing old (manual) metadata files * More fixes for the PR checks * And some MORE fixes for PR checks * Optimized Tom illos --- diff --git a/cc-by-sa/knowledge/contributors.textproto b/cc-by-sa/knowledge/contributors.textproto index f3cd55166b..de7fb6254c 100644 --- a/cc-by-sa/knowledge/contributors.textproto +++ b/cc-by-sa/knowledge/contributors.textproto @@ -6,6 +6,10 @@ contributors { name: "Ben Weiner" personal_site: "https://readingtype.org.uk" } +contributors { + name: "Bonnie Shaver-Troup" + personal_site: "https://www.lexend.com" +} contributors { name: "Bram Stein" personal_site: "https://www.bramstein.com" @@ -50,6 +54,10 @@ contributors { name: "Elliot Jay Stocks" personal_site: "https://elliotjaystocks.com" } +contributors { + name: "Emma Price" + personal_site: "http://tinymaster.co" +} contributors { name: "Erik Spiekermann" personal_site: "https://spiekileaks.com" @@ -66,6 +74,10 @@ contributors { name: "Hilary Palmen" personal_site: "https://twitter.com/hilarypalmen" } +contributors { + name: "Indra Kupferschmid" + personal_site: "https://twitter.com/kupfers" +} contributors { name: "Jamie Clarke" personal_site: "https://www.jamieclarketype.com" @@ -90,6 +102,10 @@ contributors { name: "Laurence Penney" personal_site: "https://lorp.org" } +contributors { + name: "Lisa Huang" + personal_site: "" +} contributors { name: "Mark Boulton" personal_site: "https://markboulton.co.uk" @@ -158,10 +174,18 @@ contributors { name: "Sam Berlow" personal_site: "https://twitter.com/sberlow" } +contributors { + name: "Sebastian Bailey" + personal_site: "https://sebastianbailey.co.uk" +} contributors { name: "SeHee Lee" personal_site: "" } +contributors { + name: "Shoko Mugikura" + personal_site: "" +} contributors { name: "Susanna Zaraysky" personal_site: "" diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/content.md b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/content.md new file mode 100644 index 0000000000..3964b3bacb --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/content.md @@ -0,0 +1,273 @@ +The single biggest challenge we face when [pairing type](/topic/pairing_type) is choosing a secondary [typeface](/glossary/typeface) that’s different enough from our primary choice, but not _too_ different, as described in our article “[Pairing typefaces](/lesson/pairing_typefaces)”. This can be a challenge, because it’s not always clear where the similarities and the differences should lie. + +In this article, we want to share with you the concept of the font matrix—an approach based on the work of typography professor [Indra Kupferschmid](https://de.wikipedia.org/wiki/Indra_Kupferschmid). Understanding it can change your perception of type and give you a framework to make better decisions when pairing typefaces. + +Please bear in mind that combining type is not a science, with hard and fast rules. It’s a creative discipline, and you can do whatever you think feels right for your project. Take the ideas shared in this article as guidelines to make your own decisions in the great adventure of pairing type. + +## The problem with the current models for classifying type + +Before we dive into this different way of describing type, let’s see what’s not ideal with the current models. Organizing typefaces is important to make it easier to narrow down our selections. Simple [genre classifications](/lesson/making_sense_of_typographic_classifications), like [serif](/glossary/serif), or [sans serif](/glossary/sans_serif), are a good starting point. But they still leave you with a lot of typefaces to choose from. + +
+ +![The word “Ragstone“ shown in three different sans serif typefaces.](images/all-sans serif.svg) + +
+
These are all sans serif typefaces (Source Sans Pro, Helvetica, Outfit). Same genre, but they leave a quite different impression.
+ +
+ +![The word “Ragstone“ shown in three different serif typefaces.](images/all-serif.svg) + +
+
These serif typefaces share the same genre classification as well, and still they appear quite diverse (Alegreya, Bodoni Moda, Memphis).
+ +On the other hand, [historical classifications](/lesson/making_sense_of_typographic_classifications) can be more fine-grained, but require a little background knowledge. They can be confusing in their terminology and have plenty of regional variations. Focusing on details, such as the exact shape of serifs, which are not necessarily crucial to the overall impression of a typeface, makes them less practical. In fact, the historic approach can become less useful in an age where type designs mix influences from various periods of time. + +So how can we describe typefaces more accurately than with the genre classifications, but without being dependent on historic background knowledge? Kupferschmid approaches it with a three-layer system: + +* Layer 1: Skeleton (form model) +* Layer 2: Flesh (contrast & serifs) +* Layer 3: Skin (finer differentiation) + +
+ +![The lower case “a“ shown on three layers. The first layer is labeled skeleton (form model), showing the simple monolienar construction of the letter “a“. The second layer is labeled flesh (contrast and serifs) showing a bold striking lower case a with serifs. The third layer is labeled skin (finer differentiations) and shows the same letter with a grunge pattern on top.](images/font-matrix-layers.svg) + +
+
A three-layer approach for describing typefaces based upon the work of Indra Kupferschmid.
+ +Let’s take a look at each individual layer to understand what it means, and how it can help us choose and pair typefaces. + +## Layer 1: Skeleton (form model) + +This is the most crucial part, referring to the structure underneath a typeface. There are three basic form models: + +* Dynamic +* Rational +* Geometric + +Dynamic forms show open apertures, while the rational form model has closed apertures. The geometric form model is represented with constructed letter shapes. These shapes can be explained by different writing tools, but we won’t focus on that here. + +
+ +![A double-story lower case “a” displayed in three different form models in a serif typeface. The dynamic form model has an open aperture. In the rational form model the aperture is closed. The geometric single-story lower case a appears constructed with a circular shape.](images/form-model-serif.svg) + +
+
The three different form models shown with serif typefaces.
+ +It’s easier to distinguish the form models with [contrast](/glossary/contrast) in serif typefaces. But you can still see them in sans serif shapes, too: + +
+ +![A double-story lower case “a” displayed in three different form models in a sans serif typeface. The dynamic form model has an open aperture. In the rational form model the aperture is closed. The geometric single-story lower case a appears constructed with a circular shape.](images/form-model-sans serif.svg) + +
+
The three different form models shown with sans serif typefaces.
+ +Let’s take a closer look at each form model and make it more obvious by setting a word. We’ll use the word “Ragstone” because it contains various letter shapes: + +
+ +![A dynamic linear sans serif typeface showing the word “Ragstone”. The open apertures of the lower case a and the diagonal axis in the lower case o are shown.](images/dynamic--linear-sans.svg) + +
+
The dynamic form model comes with open apertures of the “e,” “a,” and “s,” as well as the diagonally angled “o” (hard to see in sans serif, set in Source Sans Pro).
+ +Looking at the **dynamic form model,** you can see the open shapes, and a very subtle [diagonal axis](/glossary/axis_in_type_design). This all adds to the friendly, open, and approachable feeling that a dynamic typeface creates. [Kupferschmid associated the form models with certain adjectives](https://kupferschrift.de/cms/2012/03/on-classifications/). They can be helpful when picking a typeface that should follow a certain mood. Naturally, this mood might shift when there are serifs or no serifs, or other stylistic features, but it’s a good starting point. + +
+ +![A rational linear sans serif typeface showing the word “Ragstone”. The closed apertures of the lower case a and the vertical axis in the lower case o are shown.](images/rational--linear-sans.svg) + +
+
The shapes of the “e,” “a,” and “s” are rather closed, and the “o” shows vertical axis (again, not very obvious in sans serif), set in Helvetica.
+ +With a **rational** typeface, we can see that these apertures are closed, which then creates a more orderly, reserved, or serious feeling. + +
+ +![A geometric linear sans serif typeface showing the word “Ragstone”. The constructed circular shapes of the lower case a, g, o and e are shown, also the cross shaped lower case t.](images/geometric--linear-sans.svg) + +
+
Very constructed letter shapes, like the circular “o” and “e.” The “t” is a simple cross (set in Outfit).
+ +And with the **[geometric](/glossary/geometric) typefaces,** the apertures are not that relevant for determining the form model. Also, there is no obvious axis either. It’s more about how constructed the letter shapes are. Like the circular “e,” “g,” “a,“ and “o,” or the simple “t.” This creates a clean, modern, and functional appearance. + +Now, knowing about these underlying form models should make it easier for you to pinpoint the differences between the three sans serif and serif typefaces from the beginning of the article, and take you one step closer towards to differentiating type. + +
+ +![The word “Ragstone“ shown in three different sans serif typefaces next to each other in the first line, and three different serif typefaces in the second line. They are arranged in three columns labeled dynamic, rational and geometric.](images/all-serif-all-sans serif--with-form-models.svg) + +
+
Knowing about the different form models makes it easier to describe and distinguish the typefaces from before.
+ +## Layer 2: Flesh (contrast and serifs) + +In the second layer, the flesh, we’re adding **contrast and serifs** to our descriptions. This will make the form model even clearer. + +
+ +![A dynamic contrasting serif typeface showing the word “Ragstone”. The open apertures of the lower case a and the diagonal stress in the lower case o are shown.](images/dynamic--contrasting-serif.svg) + +
+
Describing Alegrya as a dynamic contrasting serif typeface.
+ +Before, the **dynamic form** was shown with no contrast (linear) and sans serif. Here, contrast and serifs were added. This changes the appearance, it suddenly seems more traditional, but still the same open apertures and diagonal stress from the skeleton remains. It’s just more visible with the flesh on top. + +
+ +![A rational contrasting serif typeface showing the word “Ragstone”. The closed apertures of the lower case a and the vertical axis in the lower case o are shown.](images/rational--contrasting-serif.svg) + +
+
Describing Bodoni Moda as a dynamic contrasting serif typeface.
+ +The rational linear sans serif from before turns into a **rational contrasting serif.** + +
+ +![A geometric contrasting serif typeface showing the word “Ragstone”. The constructed circular shapes of the lower case g, o and e, and the circular bowl of the lower case “a” are displayed.](images/geometric--contrasting-serif.svg) + +
+
Describing Candida as a geometric contrasting serif typeface.
+ +The geometric linear sans serif, becomes **contrasting with serif,** while still being geometric from its construction. + +## Layer 3: Skin (finer details) + +Kupferschmid includes finer differentiators in the top layer. The shape of the serifs, decorative features (such as stencil, inline, shadow), or genre-like descriptors that might be associated with the typeface (“western,” “horror,” “sci-fi,” etc.). Kupferschmid leaves this very open. This layer is not necessary for the font matrix, but it completes our typeface description. + +
+ +![A decorative rational contrasting serif typeface, with inline stokes, trifurcated serifs and thorns that create a spooky impression.](images/rational--contrasting-serif--addional-descriptors.svg) + +
+
Describing all three layers of the display typeface Rye. You can still see the underlying first two layers, even though the third layer is taking the most attention.
+ +## Using the font matrix for pairing type + +Now, when we arrange the first two layers in a grid, with the skeleton for the columns, and the flesh for the rows, the font matrix is revealed: + +
+ +![The font matrix arranged in three columns and four rows. The three columns show the dynamic, rational and geometric form models. The rows show contrasting sans, contrasting serif, linear sans, and linear serif typefaces.](images/font-matrix.svg) + +
+
Typefaces used (top to bottom) Dynamic: Minerva Modern, Alegreya, Source Sans Pro, and Bitter; Rational: Arya, Bodoni Moda, Helvetica, Zilla Slab; Geometric: Tenor Sans, Candida, Outfit, Memphis.
+ +Seeing the typefaces arranged in this way makes it obvious where the similarities and differences lie, and opens up three guidelines we can utilize to pair typefaces. Let’s explore each of those in turn. + +### 1. Pair typefaces with similar form models + +
+ +![The font matrix shown with the columns for the three form models highlighted.](images/font-matrix--pair-same-form-model.svg) + +
+
Combine typefaces according to their form model.
+ +Typefaces from the same form model most likely will go together. Their construction is similar, but the layers added on top are different. + +### 2. Pair typefaces with varying contrast and serifs + +
+ +![The font matrix shown with a diagonal combination of a dynamic contrasting sans with a geometric linear serif typeface.](images/font-matrix--pair-contrasting.svg) + +
+
Go for contrast with very different skeleton and flesh (diagonal combinations).
+ +Diagonal combinations create contrasting pairs. The typefaces are so different that they won’t get in the way of each other. + +### 3. Avoid combinations with different form models, but the same contrast and serifs + +
+ +![The font matrix shown with the highlighted row of linear sans typefaces in the different form models.](images/font-matrix--pair-avoid-same-flesh.svg) + +
+
Is it different or is it the same? Avoid combining typefaces from the same row.
+ +Combining typefaces from the same row will create an irritating result. This is because they’re similar on a superficial level (the flesh), but in their form model, they’re diverse. + +## Look for form models everywhere + +The most crucial part of this system is recognizing the form model underneath a typeface. If it has serifs or not, or if it’s linear or contrasting, is easy to see. Make this a regular exercise, like a game, to train your eyes and perception of type. Take a look at whatever typefaces you encounter and describe their form models. Is it more dynamic, rational, or geometric? + +
+ +![A photo of three different street signs showing typefaces with the different form models.](images/look-for-form-models.jpg) + +
+
Try to spot the form model in the wild! Left to right: dynamic, rational, and geometric.
+ +## Combining typefaces step by step + +When it comes to combining typefaces, this is the process we recommend, using the ideas behind the font matrix: + +1. Decide on a primary typeface (for more on this subject, please see “[A checklist for choosing type](/lesson/a_checklist_for_choosing_type)”). What role has the primary typeface? Is it [body text](/glossary/text_copy), headings, or for something else? +2. Describe the first two layers of your primary typeface. +3. Decide on a role for your secondary typeface. What should it add to your primary typeface? +4. Decide if you want the same or a or contrasting form model for the secondary typeface. +5. For your secondary typeface, think of a generic classification, like serif or display, you want to try. +6. Browse a preferred font catalog, filtered by your genre, looking for the desired form model, contrast, and serifs. +7. Try out the combination in your design. + +Let’s put this into practice with an example. Let’s say my primary typeface is Bitter, and its role is body text. Let’s describe the first two layers of it. + +
+ +![The word “Ragstone” shown in the dynamic linear serif typeface bitter. It has a diagonal axis and open apertures.](images/combine-fonts-example-step-1-2.svg) + +
+
Steps 1 and 2: The primary typeface is Bitter, used for body text. It’s a dynamic linear serif typeface.
+ +Now we look for a secondary typeface for inline code in the body text. Bitter does not come with a [monospaced](/glossary/monospaced) style. We want the secondary typeface to feel very similar to the primary choice, while being monospaced. + +
+ +![On the left, the typeface “Bitter” is shown as the primary choice used for body text and labeled as “dynamic”. On the right side, the briefing for a secondary typeface used for inline code is written. The typeface should be dynamic linear, and monospace.](images/combine-fonts-example-step-3-to-5.svg) + +
+
Steps 3 to 5: We look for a secondary typeface for inline code, that’s, dynamic, linear and monospace.
+ +Let’s only browse the monospaced typefaces on Google Fonts, and pick some candidates. When we take a look at our first selection, and evaluate their form model, we see that Fira Sans might fit best to what we’re looking for. + +
+ +![On the left, the dynamic typeface “Bitter” is shown. On the right there are three different monospace typefaces in a column as possible candidates. From top to bottom, they are the geometric ”Space Mono“, the rational “JetBrains Mono“, and the dynamic “Fira Code“.](images/combine-fonts-example-step-6.svg) + +
+
Step 6: Our possible candidates and their form models.
+ +Let’s see how this looks in an actual sentence. As suggested, Fira Code works best. It seamlessly integrates and meets the conditions of our brief. Space Mono might work as well, if we were looking for a contrasting pair. + +
+ +![Three times the sentence “In my opinion, font-family is the best declaration in CSS.“ set in the serif typeface Bitter. The word “font-family“ is set in three different mono space typefaces. The first line shows the rejected combination with “Space Mono” with very contrasting form models. The second line shows the rejected combination with “JetBrains Mono“, which is not different/same enough according to the form model. The third line shows the approved pairing with ”Fira Code“ which is most seamless.](images/combine-fonts-example-step-7.svg) + +
+
Step 7: Evaluating our options in an actual sentence. Fira Code fits what we were looking for.
+ +## Limitations of this system + +This is not a perfect system. Not every typeface fits into it, and you won’t be able to apply it in every scenario. The examples in this article are slightly more extreme, and soon you will find plenty of cases that are in between the different form models or the other layers. In this case, try to describe it as “quite dynamic,” or “semi-rational,” for example. + +
+ +![The quite rational, linear serif typeface “Roboto Slab” showing the word “Ragstone”. It shows a vertical axis and opened apertures.](images/roboto-slab--quite-rational.svg) + +
+
From its form model, Roboto Slab does not meet all the criteria of an obvious rational typeface. But overall it still feels quite rational with its narrow proportions and vertical axis.
+ +
+ +![Several typefaces shown that will fall out of the matrix.](images/exceptions-of-the-matrix.svg) + +
+
When it comes to more striking display typefaces, script, handwritten, or blackletter, don’t spend too much energy training to put them into the matrix. They will most likely be very contrasting anyway.
+ +When applying it to your design, other factors come into play, depending on how close the combination is, such as a similar [x-height](/glossary/x_height), or a similar or different [width](/glossary/width). Also, by using different [weights](/glossary/weight) or [styles](/glossary/style), you can hide a less-than-ideal combination. + +So see the font matrix as a guideline to make a decision, but don’t drive yourself crazy. Even Indra Kupferschmid says that it is not binding and should not limit your creativity. It is one way—not the only way—and hopefully this will support you in finding _your_ way. \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/all-sans-serif.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/all-sans-serif.svg new file mode 100644 index 0000000000..031b9d0f2d --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/all-sans-serif.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/all-serif-all-sans-serif--with-form-models.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/all-serif-all-sans-serif--with-form-models.svg new file mode 100644 index 0000000000..e499923589 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/all-serif-all-sans-serif--with-form-models.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/all-serif.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/all-serif.svg new file mode 100644 index 0000000000..60704d07e7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/all-serif.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-1-2.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-1-2.svg new file mode 100644 index 0000000000..26e09aa4ed --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-1-2.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-3-to-5.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-3-to-5.svg new file mode 100644 index 0000000000..1ba4bcf4a0 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-3-to-5.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-6.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-6.svg new file mode 100644 index 0000000000..f9beb6ba23 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-6.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-7.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-7.svg new file mode 100644 index 0000000000..fcf6dda9bc --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/combine-fonts-example-step-7.svg @@ -0,0 +1,259 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/dynamic--contrasting-serif.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/dynamic--contrasting-serif.svg new file mode 100644 index 0000000000..7241766dd4 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/dynamic--contrasting-serif.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/dynamic--linear-sans.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/dynamic--linear-sans.svg new file mode 100644 index 0000000000..3d88f0ddaf --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/dynamic--linear-sans.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/exceptions-of-the-matrix.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/exceptions-of-the-matrix.svg new file mode 100644 index 0000000000..969db5a9fd --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/exceptions-of-the-matrix.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix--pair-avoid-same-flesh.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix--pair-avoid-same-flesh.svg new file mode 100644 index 0000000000..55a4e97b86 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix--pair-avoid-same-flesh.svg @@ -0,0 +1,177 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix--pair-contrasting.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix--pair-contrasting.svg new file mode 100644 index 0000000000..683278283e --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix--pair-contrasting.svg @@ -0,0 +1,179 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix--pair-same-form-model.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix--pair-same-form-model.svg new file mode 100644 index 0000000000..f46d437a73 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix--pair-same-form-model.svg @@ -0,0 +1,183 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix-layers.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix-layers.svg new file mode 100644 index 0000000000..318bb0fb48 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix-layers.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix-thumb.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix-thumb.svg new file mode 100644 index 0000000000..2ee0adbced --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix-thumb.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix.svg new file mode 100644 index 0000000000..52ad7ae410 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/font-matrix.svg @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/form-model-sans-serif.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/form-model-sans-serif.svg new file mode 100644 index 0000000000..eb42f3d1b7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/form-model-sans-serif.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/form-model-serif.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/form-model-serif.svg new file mode 100644 index 0000000000..d63bcc4952 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/form-model-serif.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/geometric--contrasting-serif.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/geometric--contrasting-serif.svg new file mode 100644 index 0000000000..30c8f98f6f --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/geometric--contrasting-serif.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/geometric--linear-sans.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/geometric--linear-sans.svg new file mode 100644 index 0000000000..3e47614a27 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/geometric--linear-sans.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/look-for-form-models.jpg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/look-for-form-models.jpg new file mode 100644 index 0000000000..10c98bbc0b Binary files /dev/null and b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/look-for-form-models.jpg differ diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/rational--contrasting-serif--addional-descriptors.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/rational--contrasting-serif--addional-descriptors.svg new file mode 100644 index 0000000000..6c3c6de6c5 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/rational--contrasting-serif--addional-descriptors.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/rational--contrasting-serif.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/rational--contrasting-serif.svg new file mode 100644 index 0000000000..92e1d10b11 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/rational--contrasting-serif.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/rational--linear-sans.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/rational--linear-sans.svg new file mode 100644 index 0000000000..782628b8a1 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/rational--linear-sans.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/roboto-slab--quite-rational.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/roboto-slab--quite-rational.svg new file mode 100644 index 0000000000..2ecf6ee081 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/roboto-slab--quite-rational.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/thumbnail.svg b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/thumbnail.svg new file mode 100644 index 0000000000..b81271fcaf --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/images/thumbnail.svg @@ -0,0 +1,3 @@ + + + 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 new file mode 100644 index 0000000000..38042ab0d8 --- /dev/null +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_based_on_their_construction_using_the_font_matrix/lesson.textproto @@ -0,0 +1,21 @@ +name: "Pairing typefaces using the font matrix" +authors: "Oliver Schöndorfer" +reviewers: "Indra Kupferschmid" +topics: "choosing_type" +topics: "pairing_type" +related_terms: "axis_in_type_design" +related_terms: "sans_serif" +related_terms: "serif" +related_terms: "contrast" +related_terms: "monolinear" +related_terms: "geometric" +related_terms: "humanist_old_style" +related_terms: "text_copy" +related_terms: "monospaced" +related_terms: "x_height" +related_terms: "width" +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." diff --git a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_by_the_same_type_designer_or_type_foundry/lesson.textproto b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_by_the_same_type_designer_or_type_foundry/lesson.textproto index 37df797a0d..81a7415037 100644 --- a/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_by_the_same_type_designer_or_type_foundry/lesson.textproto +++ b/cc-by-sa/knowledge/modules/choosing_type/lessons/pairing_typefaces_by_the_same_type_designer_or_type_foundry/lesson.textproto @@ -9,7 +9,7 @@ topics: "pairing_type" topics: "systems" prev_lessons: "pairing_typefaces" prev_lessons: "pairing_typefaces_within_a_family_superfamily" -next_lessons: "exploring_x_height_the_em_square" +next_lessons: "pairing_typefaces_by_the_same_type_designer_or_type_foundry" related_terms: "type_designer" related_terms: "type_foundry" excerpt: "Type designers often have certain stylistic ways of drawing letterforms, and certain technical ways of creating font files." diff --git a/cc-by-sa/knowledge/modules/choosing_type/module.textproto b/cc-by-sa/knowledge/modules/choosing_type/module.textproto index f151a4ea5d..0c35b552f5 100644 --- a/cc-by-sa/knowledge/modules/choosing_type/module.textproto +++ b/cc-by-sa/knowledge/modules/choosing_type/module.textproto @@ -8,5 +8,6 @@ lessons: "choosing_typefaces_that_have_optical_sizes" lessons: "pairing_typefaces" lessons: "pairing_typefaces_within_a_family_superfamily" lessons: "pairing_typefaces_by_the_same_type_designer_or_type_foundry" +lessons: "pairing_typefaces_based_on_their_construction_using_the_font_matrix" lessons: "exploring_x_height_the_em_square" excerpt: "When you have some text, how can you choose a typeface? Many people—professional designers included—go through an app’s font menu until we find one we like. But the aim of this module is to show that there are many considerations that can improve our type choices. By setting some useful constraints to aid our type selection, we can also develop a critical eye for analyzing type along the way." diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/content.md b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/content.md new file mode 100644 index 0000000000..79c2c5050d --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/content.md @@ -0,0 +1,53 @@ +There are four main differences between [Latin](/glossary/latin) and [CJK](/glossary/cjk) [fonts](/glossary/font) that are important to consider when typesetting: + +## 1. Full-width, monospaced + +Latin fonts are mostly proportional by default, but most CJK fonts are [monospaced](/glossary/monospaced). Chinese and Japanese fonts are designed to fit the full [em square](/glossary/em). Some Japanese fonts have smaller [widths](/glossary/width) for narrower [typesetting](/glossary/typesetting), but the default for Japanese fonts is monospaced. Korean fonts are little more complicated—[Hangeul](/lesson/an_introduction_to_hangeul), the Korean script, is monospaced by default, but the punctuation is proportional because Korean fonts use Latin punctuation—and also a wordspacing system (see point 3). While Chinese and Japanese monospaced fonts are usually full-width, [a recent trend in Korea](/lesson/the_evolution_of_hangeul_type_design) is to make the letter width narrow, around 850–950 units, for smoother readability and a more modern feel. + +
+ +![Proportional Latin and monospaced Japanese](images/01.svg) + +
+ +## 2. Use of punctuation + +CJK scripts have a special punctuation in common called “full-width punctuation.” This is used in all CJK fonts, but the usage differs among them. In Japanese, full-width punctuation is used by default, with Latin punctuation used only in special and formal cases, such as dissertation papers. + +
+ +![Comparison of Latin and full-width punctuations](images/02.svg) + +
+ +In Chinese, both Latin and full-width punctuation is used, but with Traditional Chinese usage in Hong Kong and Taiwan, commas are placed in the middle of the letter height. Latin punctuation and full-width punctuation are all used for a different meaning and purpose. + +In Korean, the default punctuation is Latin, and no full-width punctuation. For brackets, full-width punctuation is allowed, but only in limited special scenarios. For example, when noting bibliographic references, both 「」and『』are used. However, commas and periods are strictly Latin, shape-wise, and full-width punctuation is never used in that position. And for the wordspaces and Latin punctuation, most Korean fonts have a Korean version of those characters, with a better size and baseline, because regular Latin punctuation does not usually align well with Hangeul. + +
+ +![Comparison of Latin and CJK punctuations](images/03.svg) + +
+ +## 3. Balance: the center of gravity, not the baseline + +CJK fonts do not have a concept of a baseline. The idea is that the balance of the type exists roughly in the center of the em square (remembering that that box is not necessarily a square if the font is proportional), and therefore the right center of gravity depends on the design of the typeface and the writing direction. Usually the balance is set at the center, but sometimes gravity shifts up and down. Usually when the gravity is high, the font is likely to look more sophisticated and elegant; when it’s low, more casual. + +
+ +![Latin is based on the baseline, CJK is based on the center of gravity](images/04.svg) + +
+ +## 4. No italics + +In CJK scripts—and therefore CJK fonts—there are no italics. Type is sometimes [faux-italicized](/glossary/faux_fake_pseudo_synthesized) for design purposes, but originally, italics do not exist. Instead, designers come up with creative solutions. Most of the time, single and double quotation marks or full-width brackets are the common and easy way used to indicate emphasis. Little dots above the letters are also used a lot, but only when there is no Ruby (small text written above Kanji or foreign letters to indicate phonetics or pronunciations in Japanese). In Japanese, use of Katakana is also sometimes used as a way of emphasis. + +
+ +![How CJKs use different emphasis instead of the italics](images/05.svg) + +
+ +Underlines are also used, but more for subtitles than emphasis in the middle of the paragraph. If the design allows, wavy or highlighted underlines are also used. Bold or coloring the words are preferred solutions, too. diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/01.svg b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/01.svg new file mode 100644 index 0000000000..9eec2b35c7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/01.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/02.svg b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/02.svg new file mode 100644 index 0000000000..ea15c0b2c1 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/02.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/03.svg b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/03.svg new file mode 100644 index 0000000000..fcbbc1ac3f --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/03.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/04.svg b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/04.svg new file mode 100644 index 0000000000..83f1c8e23a --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/04.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/05.svg b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/05.svg new file mode 100644 index 0000000000..f58a1c22b2 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/05.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/thumbnail.svg b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/thumbnail.svg new file mode 100644 index 0000000000..b81271fcaf --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/images/thumbnail.svg @@ -0,0 +1,3 @@ + + + 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 new file mode 100644 index 0000000000..fd9e537a27 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/cjk_typesetting_rules/lesson.textproto @@ -0,0 +1,10 @@ +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/content.md b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/content.md new file mode 100644 index 0000000000..654800241b --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/content.md @@ -0,0 +1,78 @@ +A lot of [writing systems](/glossary/script_writing_system) in the world use one script per language. But that’s not the case in Japan: When you write a sentence in Japanese, three different scripts can be used: _Hiragana,_ _Katakana,_ and _Kanji,_ a Japanified version of Chinese characters. And if you’re trying to develop a Japanese [typeface](/glossary/typeface), you also need to include the [Latin](/glossary/latin) alphabet and [figures](/glossary/numerals_figures), too. Japanese is the only script among [CJK](/glossary/cjk) that uses multiple scripts to form its language. + +So how did it become such a melting pot of scripts? And what kind of unique aspects does Japanese have? + +
+ +![Comparison of Hiragana, Katakana, and Kanji](images/01.svg) + +
+ +## Development of Kana + +Hundreds of years ago, Japan used Chinese characters to communicate in written form, as did many other Asian countries. Some time around the 8th century, Japan started to use a Japanified version of Chinese characters, which is now called _Kanji._ In some cases, Chinese characters were converted into a Japanese sound, and in others, Kanji was used as an ideogram to communicate the context. Around the 9th century, _Hiragana_ and _Katakana_ were invented. Together, they are called _Kana._ + +_Hiragana_ is a simplified version of _Kanji_—it uses simple curvy lines to write Kanji easier. It started as a cursive script of Kanji, and later became the Hiragana letterform we use now. It was developed among women at first, because many women didn’t have opportunities for education, and were not allowed to work in official positions, which required the use of Kanji-based writing. Hiragana was such a huge creative development, and later it became more popular, regardless of gender and social status. It is now a main script for Japanese. + +
+ +![How Hiragana was developed from Kanji](images/02.svg) + +
+ +_Katakana,_ on the other hand, was developed in a different way. It’s an alternative form of _Hiragana,_ and in modern times it’s often used to write foreign words. Katakana is also a simpler form of Kanji, but the difference from Hiragana is that while Hiragana simplifies the whole Kanji, Katakana takes only a part of Kanji and makes it into a new character. + +Katakana was created by monks—they needed an easier and less packed form of letters for their scriptures to write Ruby (small text written above Kanji or foreign letters to indicate phonetics or pronunciations in Japanese) next to Kanji. + +
+ +![How Katakana was developed from Kanji](images/03.svg) + +
+ +## Why use Chinese characters, or “Kanji”, in Japan? + +In Korea, the usage of Chinese characters are fading away, with most people only using Hangeul. So why does Japan still use Kanji? + +The important thing we must not forget is that Hiragana and Katakana are phonograms, and Kanji is an ideogram. Japanese words have many homonyms—words that sounds the same but mean completely different things—so, by using Kanji, it helps a lot in avoiding miscommunication. Also, Japanese doesn’t have a word spacing system, so without Kanji, it would be very hard to figure out where to cut the sentence. Also, by using Kanji in between, the sentence will be much shorter, too. + + +## Development of the letterform + +Before metal typesetting, Japanese was written in a script style due to the use of pointed brushes. This meant that Hiragana was written in unbroken forms—in other words, every character was written connected, much like Latin calligraphy. When Japanese printers first started using the metal type in the 1500s, their Hiragana types had two or more characters together in a single block of type—much like Latin ligatures. In the 1800s, after the seclusion policy in Japan was lifted, they imported Chinese metal type, which had one letter on each block, and Japan adapted to this by developing disconnected Hiragana and Katakana that fit in the em square. + +
+ +![Hiragana development of unbroken to disconnected](images/04.svg) + +
+ +And there’s more: an _alternative Kanji_. Some of the Kanji characters have several slightly different forms for the same meaning, but different usage. Alternative Kanjis have many names—“old forms” and “new forms,” “Gakusan” (meaning for educational purpose), or systematic names given by JIS (Japanese Industrial Standards). + +There are a couple of reasons for using alternative Kanji. As written above, Kanji and Kana had a long journey of transformation over centuries, and as we transfered from analog manuscript to incunable to phototypesetting to digital fonts, some Kanji characters were accidentally drawn wrong, or developed in a few different forms, which ended up with alternative Kanji. In this case, it’s mainly used for names of people or place, or on some publications they prefer the old letterform alternative Kanji on purpose. The Kanji 辺 has 23 alternative forms! (When using a font with Adobe-Japan 1-6 character set.) + +
+ +![Alternative Kanji of “hen” in 23 different ways](images/05.svg) + +
+ +Kanji letterforms in typefaces are not the same as how we hand-write; letterforms were optimized to make them fit metal type designs. However, its simpler structures and elements are not the best to learn the anatomy of Kanji—especially for beginners. To resolve this, the Japanese ministry of education provides guidelines to follow an alternative letterform, and this also includes very few Kana. These alternative letterforms, sometimes called as _Gakusan style,_ are designed with brush-like elements and expressions, known as a [humanist](/glossary/humanist_old_style) style in Latin. These design details allow readers to see more familiar Kanji forms and may enable children to learn Kanji more easily. + +
+ +![Alternative Kanji Gakusan examples](images/06.svg) + +
+ +## Tsume and Proportional Metrics (palt) + +Although Japanese fonts are designed full-width, some characters inevitably end up having more whitespace on both sides of the letter. This is because Japanese Kana used to be written vertically, so both the letter width and height varied. Therefore, when typesetting, especially in the narrow textbox, the line would appear jagged due to the inconsistent whitespace. To resolve this problem, Japanese typography uses its own setting called _Tsume,_ or _Proportional Metrics_ (`palt` in [OpenType](/glossary/open_type)), instead of tracking or kerning. + +
+ +![Difference of palt ON and OFF](images/07.svg) + +
+ +Tsume enables the font to tighten its typesetting. The difference between Tsume and kerning is that Tsume shrinks the whitespace on both sides of the letter, while kerning goes in between two letters. Tsume values are defined by the type designer when designing the font, and users can’t set their own value. Some Japanese type foundries are updating their flagship fonts with Japanese kerning values in addition to the Tsume. Tracking is rarely used. “Betagumi” typesetting is also very popular—it means block typesetting, with no Tsume or kerning. diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/01.svg b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/01.svg new file mode 100644 index 0000000000..d51f8e6e33 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/01.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/02.svg b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/02.svg new file mode 100644 index 0000000000..be73cd4cc7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/02.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/03.svg b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/03.svg new file mode 100644 index 0000000000..e0a1e855a2 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/03.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/04.svg b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/04.svg new file mode 100644 index 0000000000..a6ba5389f7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/04.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/05.svg b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/05.svg new file mode 100644 index 0000000000..fb8363990a --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/05.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/06.svg b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/06.svg new file mode 100644 index 0000000000..de2ca20443 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/06.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/07.svg b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/07.svg new file mode 100644 index 0000000000..6cb40a6b44 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/07.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/thumbnail.svg b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/thumbnail.svg new file mode 100644 index 0000000000..b81271fcaf --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/images/thumbnail.svg @@ -0,0 +1,3 @@ + + + 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 new file mode 100644 index 0000000000..13e1a77ad1 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/japanese_typography_basics/lesson.textproto @@ -0,0 +1,10 @@ +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/the_evolution_of_hangeul_type_design/content.md b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/content.md new file mode 100644 index 0000000000..8f95a98e80 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/content.md @@ -0,0 +1,73 @@ +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. + +## A sans serif origin + +
+ +![Example of Hunminjeongum font](images/01.svg) + +
+ +While Latin and Japanese developed its [type](/glossary/type) design from brush and pen based letterforms, Korean was developed completely the other way around. + +The first Hangeul design was a [sans serif](/glossary/sans_serif) style, with rounded elements, and this is where the type development of Hangeul starts. King Sejong, the director of Hangeul’s creation, intended this design for citizens to be able to learn the new script easily by drawing on the ground with a stick. For more information, read our [Designing Hangeul](/lesson/an_introduction_to_hangeul) collection of articles by Darrell Penta. + +However, after Hangeul was widely spread in the country, the [letterforms](/glossary/letterform) naturally developed into a [script](/glossary/script_typeface_style) style with a use of pointed brush, and this style is called “Gung” in Korean. The name Gung-chae means “the typeface for the palace,” because the style was popular among the people in the palace. And this script type enjoyed ubiquity until the Korean [serif](/glossary/serif) style was designed by the [type designers](/glossary/type_designer) Kyungseo Park and Jeongho Choi in the 1900s. + +
+ +![Example of Gung](images/02.svg) + +
+
Gungseo font in Mac system, designed to express the Gung style back in the 16th century.
+ +Although Jeongho Choi defined the Korean serif style that we know now, Kyungseo Park built the important structure of the Korean serif. Jeongho Choi also designed a lot of Korean serif typefaces for type foundries in Japan, and his designs are still a huge inspiration for many type designers in Korea. + +
+ +![Scan of Jeongho Choi’s sketches](images/03.jpg) + +
+
Jeongho Choi’s sketch. From “Hangeul designer Choi JeongHo,” written by Ahn, Sangsoo and Noh, Eunyou. Ahn Graphics 2014.
+ +
+ +![Korean serif style we see now](images/04.svg) + +
+ +## The non-square style + +In the 1980s, type designers started to experiment. Sangcheol Lee and Sang-soo Ahn designed a “non-square” Hangeul font called _Saemmulchae_ and _Ahn Sang Soo chae,_ and Ahn received the Gutenberg Prize later in the 2000s for his work. Most Hangeul fonts back then were square and monospaced, but these non-square typefaces were fully proportional, and it broke the stereotype that Korean type design had until then. The non-square structure is also more efficient when designing the type, since it doesn’t have to be fit the full width of a square, so components can be reused instead of adjusting and squishing. “Non-square” soon became a new classification, unique to Korean, and more designers started to design non-square fonts. + +Please read [“CJK typesetting rules”](/lesson/cjk_typesetting_rules) for more detail about CJK monospaced and full-width fonts. + +
+ +![Examples of non-square fonts](images/05.svg) + +
+ +## Recent trends and experiments + +In the 1990s and early 2000s, the first generation of social media and blogs became popular, and Korean type foundries found a new business opportunity. Several social media services in Korea started to sell fonts that you could apply on your blogs or phones. Some, called “action fonts”, had GIF-like animations which made them more suitable for web usage. The social media trend back then didn’t survive to today, but the culture of choosing fonts just for your phone remains, even globally. + +Another Korean trend in the early 2000s—particularly on movie posters and book covers—was handwriting fonts. Because people were fond of the handwritten style, many type foundries started to commissioned professional calligraphers to design casual, handwritten-style typefaces. + +
+ +![Examples of handwritten typefaces](images/06.svg) + +
+ +From the late 2000s, the trend of retro type kicked in, and took over movie posters and book covers instead of handwritten type. Retro type could be said to be something that feels old but stylish, nostalgic but new, rough but also executed gently. Retro typefaces offer a familiar and friendly feel, and these fonts were used in various settings, from restaurants to pickets. + +
+ +![Examples of retro typefaces](images/07.svg) + +
+ +In this past decade, the biggest change in Hangeul type design is letter width. Hangeul fonts are monospaced by default, except for the “non-square” fonts, which meant that Hangeul glyphs had 1000 units for the letter width. However, because Hangeul is a composition letter of syllable blocks, when the block has as many components as possible, the letter is likely to pile up. Inevitably, some characters would look squished. By slimming the letter width, the letters would look slightly narrower, resulting in a smoother and smarter reading experience. Most Hangeul fonts designed and released now have a narrow letter width—around 850–950 units—including [Noto Sans Korean](https://fonts.google.com/noto/specimen/Noto+Sans+KR). + +Hangeul was created in 1400s, and the first Korean serif was designed in 1900s, which are both relatively later than other scripts. Both Hangeul type design and typography are still evolving, and there are so many potentials and possibilities waiting to be tested. \ No newline at end of file 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/cjk/lessons/the_evolution_of_hangeul_type_design/images/01.svg new file mode 100644 index 0000000000..26b0605ed9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/01.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/cjk/lessons/the_evolution_of_hangeul_type_design/images/02.svg new file mode 100644 index 0000000000..a693127d4f --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/02.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/cjk/lessons/the_evolution_of_hangeul_type_design/images/03.jpg new file mode 100644 index 0000000000..3d1852f8ed Binary files /dev/null and b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/03.jpg differ 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/cjk/lessons/the_evolution_of_hangeul_type_design/images/04.svg new file mode 100644 index 0000000000..43d05ec6e0 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/04.svg @@ -0,0 +1,185 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/cjk/lessons/the_evolution_of_hangeul_type_design/images/05.svg new file mode 100644 index 0000000000..ad81708a5e --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/05.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/cjk/lessons/the_evolution_of_hangeul_type_design/images/06.svg new file mode 100644 index 0000000000..ad819694e2 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/06.svg @@ -0,0 +1,181 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/cjk/lessons/the_evolution_of_hangeul_type_design/images/07.svg new file mode 100644 index 0000000000..219bcf2798 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/07.svg @@ -0,0 +1,154 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/cjk/lessons/the_evolution_of_hangeul_type_design/images/thumbnail.svg new file mode 100644 index 0000000000..b81271fcaf --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/images/thumbnail.svg @@ -0,0 +1,3 @@ + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/lesson.textproto b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/lesson.textproto new file mode 100644 index 0000000000..8ed6a24b8a --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/the_evolution_of_hangeul_type_design/lesson.textproto @@ -0,0 +1,10 @@ +name: "The evolution of Hangeul type design" +authors: "Min-Young Kim" +reviewers: "Lisa Huang" +reviewers: "Minjoo Ham" +reviewers: "Shoko Mugikura" +topics: "cjk" +related_terms: "cjk" +prev_lessons: "japanese_typography_basics" +next_lessons: "an_introduction_to_hangeul" +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 new file mode 100644 index 0000000000..eaf0a1b623 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/content.md @@ -0,0 +1,169 @@ +[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/images/01.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/01.svg new file mode 100644 index 0000000000..d9553d7c0b --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/01.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/02.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/02.svg new file mode 100644 index 0000000000..860e886a2b --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/02.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/03.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/03.svg new file mode 100644 index 0000000000..ccfda50fdc --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/03.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/04.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/04.svg new file mode 100644 index 0000000000..e6156cc1f9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/04.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/05.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/05.svg new file mode 100644 index 0000000000..1a9151be4a --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/05.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/06.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/06.svg new file mode 100644 index 0000000000..59c7978e25 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/06.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/07.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/07.svg new file mode 100644 index 0000000000..2cb6fc2afd --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/07.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/08.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/08.svg new file mode 100644 index 0000000000..d1444854af --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/08.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/09.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/09.svg new file mode 100644 index 0000000000..f632aa04b7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/09.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/A_kaiti.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/A_kaiti.svg new file mode 100644 index 0000000000..b9aae84ef3 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/A_kaiti.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + 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/cjk/lessons/type_classification_in_cjk/images/B_handwritten_cursive.svg new file mode 100644 index 0000000000..ccbba1ec96 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/B_handwritten_cursive.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/C_songti.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/C_songti.svg new file mode 100644 index 0000000000..5567544de7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/C_songti.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/D_fangsongti.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/D_fangsongti.svg new file mode 100644 index 0000000000..2d36a52d73 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/D_fangsongti.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/E_heiti.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/E_heiti.svg new file mode 100644 index 0000000000..910de511b9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/E_heiti.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/F_yuanti.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/F_yuanti.svg new file mode 100644 index 0000000000..8be6360434 --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/F_yuanti.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + 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/cjk/lessons/type_classification_in_cjk/images/G_decorative_artistic.svg new file mode 100644 index 0000000000..265fc5a1ea --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/G_decorative_artistic.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/thumbnail.svg b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/thumbnail.svg new file mode 100644 index 0000000000..b81271fcaf --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/images/thumbnail.svg @@ -0,0 +1,3 @@ + + + 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 new file mode 100644 index 0000000000..c401d464eb --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/lessons/type_classification_in_cjk/lesson.textproto @@ -0,0 +1,10 @@ +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 new file mode 100644 index 0000000000..514da6ac5a --- /dev/null +++ b/cc-by-sa/knowledge/modules/cjk/module.textproto @@ -0,0 +1,6 @@ +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 new file mode 100644 index 0000000000..7fc4785bed --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/content.md @@ -0,0 +1,44 @@ +The nineteenth century witnessed rapid changes in society and industry, which led to an explosive proliferation of new [typefaces](/glossary/typeface). The Modern types designed by Bodoni and Didot in the previous century had continued the trend toward increased contrast and finer details, influenced, in part, by new calligraphic styles. Similarly, some of the typefaces of the early 19th century took existing designs and exaggerated some of their features. An early example, and one of the first [display](/glossary/display) typefaces, was the Fat Face, a style that in some respects is a parody of the Modern style, with [contrast](/glossary/contrast) taken to new extremes. + +
+ +![INSERT_ALT](images/GFKhistoftype5.1.svg) + +
+ +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. + +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. + +
+ +![INSERT_ALT](images/GFKhistoftype5.2.svg) + +
+ +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) + +
+ +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) + +
+ +## The arrival of the sans serif style + +The most consequential type style introduced in the 19th century was the sans serif. The style first appeared in type when William Caslon IV (1780–1869) designed a large all-caps [sans serif](/glossary/sans_serif) that he called English Egyptian, and which first appeared in a specimen book published in about 1816. At the time, it was hardly remarked on, and it would be some time before the sans serif was more widely adopted. In 1832, British typefounder Vincent Figgins produced a sans serif typeface in three weights, followed by another ten the following year. Figgins coined the term ‘sans serif’ to describe this ‘serifless’ typeface. In 1834, the British [typefounder](/glossary/type_foundry) William Thorowgood was the first to design a sans serif with both [uppercase and lowercase](/glossary/uppercase_lowercase) alphabets, and used the term “[Grotesque](/glossary/grotesque_neo_grotesque)” to describe them. Although sans serifs began to grow in popularity, their use in the 19th century was typically limited to small sizes in commercial printing. Their broader popularity would begin in the next century. diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.1.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.1.svg new file mode 100644 index 0000000000..9f231c8a9e --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.1.svg @@ -0,0 +1,3 @@ + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.2.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.2.svg new file mode 100644 index 0000000000..1cb63b5d8f --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.2.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.3.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.3.svg new file mode 100644 index 0000000000..290b01a1cb --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.3.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.4.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.4.svg new file mode 100644 index 0000000000..0a2402a55a --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/GFKhistoftype5.4.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/thumbnail.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/thumbnail.svg new file mode 100644 index 0000000000..290b01a1cb --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/images/thumbnail.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/lesson.textproto b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/lesson.textproto new file mode 100644 index 0000000000..6b3702437d --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/display_type/lesson.textproto @@ -0,0 +1,21 @@ +name: "Display type" +authors: "John Boardley" +reviewers: "Gerry Leonidas" +reviewers: "Ben Weiner" +topics: "type_history" +related_terms: "sans_serif" +related_terms: "display" +related_terms: "contrast" +related_terms: "letterform" +related_terms: "bold" +related_terms: "x_height" +related_terms: "typesetting" +related_terms: "condensed_narrow_compressed" +related_terms: "classification" +related_terms: "legibility" +related_terms: "readability" +related_terms: "serif" +related_terms: "type_foundry" +prev_lessons: "modern_type" +next_lessons: "from_metal_to_digital" +excerpt: "The rise of display fonts in the 19th century, and the invention of the sans serif." 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 new file mode 100644 index 0000000000..b8b6951f81 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/content.md @@ -0,0 +1,45 @@ +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. + +
+ +![INSERT_ALT](images/GFKhistoftype6.3.svg) + +
+ +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) + +
+ +## 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. + +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) + +
+ +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) + +
+ +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. diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.1.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.1.svg new file mode 100644 index 0000000000..ff132aca84 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.1.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.2.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.2.svg new file mode 100644 index 0000000000..dc49ae8a2e --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.2.svg @@ -0,0 +1,3 @@ + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.3.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.3.svg new file mode 100644 index 0000000000..ef9b2c69bd --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.4.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.4.svg new file mode 100644 index 0000000000..bd8f96750a --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/GFKhistoftype6.4.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/thumbnail.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/thumbnail.svg new file mode 100644 index 0000000000..ff132aca84 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/images/thumbnail.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/lesson.textproto b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/lesson.textproto new file mode 100644 index 0000000000..130abb5d24 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/from_metal_to_digital/lesson.textproto @@ -0,0 +1,18 @@ +name: "From metal to digital" +authors: "John Boardley" +reviewers: "Gerry Leonidas" +reviewers: "Ben Weiner" +topics: "type_history" +related_terms: "sans_serif" +related_terms: "italic" +related_terms: "geometric" +related_terms: "transitional_neo_classical" +related_terms: "type_designer" +related_terms: "stroke" +related_terms: "legibility" +related_terms: "calligraphy" +related_terms: "variable_fonts" +related_terms: "axis_in_variable_fonts" +prev_lessons: "display_type" +next_lessons: "fitting_the_line" +excerpt: "The 20th-century typographic revolution — from metal sorts to font files." 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 new file mode 100644 index 0000000000..2f8e719932 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/content.md @@ -0,0 +1,43 @@ +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. + +
+ +![INSERT_ALT](images/GFKhistoftype4.3.svg) + +
+ +## The first Moderns + +Firmin Didot (1764–1836), son of François-Ambroise Didot, from the storied Parisian printing dynasty, cut Modern style typefaces that his brother Pierre printed with. However, by far the most prolific producer of Modern style typefaces, and the most influential for this new style, was the Italian Giambattista Bodoni (1740–1813). He was from a family of printers from Saluzzo in the Piedmont region in Northwest Italy, close to Italy’s western border with France. + +In 1768, Bodoni was invited to run the newly established Stamperia Reale, or Royal Press of Duke Ferdinand in Parma. When Bodoni arrived in Parma, he immediately got to work stocking up on type by the famed French punchcutter Pierre Simon Fournier (1712–68). When Bodoni began to make his own typefaces, he credited Fournier as his primary influence. But from the 1770s, we begin to see a change in Bodoni’s style. Initially, his typography imitated that of Fournier with its rococo decoration and [Transitional](/glossary/transitional_neo_classical) style typefaces, but he gradually moved toward a new and distinctive style of his own. He rejected all forms of typographic ornamentation and borders, preferring instead vast expanses of white space and generous margins. In his typefaces, he increased contrast and introduced very fine almost unbracketed serifs, longer ascenders and descenders, and more generous line-spacing. Now, line-spacing we would usually associate with typography rather than the design of typefaces. For centuries, type had typically been set solid — that is with no additional spacers inserted between lines of type. But Bodoni incorporated extra line-space into the type itself. He did this by casting his type on a larger body, thus imitating the appearance of additional line spacing. + +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. + +## 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. + +
+ +![INSERT_ALT](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. + +
+ +![INSERT_ALT](images/GFKhistoftype4.2.svg) + +
+ +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). + +The types of Didot and Bodoni were widely copied. The latter more so, owing to Bodoni’s skill for self promotion and his attendant international fame. + +## 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_. diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/GFKhistoftype4.1.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/GFKhistoftype4.1.svg new file mode 100644 index 0000000000..cdfe14851e --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/GFKhistoftype4.1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/GFKhistoftype4.2.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/GFKhistoftype4.2.svg new file mode 100644 index 0000000000..82648bb82a --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/GFKhistoftype4.2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/GFKhistoftype4.3.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/GFKhistoftype4.3.svg new file mode 100644 index 0000000000..56fe1076c9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/GFKhistoftype4.3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/thumbnail.svg b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/thumbnail.svg new file mode 100644 index 0000000000..cdfe14851e --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/images/thumbnail.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/lesson.textproto b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/lesson.textproto new file mode 100644 index 0000000000..353cebe46d --- /dev/null +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/modern_type/lesson.textproto @@ -0,0 +1,11 @@ +name: "Modern type" +authors: "John Boardley" +reviewers: "Gerry Leonidas" +reviewers: "Ben Weiner" +topics: "type_history" +related_terms: "typeface" +related_terms: "transitional_neo_classical" +related_terms: "counter" +prev_lessons: "transitional_faces" +next_lessons: "display_type" +excerpt: "Bodoni and Didot, and the rise of the Modern high contrast style." diff --git a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/lesson.textproto b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/lesson.textproto index ce18535531..9e54e6deeb 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/lesson.textproto +++ b/cc-by-sa/knowledge/modules/history_of_type/lessons/transitional_faces/lesson.textproto @@ -4,7 +4,7 @@ reviewers: "Gerry Leonidas" reviewers: "Ben Weiner" topics: "type_history" prev_lessons: "what_have_the_romans_ever_done_for_us" -next_lessons: "fitting_the_line" +next_lessons: "modern_type" related_terms: "blackletter" related_terms: "contrast" related_terms: "italic" diff --git a/cc-by-sa/knowledge/modules/history_of_type/module.textproto b/cc-by-sa/knowledge/modules/history_of_type/module.textproto index 897158fb13..7e20179c6b 100644 --- a/cc-by-sa/knowledge/modules/history_of_type/module.textproto +++ b/cc-by-sa/knowledge/modules/history_of_type/module.textproto @@ -2,6 +2,9 @@ name: "History of Latin type" lessons: "the_invention_of_type" lessons: "what_have_the_romans_ever_done_for_us" lessons: "transitional_faces" +lessons: "modern_type" +lessons: "display_type" +lessons: "from_metal_to_digital" lessons: "fitting_the_line" lessons: "justification_hyphenation" lessons: "the_tight_not_touching_style" 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 new file mode 100644 index 0000000000..ad07d840a3 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/content.md @@ -0,0 +1,123 @@ +With so many [typefaces](/glossary/typeface) to choose from, you may have wondered where they come from, how they’re made, and if we really need to continue making more of them. In this article, we’ll explore the origin of contemporary typefaces and take a look at the motivation and process for making [fonts](/glossary/font). + +

Who makes typefaces?

+ +People who create typefaces and fonts are called type designers. Improvements in font production software have streamlined the process of making fonts and have led to an increase in fonts being launched by a more diverse range of designers. Despite these technical advances, however, creating and releasing a new, quality typeface still requires a substantial commitment of time and skill. + +Fonts now tend to have more extensive character sets due to increased language support and added typographic features. Such fonts offer far more capabilities than those of the 20th century, but also create far more work for the type designer. + +While font creation usually follows a common set of methods and formats, the parameters and quality of typefaces can vary greatly. For example, fonts created by enthusiasts may not have the same range of [characters](/glossary/character) or features as those created by professional type designers. Many fonts are produced by specialized businesses known as [type foundries](/glossary/type_foundry). + +
+ +![Multiple typefaces](images/1MontageofTypefaces.svg) + +
+ +

How do new typefaces come into existence?

+ +Many typefaces are conceived by type designers who have had a spark of inspiration, perhaps to revive an historical typeface, capture a trend in graphic design, or because they’ve identified a gap in the market. Alternatively, a foundry or individual designer may be commissioned to produce a custom typeface. These are generally designed for an organization that requires a distinct style for its written material, and such typefaces are often designed for exclusive use by the commissioning organization. + +

Why make more typefaces?

+ +Don't we have enough fonts already? Well, imagine we decided we had all the songs we ever needed, and stopped writing more. Just as music conveys and enhances a song, a typeface embeds a visual layer into text and communicates in conjunction with it. Each typeface provides a unique, visual tone of voice to written language. + +Typefaces also allow documents to present visual hierarchies, for example through darker headings. They also enable document designers to represent meaningful structures, by differentiating annotations, captions, and other parts of textual communication. + +

The importance of a brief

+ +To ensure their time and skill is used efficiently, and they meet the needs of their client or audience, experienced type designers usually seek to define the requirements and set the parameters of a type design project in its early stages with a typeface design brief: + +* What will the typeface be used for? Is its primary purpose for immersive texts, or for short display headlines? +* What are its specific requirements? Does the typeface need to perform a certain function, such as to read clearly in very small sizes, or to operate in a particular environment such as an e-reader, or within virtual reality? +* What languages and characters should it support? Which countries will the font be used in and what written languages are used there? Does the typeface need to include alternate [glyphs](/glossary/glyph) such as [small caps](/glossary/small_caps) or extended math symbols? +* How many [weights](/glossary/weight) and [styles](/glossary/style) are needed? Regular, italic, bold, and bold italic are expected by most designers; would more weights, or perhaps other [widths](/glossary/width) also be required? +* What existing fonts are already available and how do they compare? Is the new typeface distinct enough from already available designs to warrant its production, both commercially and creatively? + +
+ +![A list of typeface requirements](images/2Checklist.svg) + +
+ +The answers to these questions are usually distilled into a well-defined project brief. Even if setting their own brief, writing everything down enables the type designer to steer their creative and technical decisions to match the project’s requirements. This may also help avoid the temptation of allowing the project to creep beyond its intended goals, which can lead to a dramatic increase in production time. + +

The process

+ +Although a font’s final form will be a digital file, conceptual explorations often begin with hand-drawn sketches. Type designers initially draw key letters that exemplify the common shapes and attributes of the overall typeface. Through these, they explore the structural and stylistic relationships required to produce a harmonious group of letters. + +
+ +![Hand-drawn characters](images/3SketchedType.svg) + +
+ +Designers often start with a few letters for the lowercase, such as "n" and "o", or words such as adhesion or videospan. Capitals follow, with "H" and "O" providing key dimensions. These determine the proportionate construction, height, width, weight, and contrast of lowercase letters with flat shade and round sides. Consistency is the key to making type easy to understand for the reader and should be the goal of most typefaces. As the type designer expands the number of glyphs drawn, adjustments may need to be made to previously drawn characters to better integrate particular shapes. + +

Drawing

+ +Once the conceptual phase is complete, the sketches can be digitized. The drawings are most often converted to digital form using Bézier curves. These are line drawings where each line is defined by points at its beginning and end, and off-curve control points that adjust the shape. These line drawings, referred to as vector graphics, form the shape of each glyph. + +
+ +![A close-up view of Bézier curves](images/4Beziercurve.svg) + +
+ +These drawings are usually created within a font software program. These specialist applications provide tools for drawing the glyphs as well as defining metrics such as spacing, and code that controls how they will appear and function. [FontLab](https://www.fontlab.com/font-editor/fontlab/), [Glyphs](https://glyphsapp.com), and [Robofont](https://robofont.com/) are popular applications. + +

Spacing and kerning

+ +Early in the drawing phase, designers group the initial letters into words to determine how they relate to each other. Each glyph must be assigned a volume of [space](/glossary/spaces) on either side (known as “sidebearings”) to separate them from each other. The intention is for each character to be assigned a proportional amount of space, so that when different glyphs are grouped together, all are spaced with a matching rhythm. + +
+ +![Sidebearings on either side of each character](images/5Sidebearings.svg) + +
+ +Once the drawing and spacing of all glyphs is complete, type designers check every conceivable combination of glyphs for individual spacing requirements. When particular shapes interact, such as the “VA” combination, specific adjustments, called [kerning](/glossary/kerning_kerning_pairs), may need to be made to improve the spacing between them. This kerning data is contained within the finished font file. + +

Masters

+ +If a type family contains two or more [styles](/glossary/style) within an [axis](/glossary/axis_in_variable_fonts), such as [weight](/glossary/weight) or [width](/glossary/width), intermediate styles between two extremes can be generated automatically—a process known as “interpolation.” For example, If the typeface requires five weights, the type designer could draw only the lightest and the heaviest styles and the software can automatically generate intermediate weights between them. The extreme styles that have actual outlines are called [masters](/glossary/masters). Drawings for in-between weights are optional. + +
+ +![INSERT_ALT](images/existing_masters.svg) + +
+ +

Programming

+ +Type designers can code layout features in font editing software to control how the font operates for the end user. Using [OpenType](/glossary/open_type) font technology, designers can program glyphs to be substituted or adjusted. This can be performed automatically, or by user control. For example, the font can be programmed to swap certain accented glyphs automatically when the font is used with particular language settings. The font can also be programmed to substitute individual glyphs or a group of glyphs for [stylistic alternates](/glossary/alternates) when the relevant feature is turned on. + +
+ +![INSERT_ALT](images/existing_alternates.svg) + +
+ +

Mastering, distribution, and usage

+ +Checking that the font is designed and programmed without errors, and that it operates correctly, is called mastering. Once the designer is satisfied that the font operates correctly, they will export the final font as a TTF or OTF font, ready to be installed on users’ computers. + +The way in which fonts are distributed online continues to evolve. For many years, fonts have been made available directly from their creators’ websites, or or through third party companies which offer a library of typefaces. Increasingly, other options have become available, such as library subscriptions, fonts installed directly into design software, or rented fonts. + +Whether a font is offered free or for purchase, it’s always subject to a [license](/glossary/licensing), drawn-up by the designer, foundry, or distributor, which governs how the font may be used. Licenses can be libre (“open source”), highly permissive licenses that permit redistribution and remixing of the font, or proprietary licenses (as usually seen in “commercial” or “retail” fonts), which are more restrictive. + +Like any other consumer product, typefaces need marketing to let people know about them. Designers and foundries often create visual materials, called specimens, to show off their designs and attract users. Effective specimens detail the features of the typeface, provide examples of how it might be used, and describe the sort of text it is most suitable for. + +
+ +![An example of a typeface specimen](images/6SpecimenExample.svg) + +
+ +As we’ve seen, there are many facets to designing a typeface and making a font. Each step in the process requires a broad understanding of the task’s context and skill in implementing it. If you’d like to know more, here are a few resources to get you started: + +- [Designing Fonts](https://www.google.com/books/edition/Designing_Fonts/HHRzzQEACAAJ) by Chris Campe, Ulrike Rausch +- [How to Create Typefaces](https://www.google.com/books/edition/How_to_Create_Typefaces/-yW-tAEACAAJ) by Cristóbal Henestrosa, Laura Meseguer, José Scaglione +- [Theory of Type Design](https://www.google.com/books/edition/Theory_of_Type_Design/_T9iswEACAAJ) by Gerard Unger +- [Inside Paragraphs](https://www.google.com/books/edition/Inside_Paragraphs/nzT3DwAAQBAJ) by Cyrus Highsmith +- [Counterpunch](https://www.google.com/books/edition/Counterpunch/dUZUAAAAMAAJ) by Fred Smeijers diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/1MontageofTypefaces.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/1MontageofTypefaces.svg new file mode 100644 index 0000000000..ea79166ee8 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/1MontageofTypefaces.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/2Checklist.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/2Checklist.svg new file mode 100644 index 0000000000..6bcebac955 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/2Checklist.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/3SketchedType.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/3SketchedType.svg new file mode 100644 index 0000000000..694a4f07c4 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/3SketchedType.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/4Beziercurve.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/4Beziercurve.svg new file mode 100644 index 0000000000..5abd5d1fd6 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/4Beziercurve.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/5Sidebearings.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/5Sidebearings.svg new file mode 100644 index 0000000000..ca266de767 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/5Sidebearings.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/6SpecimenExample.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/6SpecimenExample.svg new file mode 100644 index 0000000000..121f6e81c6 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/6SpecimenExample.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/existing_alternates.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/existing_alternates.svg new file mode 100644 index 0000000000..446b20e09e --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/existing_alternates.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/existing_masters.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/existing_masters.svg new file mode 100644 index 0000000000..fb70ae8261 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/existing_masters.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/thumbnail.svg b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/thumbnail.svg new file mode 100644 index 0000000000..5abd5d1fd6 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/images/thumbnail.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..3118eb16b2 --- /dev/null +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/how_typefaces_are_designed_and_fonts_are_made/lesson.textproto @@ -0,0 +1,15 @@ +name: "How typefaces are designed & fonts are made" +authors: "Jamie Clarke" +reviewers: "Thomas Phinney" +reviewers: "Gerry Leonidas" +topics: "type_design" +topics: "essentials" +topics: "open_type" +related_terms: "typeface" +related_terms: "character" +related_terms: "style" +related_terms: "spaces" +related_terms: "masters" +related_terms: "licensing" +prev_lessons: "introducing_color_fonts" +excerpt: "INSERT_EXCERPT" diff --git a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/lesson.textproto b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/lesson.textproto index ed02068bd9..63ec85ebae 100644 --- a/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/lesson.textproto +++ b/cc-by-sa/knowledge/modules/introducing_type/lessons/introducing_color_fonts/lesson.textproto @@ -3,8 +3,8 @@ authors: "Rod Sheeter" reviewers: "Elliot Jay Stocks" reviewers: "Cosimo Lupo" topics: "color_fonts" +prev_lessons: "introducing_variable_fonts" +next_lessons: "how_typefaces_are_designed_and_fonts_are_made" related_terms: "color_fonts" related_terms: "variable_fonts" -prev_lessons: "introducing_alternate_glyphs" -next_lessons: "introducing_variable_fonts" excerpt: "Color fonts allow the font to use many colors and to have an opinion about what those colors should be." diff --git a/cc-by-sa/knowledge/modules/introducing_type/module.textproto b/cc-by-sa/knowledge/modules/introducing_type/module.textproto index 961f378abe..c66c452569 100644 --- a/cc-by-sa/knowledge/modules/introducing_type/module.textproto +++ b/cc-by-sa/knowledge/modules/introducing_type/module.textproto @@ -9,4 +9,5 @@ lessons: "understanding_numerals" lessons: "open_type_features_in_practice" lessons: "introducing_variable_fonts" lessons: "introducing_color_fonts" +lessons: "how_typefaces_are_designed_and_fonts_are_made" excerpt: "We all use type every day, from word processors and social media graphic apps to professional desktop design software and hand-coded websites. Good typography is within everyone’s reach, and it starts with the fundamentals. This module acts as an accessible primer for anyone to build confidence and skills, and is also a solid foundation for experienced designers looking to deepen their understanding of the basics." diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/content.md b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/content.md new file mode 100644 index 0000000000..1780ee89b0 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/content.md @@ -0,0 +1,151 @@ +Reading is a complex cognitive process that involves working out what meanings are represented by a set of symbols in a [writing system](https://fonts.google.com/knowledge/glossary/script_writing_system), such as the [Latin alphabet](https://fonts.google.com/knowledge/glossary/latin). Scholars who are trying to understand how people read can have expertise in a broad range of areas such as psychology, linguistics, semiotics, literary critics, vision sciences, and anthropology. This article is a brief overview of how people read focusing on how those with normal or corrected vision (with glasses/spectacles or contact lenses) read letters, words, phrases and longer texts. This article does not cover how people read by touch with braille. This overview also introduces how typographic decisions can influence the process of reading. + +Reading is what we do, and [readability](https://fonts.google.com/knowledge/glossary/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. Poor readability can obscure, change, or convince the reader never even engage with the author's message. + +Readability describes how easily a reader engages with and understands the message intended by the author(s). + +Before someone reads, the text: + +* Must be [legible](https://fonts.google.com/knowledge/glossary/legibility) +* Should be clear enough for people to see it +* Should be engaging. + +Making texts more readable makes it easier for a motivated person to read. + +There are many scientific models of how motivated people convert the written word into dialogue, thoughts, and ideas. These cognitive processes explain how people recognize individual letters, words, syntax, and how the ideas in the text relate to each other and the reader in meaningful and memorable ways. + +Individual differences in reading are not only attributable to differences in our physiology. Our experience of the world, what we have learned, and our preferences can all affect how we see. + +Find out more about text accessibility in [“Introducing accessibility in typography.”](/lesson/introducing_accessibility_in_typography) + +## Legibility is seeing the text clearly + +
+ +![INSERT_ALT](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.
+ +Legibility is being able to clearly see the structure of the text. Legibility is achieved when the text is not fuzzy or blurred and the reader can see all the details without any visual stress such as squinting or rereading. + +There are physiological mechanisms that determine how well a person can see text. Understanding written text is a very complex process that originates in the eye with the interplay of two types of light sensing cells, cones and rods, and continue in the brain where the basic visual information from text is decoded by a series of sequential processing mechanisms of increasing complexity that feed into the language processing areas of the brain. + +
+ +![INSERT_ALT](images/readability_02.svg) + +
+ +This process is too complex for the goals of this article, but a wealth of academic literature is available to learn about this (see [this article](https://visionlab.neuroscience.barnard.edu/sites/default/files/content/Yeatman%2C%20White_Annual%20Review%20of%20Vision%20Science_2021.pdf) for a recent review). The incredible range of individual differences in the ability to process written text, both in typical and atypical readers (e.g. low-vision patients, dyslexia in its multiple forms, etc.) are proxies of the complexity of our cognitive and neural machinery supporting the act of Reading. Every little road bump at each point of this processing hierarchy would generate a different reading style and propagate to a broad range of limitations of the reading experience. + +There are several free tools that provide the ability to see how your typography will look to people with varying color vision capabilities. Visit [Material Design Accessibility Color Contrast Guidelines](https://m3.material.io/foundations/accessible-design/patterns), [Material Design Color and Accessibility,](https://m3.material.io/styles/color/the-color-system/accessibility) [The Perception of Color](https://www.britannica.com/science/color/The-perception-of-colour), and [Colour Blindness Awareness](https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/). To see what the 3 main types of color blindness look like, try out the [Chromatic Vision Simulator](https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=en_US&gl=US) application. To see if your choice of background and text colors meet color contrast guidelines, try the free [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) tool. + +## Learning to read + +Written language is a complex code that we learn where combinations of letters, or characters, systematically represent certain sounds. + +For children, learning to read normally starts with becoming aware of how words sound, known as phonological processing. This awareness is coupled with matching sounds and letters. A beginner English reader learns the connections between the 26 letters of the alphabet and the approximately 44 sounds of spoken English (the phonemes). Learners actively explore different ways of reading as they become expert readers. Successful readers build the ability to recognize most words automatically and read fluently, by paying attention to grammar, punctuation, and sentence structure. + +Adults who are learning a new language or a new [script (writing system)](https://fonts.google.com/knowledge/glossary/script_writing_system) go through a similar process of learning the relationship between the symbols, sounds, and syntax for constructing relationships between ideas. People who are learning to read are often simultaneously learning to write. As people learn to read and recognize words, they practice producing letters and words in written form. +To choose a typeface that supports people learning to read and write, find out if there are any fonts that are approved by local educational authorities, such as the [Foundation Fonts for Australian Schools](https://fonts.googleblog.com/) and [Japanese Universal Design fonts](https://fonts.googleblog.com/2022/04/morisawa-biz-universal-design-ud.html). + +## Reading words for labels, titles, sentences, and paragraphs + +The heart of typography focuses on the reader’s interactions with the words as they are seen and not the meanings of the words. Readability is a combination of typography (how words appear on screen or in print) and the actual difficulty and meanings of the words. For expert readers, word recognition and legibility happen at the same time. Sometimes people recognize a word before they recognize the letters in the word! Cognitive psychologists call this the “[word superiority effect.](https://en.wikipedia.org/wiki/Word_superiority_effect)” The outline shape of words in lowercase text are more distinctive than the outline in uppercase letters. This may also explain why people read Latin texts in lowercase faster than in uppercase and frequently prefer to read in lowercase. + +
+ +![INSERT_ALT](images/readability_03.svg) + +
+ +The word superiority effect also describes why it is easier to read a string of words that are meaningfully related in a sentence rather than reading a string of words that are not in a grammatical structure. Syntax, the way the words are arranged in phrases to create sentences, has a strong impact on readability. + +
+ +![INSERT_ALT](images/readability_04.svg) + +
+ +Readers are surprisingly flexible in their ability to read text that is not spelled correctly and has poor syntax. It requires more effort, but if they are motivated, they can successfully read very inaccurate texts. For example, a reader can understand that this sentence with mistakes: “I yesterday red book.” means “I read the book yesterday.” + +[Type scales](https://fonts.google.com/knowledge/glossary/scale) help people recognize how ideas relate to each other in hierarchical ways. Readers who want to quickly get an overview of a long text will use strategies like scanning headings and headlines to find the information they want to read below the headings and headlines. [CAPTION: Scanning the subheadings within a section.] + +
+ +![INSERT_ALT](images/readability_05.svg) + +
+ +A typographer has the freedom to lay out the words in any way that they want to create the desired reading experience. Many typographic and formatting decisions will influence how people experience reading the text. Consider the type sizes, letter, and line spacing. + +Some people will experience [crowding](https://www.sciencedirect.com/science/article/pii/S0042698907005561), the inability to read well because of the nearby visual clutter of letters, or words that are too close together. People differ in the extent to which they experience crowding. A crowded text can stop some people from reading at all. Tighter [kerning](https://fonts.google.com/knowledge/glossary/kerning_kerning_pairs) and [letter spacing](https://fonts.google.com/knowledge/glossary/spaces) will increase problems with crowding. + +
+ +![INSERT_ALT](images/readability_06.svg) + +
+ +When choosing a typeface for labels, titles, sentences, and paragraphs, consider asking others who are not designers to read examples and give you their feedback. Your experience will be different from theirs. Checking with a range of people could make a positive difference. Ask people to describe their reading experience. Listen for any mention of crowding. Many may not use the term “crowding” but may complain that there were problems with letter spacing, line spacing, or difficulties that they cannot attribute to anything in particular. Some fonts are designed to have larger letter [spacing](https://fonts.google.com/knowledge/glossary/spaces), such as [Lexend](https://fonts.google.com/specimen/Lexend?query=Lexend). + +To explore settings that might work for your texts, when selecting a font on Google Fonts, go to the Type Tester to try out different variable font axes. + +
+ +![INSERT_ALT](images/readability_07.png) + +
+
Google Fonts’ Type Tester, showing text with variable axes.
+ +## It’s easier to read, learn, and remember meaningful texts + +Reading is more than seeing the words and understanding the content based on syntax. The typography itself can convey messages like “this is meant to be easy to read” or “this is a playful message” to the reader. Just as a sentence can tell of happiness or anger, typefaces too can convey the lightness of happiness, or the boldness of anger. + +
+ +![INSERT_ALT](images/readability_08.svg) + +
+ +Along with this, the visual design of the typeface always expresses a message in a historical context that will be different for different readers depending on their experiences. + +Choosing a typeface that conveys the same emotion as the content and is meaningful to your readers’ lived experience involves building an understanding of their recent and current type experiences. + +Try to discover: +* The typefaces used in printed novels and school books, as well as popular online publications, magazines, and newspapers +* The current type design trends in the places your readers visit, both online and in the physical world + +## Motivation to read + +There are different motivations behind why and how people read. + +When asked about what they read, most people think of what researchers call “long form” reading such as reading a novel, a school book, or several pages of formatted text. People might be reading these for pleasure or to learn new things. + +The shortest form of reading is called glancing, when the reader briefly looks at a known location to quickly get a reading of something like a heart rate, time of day, or vehicle speed. Glance reading normally happens when the reader needs to use their eyes for another visual activity, such as driving. In this type of reading, people are reading to quickly get information that will help them do something, such as finding the arrival time on the bus schedule. Larger text size in non-condensed formats, as illustrated in Figure 5, is better to support glanceable reading. + +
+ +![INSERT_ALT](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.
+ +Interlude reading covers everything between glanceable and long form reading. There is a wide range including text messaging, navigating through headers and labels, reading some news headlines, summaries, or scanning search results. The motivations for this type of reading also vary widely, and includeing learning new things, being with friends, and finding things. + +## Try things with your readers + +The best solution for choosing a readable typeface will always be dependent on who your readers are, their motivations, and the message that you want them to take from your type choices. This article has provided some tools to help you make good choices for your readers, and we’ve added a few more resources below, best wishes for your creative journey! + +## Resources + +You might find these sources valuable to explore for more information on different aspects of reading: +* Web Usability [https://www.nngroup.com/articles/how-users-read-on-the-web/](https://www.nngroup.com/articles/how-users-read-on-the-web/) (1997) +* Glanceable fonts [https://www.nngroup.com/articles/glanceable-fonts/](https://www.nngroup.com/articles/glanceable-fonts/) (2017) +* Interlude reading [https://www.bendsawyer.com/project/towards-individuated-reading-experiences/](https://www.bendsawyer.com/project/towards-individuated-reading-experiences/) (2022) +* Handwriting in education around the world: [https://www.type-together.com/new-research-handwritting](https://www.type-together.com/new-research-handwritting) +* Experiencing crowding: [https://www.sciencedirect.com/science/article/pii/S0042698907005561](https://www.sciencedirect.com/science/article/pii/S0042698907005561) +* Accessibility considerations +* Individualising reading formats research provided by The Readability Consortium [https://www.thereadabilityconsortium.org/research](https://www.thereadabilityconsortium.org/research) +* The Science of Reading Progresses: Communicating Advances Beyond the Simple View of Reading. Duke, N.K., and Cartwright, K.B. (2021). The Science of Reading Progresses: Communicating Advances Beyond the Simple View of Reading. Reading Research Quarterly 56(S1), S25– S44. [https://doi.org/10.1002/rrq.411](https://doi.org/10.1002/rrq.411) 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/lessons/how_type_influences_readability/images/readability_01.svg new file mode 100644 index 0000000000..8db25675d5 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_01.svg @@ -0,0 +1,6 @@ + + + + + + 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/lessons/how_type_influences_readability/images/readability_02.svg new file mode 100644 index 0000000000..2a140662f8 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_02.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/lessons/how_type_influences_readability/images/readability_03.svg new file mode 100644 index 0000000000..e512d7a7a7 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_03.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/lessons/how_type_influences_readability/images/readability_04.svg new file mode 100644 index 0000000000..ca9bcf0d46 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_04.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/lessons/how_type_influences_readability/images/readability_05.svg new file mode 100644 index 0000000000..76b485d5e8 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_05.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + 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/lessons/how_type_influences_readability/images/readability_06.svg new file mode 100644 index 0000000000..6099200b40 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_06.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/lessons/how_type_influences_readability/images/readability_07.png new file mode 100644 index 0000000000..1486083fe8 Binary files /dev/null and b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_07.png differ 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/lessons/how_type_influences_readability/images/readability_08.svg new file mode 100644 index 0000000000..7ef3493e6d --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_08.svg @@ -0,0 +1,6 @@ + + + + + + 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/lessons/how_type_influences_readability/images/readability_09.svg new file mode 100644 index 0000000000..95b065f7f5 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/readability_09.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/thumbnail.svg b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/thumbnail.svg new file mode 100644 index 0000000000..b81271fcaf --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/images/thumbnail.svg @@ -0,0 +1,3 @@ + + + diff --git a/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/lesson.textproto b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/lesson.textproto new file mode 100644 index 0000000000..a3b5c870fe --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/how_type_influences_readability/lesson.textproto @@ -0,0 +1,10 @@ +name: "How type influences readability" +authors: "Hilary Palmen" +reviewers: "Bonnie Shaver-Troup" +reviewers: "Susanna Zaraysky" +topics: "accessibility" +topics: "readability" +related_terms: "legibility" +related_terms: "readability" +next_lessons: "introducing_accessibility_in_typography" +excerpt: "INSERT_EXCERPT" diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/content.md b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/content.md new file mode 100644 index 0000000000..bb3686d900 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/content.md @@ -0,0 +1,177 @@ +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. + +
+ +![Two columns of text in red and black ](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.
+ +## Choosing accessible type + +[Accessible typography](https://www.visionaustralia.org/business-consulting/digital-access/blog/typography-in-inclusive-design-part-1#2) considerations start with choosing [type](/glossary/type). Select [typefaces](/glossary/typeface) that have legibility built into their designs. There is no single answer about which fonts are most accessible. There are some indications of what could make a typeface more accessible to some people. + +The examples in this section are for languages using the [Latin](/glossary/latin) [writing system](/glossary/script_writing_system). However, the same principles of choosing typefaces with distinct [letterforms](/glossary/letterform) (the unique shape of a letter), [numerals](/glossary/numerals_figures), punctuation marks, and [symbols](/glossary/icon_symbol) should apply to other writing systems. + +The type designers who created [Lexend](https://design.google/library/lexend-readability/) and [Atkinson Hyperlegible](https://fonts.google.com/specimen/Atkinson+Hyperlegible) created these typefaces to be easier to read. Some popularly available fonts, such as [Poppins](https://fonts.google.com/specimen/Poppins), have proven to be readable with individuals who have cognitive disabilities. + +## Checking readability + +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. + +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. + +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. + +
+ +![b, d, q, and p characters set in different typefaces.](images/accessibility_2.svg) + +
+
Left: Mirroring of letterforms is employed in Helvetica (top) and Public Sans (bottom). Right: The non-mirrored letterforms used in Andika (top) and Atkinson Hyperlegible (bottom) help the reader avoid confusion with potentially similar characters.
+ +
+ +![Google Fonts website screenshot with six boxes of glyphs](images/accessibility_3.svg) + +
+
Comparison of “b,” ”d,” “q,” “p,” “a,” “8,” “6,” “g,” “a,” “6,” “1,” “I,” and “l” in Roboto, Abyssinica SIL, Intern Tights, Open Sans, Noto Sans Mono, and Noto Sans Japanese.
+ +Look for letters that can be clearly distinguished. For people with moderate to more severe vision impairment, the characters “o,” ”c,” “e,” or “a” can be easily confused, which in turn makes words harder to identify. + +
+ +![Three columns of r, n, m, i, !, I, l, o, c, 0, O, C, a, 8, 6, g, a, 6](images/accessibility_4.svg) + +
+
From left to right: The typefaces Andika, Lexend, and Atkinson Hyperlegible show how effective they are in differentiating potentially confusing character combinations.
+ +With our typeface(s) chosen, let’s move on to accessibility considerations for typesetting. The first place to start is to look at the structure of our content. For web typography, that means ensuring that the HTML is marked up with the most appropriate elements, headings have the right level (h1, h2, etc.), and that the hierarchy looks as expected with the default styles used by the browser before we dive into any bespoke CSS. + +Semantically structured HTML is not only good general practice, but it also means we’ll be making our content readable by assistive technologies that take advantage of the markup. For example, [screen readers](https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers)—assistive software that allows text to be dictated to users with visual or cognitive impairments, such as Google’s TalkBack on Android, Apple’s VoiceOver on iOS, and Freedom Scientific’s JAWS on desktop—rely on the semantic HTML to give the reader critical information about structure that they cannot see visually. Many text-to-speech tools, such as Microsoft Immersive Reader and Snap & Read, provide visual and audio supports together. These products rely on semantic information for determining how these supports look and sound. These software programs use either a [braille display](https://www.afb.org/node/16207/refreshable-braille-displays) or read text aloud. + +The HTML reflects the visual hierarchy by reading the content from the top left (Step 1) to the top right (Step 2), bottom left (Step 3) to bottom right (Step 4). + +
+ +![Arrows showing zig-zag direction.](images/accessibility_5.svg) + +
+
Example code for displaying the images in a screen reader-friendly hierarchy
+ +```html +
+ ”Description + ”Description + ”Description + ”Description +
+``` + +For more information on hierarchy, read [Material Design Accessible Design Basics](https://m3.material.io/foundations/accessible-design/accessibility-basics), [Material Design Accessible Design to Implementation](https://m3.material.io/foundations/accessible-design/design-to-implementation), [W3C Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/), and the [Document Object Model (DOM) order matters](https://developers.google.com/web/fundamentals/accessibility/focus/dom-order-matters) articles. + +## Color + +Color contrast is important for users to distinguish various text and non-text elements. Higher contrast makes the imagery easier to see. Low-contrast images or text may be hard for some users to differentiate in bright or low light conditions, such as on a very sunny day or at night. + +Contrast ratios represent how different one color is from another color, commonly written as 1:1 or 21:1. The contrast ratio between a color and its background ranges from 1-21 based on its luminance (the intensity of light emitted). The greater the difference is between the two numbers in the ratio, the greater the difference in relative luminance between the colors. As the absolute bare minimum, the [W3C](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) Web Content Accessibility Guidelines (WCAG) recommends the following contrast ratios for body and image text for an AA rating: + +- Large text (at 14 pt bold/18 pt regular and up) and graphics: 3:1 against the background +- Small text: 4.5:1 against the background + +The issue with color contrast can be complicated as some people with cognitive disabilities are sensitive to light and could experience eye fatigue or feel distracted when looking at high contrast text and images, such as black text on a white background at a 21:1 contrast ratio. A good middle ground is to aim for a 7:1 contrast ratio, the AAA rating for WCAG. + +These lines of text follow the color contrast ratio recommendations and are legible against their background colors. + +
+ +![“The woodman set to work at once” text on two lines](images/accessibility_6.svg) + +
+
The black text on the white background and the white text on the black background meet color contrast standards.
+ +When picking up several colors for background, text, and other components, consider how readers perceive your choice of colors in addition to color contrast. + +There are several different types of color blindness (also known as color vision deficiency). According to the British Colour Blind Awareness Organisation, there are an estimated 300 million people worldwide with color blindness. About 8% of men and 0.5% of women have red-green color blindness. The most common type is red-green color blindness, which causes difficulty recognizing shades of red, green, and yellow. [The ability to recognize and differentiate colors also deteriorates with age](https://www.webmd.com/healthy-aging/news/20140318/color-vision-tends-to-fade-with-age-study#1), even in those people who were not born with color blindness. Blue and yellow become increasingly difficult for most individuals to decipher as their eyes age. + +For more info on color and contrast and color blindness, visit [Material Design Accessibility Color Contrast Guidelines](https://m3.material.io/foundations/accessible-design/patterns), [Material Design Color and Accessibility](https://m3.material.io/styles/color/the-color-system/accessibility), [The Perception of Color](https://www.britannica.com/science/color/The-perception-of-colour), and [Colour Blindness Awareness](https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/). To see what different types of color blindness look like, try out the [Chromatic Vision Simulator application](https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=en_US&gl=US). To see if your choice of background and text colors meet color contrast guidelines, try the free [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) tool. + +Note that the concept of contrast discussed here is different to contrast in type design, which addresses the differences between the thickest and thinnest parts of strokes in a letterform. + +## Text size and spacing + +Make sure your text isn’t too small. The exact dimensions of font sizes can vary depending on the unit used, the size of the viewport (if units are relative), and the pixel density of the device’s screen, but a safe bet would be to use 16px or 1em or 1rem as the smallest size for body type. + +Employ generous line heights (although not so generous as to detach lines from each other), and don’t allow measures (line lengths) to become too wide. + +Mobile devices and browsers include features to allow users to adjust their font size system-wide. To enable system font size in an Android app, mark text and their associated containers to be measured in scalable pixels (sp). For iOS, Dynamic Type is the accessibility feature that enables app to adjust font size. Be sure to not hard set the line heights when coding text as dynamic and adjustable. Otherwise, a reader may choose a large text size but be unable to read it because the lines of content overlap. + +
+ +![Two columns of text ](images/accessibility_7.svg) + +
+
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.
+ +Ensure that there is sufficient space for large fonts and other writing systems. + +Make sure that there is enough [spacing](/glossary/tracking_letter_spacing) between characters. Fonts have different widths. If a font looks too tightly packed, letters may appear to crowd or overlap one another resulting in letter confusion. Crowding occurs when too many letters are too close to each other. Some words may become too hard to read. Words may blur or seem to disappear. Increasing spacing for letters, words and lines may help to reduce, or alleviate, these effects. + +When selecting a font on Google Fonts, go to the Type Tester to try out different widths. See which one is most visually comfortable, reduces any sensation of eyestrain, and increases your overall reading satisfaction. + +
+ +![Three text samples in text area, variable axes controls](images/accessibility_8.svg) + +
+
Type Tester showing text with variable axes for weight, width, slant and ascender height.
+ +There are various resources to learn about [text spacing](https://www.w3.org/TR/WCAG21/#text-spacing), [crowding](https://www.sciencedirect.com/science/article/pii/S0042698907005561), [line heights (for foreign languages)](/lesson/language_support_in_fonts), [choosing line height](https://www.youtube.com/watch?v=ponRmWSzpDg&t=42s), [hierarchy of type sizes, weights, line heights and spacing](https://m3.material.io/styles/typography/applying-type), [type scale and units](https://material.io/design/typography/the-type-system.html#type-scale), [Android text scaling](https://support.google.com/accessibility/android/answer/12159181?hl=en), and [iOS Typography guidelines](https://developer.apple.com/design/human-interface-guidelines/foundations/typography/). + +Read more about [visual acuity and text size](https://www.teachingvisuallyimpaired.com/print-comparisons.html) to learn about how those with visual impairments may need different text sizes. + +## Hyperlinks + +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.” +- 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.” + +## Non-text elements and text in images + +When designing content with images, it’s important to have captions and alt text for informative images. Decorative images that do not add information don’t need captions or alt text. Captions are the text that appear below an asset. They explain an asset’s contextual information–the who, what, when, and where. Both sighted and screen reader users rely on captions for descriptions of assets. Alt text describes what the image or video is showing. This information is important for people who can’t see the image or video. When an asset doesn’t load on a website, the alt text will appear for people to know what is missing. + +Learn about how to write alt text and captions in [Material Design’s Accessibility Basics](https://m3.material.io/foundations/accessible-design/accessibility-basics) (scroll to the “Writing” section). To learn about which images need captions, visit [Material Design’s From Design to Implementation](https://m3.material.io/foundations/accessible-design/design-to-implementation), the W3C [decorative](https://www.w3.org/WAI/tutorials/images/decorative/), [functional](https://www.w3.org/WAI/tutorials/images/functional/), and [informative](https://www.w3.org/WAI/tutorials/images/informative/) images articles. + +Online menus or price sheets that are images or PDF files of a restaurant menu or price sheet may be easy solutions for business owners. However, they can be difficult or impossible to read for people who use screen reader and text-to-speech software or for people squinting at the pixelated text on their phones. Users can’t do a text search in an image to find what they are looking for. If you’re designing a website for a business, take the menu or price sheet information and put it as regular text on the site rather than adding images of the price sheet or menu. Having the menu and price sheets as text also improves SEO. + +## Resources: + +A few resources to help understand fonts and their impact on readability in the cognitive space: + +- [British Dyslexia Association: A Dyslexia-friendly Style Guide](https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide) +- [Reading Well: Dyslexia Fonts](https://www.dyslexia-reading-well.com/dyslexia-font.html) +- [Hating Comic Sans is Ableist](https://theestablishment.co/hating-comic-sans-is-ableist-bc4a4de87093/index.html) +- [WebAIM: Customizable Text](https://www.w3.org/WAI/perspective-videos/customizable/) +- [APA Style, American Psychological Association: Accessible Typography](https://apastyle.apa.org/style-grammar-guidelines/paper-format/accessibility/typography) +- [FS Me: ‘The accessible type’](http://projectrising.in/2015/08/fs-me-the-accessable-type/) (a typeface co-designed with individuals with cognitive disabilities) +- [What’s in a Word? Font preferences](https://medium.com/the-readability-group/whats-in-a-word-53bcf217d5c1) +- [What makes a typeface accessible](https://medium.com/the-readability-group/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0) +- [Material Design accessibility guidelines](https://material.io/design/usability/accessibility.html) 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/lessons/introducing_accessibility_in_typography/images/accessibility_2.svg new file mode 100644 index 0000000000..484acc5f72 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_2.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/lessons/introducing_accessibility_in_typography/images/accessibility_3.svg new file mode 100644 index 0000000000..a9cc984e40 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_3.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/lessons/introducing_accessibility_in_typography/images/accessibility_4.svg new file mode 100644 index 0000000000..c49d054b7a --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_4.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/lessons/introducing_accessibility_in_typography/images/accessibility_5.svg new file mode 100644 index 0000000000..43ec3664d9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_5.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/lessons/introducing_accessibility_in_typography/images/accessibility_6.svg new file mode 100644 index 0000000000..dcc26c24ef --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_6.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/lessons/introducing_accessibility_in_typography/images/accessibility_7.svg new file mode 100644 index 0000000000..71ce93446b --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_7.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/lessons/introducing_accessibility_in_typography/images/accessibility_8.svg new file mode 100644 index 0000000000..f7f83ab917 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/accessibility_8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/thumbnail.svg b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/thumbnail.svg new file mode 100644 index 0000000000..6976dfe8f1 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/images/thumbnail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/lesson.textproto b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/lesson.textproto new file mode 100644 index 0000000000..450f50a692 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/lessons/introducing_accessibility_in_typography/lesson.textproto @@ -0,0 +1,9 @@ +name: "Introducing accessibility in typography" +authors: "Susanna Zaraysky" +reviewers: "Bonnie Shaver-Troup" +topics: "accessibility" +topics: "readability" +related_terms: "legibility" +related_terms: "readability" +prev_lessons: "how_type_influences_readability" +excerpt: "INSERT_EXCERPT" diff --git a/cc-by-sa/knowledge/modules/readability/module.textproto b/cc-by-sa/knowledge/modules/readability/module.textproto new file mode 100644 index 0000000000..c2f5044df3 --- /dev/null +++ b/cc-by-sa/knowledge/modules/readability/module.textproto @@ -0,0 +1,4 @@ +name: "Readability" +lessons: "how_type_influences_readability" +lessons: "introducing_accessibility_in_typography" +excerpt: "INSERT_EXCERPT" 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/adding_an_authentic_natural_touch_to_type/content.md new file mode 100644 index 0000000000..e12c8a4f95 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/content.md @@ -0,0 +1,107 @@ + +The vast majority of the time, [type](/glossary/type) should look like type. Reading a blog post, following instructions in a recipe book, paying attention to road signage—the uniformity and reliability of type is what helps readers understand [text](/glossary/text_copy). But there are some design scenarios, such as when we’re creating a logotype, a poster, or product packaging, where a more unique approach might be more appropriate. + +Consider a magazine cover, where the display [typography](/glossary/typography) might need to resemble [lettering](/glossary/lettering) or sign writing. Even the most attractive handwritten-style [typeface](/glossary/typeface) will lose its human touch if we see repeating [letterforms](/glossary/letterform). The typeface we’re using in this example, [Birthstone](https://fonts.google.com/specimen/Birthstone?query=Birthstone), is beautiful, but it’s a bit too rigid for our magazine cover. There’s a fair amount of repetition, which doesn’t make it look particularly exciting. + +
+ +![INSERT_ALT](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] + +
+
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) + +
+
INSERT_CAPTION
+ +Our text is now a bit of a mess, for several reasons: + +1. Some letterforms clash directly with adjacent glyphs. +2. Some letterforms have lead-ins and lead-outs that come from or go nowhere. +3. Some of the more elaborate [swashes](/glossary/swash_glyph) create undesirable amounts of negative space between the characters. +4. Some overlaps of strokes create unsightly dark spots, or distracting counters. In short, the result does not have the combination of consistency and originality that a skilled letterer would impart. + +To counter this, we need to choose [alternate](/glossary/alternates) [glyphs](/glossary/glyph) that work well together, both in terms of how they physically fit together and also how they resemble a hand-lettered approach. + +Here’s our finished example, which balances the fluidity of the human hand with the precision of type. We’re also employing some subtle spacing, [line-height](/glossary/line_height_leading), and font size changes here to get everything working really well together: + +
+ +![INSERT_ALT](images/authenticity_ex1_3.svg) + +
+
INSERT_CAPTION
+ +
+ +[INSERT illo of lockup in actual magazine cover context] + +
+
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) + +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) + +
+
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. + +Just look at how repeating [characters](/glossary/character)—or repeating sequences of characters—look when isolated: + +
+ +![INSERT_ALT](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. + +Here are the different versions of the T, S, and E characters we’re going to use, set in IM FELL English, [IM FELL DW Pica](https://fonts.google.com/specimen/IM+Fell+DW+Pica?query=im+fell), and [IM FELL Great Primer](https://fonts.google.com/specimen/IM+Fell+Great+Primer?query=im+fell): + +
+ +![INSERT_ALT](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. + +Here’s our final lockup: + +
+ +![INSERT_ALT](images/authenticity_ex2_4.svg) + +
+
INSERT_CAPTION
+ +
+ +[INSERT illo of lockup in actual poster context] + +
+
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/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_1.svg new file mode 100644 index 0000000000..3446ef751e --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_1.svg @@ -0,0 +1,3 @@ + + + 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/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_2.svg new file mode 100644 index 0000000000..a7ed7d863f --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_2.svg @@ -0,0 +1,3 @@ + + + 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/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_3.svg new file mode 100644 index 0000000000..bfa99dec08 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex1_3.svg @@ -0,0 +1,3 @@ + + + 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/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_1.svg new file mode 100644 index 0000000000..b6fe20da60 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_1.svg @@ -0,0 +1,3 @@ + + + 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/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_2.svg new file mode 100644 index 0000000000..67b805e3db --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_2.svg @@ -0,0 +1,8 @@ + + + + + + + + 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/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_3.svg new file mode 100644 index 0000000000..3c28dc9dbc --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_3.svg @@ -0,0 +1,3 @@ + + + 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/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_4.svg new file mode 100644 index 0000000000..4f0e826b40 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/authenticity_ex2_4.svg @@ -0,0 +1,3 @@ + + + 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/adding_an_authentic_natural_touch_to_type/images/thumbnail.svg new file mode 100644 index 0000000000..bfa99dec08 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/images/thumbnail.svg @@ -0,0 +1,3 @@ + + + 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/adding_an_authentic_natural_touch_to_type/lesson.textproto new file mode 100644 index 0000000000..587f202e69 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/adding_an_authentic_natural_touch_to_type/lesson.textproto @@ -0,0 +1,10 @@ +name: "Adding an authentic, natural touch to type" +authors: "Elliot Jay Stocks" +reviewers: "Laurence Penney" +reviewers: "Gerry Leonidas" +topics: "open_type" +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" diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/content.md b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/content.md new file mode 100644 index 0000000000..ea89ec3db2 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/content.md @@ -0,0 +1,310 @@ +## Do logos still matter? + +Ah yes, the perennial question (or argument depending on your point of view) that provides endless nourishment for the design Twitterati and design influencers. It’s a moot discussion, of course, because—surprise—logos matter, maybe now more so than ever. Now that I’m on my soapbox, I’d like to argue that case, and explain through my own creative process how a successful logo is created: From the initial sketch right through to delivery and application. Along the way, I’ll explain the creative decisions I make in order to achieve a result that inspires and hopefully resonates with the audience—effectively communicating the idea, product, or brand. + +As design, branding, and marketing have evolved since the mid 1950s—roughly the birth of modern corporate graphic design and marketing as we know it today—so too has the role of the logo, that stalwart of visual and brand identities. It was—and is—the first thing someone sees when connecting to a brand or product. It’s the signifier that (hopefully) pulls you deeper into the world of the brand that you’re pursuing. + +It used to be enough that you just placed the logo on whatever you wanted to use to market your brand and that was it. Your identity was defined by the logo and how that logo was placed on everything from letterheads to vehicles to coffee cups. But, as we all know, we now live in a world where a logo has become a much smaller part in a very big ecosystem that involves language and empathy, sound and motion, messaging and positioning. Having a logo alone isn’t enough anymore to connect an audience with your brand and message. BUT (big but), your logo is still that vital first impression. That little graphic that people see and associate with your brand. The swoosh, the apple, the G, the camera, the bird, the music note—they all immediately conjure up images of what those brands mean to you, beyond the actual logo. If you get your branding right, your logo will become a mark of quality, of connection, of belonging—and people will want to own a part of it. + +And now, with everyone living on their devices, the logo has found more relevance than ever, becoming the literal gateway into your digital world. + +However we—and the way we consume content and interact with brands—change, one thing will remain constant: We all need symbols and marks that represent the things that surround us. Whether they were carved on stone tablets or an icon on your phone’s home screen, the need for a visual shorthand that communicates ideas and messages is here to stay. + +## What’s in a logo? A logo, a logomark, and a logotype walk into a bar... + +Before we get going, a quick reminder on the ways to correctly describe logos: A logo can come in various shapes, components, and sizes. When we say *logo*, we’re usually talking about a unique combination of elements—primarily type and graphics—that together create a unique and recognisable design, for example Target, AirBnB, Instagram, etc. + +A *logomark* is the specific graphic element, symbol, or icon (e.g. the Nike Swoosh, or the Apple, er... apple) that represents the company or brand. A *logotype* (also known as a wordmark) is a specific typographic design of the naming. Sometimes it can be as simple as [choosing the right typeface](/lesson/a_checklist_for_choosing_type) and writing it out, but usually you’ll spend time customizing the letterforms to create something unique and ownable. The Nike logo is a great example of that. + +When you’re designing a logo for a company, more often than not you’ll end up creating assets that consist of both a logomark and a logotype: A strong graphic symbol paired with a bespoke wordmark that really represents all the qualities of the brand. But something interesting has been happening the last decade or so: Logos need to be infinitely flexible. + +It used to be enough to ask yourself *“Can it fax?”* If your design survived the low quality transmission of the faxing process and came out legible on the other side, you passed. Today, however, your logo needs to work as an (app) [icon](/glossary/icon_symbol), on responsive websites, on TV, on billboards, T-shirts, tote bags, and Twitch avatars, just to name a few applications—resulting in an emphasis on the logomark as a vital part of any visual identity toolkit. Gone are the days where your logo is only presented in one static lockup across every single application. + +Today, a successful logo is one that can be pulled apart into its single components and reconfigured in different ways without ever losing its essence and character. The multicolored Google logo reduces into a G icon on your phone, or when it’s paired with another part of the wider Google brand ecosystem. It can move and bounce and rotate, and it informs a much bigger identity system. In the heading of this page, for example, the logo is small and single-color. And with the brand’s colors applied to a new Google Fonts icon, we never lose track that it’s *Google* wherever you interact with that logo—whether it’s on your phone, in a TV ad, across a billboard, or even that little G on a Google Home device—the experience of connecting with the brand and a logo that moves from logomark to logotype is seamless. + +And with all this in mind, let’s put everything into practice and design a logotype. + +## From type to logotype! + +For our evergreen subject matter, we’ll tackle something future-facing that will, hopefully, stay relevant for a long time: A moon mission! I admit I’m a bit of a sci-fi and space geek, and with the recent developments in the American Space Program, it looks like we actually might send people back to the moon in the next few years—so lets do a bit of speculative design to riff on that. Welcome to **LUNA 2035**, the next crewed mission to the moon! + +So, I said, I’ll design a logotype. However, since a logomark is nowadays so vital to a successful and versatile logo, let’s make that a part of the final project, too. + +## The process + +As with a real client project, I want to set us a brief, mainly to build guardrails around the work I’m intending to do, and clarify exactly what I’m aiming to achieve at the end of this mini project. + +The goal is to design a logo for **LUNA 2035**, a fictional, future, crewed moon mission. The logo will need to be future-forward and evocative of human progress; the endeavor of humankind exploring space; a little bit of that space-age optimism blended through a modern lens. (Note: Because this is obviously a fictitious mission, I’m refraining from using any official NASA or JPL logos). The end result will be the **LUNA 2035** logo, with supporting typographic and presentation treatments. + +With the brief set, I begin the creation process by doodling and sketching concepts on paper. I find this is a quick, intuitive, and fluid way to instigate, refine and define ideas, rather than dive into digital design straight away. + +
+ +![Sketches of the word “LUNA” in all caps.](images/01_exploration.svg) + +
+ +As I’m sketching, I also think of which typefaces I might use for the logo. (Quick reminder: A typeface is the distinct design of a family of related fonts, e.g. Roboto. A specific weight and style within the family is a font, i.e. Roboto Bold). + +Choosing the right typeface is an art in and of itself, and can make or break your design and how it communicates with your intended audience. (If you want to get deeper into this subject I recommend you read [“A checklist for choosing type.”](/lesson/a_checklist_for_choosing_type)) + +For this project, it can be easy to get sidetracked into pastiche sci-fi design—the book [Typeset In The Future](https://typesetinthefuture.com/) is a wonderful treasure trove of Sci-Fi typography—which is what I want to avoid. Even though this is all speculative, I want the design to have verisimilitude (the apperance of being real). + +## Designing the logo + +With any project of this kind, I will always start with pen and paper sketching. The speed at which you can dot ideas on a page beats any app by miles. It just allows you to let ideas (good ones and bad ones) flow freely and get to a result very quickly. In my own practice, I’ve had logo designs approved based purely on a sketch. More famous examples are Paula Sher’s [Citi](https://nedwin.medium.com/the-1-5m-napkin-abd2702927d0) sketch and Trevor Key’s napkin doodle of what would become the [Virgin logo](https://static1.squarespace.com/static/62582f26084d6a5b79ee56c4/t/6274f909e028ed2b08247531/1651833098685/The+Virgin+logo+story.pdf). + +When I’m sketching, I’m aiming for a few things: +- An iconic, minimal mark (icon) that I can use as a graphic device with the wordmark, and that allows me to play with different lockups. +- Clean, geometric shapes. Maybe I can replace certain letters in **LUNA** with a graphic shape? +- Modernity: I want a simple, clean and timeless look. + +
+ +![Sketches of the word “LUNA” in all caps, with circles representing the earth and moon within the word, connected with a line.](images/02_schematic.svg) + +
+ +As you can see, most of the sketches are mainly a variation of writing the word **LUNA** in different ways, editing shapes, customizing letters, etc. I want to start from an existing typeface and edit that, so I’m consciously avoiding creating “out there” designs (see also my point about verisimilitude). + +
+ +![A sketch of the word “LUNA” connecting the letters U and N into one shape.](images/03_ligature.svg) + +
+ +As I’m sketching I’m also considering potential stylistic treatments such as creating a ligature within the name. I also briefly consider creating a holding shape that can encapsulate the logo—especially relevant when you think about mission patches—but it doesn’t go deeper than a cursory sketch idea. + +
+ +![A sketch of the word “LUNA” within a lozenge shaped graphic.](images/04_holdingdevice.svg) + +
+ +Another idea involves redrawing all letters at an angle pointing upwards—also creating a symmetry with the “A” (but I quickly disregard this idea because it looks too agressive). + +
+ +![A sketch of the word “LUNA” drawn in geometric way, with all letters at an upward angle.](images/05_angular.svg) + +
+ +Once I feel I’m getting to a conceptual place I like, I begin to translate my sketches into vectors. + +
+ +![A final sketch showing the word “LUNA” underlined with dots nestled within the U and A.](images/06_refining.svg) + +
+ +
+ +![A sketch of the “A” in a circle.](images/07_avatar.svg) + +
+ +My go-to tool for this is Adobe Illustrator (sometimes in combination with the Adobe Capture app on my iPhone to photograph and convert sketches into SVG files that I can import into Illustrator). If you’re not using Adobe Illustrator, there are many other applications like Affinity Designer, Figma, or Sketch that are great tools for this part of the design process. + +Now that I’m confident that I have a good set of sketched concepts, I start to edit down the list of typefaces I’ve been researching since I began the project. My initial selection yields a few interesting choices: [Rubik Mono One](https://fonts.google.com/specimen/Rubik+Mono+One/tester?query=Rubik) (bold and chunky—interesting, but perhaps too stylised), [Goldman](https://fonts.google.com/specimen/Goldman/tester?category=Display,Monospace&preview.text=LUNA%20MISSION&preview.text_type=custom) (reminds me of a modern interpretation of the Mid-Century [sci-fi classic](https://typesetinthefuture.com/2014/11/29/fontspots-eurostile/) [Eurostile](https://en.wikipedia.org/wiki/Eurostile)), and [Poppins](https://fonts.google.com/specimen/Poppins?query=Poppins&category=Sans+Serif&preview.text=LUNA%20MISSION&preview.text_type=custom) (a clean and geometric sans-serif typeface that’s versatile and robust). **[TO-DO: The text mentions Poppins, but the image uses Space Mono. Better to omit the text?]** + +
+ +![The text “LUNA 2035 MISSION 01” typeset in different contempirary fonts.](images/08_typetest.svg) + +
+ +I think it’s key to start looking at potential typefaces throughout the span of the creative process, rather than add it on after you’ve made a few sketches. Your design and type choices need to work in tandem. + +One thing I know for sure is I want to use a secondary [monospaced](/glossary/monospaced) typeface for things like potentially displaying data and stats (hey, it’s a moon mission). I love [Space Mono](https://fonts.google.com/specimen/Space+Mono?category=Display,Monospace&preview.text=LUNA%20MISSION&preview.text_type=custom) and would instinctively go for that workhorse. But **[Azeret Mono](https://fonts.google.com/specimen/Azeret+Mono/tester?category=Display,Monospace&preview.text=LUNA%20MISSION&preview.text_type=custom)** has some lovely unexpected qualities that remind me of modern interpretations of typefaces like [OCR-B](https://en.wikipedia.org/wiki/OCR-B) and [Courier](https://en.wikipedia.org/wiki/Courier_(typeface))—which lean very close to the fonts NASA used. For inspiration, you can see the [Apollo 11 Flight Plan](https://www.nasa.gov/specials/apollo50th/pdf/a11final-fltpln.pdf), which uses [Futura](https://en.wikipedia.org/wiki/Futura_(typeface)) and what looks like a monospaced version of [Bell Gothic](https://en.wikipedia.org/wiki/Bell_Gothic) (a popular typeface designed specifically for maximum legibility of dense, small copy). + +
+ +![A text sample of two fonts, one bold sans-serif, the other monospaced.](images/09_typefaces.svg) + +
+ +Adapting the sketches into digital designs—and aiming for the modern, timeless look I set out to achieve—I choose **[Inter Tight](https://fonts.google.com/specimen/Inter+Tight?query=inter&preview.text=LUNA%20MISSION%2001%2FONE&preview.text_type=custom)** as my primary typeface for the **LUNA** wordmark for a few reasons. Firstly, the aforementioned timelessness. Looking at how NASA uses Helvetica (especially since the much revered [“Worm” design by Danne & Blackburn](https://www.creativereview.co.uk/nasa-worm-logo/)), I want to stay close, but look at a more contemporary iteration, one that also works great on-screen. Inter ticks all those boxes, but I feel Inter Tight adds a little extra character to the way text is typeset that strikes a perfect balance between what’s past and what’s tomorrow. And, and importantly, Azeret Mono [pairs](/lesson/pairing_typefaces) really nicely with it. + +
+ +![The text “LUNA 2035” and “Mission 01” set in different font weights, from bold to thin.](images/10_fontweights.svg) + +
+ +Sometimes typeface choices really come down to “does it evoke the right feeling?” And even the basic geometry of an open or two-storey “a” can make all the difference in how it evokes the brand or project it represents. + +
+ +![Example of “LUNA 2035” set in a bold font, and “MISSION 01” in a monospaced font.](images/11_fontchoices.svg) + +
+ +With my typeface choices made, I can now work at speed, creating iterations of the **LUNA** and **LUNA MISSION** lockups. As you see, I’ve subtly tweaked the letterforms of the “U” and “A” in **LUNA** to make them look slightly more like geometric shapes. I’ve also removed the crossbar in the “A”. It feels like an appropriate nod to NASA’s Worm logo) and want to integrate two dots that symbolise the relationship between Earth and the Moon—reflecting the history and significance of the event inspired by the [1967 Apollo Mission Flight Plan chart](https://moon.nasa.gov/resources/348/apollo-mission-flight-plan-1967/). + +
+ +![Image showing how the “U” and “A” in “LUNA” are customised to be more geometric.](images/12_customisation.svg) + +
+ +
+ +![Image showing the geometric construction of the “LUNA” wordmark.](images/13_construction.svg) + +
+ +My original idea is to create an updated idea of that graphic and construct a logo where the dots are—as far as that’s possible—accurately scaled and placed to indicate the distance between the two. But, as I start to translate my sketches into vectors it quickly becomes obvious that the visual balance and weight is off. It could work by inventing a completely new “A” shape, but that would defeat the purpose of this exercise, and I want to keep the geometry of the uppercase “A”. + +
+ +![Image showing evolution from sketch to design.](images/14_earthmoon.svg) + +
+ +Similarly, the ligature idea ends up going nowhere—it breaks the visual balance of the word, and there’s really no strong conceptual reason to justify having a ligature there. Sometimes a sketch can look great and evolve into a strong design, but in this case the sketch should stay just that. + +
+ +![Image showing evolution of ligature sketch to design.](images/15_ligature.svg) + +
+ +But this gives me another idea: instead of placing the “Earth–Moon” dots apart, they can be one element—an abstract representation of the Moon passing in front of the Earth. + +
+ +![Image showing the Earth and Moon icon placed in the “U” and “A” of the “LUNA” logotype.](images/16_logotype.svg) + +
+ +Initially I nestle the element within the “U”, and within the “A” as a replacement of the crossbar I removed earlier. The “A” with the dots forms a striking mark, especially with the thick horizontal bar I’ve incorporated into the design from my sketches—and it creates a strong rocket motif. + +
+ +![Image of two circles partially overlapping showing the Moon passing in front of the Earth.](images/17_icon.svg) + +
+ +Now that I have a strong icon, I decide that the best solution is to integrate it into the “A”, rather than the “U”: Thematically, it makes sense for the aforementioned reasons (rocket motif, upwards motion, strong silhouette)—and the full logo can be reduced to the “A” mark, giving me a range of design options for the logo lockups, and applications where I’ll need a more compact logo. + +Having iterated the designs I arrive at the final results of the logo and logotype in the various lockups. + +## The logo + +
+ +![The final “LUNA” logotype, with the Earth & Moon icon within the “A”.](images/18_luna.svg) + +
+ +The final result is a contemporary and (hopefully) timeless **LUNA 2035** logo that can be used and adapted across a variety of touchpoints—from the side of a launch vehicle to the Instagram avatar of the mission’s social channels; from apparel and broadcast graphics. + +
+ +![Image showing horizontal lockups of “LUNA Mission 01—2035” logo.](images/19_horizontal.svg) + +
+ +
+ +![Image showing vertical lockups of “LUNA Mission 01—2035” logo.](images/20_vertical.svg) + +
+ +Keeping flexibility of usage in mind I create both horizontal and vertical logo lockups—with and without the supporting “Mission 01—2035” copy. This gives me—and the end client—a good range of assets that all carry the same visual design consistency across formats. + +
+ +![Image of the “LUNA” “A” mark.](images/21_A.svg) + +
+ +
+ +![Image showing the LUNA logotype and logomark in different sizes.](images/22_scaling.svg) + +
+ +While the horizontal logo lockup can be seen as the “master logo”—it contains the full message and all design elements are represented in the unit—the vertical lockup and stand-alone “A” mark are more *iconic* and—as the following examples show—more appropriate in the context of this little project: Space exploration, where you’ll see logos live on everything from buildings, uniforms, utilities and patches (even though the “A” scales down perfectly to a social avatar). + +
+ +![Image of the vertical LUNA logo set in roundels.](images/23_roundels.svg) + +
+ +
+ +![The “LUNA” “A” mark in a circle and a square.](images/24_avatar.svg) + +
+ +I’ve created a set of presentation hero graphics to show how the logo can be brought to life as a visual asset that represents the initiative and hopefully inspires the audience. Most of the time this is what the public at large will see, so it needs to have impact and make an immediate connection. + +
+ +![The “LUNA” vertical logo superimposed over an image of the Moon.](images/25_hero.jpg) + +
+ +
+ +![The “LUNA” horizontal mark repeated in bands across an image of the Moon.](images/26_overlay.jpg) + +
+ +
+ +![The “LUNA” vertical logo set in a circle superimposed over an image of the Moon’s horizon.](images/27_moonmission.jpg) + +
+ +The fun here, of course, is to look at potential use cases, and imagine how the **LUNA 2035** logo—and design language—would be applied in real-world scenarios that go beyond brand expression graphics. + +
+ +![Image of an office building showing the “LUNA Mission 01–2035” signage.](images/28_environmental.jpg) + +
+ +
+ +![Image of the “LUNA” logo and graphics on the walls of an industrial looking building.](images/29_supergraphics.jpg) + +
+ +
+ +![The “LUNA” logo and logomark embroidered on a black snapback cap.](images/30_apparel.jpg) + +
+ +
+ +![ The vertical “LUNA” logo on a white safety helmet.](images/31_gear.jpg) + +
+ +
+ +![The “LUNA” logo and graphics applied to silver foiled space food packets.](images/32_food.jpg) + +
+ +
+ +![Image showing a detail of the typography of the “LUNA” identity.](images/33_typography.jpg) + +
+ +## Parting thoughts + +I used to firmly believe that all logos (and especially the ones I designed) need to be created from bespoke typefaces, rather than use something that exists already. There are many arguments for that approach, but what I’ve found over the years is that *how* you use type to create something unique is more important than starting with a unique typeface. If you look around, you’ll see there are 1000s of logos that all use the same (or very similar) typefaces. And yet, each logo is unique to its brand thanks to unique design details and the context they’re placed in. + +
+ +![The “LUNA” logo embroidered on a round space mission patch superimposed on an image of a space suit.](images/34_patch.jpg) + +
+ +Ultimately, it’s about knowing what’s right for any given project. You can achieve great solutions by the smallest interventions, and often using the tools and ingredients that are already out there will give you the perfect starting point to build something exciting that resonates with everyone. diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/01_exploration.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/01_exploration.svg new file mode 100644 index 0000000000..bfffd51fca --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/01_exploration.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/02_schematic.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/02_schematic.svg new file mode 100644 index 0000000000..05613e1675 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/02_schematic.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/03_ligature.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/03_ligature.svg new file mode 100644 index 0000000000..8981297f80 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/03_ligature.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/04_holdingdevice.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/04_holdingdevice.svg new file mode 100644 index 0000000000..839fd73e21 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/04_holdingdevice.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/05_angular.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/05_angular.svg new file mode 100644 index 0000000000..d259278c61 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/05_angular.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/06_refining.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/06_refining.svg new file mode 100644 index 0000000000..04feb13a0a --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/06_refining.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/07_avatar.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/07_avatar.svg new file mode 100644 index 0000000000..7f3858be03 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/07_avatar.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/08_typetest.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/08_typetest.svg new file mode 100644 index 0000000000..3b06ee6c06 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/08_typetest.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/09_typefaces.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/09_typefaces.svg new file mode 100644 index 0000000000..c9db8aa686 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/09_typefaces.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/10_fontweights.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/10_fontweights.svg new file mode 100644 index 0000000000..d763f82bbd --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/10_fontweights.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/11_fontchoices.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/11_fontchoices.svg new file mode 100644 index 0000000000..31e0076a11 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/11_fontchoices.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/12_customisation.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/12_customisation.svg new file mode 100644 index 0000000000..433cb7f481 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/12_customisation.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/13_construction.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/13_construction.svg new file mode 100644 index 0000000000..be3e611798 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/13_construction.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/14_earthmoon.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/14_earthmoon.svg new file mode 100644 index 0000000000..af878b1352 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/14_earthmoon.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/15_ligature.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/15_ligature.svg new file mode 100644 index 0000000000..75d1c477cb --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/15_ligature.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/16_logotype.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/16_logotype.svg new file mode 100644 index 0000000000..de65ae5e52 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/16_logotype.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/17_icon.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/17_icon.svg new file mode 100644 index 0000000000..824b6fb3ba --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/17_icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/18_luna.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/18_luna.svg new file mode 100644 index 0000000000..beef2666f2 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/18_luna.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/19_horizontal.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/19_horizontal.svg new file mode 100644 index 0000000000..3540466e88 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/19_horizontal.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/20_vertical.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/20_vertical.svg new file mode 100644 index 0000000000..9424179682 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/20_vertical.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/21_A.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/21_A.svg new file mode 100644 index 0000000000..e2cb97f0ac --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/21_A.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/22_scaling.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/22_scaling.svg new file mode 100644 index 0000000000..f72f61fae9 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/22_scaling.svg @@ -0,0 +1,140 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/23_roundels.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/23_roundels.svg new file mode 100644 index 0000000000..1c3a83788e --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/23_roundels.svg @@ -0,0 +1,140 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/24_avatar.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/24_avatar.svg new file mode 100644 index 0000000000..18cac3f46a --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/24_avatar.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/25_hero.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/25_hero.jpg new file mode 100644 index 0000000000..71afe56456 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/25_hero.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/26_overlay.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/26_overlay.jpg new file mode 100644 index 0000000000..b5a0dfef5a Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/26_overlay.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/27_moonmission.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/27_moonmission.jpg new file mode 100644 index 0000000000..4790f7c530 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/27_moonmission.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/28_environmental.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/28_environmental.jpg new file mode 100644 index 0000000000..3aef675b2a Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/28_environmental.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/29_supergraphics.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/29_supergraphics.jpg new file mode 100644 index 0000000000..4e71d8d2d1 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/29_supergraphics.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/30_apparel.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/30_apparel.jpg new file mode 100644 index 0000000000..5e2fe93388 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/30_apparel.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/31_gear.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/31_gear.jpg new file mode 100644 index 0000000000..233aa0dffb Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/31_gear.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/32_food.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/32_food.jpg new file mode 100644 index 0000000000..85428f10b6 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/32_food.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/33_typography.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/33_typography.jpg new file mode 100644 index 0000000000..749c186354 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/33_typography.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/34_patch.jpg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/34_patch.jpg new file mode 100644 index 0000000000..650c37dc44 Binary files /dev/null and b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/34_patch.jpg differ diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/thumbnail.svg b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/thumbnail.svg new file mode 100644 index 0000000000..433cb7f481 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/images/thumbnail.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..77c6dea885 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/from_type_to_logotype/lesson.textproto @@ -0,0 +1,11 @@ +name: "From type to logotype" +authors: "Tom Muller" +reviewers: "Emma Price" +topics: "branding" +related_terms: "bespoke_custom_type" +related_terms: "icon_symbol" +related_terms: "sans_serif" +related_terms: "typeface" +related_terms: "monospaced" +next_lessons: "vertical_spacing_and_line_height_in_design_systems" +excerpt: "INSERT_EXCERPT" 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 5f8f8d9e44..f3fa2cd0de 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,6 +3,7 @@ authors: "Elliot Jay Stocks" reviewers: "Laurence Penney" reviewers: "Thomas Phinney" topics: "variable_fonts" +prev_lessons: "adding_an_authentic_natural_touch_to_type" 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/content.md b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/content.md new file mode 100644 index 0000000000..a03c50d28e --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/content.md @@ -0,0 +1,111 @@ +Digital designers will typically spend hours meticulously fine-tuning their components and pages to look pixel perfect with consistent padding, a beautiful and cohesive color system, and most importantly the [fonts](/glossary/font) we choose to display our content. But as we all know, designs and trends change—and our systems need to update to match these. A proper design system will scale easily with colors and spacing variables, but when it comes to switching out our fonts, all that hard work goes to waste and we need to start from scratch again. This all comes down to inconsistent vertical spacing from [typeface](/glossary/typeface) to typeface, and how the platforms we’re designing for render text. + +## Let’s start with some history + +In traditional typography, back when things were a bit more physical, typesetters had to space their text using blocks of metal. To make the text more readable, they would add pieces of lead in between lines to space them out more. These were added directly below any [letters](/glossary/letters), and this is why we have the term [“leading”](/glossary/line_height_leading) in modern typography applications. CSS, Microsoft Word, and Google Docs use the alternate terms [“line-height”](/glossary/line_height_leading) and “line-spacing” to mean the vertical distance between lines, including the leading. + +Because physical blocks were used, there wasn’t much room for manipulation of the letters, and the blocks that were used to encase the letters would accommodate the maximum letter height for that typeface. With digital typography, type designers have a lot more freedom to place the letters anywhere they want, even straying outside of the virtual block that controls their vertical spacing. + +
+ +![Three fonts with their default bounding boxes. One cursive font that sits high, one block font that also sits high, and a basic sans-serif that sits central.](images/default-line-heights.svg) + +
+
Positioning of letters from different typefaces within their default bounding box heights. All of the examples are set to the same font size.
+ +### So what’s the big deal? + +What all of this means in practice is a lot of discrepancies between different fonts. The one rule nearly all fonts (in [Latin](/glossary/latin) type) follow is to have every [glyph](/glossary/glyph) sitting on the ‘[baseline](/glossary/baseline).’ There are no rules about where the [cap-height](/glossary/cap_height), [x-height](/glossary/x_height) or [descenders](/glossary/ascenders_descenders) should be drawn in relation to the line-height, so you get inconsistencies that make vertical alignment tricky. This vertical alignment is necessary to create consistent, scalable designs, but aligning type perfectly can be time-consuming, especially when mixing typefaces. + +
+ +![Three examples of vertical alignment with fonts. Buttons with a non-centered and centered font, alignment of different font sizes to the baseline, and spacing within a simple card component.](images/examples.svg) + +
+
An overview of various problems that arise from vertical alignment within digital typography.
+ +## Rendering text on different platforms + +To complicate matters further, different digital platforms render text in different ways when dealing with line-height. With the introduction of CSS1 in 1996, text was rendered centered within the total line-height. That is, "half-leading“ was added above and below the 100% line-height to add up to the total line-height. + +
+ +![Four lines of text, with the default line height highlighted, and 2 half-leading highlights added above and below the default line height.](images/web-render.svg) + +
+
The web renders text with half-leading above and below the 100% line-height for a font.
+ +iOS platforms followed suit with same method, and neither the web nor iOS have changed the way they render text to this day. Android devices, however, mostly render a paragraph clipped to the default line-height for the first and last line. Total line-height will still be respected via the `lineSpacingMultiplier` property, so every line of text still has the correct spacing from baseline to baseline. + +
+ +![Two text boxes side-by-side highlighting the clipped text box rendering found on Android platforms.](images/native-render.svg) + +
+ +
iOS and Android render text nodes slightly differently, causing confusion within design tools.
+ +To add to this, web developers don’t (yet) have access to the inner metrics of a typeface when it’s loaded. This means they can’t know where the [glyphs](/glossary/glyph) are positioned, in order to align elements to any diacritics, cap-height, x-height, or default line-height. In theory, this shouldn’t be a problem for native platforms, as the files are pre-loaded within an application. In fact, both iOS and Android platforms have the ability to create padding or space according to the baseline of a font, but this is rarely used. On top of all of this, we must also remember that all devices, browsers, and platforms will render in slightly different ways across the board, and so no two implementations of a design are likely to be the same. + +Within common design tools such as Sketch or Figma, text will be rendered in the same way as web and iOS. This is to help cover the majority of bases with text rendering, to enable consistent handover between design and engineering. Unfortunately, no design tools today yet show the default line-height clipping for a paragraph or line of text, so it’s more of a manual process to figure it out. Thankfully, Marcin Wichary created [this handy tool](https://aresluna.org/line-height-playground/) to visualize the differences in platform text rendering. + +## So what can we do about all this? + +### Manual spacing + +To ensure consistent design across your applications, the most common method would be to just space everything manually. You can look into all of your components and designs, and ensure that any text node is spaced to the exact pixel. It removes all the guesswork out of the equation, but becomes a very manual process. Misaligning spacing becomes inevitable with all the work needed, and there is no way to truly systemise your process. Finally, it becomes particularly tricky when you need to update your typeface to a new one, and you have to go through the whole process again. + +
+ +![A simple card component with equal vertical spacing, shown with visual spacing values, and text-box spacing values.](images/manual-spacing.svg) + +
+
Vertical rhythm by aligning to cap-height and baseline becomes a very manual, and non-systematic process.
+ +### Equally spaced font files + +One way to combat a lot of the issues with vertical spacing is to ensure you choose a typeface that has equal spacing above and below the [characters](/glossary/character). A lot of fonts won’t be spaced centrally within their default line height, and the larger the font size, the more this becomes obvious. Choosing one that is exactly centered within its default line height means that no matter the line height, it will always be centered, making it much easier to create a vertical [rhythm](/glossary/rhythm) within your text. + +Choosing such a font can be difficult, but luckily most design tools will show the bounding box of any text layer. Some fonts are obviously misaligned from the start, but others will need a little more investigation. Simply reduce the line-height of any text layer bit by bit until the bounding box matches your [glyph](/glossary/glyph) height. A general rule of thumb for a vertically centered font is to align to the cap-height and baseline. This will ensure your text looks centered to other elements within your designs. Read more about the idea of “equal” metrics in [this twitter thread by Roman Shamin](https://twitter.com/romanshamin_en/status/1562801657691672576). + +
+ +![Two example fonts with their default line height and vertical centering highlighted. One font is rendered high within it's line-height, and the other is perfectly centered.](images/equal-spacing.svg) + +
+
An example of how letters can and can’t be aligned to the true center of a default line-height.
+ +There are two main benefits to choosing a font like this: first, centering the text vertically to other objects, and second, ensuring a consistent space above and below a text node. It’s common to include text next to an icon or shape in plenty of components, and so no matter the line-height used, the text can always be easily aligned to the same center line. With equal spacing there is also a more reliable space between elements when changing font size. This makes vertical rhythm within a page or component—and aligning to a baseline grid—much more achievable. + +
+ +![Examples of two fonts, one with equal metrics, and the other without. One example is a button, the other example is text with an icon.](images/equal-spacing-benefits.svg) + +
+
The benefits of choosing a font that is equally centered to its line-height.
+ +### Upcoming CSS feature, leading-trim + +For the web, a CSS feature called [leading-trim](https://www.w3.org/TR/css-inline-3/#propdef-leading-trim) is currently in proposal that actually trims a text node to pre-defined properties. You can choose from cap-height, x-height, baseline, [descender](/glossary/ascenders_descenders), or default line-height to clip the top and bottom of the node to these values, much like you can on Android. This will help ensure consistent spacing and even introduce the ability for better baseline alignment within the web. For more information, please read [“Leading-Trim: The Future of Digital Typesetting”](https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202) by Ethan Wang. + +
+ +![A line of text with it's line-height highlighted, and a line denoting where leading-trim would trim to the cap-height and baseline.](images/equal-spacing-benefits-1.svg) + +
+
How leading-trim can cut a text node on the web, to allow for better cap-height and baseline positioning.
+ +### Be specific with calculations + +Finally, you could even calculate the clipping needed to apply to any text node using CSS variables. The ratio of cap-height or baseline to the bounding box will always be the same for a single font, despite the font size, so if you know the ratio, you can calculate how much you need to clip the node above and below. Nathan Curtis alludes to this idea and links to a CSS mixin in his article [“Space in Design Systems.”](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62#:~:text=Solve%20Collisions%20like%20Line%20Height%20Systematically) + +
+ +![Two sizes of the same font with cap-height and baseline to line-height ratios highlighted to be the same for both sizes.](images/ratio.svg) + +
+
The ratio of cap-height and baseline to a line-height will always be the same no matter what text-size is used.
+ +## Takeaways + +There’s no denying it: Perfecting a vertical rhythm is by no means trivial, but by spending time on the details, scalability and a systematic type system will come. Use the tools and processes outlined within this article to help you create products and websites that have great vertical rhythm, and your customers will thank you for it. diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/default-line-heights.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/default-line-heights.svg new file mode 100644 index 0000000000..49e0e866c8 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/default-line-heights.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/equal-spacing-benefits-1.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/equal-spacing-benefits-1.svg new file mode 100644 index 0000000000..f173bf9230 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/equal-spacing-benefits-1.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/equal-spacing-benefits.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/equal-spacing-benefits.svg new file mode 100644 index 0000000000..561839f3b2 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/equal-spacing-benefits.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/equal-spacing.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/equal-spacing.svg new file mode 100644 index 0000000000..faad6566a5 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/equal-spacing.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/examples.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/examples.svg new file mode 100644 index 0000000000..261ebcd285 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/examples.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/manual-spacing.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/manual-spacing.svg new file mode 100644 index 0000000000..6c3c55cf4e --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/manual-spacing.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/native-render.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/native-render.svg new file mode 100644 index 0000000000..3ad8c409dc --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/native-render.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/ratio.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/ratio.svg new file mode 100644 index 0000000000..8ace3df749 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/ratio.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/thumbnail.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/thumbnail.svg new file mode 100644 index 0000000000..261ebcd285 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/thumbnail.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/web-render.svg b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/web-render.svg new file mode 100644 index 0000000000..53ffba114d --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/images/web-render.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..97a88621d1 --- /dev/null +++ b/cc-by-sa/knowledge/modules/using_type/lessons/vertical_spacing_and_line_height_in_design_systems/lesson.textproto @@ -0,0 +1,12 @@ +name: "Vertical spacing & line-height in design systems" +authors: "Sebastian Bailey" +reviewers: "Laurence Penney" +topics: "systems" +related_terms: "line_height_leading" +related_terms: "rhythm" +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" diff --git a/cc-by-sa/knowledge/modules/using_type/module.textproto b/cc-by-sa/knowledge/modules/using_type/module.textproto index b4cd7cf8f9..47db49a259 100644 --- a/cc-by-sa/knowledge/modules/using_type/module.textproto +++ b/cc-by-sa/knowledge/modules/using_type/module.textproto @@ -1,4 +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: "installing_and_managing_fonts" lessons: "language_support_in_fonts" lessons: "choosing_a_suitable_line_height" diff --git a/cc-by-sa/knowledge/topics/accessibility/topic.textproto b/cc-by-sa/knowledge/topics/accessibility/topic.textproto new file mode 100644 index 0000000000..9268fbf4c9 --- /dev/null +++ b/cc-by-sa/knowledge/topics/accessibility/topic.textproto @@ -0,0 +1 @@ +name: "Accessibility" diff --git a/cc-by-sa/knowledge/topics/branding/topic.textproto b/cc-by-sa/knowledge/topics/branding/topic.textproto new file mode 100644 index 0000000000..b26f81884a --- /dev/null +++ b/cc-by-sa/knowledge/topics/branding/topic.textproto @@ -0,0 +1 @@ +name: "Branding" diff --git a/cc-by-sa/knowledge/topics/cjk/topic.textproto b/cc-by-sa/knowledge/topics/cjk/topic.textproto new file mode 100644 index 0000000000..62469fe049 --- /dev/null +++ b/cc-by-sa/knowledge/topics/cjk/topic.textproto @@ -0,0 +1 @@ +name: "CJK" diff --git a/cc-by-sa/knowledge/topics/readability/topic.textproto b/cc-by-sa/knowledge/topics/readability/topic.textproto new file mode 100644 index 0000000000..4ae44e7c77 --- /dev/null +++ b/cc-by-sa/knowledge/topics/readability/topic.textproto @@ -0,0 +1 @@ +name: "Readability"