The [Google Fonts CSS v2 API](https://developers.google.com/fonts/docs/css2) defines the axis as:
| Default: | Min: | Max: | Step: |
-| --- | --- | --- | --- |
-| 100 | 0 | 1000 | 1
+| -------- | ---- | ---- | ----- |
+| 100 | 0 | 1000 | 1 |
Note that the default value is expected to differ per family, rather than be universally set for any implementation of this axis.
<figure>
+<figcaption>Note the two-dimensional appearance when the axis is set to 0 when using the <a href="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
</figure>
-<figcaption>Note the two-dimensional appearance when the axis is set to 0 when using the <a href="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
-The axis was first used in the [Nabla font](https://fonts.google.com/specimen/Nabla) [color font](/glossary/color_fonts), which uses isometric perspective to achieve its three-dimensional look. The extrusion depth, at its maximum setting, creates a deeper or thicker letterform. At its minimum setting, the letterform appears only two-dimensional.
\ No newline at end of file
+The axis was first used in the [Nabla font](https://fonts.google.com/specimen/Nabla) [color font](/glossary/color_fonts), which uses isometric perspective to achieve its three-dimensional look. The extrusion depth, at its maximum setting, creates a deeper or thicker letterform. At its minimum setting, the letterform appears only two-dimensional.
<figure>
+<figcaption>Note the total lack of an edge when the axis is set to 0 when using the <a href="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
</figure>
-<figcaption>Note the total lack of an edge when the axis is set to 0 when using the <a href="https://fonts.google.com/specimen/Nabla">Nabla</a> font.</figcaption>
-The axis was first used in the [Nabla font](https://fonts.google.com/specimen/Nabla) [color font](/glossary/color_fonts), which uses isometric perspective to achieve its three-dimensional look. The highlighted edge, at its maximum setting, creates greater contrast between the face of the letterform and its extrusion. And, like all components of a color font, can be recolored from its white default.
\ No newline at end of file
+The axis was first used in the [Nabla font](https://fonts.google.com/specimen/Nabla) [color font](/glossary/color_fonts), which uses isometric perspective to achieve its three-dimensional look. The highlighted edge, at its maximum setting, creates greater contrast between the face of the letterform and its extrusion. And, like all components of a color font, can be recolored from its white default.
Reading is what we do, while [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).
+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 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.
+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.
</figure>
-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.
+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.
This process is too complex for the goals of this article, but a wealth of academic literature is available if you're interested in learning more (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 three 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.
+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/designing/color-contrast), [Material Design Color System](https://m3.material.io/styles/color/system/overview), [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 three 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 in which combinations of letters, or characters, systematically represent certain sounds.
+Written language is a complex code in which 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.
## 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, 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.
+The heart of typography focuses on the reader’s interactions with the words as they are seen, 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.
<figure>
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.
+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.
<figure>
</figure>
-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).
+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.
+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.
<figure>
## 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.
+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.
<figure>
</figure>
-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.
+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.
## Motivation to read
-There are different motivations for why and how people read.
+There are different motivations for 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.
+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.
+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.
<figure>
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
+## Resources
You might find these sources valuable for more information on readability and accessibility:
* [Glanceable fonts](https://www.nngroup.com/articles/glanceable-fonts/)
* [Interlude reading](https://www.bendsawyer.com/project/towards-individuated-reading-experiences/)
* [Handwriting in education around the world](https://www.type-together.com/new-research-handwritting)
-* [Experiencing crowding](https://www.sciencedirect.com/science/article/pii/S0042698907005561)
-* [Individualising reading formats research provided by The Readability Consortium](https://www.thereadabilityconsortium.org/research)
+* [Experiencing crowding](https://www.sciencedirect.com/science/article/pii/S0042698907005561)
+* [Individualising reading formats research provided by The Readability Consortium](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)
-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.
+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.
+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.
+- **Readability** is the measure of how easy it is to read the text overall.
<figure>
## 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. When selecting typefaces, seek out designs that have legibility built in alongside the other attributes you like. There is no single answer about which fonts are most accessible for everyone, but there are some things that can make a typeface more accessible to some people.
+[Accessible typography](https://www.visionaustralia.org/business-consulting/digital-access/blog/typography-in-inclusive-design-part-1#2) considerations start with choosing type. When selecting typefaces, seek out designs that have legibility built in alongside the other attributes you like. There is no single answer about which fonts are most accessible for everyone, but there are some things that can make a typeface more accessible to some people.
-The examples in this section are for languages using the Latin writing system. However, the same principles of choosing typefaces where similar shapes in two or more characters are made more different or even unique do apply to other writing systems, especially within character groups like letterforms, numerals, punctuation marks, and symbols.
+The examples in this section are for languages using the Latin writing system. However, the same principles of choosing typefaces where similar shapes in two or more characters are made more different or even unique do apply to other writing systems, especially within character groups like letterforms, numerals, punctuation marks, and symbols.
The type designers who created [Lexend](https://design.google/library/lexend-readability/) and [Atkinson Hyperlegible](https://material.io/blog/atkinson-hyperlegible-design) created these typefaces with specific designs that are intended to be easier to read. Other fonts, such as Poppins, have also become popular with individuals who have visual or cognitive disabilities.
## Checking legibility
-[Counters](/glossary/counter), the white space within letters such as “o,” “e,” and “c,” can play a role in legibility. When the counters are open, there is more white space inside the letter and the letters may appear larger. Open counters can make it easier for the reader to differentiate similarly shaped letters, such as the “c” and “e”.
+[Counters](/glossary/counter), the white space within letters such as “o,” “e,” and “c,” can play a role in legibility. When the counters are open, there is more white space inside the letter and the letters may appear larger. Open counters can make it easier for the reader to differentiate similarly shaped letters, such as the “c” and “e”.
<figure>
## Checking readability
-Mirroring or flipping is when readers find it difficult to read a character because it looks like another when flipped or rotated. For example, a reader could mistake a lowercase letter “b” for a lowercase “d” or “6” for “9”. Instead of reading the word “bog,” the reader will think the word is “dog.”
+Mirroring or flipping is when readers find it difficult to read a character because it looks like another when flipped or rotated. For example, a reader could mistake a lowercase letter “b” for a lowercase “d” or “6” for “9”. Instead of reading the word “bog,” the reader will think the word is “dog.”
-A different and more pervasive challenge among people with dyslexia and other reading difficulties is the transpositioning of letters. For example, the word “loin” may appear as “lion” or the word “lien” may appear as “line.”
+A different and more pervasive challenge among people with dyslexia and other reading difficulties is the transpositioning of letters. For example, the word “loin” may appear as “lion” or the word “lien” may appear as “line.”
-To reduce mirroring and transpositioning, check character pairs like these to make sure they are distinct enough from each other:
+To reduce mirroring and transpositioning, check character pairs like these to make sure they are distinct enough from each other:
- qp
- db
- 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 all have the same simple structure of a single vertical stem. In addition to structural changes like serifs on the “1” or a tail on the “l”, subtle differences in height or stroke width can also improve legibility.
+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 all have the same simple structure of a single vertical stem. In addition to structural changes like serifs on the “1” or a tail on the “l”, subtle differences in height or stroke width can also improve legibility.
-Many shapes are simply mirrored without any further alteration. Lowercase “b,” “d,” “p,” and “q” are the most commonly confused letters. Subtle edits to these letterforms help to differentiate them, such as changes to stroke contrast or counter width. Structural changes are even better.
+Many shapes are simply mirrored without any further alteration. Lowercase “b,” “d,” “p,” and “q” are the most commonly confused letters. Subtle edits to these letterforms help to differentiate them, such as changes to stroke contrast or counter width. Structural changes are even better.
<figure>
<figcaption>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.</figcaption>
</figure>
-
+
Look for letters that can be clearly distinguished. For people with moderate to severe vision impairment, the characters “o,” ”c,” “e,” or “a” can be easily confused, which in turn makes words harder to identify.
<figure>
```html
<section id="instructions">
- <img class=”step-1”
- alt=”Description of image”
+ <img class=”step-1”
+ alt=”Description of image”
/>
- <img class=”step-2”
- alt=”Description of image”
+ <img class=”step-2”
+ alt=”Description of image”
/>
- <img class=”step-3”
- alt=”Description of image”
+ <img class=”step-3”
+ alt=”Description of image”
/>
- <img class=”step-4”
- alt=”Description of image”
+ <img class=”step-4”
+ alt=”Description of image”
/>
</section>
```
-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.
+For more information on hierarchy, read [Material Design Accessibility Principles](https://m3.material.io/foundations/overview/principles), [Material Design Accessibility Structure](https://m3.material.io/foundations/designing/structure), [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
-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.
+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.
+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.
</figure>
-When picking up several colors for background, text, and other components, consider how readers perceive your choice of colors in addition to color contrast.
+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.
+For more info on color and contrast and color blindness, visit [Material Design Accessibility Color Contrast Guidelines](https://m3.material.io/foundations/designing/color-contrast), [Material Design Color System](https://m3.material.io/styles/color/system/overview), [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.
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.
+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.
+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.
<figure>
</figure>
-Ensure that there is sufficient space for large fonts and other writing systems.
+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.
</figure>
-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/).
+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.
+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.
+- 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 [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.
+- 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](https://fonts.google.com/knowledge).”
- Correct: “It’s important to meet [accessibility standards](https://fonts.google.com/knowledge).”
## Non-text elements and text in images
-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 (e.g. an image or video). They explain the 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.
+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 (e.g. an image or video). They explain the 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.
+Learn about how to write alt text and captions in [Material Design’s Accessibility in Writing](https://m3.material.io/foundations/writing/best-practices). To learn about which images need captions, visit [Material Design's Accessibility in Designing Elements](https://m3.material.io/foundations/designing/elements), 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.
+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:
+## Resources:
Here are a few resources to learn more about fonts and their impact on readability in the cognitive space:
## Manipulating the first axis
-Let’s test this out and make the move from the static version of [Anybody](https://fonts.google.com/specimen/Anybody/), by Tyler Finck, to its newer, variable version. This font contains three variable axes: [Weight](/glossary/weight_axis) (`wght`), [Italic](/glossary/italic_axis) (`ital`), and [Width](/glossary/width_axis) (`wdth`). But before we get into the axes themselves, we first need to actually load the variable fonts. Assuming we’re using the Google Fonts API (of course, we could always download the font files and [self-host](https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts) them), we’ll update the line in our HTML’s `head`—which is currently using the Regular (400), Regular Italic, Bold (700), and Bold Italic styles—from this:
+Let’s test this out and make the move from the static version of [Anybody](https://fonts.google.com/specimen/Anybody), by Tyler Finck, to its newer, variable version. This font contains three variable axes: [Weight](/glossary/weight_axis) (`wght`), [Italic](/glossary/italic_axis) (`ital`), and [Width](/glossary/width_axis) (`wdth`). But before we get into the axes themselves, we first need to actually load the variable fonts. Assuming we’re using the Google Fonts API (of course, we could always download the font files and [self-host](https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts) them), we’ll update the line in our HTML’s `head`—which is currently using the Regular (400), Regular Italic, Bold (700), and Bold Italic styles—from this:
```html
<link href="https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
## Manipulating an additional axis
-It’s time to move onto our third axis: Width (`wdth`). In this font in particular, width wasn’t exposed until the release of this variable version, so it’s a great excuse to make use of variable fonts’ powers of further refinement.
+It’s time to move onto our third axis: Width (`wdth`). In this font in particular, width wasn’t exposed until the release of this variable version, so it’s a great excuse to make use of variable fonts’ powers of further refinement.
Once again, the Width axis has been mapped to familiar CSS: we can manipulate it using the `font-stretch` property. The only difference is that, unlike weight, we need to declare it as a percentage. Let’s give our `span` element the maximum width value of 150%:
-And while we’re at it, why not make everything *but* the `span` a little more condensed with a font-stretch value of 72%?
+And while we’re at it, why not make everything *but* the `span` a little more condensed with a font-stretch value of 72%?
```css
body {
}
```
-Note that `font-variation-settings` is also required for any custom axes. For more information, please see [“Styling type on the web with variable fonts.”](/lesson/styling_type_on_the_web_with_variable_fonts)
\ No newline at end of file
+Note that `font-variation-settings` is also required for any custom axes. For more information, please see [“Styling type on the web with variable fonts.”](/lesson/styling_type_on_the_web_with_variable_fonts)
While both the hardware and software aspects of AR/VR implementation are advancing rapidly, type within them has a lot of catching up to do. For a long time, the need for extra processing power to render text properly has hampered progress. This pushes AR/VR designers to resort to the least CPU-intensive methods to render text, thereby degrading the quality of the text. It also keeps designers from considering rich text applications, thus limiting the potential of AR/VR environments.
-Future wearables have the potential to replace smartphones and computers. Looking at current progress, it seems that the processing power required for high-quality text rendering may take a while; however, this shouldn’t hinder the progress of AR/VR. One way to help speed up the process is to design applications that take into account the typographic challenges of this medium. In parallel, we can promote the design of typefaces that are specifically developed to optimize the performance of existing rendering systems.
+Future wearables have the potential to replace smartphones and computers. Looking at current progress, it seems that the processing power required for high-quality text rendering may take a while; however, this shouldn’t hinder the progress of AR/VR. One way to help speed up the process is to design applications that take into account the typographic challenges of this medium. In parallel, we can promote the design of typefaces that are specifically developed to optimize the performance of existing rendering systems.
Useful links:
- [The current state of the text in augmented reality](https://niteeshyadav.com/blog/the-current-state-of-the-text-in-augmented-reality-7507/)
- [Font assets Unity](https://docs.unity3d.com/2022.2/Documentation/Manual/class-Font.html)
- [TextMesh Pro Documentation (Method of text rendering in Unity)](http://digitalnativestudios.com/textmeshpro/docs/)
- [Text in Unity - Microsoft Mixed Reality](https://docs.microsoft.com/en-us/windows/mixed-reality/develop/unity/text-in-unity)
-- [Text in Unreal Engine](https://docs.unrealengine.com/4.27/en-US/Basics/Actors/3DText/)
+- [Text in Unreal Engine](https://dev.epicgames.com/documentation/en-us/unreal-engine/3d-text?application_version=4.27)
- [Playing around with distance field font rendering](https://lambdacube3d.wordpress.com/2014/11/12/playing-around-with-font-rendering/)
- [Techniques for rendering text with WebGL](https://css-tricks.com/techniques-for-rendering-text-with-webgl/)
- [Future of Typography in Augmented Reality](https://youtu.be/lFO5A8-FzlI?t=3554)
projects / thirdparty / google / fonts.git / commitdiff
