+from pprint import pprint
from absl import app
from absl import flags
from gftools import knowledge_pb2
if re.search(' id="[^"]+"', text):
print("INVALID ", _safe_relative_to(repo_root, md_file), "attr.id not allowed:", text)
return False
+ f = open(md_file,"r")
+ content = "".join(f.readlines())
+ if re.search('</figcaption>(?!.*</figure>)', content, re.MULTILINE | re.DOTALL):
+ print("INVALID ", _safe_relative_to(repo_root, md_file), "Cannot have a <figcaption> outside of a <figure>")
+ return False
+ f.close()
return True
-</figure>
<figcaption>A diagram depicting syllabics characters, which represent syllables within the Canadian Aboriginal Syllabics writing system scheme. A consonant is represented by a base form, with the vowel in a syllable being inflected depending on the orientation of the base symbol. In the above example, the first line shows the pure vowel series, with subsequent syllable series’ on lines two and three, made up of syllabic base characters across their four rotations.</figcaption>
+</figure>
+
This is unlike an alphabet, where consonants and vowels are treated equally, and unlike a syllabary, where it’s impossible to split the symbols into individual elements. Examples of abugidas include the Brahmic scripts of India and the Canadian Aboriginal syllabics.
It’s technically possible to have an abugida that is not an alphasyllabary, and an alphasyllabary that is not an abugida. To explore the subtle and often debated nuances, please see [the “Abugida” article on Wikipedia](https://en.wikipedia.org/wiki/Abugida).
\ No newline at end of file
-</figure>
<figcaption>Examples of the Old and Modern English alphabet.</figcaption>
+</figure>
+
In common typological classifications, linguists principally differentiate alphabets from other types of writing systems such as [syllabaries](https://en.wikipedia.org/wiki/Syllabary), where graphical units represent syllables, and logographies, where graphical units represent entire words (or other meaningful, decomposable units of language, called morphemes).
In practice, however, writing systems frequently rely on more than one approach to represent language. For example, modern American English is written using both alphabetic letters and non-alphabetic symbols (e.g., 1, 2 , 3, @, &), many of which can be seen on standard computer keyboards.
<figcaption>On the left: A Font menu similar to the one in many design applications, with a dropdown for the typeface on the top, followed by a dropdown for weights and styles beneath. On the right: A pop-out sub-menu for weights and styles, as seen in Google Workspace apps.</figcaption>
+</figure>
+
Depending on the software, the font picker may show the list of fonts with their names set in either the standard typeface for that UI, each in their own typeface, or a combination of a regular list augmented with a preview. Some apps, such as those in Adobe’s Creative Cloud and Microsoft Word, also have the ability to automatically update the selected text on the canvas, as the user scrolls through the list in the font picker.
-</figure>
<figcaption>A light master (top left), a bold master (top right), and a light extended master (bottom left) can be used to create a bold extended style (bottom right) thanks to vector addition.</figcaption>
+</figure>
+
Interpolation and vector addition are tools type designers use to create a larger set of static fonts from fewer initial masters, and are also the mechanisms behind [variable fonts](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts), working on-the-fly as the end user manipulates variable axes.
-</figure>
<figcaption>A logo for a fictional brand. Note the customized diacritics, highlighted here in blue—made more prominent to fit with the overall weight of the type—and the guidelines, highlighted here in red, to show alignments and spacing specific to this lockup.</figcaption>
+</figure>
+
A lockup can even consist of *just* type. For instance, consider a logotype made up of two lines of text. The specific size of the type, the spacing between each line, and the overall position of the elements constitutes a lockup.
-</figure>
<figcaption>1 shows the full logo: a unique lockup of the logomark and logotype for a fictional brand, created using a customized version of <a href="https://fonts.google.com/specimen/Anybody">Anybody</a>. 2 shows the isolated logomark, suitable for use on social media avatars. 3 shows a logotype with a different arrangement to the one in the main logo, intended to be used when the logomark is absent. Note that the customized diacritics remain—this is not merely the brand name typed out in that font.</figcaption>
+</figure>
+
A logomark is the graphic element, symbol, or icon (for example, Nike’s Swoosh, Starbucks’ siren, or Apple’s apple) that represents the company or brand.
A logotype, which can also be known as a wordmark (although usually only if it’s made up of just one word), is a specific lockup of the brand’s name. It can be something as simple as a customized setting of a typeface (for instance, with custom kerning), an altered version that actually changes the letterforms’ outlines, or a completely bespoke piece of lettering.
-</figure>
<figcaption>The blue box illustrates the internal spacing within the “x” glyph; the red boxes illustrate the external spacing. Note how the left and right values are intentionally unequal.</figcaption>
+</figure>
+
When *setting* type, spacing can also refer to the act of making any typographic adjustment that affects space, such as [leading](/glossary/line_height_leading) (the vertical space between two lines of type), [tracking](/glossary/tracking_letter_spacing) (the overall horizontal spacing between glyphs in a block of text), or kerning (the specific horizontal spacing between two or more glyphs).
\ No newline at end of file
-</figure>
<figcaption>The viewport size can be the same as the screen size, but only if viewed in full-screen, and only if there’s no other chrome. In most scenarios, the viewport is slightly smaller than the total available screen space.</figcaption>
+</figure>
+
The horizontal and vertical dimensions of a viewport are more important than the overall screen size of the device, since that would also include any chrome and also assume that the website or app is always interacted with in fullscreen, which is not usually the case.
In CSS, two relatively new units were introduced so that elements can be resized in relation to the viewport’s width and height respectively: vw and vh. For more information, please see [the “Viewport-relative units” section in the “Sizing Units” chapter of *Learn CSS!*](https://web.dev/learn/css/sizing/#viewport-relative-units) These units of measurement are in addition to the control offered by media queries, which allow for specific CSS rules to be applied when viewport size meets certain conditions. For more information, please see [the “Media queries” chapter of *Learn Responsive Design!*](https://web.dev/learn/design/media-queries/)
\ No newline at end of file
\r
\r
\r
-</figure>\r
<figcaption>These are all sans serif typefaces (Source Sans Pro, Helvetica, Outfit). Same genre, but they leave a quite different impression.</figcaption>\r
\r
+</figure>\r
+\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>These serif typefaces share the same genre classification as well, and still they appear quite diverse (Alegreya, Bodoni Moda, Memphis).</figcaption>\r
\r
+</figure>\r
+\r
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.\r
\r
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:\r
\r
\r
\r
-</figure>\r
<figcaption>A three-layer approach for describing typefaces based upon the work of Indra Kupferschmid.</figcaption>\r
\r
+</figure>\r
+\r
Let’s take a look at each individual layer to understand what it means and how it can help us choose and pair typefaces.\r
\r
## Layer 1: Skeleton (form model)\r
\r
\r
\r
-</figure>\r
<figcaption>The three different form models shown with serif typefaces.</figcaption>\r
\r
+</figure>\r
+\r
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:\r
\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>The three different form models shown with sans serif typefaces.</figcaption>\r
\r
+</figure>\r
+\r
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:\r
\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>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).</figcaption>\r
\r
+</figure>\r
+\r
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.\r
\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>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.</figcaption>\r
\r
+</figure>\r
+\r
With a **rational** typeface, we can see that these apertures are closed, which then creates a more orderly, reserved, or serious feeling.\r
\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>Very constructed letter shapes, like the circular “o” and “e.” The “t” is a simple cross (set in Outfit).</figcaption>\r
\r
+</figure>\r
+\r
And with the **[geometric](/glossary/geometric) typefaces,** the apertures are not that relevant for determining the form model. Also, there is no obvious axis. 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.\r
\r
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.\r
\r
\r
\r
-</figure>\r
<figcaption>Knowing about the different form models makes it easier to describe and distinguish the typefaces from before.</figcaption>\r
\r
+</figure>\r
+\r
## Layer 2: Flesh (contrast and serifs)\r
\r
In the second layer, the flesh, we’re adding **contrast and serifs** to our descriptions. This will make the form model even clearer.\r
\r
\r
\r
-</figure>\r
<figcaption>Describing Alegrya as a dynamic contrasting serif typeface.</figcaption>\r
\r
+</figure>\r
+\r
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.\r
\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>Describing Bodoni Moda as a dynamic contrasting serif typeface.</figcaption>\r
\r
+</figure>\r
+\r
The rational linear sans serif from before turns into a **rational contrasting serif.**\r
\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>Describing Candida as a geometric contrasting serif typeface.</figcaption>\r
\r
+</figure>\r
+\r
The geometric linear sans serif, becomes **contrasting with serif,** while still being geometric from its construction.\r
\r
## Layer 3: Skin (finer details)\r
\r
\r
\r
-</figure>\r
<figcaption>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.</figcaption>\r
\r
+</figure>\r
+\r
## Using the font matrix for pairing type\r
\r
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:\r
\r
\r
\r
-</figure>\r
<figcaption>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.</figcaption>\r
\r
+</figure>\r
+\r
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.\r
\r
### 1. Pair typefaces with similar form models\r
\r
\r
\r
-</figure>\r
<figcaption>Combine typefaces according to their form model.</figcaption>\r
\r
+</figure>\r
+\r
Typefaces from the same form model most likely will go together. Their construction is similar, but the layers added on top are different.\r
\r
### 2. Pair typefaces with varying contrast and serifs\r
\r
\r
\r
-</figure>\r
<figcaption>Go for contrast with very different skeleton and flesh (diagonal combinations).</figcaption>\r
\r
+</figure>\r
+\r
Diagonal combinations create contrasting pairs. The typefaces are so different that they won’t get in the way of each other.\r
\r
### 3. Avoid combinations with different form models, but the same contrast and serifs\r
\r
\r
\r
-</figure>\r
<figcaption>Is it different or is it the same? Avoid combining typefaces from the same row.</figcaption>\r
\r
+</figure>\r
+\r
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.\r
\r
## Look for form models everywhere\r
\r
\r
\r
-</figure>\r
<figcaption>Try to spot the form model in the wild! Left to right: dynamic, rational, and geometric.</figcaption>\r
\r
+</figure>\r
+\r
## Combining typefaces step by step\r
\r
When it comes to combining typefaces, this is the process we recommend, using the ideas behind the font matrix:\r
\r
\r
\r
-</figure>\r
<figcaption>Steps 1 and 2: The primary typeface is Bitter, used for body text. It’s a dynamic linear serif typeface.</figcaption>\r
\r
+</figure>\r
+\r
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.\r
\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>Steps 3 to 5: We look for a secondary typeface for inline code that’s dynamic, linear and monospace.</figcaption>\r
\r
+</figure>\r
+\r
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.\r
\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>Step 6: Our possible candidates and their form models.</figcaption>\r
\r
+</figure>\r
+\r
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.\r
\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>Step 7: Evaluating our options in an actual sentence. Fira Code fits what we were looking for.</figcaption>\r
\r
+</figure>\r
+\r
## Limitations of this system\r
\r
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.\r
\r
\r
\r
-</figure>\r
<figcaption>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.</figcaption>\r
\r
+</figure>\r
+\r
<figure>\r
\r
\r
\r
-</figure>\r
<figcaption>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.</figcaption>\r
\r
+</figure>\r
+\r
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, you can improve a less-than-ideal combination by using different [weights](/glossary/weight) or [styles](/glossary/style).\r
\r
So see the font matrix as a guideline to make pairing decisions, 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.\r
-</figure>
<figcaption>An example of the English sentence, “The puppy is soft,” using a syllable-block approach.</figcaption>
+</figure>
+
The use of syllable blocks has several benefits for the reader.
In one reading experiment, for example, researchers found that American university students enrolled in Korean language courses, from beginner to advanced levels, had faster reading times when Hangeul phrases were presented with letters in block format versus a linear format (i.e., one letter after another, as in English) (Kim & Sohn, 1986).
-</figure>
<figcaption>Three Korean words of 2, 3, and 4 syllables shown with their corresponding English translations, each with 10 letters but with varying syllable lengths.</figcaption>
+</figure>
+
## Efficiency for writers
Given the convenience of technology, many of us are likely to spend more time writing with a keyboard or keypad than with a pen and paper.
-</figure>
<figcaption>Three high-frequency Korean vowels constructed from vertical lines are contrasted with three low-frequency vowels constructed from horizontal lines.</figcaption>
+</figure>
+
According to some scholars (e.g., Lee, 1997), because it’s easier to move our fingers vertically than horizontally (whether using a brush or other similar instrument), less effort is required when producing vertical versus horizontal strokes.
By reserving easier strokes for the most frequent vowels, King Sejong found a thoughtful way of addressing the needs of the writer.
-</figure>
<figcaption>A montage of texts written in Sumerian, Egyptian, Chinese, and Meso-American [scripts](/glossary/script), intended to show the our species’ creativity and ingenuity in devising alphabets.</figcaption>
+</figure>
+
All the world’s subsequent alphabets have, at a minimum, been informed by these early examples, and nearly all have been direct adaptations.
From a sociocultural standpoint, the adaptation approach has enormous benefits: For any pre-literate society, adopting an existing alphabet from another society means gaining access to a transformative technology, more or less for free.
-</figure>
<figcaption>An example of 28 different Hangeul letters, similar in appearance to what they would have looked like when originally created.</figcaption>
+</figure>
+
Geometry certainly isn’t a requirement for letter design, and it’s fair to say that humankind has produced alphabets that are aesthetically marvelous.
Yet this design decision exemplifies an important insight on the part of King Sejong: Because people are likely to encounter geometric shapes in their daily lives, the characters of Hangeul might feel at least partially familiar to new learners, for whom “writing was a mystery, a secret code in the literal sense of the word” (Coulmas, 1989).
-</figure>
<figcaption>Examples of Korean Consonant and Vowel letters illustrating visual distinction.</figcaption>
+</figure>
+
This visual treatment has the effect of signaling differences between the groups of vowel and consonant letters.
Like many other alphabets, English doesn’t rely on different visual cues to call out such groupings, and without explicit training, learners would likely find it impossible to infer that *A*, *E*, *I*, *O*, and *U* are functionally different from the other letters.
-</figure>
<figcaption>Top row showing existing Hangeul letters; bottom row showing mirrored versions that were rejected.</figcaption>
+</figure>
+
People who have learned the English alphabet might not be surprised to discover that among the most commonly confused letters are those that seem to be mirrored copies, including the [lowercase](/glossary/uppercase_lowercase) letters *d*, *b*, *p*, and *q* (Ehri & Roberts, 2006).
Once again, King Sejong’s design decision to emphasize letter distinguishability reflects his intentions of making Hangeul as user-friendly as possible.
-</figure>
<figcaption>Example of a stimulus used in an experiment, showing a lowercase looptail letter G, along with three additional incorrect versions in which various parts of the correct letter are subtly transformed.</figcaption>
+</figure>
+
Although people routinely encounter (and successfully use) the letters and letter variants of their alphabet, this study highlights an important point: When you’re learning an alphabet, there are lots of details to keep track of, but they don’t always matter in meaningful ways.
When King Sejong approached the design of Hangeul, he focused his attention on including details that would make it easier for folks to learn the alphabet.
-</figure>
<figcaption>Five letters from the Korean alphabet superimposed over line drawings of human speech organs, with each letter corresponding to a different speech organ. Below each letter, the approximate sound in English is given.</figcaption>
+</figure>
+
Although people are unlikely to reference this blueprint once they’ve become proficient in the alphabet, to the learner, it could be quite beneficial.
Evidence from modern cognitive science, for example, suggests that many aspects of human cognition are [embodied](https://en.wikipedia.org/wiki/Embodied_cognition), meaning that we encode abstract concepts not only in our minds, but in our perceptual and sensori-motor systems as well.
-</figure>
<figcaption>The Korean letters corresponding to the English sounds “N”, “D”, and “T”. The N letter is considered the base shape, and the D and T letters add one and two lines respectively to the base.</figcaption>
+</figure>
+
For example, if you focus on what’s happening in your mouth as you pronounce the “N” sound (i.e., as though you were slowly saying the word *Nice*), you’ll notice that you’re making a continuous vibration while your tongue is placed somewhere behind the top row of teeth.
In Hangeul, the letter corresponding to the “N” sound would be treated as the symbolic base. If you next focus on producing the “D” sound, you’ll notice that your tongue is in the same position as before, but that the vibration is initially stopped; and with the “T” sound, that you’ve both stopped vibration and added a burst of air with your tongue in the same position.
-</figure>
<figcaption><a href="https://fonts.google.com/specimen/Abril+Fatface">Abril Fatface</a>, a modern interpretation of the Fat Face style that first appeared in the early 19th century.</figcaption>
+</figure>
+
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
-</figure>
<figcaption>Early 19th-century reverse contrast typeface in wood.</figcaption>
+</figure>
+
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. These typefaces suffered from poor legibility, so a less extreme variant of reverse-contrast design based on the Clarendons was created 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.
-</figure>
<figcaption>The 19th century witnessed the invention of many new styles of typefaces—and serif designs.</figcaption>
+</figure>
+
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.
<figure>
-</figure>
<figcaption>Bottom line: William Caslon’s sans serif, c. 1816.</figcaption>
+</figure>
+
## The arrival of the sans serif style
The most consequential type style introduced in the 19th century was the [sans serif](/glossary/sans_serif). The style first appeared in type when William Caslon IV (1780–1869) designed a large all-caps 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.
-</figure>
<figcaption>Akzidenz-Grotesk released by the Berthold type foundry in 1898, inspired the popular Neo-grotesque style.</figcaption>
+</figure>
+
The trend toward simplified or industrial letters, or letters that appear machine-made or constructed, can be seen in typefaces like Paul Renner’s Futura, a [Geometric](/glossary/geometric) sans 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.
<figure>
-</figure>
<figcaption>DIN 1451, produced by Deutsches Institut für Normung (German Institute for Standardization) in 1931.</figcaption>
+</figure>
+
## 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 mold, 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 photolithography. Phototypesetting sped up composition, but it also meant that printers no longer needed to store tons (literally) of metal type. However, the technology of phototype was short lived, with photographed exposed alphabets making way for digital ones.
-</figure>
<figcaption>Zuzana Licko’s Oakland (1985) designed on the first Apple Macintosh 128K computer.</figcaption>
+</figure>
+
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.
<figure>
-</figure>
<figcaption>Wim Crouwel’s New Alphabet, 1967.</figcaption>
+</figure>
+
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](/glossary/color_fonts) that permit embedding additional bitmapped and vector (SVG) textures and elements stored alongside the font outlines. More recently, the growth in support for [variable fonts](/glossary/variable_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.
-</figure>
<figcaption>Comparing transitional (Baskerville, top) and Modern (Bodoni, below) style. They share similar proportions and an upright axis, but the Modern has a much simplified serif structure and considerably higher contrast.</figcaption>
+</figure>
+
## 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.
-</figure>
<figcaption>Bodoni roman and italic. Note, in the italic, the calligraphic influence in the hairline in-strokes.</figcaption>
+</figure>
+
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 were more so, owing to Bodoni’s skill for self promotion and his attendant international fame.
-</figure>
-
<figcaption>Movable type reproduces individual characters or glyphs as discrete pieces of metal type (also called sorts), printed in relief.</figcaption>
+</figure>
+
## The first European fonts
The very first fonts in Europe were modeled on contemporary gothic calligraphy—the kind used for formal documents and books. Gutenberg wasn’t trying to revolutionize the alphabet—his aim was to mass produce books. So it made complete sense to make his fonts resemble the [calligraphy](/glossary/calligraphy) that scribes used in manuscript or handwritten books—letters that readers were familiar with.
-</figure>
-
<figcaption>Typeface of the Gutenberg Bible, c. 1454</figcaption>
+</figure>
+
## The first roman fonts
Printing soon spread from Germany to neighboring countries, even crossing the Alps to the south and establishing itself in the Italian Peninsula by the early 1460s, where the combination of active trade routes and a vibrant financial environment supported new endeavors. Throughout Europe, for writing, various regional forms of gothic script were used. In Italy and the Iberian peninsula, a rounder and more open form of gothic called Rotunda was popular. It was used for most kinds of documents and books, but when it came to producing works by classical authors, the likes of Cicero, Seneca, and Lucretius, for example, then an entirely different kind of script was sometimes used. As a [typeface](/glossary/typeface), it eventually came to be called roman.
-</figure>
-
<figcaption>A typical 15th-century roman typeface</figcaption>
+</figure>
+
This new typeface was based on contemporary humanist script which was a hybrid that modeled its lowercase alphabet on the Carolingian minuscule, first developed in the eighth and ninth centuries under the rule of Charlemagne, but that really came of age during the twelfth-century. This particular late style of Carolingian minuscule was to prove incredibly influential as it was the style copied, developed, and promoted by the founder of the Italian Renaissance, Petrarch. From the 1450s, this lowercase alphabet was increasingly paired with Roman capitals based on those used in first-century Roman inscriptions. By the next decade, the two alphabets had evolved into a unified script, with the lowercase alphabet even taking on some of the characteristics of the Roman capitals, like [serifs](/glossary/serif), for example.
So, when the very first printers in Italy, German immigrants Arnold Pannartz and Conrad Sweynheym, set up their printing press in Subiaco in the hills outside of Rome, they began by printing the classical Roman authors. And they modeled their new typeface on contemporary humanist scripts. However, it’s important to note that the early roman typefaces, whether they be that of Sweynheym and Pannartz or the roman by Johannes da Spira in Venice (1469) appear not to have slavishly reproduced any single manuscript exemplar. Creating a typeface modeled on [handwriting](/glossary/handwriting) demands many compromises, and so it is better to think of the earliest roman types as ‘inspired’ by contemporary humanist scripts.
-</figure>
-
<figcaption>Roman typeface by Nicholas Jenson (1476)</figcaption>
+</figure>
+
## Aldus Manutius
The early roman fonts of the fifteenth century are often called Venetian. Typically, they were rather low in [contrast](/glossary/contrast) (meaning that there was little difference between the thick and thin parts of letters), and this tended to make them appear a little [dark](/glossary/color) on the page. However, roman typeface design would undergo another change in the 1490s, when the great Venetian printer-publisher Aldus Manutius commissioned a new roman typeface from the Bolognese punchcutter, Francesco Griffo. The style is often associated with Bembo, a 20th century revival of Aldus’s roman typeface named after Cardinal Pietro Bembo, whose book _De Aetna_ (1496), was the first to be printed with this new typeface. Aldus’s new typeface united the designs of uppercase and lowercase letters by reducing the weight and height of the capital letters, reducing the overall contrast of the letters, and by making the serifs more uniform in design across both cases. These Aldine designs would go on to influence the great French [type designers](/glossary/type_designer) of the next century.
-</figure>
-
<figcaption>From a geometrically constructed alphabet by Albrecht Dürer (1525).</figcaption>
+</figure>
+
When we say ‘rational’ or ‘rationalized’ with regard to type design, we are describing the underlying or guiding design principles behind the design of the letterforms. So, for example, in earlier romans, we can still see the influence of the broad-nib pen. Rationalization is about removing or turning down the dial on these calligraphic or [handwritten](/glossary/handwriting) features of the design. The resulting typefaces then appear rather more machine-made than hand-made.
<figure>
-</figure>
-
<figcaption>Bracketed serifs.</figcaption>
+</figure>
+
## Dutch type
The sixteenth century was a period of rapid expansion in the printing industry, and with it the demand for more type. By the seventeenth century, important centers of typefounding appeared beyond the Italian Peninsula and France, most notably throughout the Low Countries. Among a number of talented [type designers](/glossary/type_designer) working in the Low Countries at this time was Christoffel van Dijck. He established a type foundry in Amsterdam in 1647. In his roman type designs, his lowercase letters are a little narrower, and some of his capitals wider; and, overall the letter-spacing is a fraction tighter than in most of the earlier French designs. This combined with a slightly lower [x-height](/glossary/x_height) (or shorter extenders) makes the type feel, as it’s often described, ‘compact’ or ‘robust.’ When Van Dijck died in 1669, his son briefly took over the business, but then when he too died within three years of his father, everything went up for auction, and most of the type was bought by the Elzevirs, the famed Dutch printer-publishing dynasty.
-</figure>
-
<figcaption>Roman and italic typefaces by William Caslon, c. 1734.</figcaption>
+</figure>
+
After making his fortune in japanning (varnished lacquerware), John Baskerville, from the emerging industrial city of Birmingham, also in the West Midlands, turned to printing in the 1750s. He was an exceptional typographer and had very clear ideas about how his pages should appear: High contrast letters, plenty of white space, and very crisp printing. He achieved his typographically light, bright, and spacious pages not only by designing his own typefaces, but also by producing new inks and papers.
<figure>
-</figure>
-
<figcaption>A modern revival of Baskerville’s roman and italic.</figcaption>
+</figure>
+
Typically, rougher paper requires more pressure from the printing press to ensure even printing. However, higher pressures also means more ‘ink squeeze’ (the amount ink bleeds into and spreads across the paper). Baskerville collaborated with paper maker James Whatman to produce a new kind of smooth paper often called ‘wove paper.’ We can think of smoother paper in letterpress printing as analogous to higher screen resolution, with smoother paper being able to support printing of finer or sharper detail in much the same way as more pixels are able to reproduce finer details on screen. With new inks and very smooth new paper only gentle pressure from the press (called a kiss impression) was required, thus reducing ink squeeze and making for a beautifully crisp print. Benjamin Franklin, at the time living in England and paying frequent visits to Baskerville, was among Baskerville’s most enthusiastic patrons and advocates. Others, however, were critical of Baskerville’s type, complaining that the contrast in his typefaces was so high that reading them could hurt your eyes! In overall design, Caslon’s were more influenced by Dutch designs, whereas Baskerville owes more to Garamont and his contemporaries, and to pioneering [Transitional](/glossary/transitional_neo_classical) typefaces like the King’s Roman.
<figure>
-</figure>
-
<figcaption>From the fifteenth century the stress of letters moved from oblique to upright.</figcaption>
+</figure>
+
The King’s Roman and Baskerville are known as ‘Transitional’ typefaces because they sit between Old Style and Modern typefaces. From the first romans of the fifteenth century to those of eighteenth, the predominant design trend was a move to upright stress ([axis](/glossary/axis_in_type_design) of rounded letters moved to the perpendicular), and higher [contrast](/glossary/contrast) letterforms with sharper details—a trend that would be further exploited by the likes of Giambattista Bodoni and Firmin Didot in their so-called Modern typeface designs.
-</figure>
-
<figcaption>Roman square capitals from the base of Trajan’s Column in Rome, c. 113 CE.</figcaption>
+</figure>
+
## Renaissance influencers
From the fourteenth century, beginning in Florence, Italy, those letters would be given a second life by the humanists. Humanism was a new intellectual movement that arose in Italy in the late fourteenth century, and was the driving force behind the Italian Renaissance. Those humanists considered Greco-Roman antiquity to be a golden age tragically extinguished with the fall of the western Roman Empire in the fifth century CE. They saw the time period from the end of Roman influence to their own day as a kind of ‘middle’ or ‘dark’ age. They made it their mission to rescue classical scholarship, language, and art. For the humanists, gothic script, a product of the Middle Ages, needed to be replaced with something more Roman, in much the same way that they believed gothic or medieval architecture should be replaced by classical designs.
-</figure>
-
<figcaption>EB Garamond, a modern revival of Claude Garamont’s roman and italic.</figcaption>
+</figure>
+
The designs of Garamont and his talented French contemporaries soon replaced those of Aldus, first in France and eventually even in the Italian Peninsula. They would prove remarkably influential, spawning scores of roman typefaces in the new French Renaissance style. They differed most markedly from their predecessors by having higher [contrast](/glossary/contrast) and more refined modulation. This feature combined with looser letterspacing affects the overall typographic [color](/glossary/color) of the page, making it lighter in appearance. Again it’s an example of a deliberate move away from the gothic aesthetic to a lighter, airier, more ‘classical’ typographic page.
## Inventing italic
-</figure>
-
<figcaption>Italic typeface by Francesco Griffo and Aldus Manutius.</figcaption>
+</figure>
+
The first italic typefaces were paired with upright Roman capitals, but within a couple of decades, they were typically paired with newly designed sloping capitals, which soon became the norm.
## Roman and italic today
-</figure>
<figcaption>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.</figcaption>
+</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.
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.
-</figure>
<figcaption>Google Fonts’ Type Tester, showing text with variable axes.</figcaption>
+</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.
-</figure>
<figcaption>The time someone has to read a source impacts the way they read it, 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.</figcaption>
+</figure>
+
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
-</figure>
<figcaption>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 absolute value of line-height for 9 lines, but different font-size values.</figcaption>
+</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.
-</figure>
<figcaption>Left (in red lines): Lowercase “c,” “o,” and “e” with closed counters. Right (in blue lines): Lowercase “c,” “o,” and “e” with open counters.</figcaption>
+</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.”
-</figure>
<figcaption>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.</figcaption>
+</figure>
+
<figure>
-</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>
<figcaption>From left to right: The typefaces Andika, Lexend, and Atkinson Hyperlegible show how effective they are in differentiating potentially confusing character combinations.</figcaption>
+</figure>
+
## Accessible typography beyond typefaces
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, such as headings with the right levels (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.
-</figure>
<figcaption> Example code for displaying the images in a screen reader-friendly hierarchy.</figcaption>
+</figure>
+
```html
<section id="instructions">
<img class=”step-1”
-</figure>
<figcaption>The black text on the white background and the white text on the black background meet color contrast standards.</figcaption>
+</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.
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.
-</figure>
<figcaption>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.</figcaption>
+</figure>
+
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>
<figcaption>Type Tester showing text with variable axes for weight, width, slant and ascender height.</figcaption>
+</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/).
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.
An early and major printing center for the Algonquian Syllabics was Moose Factory, Ontario, where a printing press overseen by John Horden printed works in the local Moose Cree (ᐃᓕᓖᒧᐎᓐ) dialect and in the northern dialects of Ojibway. Horden made a significant change to the Algonquian Syllabics orthography by instituting the method of using finals characters in a series, which were superscript versions of the a vowel syllabic in a given series. This pattern was in stark contrast to the Western Algonquian pattern of using distinct finals characters, separate from the syllabic character forms in the series (see Finals section). This divergence in finals between eastern and western Algonquian Syllabics-using communities forms the main stylistic divide, and in particular led to a significant amount of variation in the Ojibway Syllabics of northern Ontario.
-
<figure>
-</figure>
+
+
<figcaption>Above, showing the difference between the western and eastern Cree traditions in finals characters.</figcaption>
+</figure>
+
## Finals variation across Ojibway communities
The northern dialects of Ojibway—the only Ojibway language communities to use Syllabics as their primary writing system—are noted as having a high degree of variability in the form of the finals characters that several respective communities prefer to use. The northern dialects of Ojibway that use Syllabics comprise Oji-Cree, Northwestern Ojibway and Berens River Ojibway. All of these communities utilize a Syllabics orthography, although the local preference for the form of the finals characters varies.
-</figure>
<figcaption>Anishinaabe (Ojibwe) communities (red); Nêhiyawak (Cree) communities (blue). The above map shows the distribution of Ojibway dialects in Northern Ontario that use Syllabics as their primary writing system, depicting their preference for the form of finals (ᐊᓄᑭᐧᐃᓐ, ᐊᓄᑭᐧᐃᐣ, etc.), as well as the placement of the “w dot”. Neighboring Cree communities have been shown in order to show the relationship in preferences with the Ojibway.</figcaption>
+</figure>
+
This divide manifests in finals characters that a) appear different in form from the base syllabic character in “a series”, and “b”) appear as a superscript version of the base syllabic in a series, commonly the a vowel orientation position in the series.
<figure>
-</figure>
<figcaption>A comparison of the finals preferences for the different Ojibwe communities across the dialects in Northern Ontario that use Syllabics. Note that all Oji-Cree communities follow the same pattern as Western Cree Syllabics, which use finals characters that are different in shape than their base syllabic shape in a given series. The only variation in this pattern occurs in the Neskantaga community, which places the w dot on the left of the syllable in the Eastern Syllabics tradition. The primary variation occurs within Northwestern Ojibwe communities, where the Eastern Cree Syllabics tradition is largely followed, with the Eastern pattern of using superscript versions of the base syllabic in a series, in the “a vowel” orientation position. Within this preference for superscript finals, further variation occurs in the preference for the orientation scheme and vertical position of certain finals. In the Lac Seul community, either the “a position” or “i vowel” position orientation scheme is followed. In the Red Lake community, the standard a-position orientation pattern is followed, with the exception of the n final consonant being vertically positioned centered at the midline.</figcaption>
+</figure>
+
The high degree of variation in Syllabics typographic preferences in Northern Ontario Ojibwe communities is a result of the lack of any formal standardization, such as is seen in Inuktut and Cree Syllabics communities. Despite this lack of standardization, all of the local form variants are encoded in the Unicode Standard.
## Plains Cree *y + w* dot transformation preference
-</figure>
<figcaption>Showing the two variations in the form of the Plains Cree y final.</figcaption>
+</figure>
+
Further, when the y-final follows a w-dot modifier mark in these communities using the superposed (ᐝ) “y final”, the double dots combine to form a colon character. There is variation in terms of the shaping of this combination “w + y” final sequence. Some texts show this character as the same superposed sequence as the alternative “y final”, while others distinguish the sequence by rendering it as a kerned colon-style symbol.
<figure>
-</figure>
<figcaption>An example, above, of the combination sequence that some Plains Cree communities prefer when pure consonant "w" is followed by pure consonant “y”.</figcaption>
+</figure>
+
## Naskapi *spwaa* preferred form
The Naskapi language community follows the Eastern Cree Syllabics pattern, which sees it used as a basis for the Algonquian Syllabics structures, with finals characters being superscript versions of the a vowel orientation scheme.
-</figure>
<figcaption>Demonstrating two compositions of the Naskapi “spwaa” syllabic sequence. Although many typefaces compose this sequence as in example 1, above (U+150B ᔋ CANADIAN SYLLABICS NASKAPI S-W + U+1438 ᐸ CANADIAN SYLLABICS PA), the Naskapi community prefers the singular, composed glyph as in example 2, above.</figcaption>
+</figure>
+
The primary local preference that Naskapi requires is the combination of the syllabic for the spwaa (ᔌ) syllable. Many commonly available pan-Syllabics and Algonquian Syllabics typefaces provide this syllabic composed as a separated inline sequence. The Naskapi user community prefers the composite version of this syllabic form, with the “spw” modifier stacked on top of the base “pa” syllabic. While this form is intelligible in either composition, stylistically the local community prefers the composite form.
## In summary
-</figure>
<figcaption>A map depicting the geographic distribution of the three major Syllabics orthographic / typographic traditions: the Algonquian Syllabics, Inuktut Syllabics, and Dene Syllabics. Additionally, the historical Blackfoot Syllabics system—while based on the pattern of Cree Syllabics orthographically—deviates visually enough from these three major systems to be considered a graphic isolate.</figcaption>
+</figure>
+
#### Algonquian Syllabics
Ojibwe / Anishinaabemowin Syllabics (ᐊᓂᔑᓇᐯᒧᐎᐣ)
-</figure>
<figcaption>Top left, a study by the author after the late Anishinaabe professor Alex McKay, teaching the Anishinaabe (Ojibway) methodology for syllabic and finals stroke construction. The diagrams to the right of the study show syllabic series across all of their rotation orientations, with the effect on modulation structures shown in purple.</figcaption>
+</figure>
+
## Syllabic
A syllabic is a full- or medium-height character (depending on the style tradition) which represents a vowel or consonant cluster. Each syllabic form represents a consonant, and the base vowel is changed depending on its orientation (ᕓ=ve, ᕕ=vi, ᕗ=vo, ᕙ=va). Rotation is in fact the unique orthographic trait that distinguishes the Syllabics from other scripts, and this also underpins its design structure. Note that each syllabic form is typically unchanged when it is rotated across the four positions.
-</figure>
<figcaption>A diagram depicting syllabics characters, which represent syllables within the Syllabics writing system scheme. A consonant is represented by a base form, with the vowel in a syllable being inflected depending on the orientation of the base symbol. In the above example, the first line shows the pure vowel series, with subsequent syllable series’ on lines two and three, made up of syllabic base characters across their four rotations.</figcaption>
+</figure>
+
## Final
Finals are primary characters that are smaller in size than the full-size syllabics (but are not diacritic marks); they are typically about one half the scale of the syllabic characters. Some communities and their orthographies prefer that these characters appear as superscript versions of the a or i position syllabic (ᒪᐦᑭᓯᓐ), while others prefer shapes that do not reference the final pure-consonant syllabic they represent in a given series (ᒪᐦᑭᓯᐣ).
-</figure>
<figcaption>A diagram depicting finals characters, in contrast to the larger syllabic characters. These forms represent the pure consonant sounds when no vowel is present and are notably smaller in comparison to the syllabic characters for distinction in text settings. The above example shows the difference between Eastern and Western finals character forms.</figcaption>
+</figure>
+
In many Syllabics orthographies, the finals are vertically positioned at the topline metric, which is the default positioning of finals characters in the Unified Canadian Aboriginal Syllabics (UCAS) code charts. This is the case for the Algonquian and Inuktut Syllabics; however, the orthographies for the languages that use the Dene Syllabics require variation in the vertical positioning of their finals marks between top-, mid- and baseline metrics in order for accurate pronunciation to be represented in these languages. The Carrier Syllabics similarly maintain a preference for their finals characters to be vertically positioned at the midline, although this preference is stylistic, rather than a requirement for accurate representation of the language in text.
<figure>
-</figure>
<figcaption>The above diagram shows the three vertical positions that finals characters can sit at within Syllabics typography. The variation in this position occurs in some languages as a stylistic means, however, in some, such as northern Dene languages, the vertical positioning is critical to the correct pronunciation of words.</figcaption>
+</figure>
+
## Series
A series in the Syllabics is a collection of the syllabic and finals characters across their respective rotations in a given orthography (ᑫᑭᑯᑲᒃ). Note that the consonant remains consistent and the vowel inflection depends on the orientation in which the syllabic is rotated. The final character is used to represent a pure consonant form and is smaller in size when contrasted with the larger syllabic characters.
-</figure>
<figcaption>Above, a diagram depicting the “k series” that is found across many Syllabics-using language communities.</figcaption>
+</figure>
+
## Square form vs round form styles
In many script traditions, differing styles exist, with certain communities strongly identifying with one over the other. This can be seen in the style traditions within the Arabic script, for example, where some communities prefer the Naskh style for general text composition, while others, such as Persian communities, strongly identify with the Nasta’liq style. The same script and generally the same essential characters are being used across these communities, but each community expects to see their language written in their respective preferred style. To ignore this would result in a text that was neither culturally appropriate for local readers, nor able to adequately convey the meaning and atmosphere of the text for that readership.
-</figure>
<figcaption>A comparison of the same text rendered in two differing styles of the Arabic script: Naskh (top) and Nasta’liq (bottom).</figcaption>
+</figure>
+
A similar situation exists within the stylistic spectrum of the Syllabics, where there are two dominant style traditions: the square form and the round form style. These systems differ typographically in their proportional relationships, particularly in terms of each model’s rules for height and width proportions for the syllabic characters.
-
<figure>
-</figure>
+
+
<figcaption>A diagram depicting an Oji-Cree word, showing a direct comparison between the round form (top) and square form (bottom) Syllabics styles. The Round Form is characterized by the variability in the height of the full-size syllabics, with variation between a medial and top line position. The Square form by contrast is uniform in height, without medial height characters, and generally uniform character width proportions.</figcaption>
+</figure>
+
The name “round” in the round form style comes from the open, circular forms used in many of the series. This was the original style to appear in the first printed Syllabics texts and it is the most common style of Syllabics in use, which has led to it becoming the default style within the Unified Canadian Aboriginal Syllabics code charts.
The “square” form style is characterized by the uniformity of all character heights, with syllabic characters all reaching the top line height. All characters also share an optically uniform width proportion, with the visual ratio of width-to-height being roughly 1:1, giving the character set a square appearance. This style was primarily used by French Catholic missionaries in Western Canada who were importing their printing equipment from France, with their type being supplied from Brussels.
-</figure>
<figcaption>Above, a diagram depicting the difference between the required width for the Syllabics word space character in order for Syllabics texts to be readable. Compared to the Latin word space, line two, the Syllabics space must be significantly wider.</figcaption>
+</figure>
+
<figure>
-</figure>
<figcaption>A comparison of the same text, one showing a word space glyph that is too narrow for legible Syllabics reading (1) and the other showing an ideal word space glyph width that allows for easy reading of Syllabics texts (2).</figcaption>
+</figure>
+
## Syllabics typographic grid
As in any type system, there are inherent vertical metrics that contribute to the optimal appearance of a given writing system. An aspect of the Syllabics typographic grid that must be observed is the relationship of the Syllabics to the vertical metrics of the Latin scripts, as these two systems are frequently used together. This has much to do with the internal counter spaces of the Syllabics, which are wide and usually open, and contribute to a horizontal movement on the line. By contrast, the internal counter rhythm of Latin type is very narrow and vertical, which gives it a more vertical stance in lines of type. For this reason, the topline of the full-height Syllabics characters should be roughly 10–15% shorter than that of the Latin cap height, even when the Syllabics is set on its own in paragraphs of text.
-</figure>
<figcaption>The vertical metric proportions that are inherent and ideal to the Unified Canadian Aboriginal Syllabics script are shown above. Note that the Syllabics topline is roughly 10–15% shorter than the capital height in the Latin script. This variable is important for achieving an ideal harmony between the two scripts.</figcaption>
+</figure>
+
<figure>
-</figure>
<figcaption>A comparison of the internal counter structure of the Latin script and the Syllabics. The Syllabics have an inherently horizontal and linear inner rhythm, which forms wide, open spaces. The Latin—by contrast—has a vertical internal proportion rhythm.</figcaption>
+</figure>
+
## The importance of the midline
In the vertical metric proportions for the Syllabics, the midline is an essential grounding point for anchoring the full-sized syllabic forms (full height and medial height), finals, and diacritic marks.
-</figure>
<figcaption>A depiction of the Syllabics-specific hyphen (U+1400) and full stop (U+166E) characters. Many Algonquian Syllabics communities – particularly those that use the Western pattern of finals characters—require the use of these punctuation mark forms in order to avoid confusion between finals characters, and punctuation.</figcaption>
+</figure>
+
## Syllabics anatomy
It is common for viewers outside of Syllabics-using communities to view the Syllabics characters as simple geometric constructs without a writing path direction. This is not the case, however, as syllabic characters do possess a construction pattern, which provides a view of the foundational components that build up Syllabics characters. If we look at the handwriting of Syllabics users, we can see the common stroke construction and these foundational structures quite clearly, which, together, paint a useful picture of the underlying structure of Syllabics typefaces.
-</figure>
<figcaption>The above diagrams show the broken construction model from a sample of everyday handwriting, which reveals the components inherent to Syllabics character forms. Note that Syllabics characters are largely composed of straight, linear strokes, curved hooks, and circular shapes (which was referred to as “rings” within the nomenclature of the writing system). These patterns vary only in the Dakelh (Carrier) Syllabics, which employ more complex, ornate shaping in their Syllabics characters. From Tamalik, Letter of support to the Unicode Technical Committee, 3 September 2020.</figcaption>
+</figure>
+
## Line spacing
While the Syllabics possess a structure that features relative uniformity in the height metric compared to the Latin script, with only diacritic marks reaching above the topline height of the characters, and generally no elements reaching below the baseline, paragraphs of text benefit greatly from wider line spacing than is typically seen or needed in the Latin script. The large, wide-open counters in many characters—which tend to manifest frequently across the various orthographies and the patterns their languages produce—result in large pockets of whitespace interspersed throughout a given paragraph. These large voids of whitespace can form rivers through a paragraph of text that interfere with the reading experience significantly. Increasing line spacing helps solve for this. These same factors are why word spacing must be of an appropriate width to suit the wide Syllabics character forms.
-</figure>
<figcaption>An example showing the impact that greater spacing between lines has on the readability of Syllabics texts.</figcaption>
+</figure>
+
## Punctuation marks
While it was noted above that there are script-specific Syllabics punctuation marks used by the Algonquian languages with an orthography in this writing system (the Syllabics full stop [᙮] and hyphen [᐀]), all orthographies within the Syllabics writing system utilize Latin script punctuation marks in text settings, including exclamation and question marks, parentheses, brackets, dashes and quotation marks. As revealed in the Syllabics typographic grid, the Syllabic glyph proportions should ideally be designed at 10–15% of the cap height, and therefore, the same Latin punctuation that is tailored for the Latin script will appear out of place when used with the Syllabics. To solve this, dedicated punctuation marks and special character glyphs should be available that are designed to suit the shorter height of the Syllabics, as well as the wider proportions of the Syllabics glyphs. This allows for a cleaner reading experience for Syllabics texts, especially in documents that have Syllabics and Latin settings running alongside one another, or in embedded settings, which is very common.
-</figure>
<figcaption>An example of punctuation marks tailored to suit the proportions of the Syllabics, and those designed to suit the Latin script, in the same type system.</figcaption>
+</figure>
+
## Numerals
As in the script-specific substitutions for the punctuation marks and special characters shared between the Latin and Syllabics scripts, a similar solution is required for numerals, in order that they harmonize well with the inherent proportions of the writing system. As previously noted, the shorter height and wider character proportions of the Syllabics are counter to those of the Latin script. The numerals in a typeface that have been designed for use with the Latin script will be too tall, and too narrow in width, to create a comfortable rhythm in Syllabics text settings. This is particularly true for nested settings in paragraphs, as well as lists. It is also worth noting that the Syllabics—a unicase script that features only the rarest occurrences of a descender in some dialects of Inuktut (ᖢᖤ)—only requires the use of lining figures, and not a model varied in height as in oldstyle figures.
-</figure>
<figcaption>Numerals that are designed to suit both the height proportions and width proportions of the Syllabics, left. This is compared to the standard lining figures that would suit the proportions of the Latin script.</figcaption>
+</figure>
+
## Line lengths
Generally, the Syllabics will need a wider paragraph measure than the Latin script to account for the wider stance of the writing system (as noted above). This is variable, however, and depends on the language in which the respective script is being typeset. The Algonquian and Inuktut Syllabics tend to have on average long word character counts, which results in a significantly longer line length needed compared to English or French text. The Dene Syllabics (which also includes the Carrier Syllabics)—in contrast to the Algonquian and Inuktut Syllabics—possess word character count lengths that are much shorter on average, thus allowing for narrower paragraph measures. However, a wider line length is still advantageous for easier reading, as the same internal counter structure discussed above is present in the Dene Syllabics, which benefits from the added space.
-</figure>
<figcaption>The above example compares a narrow line length, to that of a wider line length, for Syllabics paragraphs. Syllabics paragraphs benefit from a wide line length for easier readability.</figcaption>
+</figure>
+
<figure>
-</figure>
<figcaption>Syllabics paragraphs require a wide line length to a comparative French or English language text, of which Indigenous languages set in Syllabics are often paired in multilingual documents. Similarly, it is very common in language learning contexts to have transliterations of Syllabics texts in the standard roman orthography of the language in question. In situations such as these, a similar or identical line length for both the Syllabics and transliterated roman text is ideal, due to longer character counts in the Latin script text.</figcaption>
+</figure>
+
## Romanisations
While this essay focuses on a discussion of the Syllabics and its inherent typographic conventions, each community that uses this writing system also requires the use of a standard roman orthography. In the Indigenous language communities that use this script, Syllabics is the primary orthography for writing the language, with the romanisations necessary for transliterations of Syllabics texts—mainly for language learning purposes, for accessibility of texts for non-local speakers, and to provide a mode of text input on various digital platforms.
-</figure>
<figcaption>A section from a Carrier (Dakelh) text by Francois Prince, 2021, which shows a transliteration of the Syllabics text in the Carrier languages standard roman orthography.</figcaption>
+</figure>
+
When working with romanizations of a language that also uses Syllabics, it is important to pay close attention to the text composition/decomposition requirements of the roman orthography. In some languages, the standard roman orthography has no special requirements in this area—such as Inuktut, Cree and Ojibway. Others, however, feature glyph sequences requiring combining marks that must stack on top of or beneath the base glyph in order for the romanised text to be readable. This is true for many of the Dene languages that also employ a Syllabics orthography. Care is needed when choosing a font that accommodates these requirements, as most typesetting scenarios for these languages will require the handling of both Syllabics and roman text.
<figure>
-</figure>
<figcaption>Showing the glyph composition/decomposition requirements for the Chipewyan (Dëne Sųłınë́ Yatıé) language’s standard roman orthography, which requires a typeface with the applicable mark-to-mark attachment rules to specify the stacking of the combining acute diacritic mark (purple).</figcaption>
+</figure>
+
<figure>
-</figure>
<figcaption>In the standard roman orthographies of many Dene languages (as well as many of the standard roman orthographies of Indigenous language across North America), mark-to-mark attachment rules are required to render diacritic stacking sequences, such as the above example. If the font being employed is not capable of rendering such sequences, a situation such as seen in the left example will occur, where the combining diacritic overlaps with the base glyph. This results in an unreadable text for the user community. It is important, therefore, to select a typeface that accommodates this behavior for these language communities.</figcaption>
+</figure>
+
## Encoding: UCAS
The Canadian Syllabics were initially encoded in the Unicode Standard in 1999, originally in a range carrying the name [Unified Canadian Aboriginal Syllabics](https://unicode.org/charts/PDF/U1400.pdf). This was further supplemented by the range [UCAS Extended](https://unicode.org/charts/PDF/U18B0.pdf), published in 2008. This encoding model was an attempt to harmonize the many Indigenous languages and their Syllabics orthographies that used the writing system within one script range. The result was a character map that sought to avoid duplication of characters, making decisions to unify the appearance and behavior of syllabic and finals characters that all languages would use. While this was the goal of the original script encoding committee, in practice, it has resulted in many orthographies—particularly the Dene and Dakelh (Carrier) Syllabics—not being accurately represented and supported. Many characters needed specifically for the Dakelh Syllabics were disunified in the original encoding for the Syllabics, but despite this, the representative glyphs were erroneously harmonized with the style of the more populous Inuktut and Algonquian Syllabics communities. Further, recent additions made to UCAS by Typotheque’s Syllabics project have added new syllabics characters required for Nattilingmiutut ([UCAS Extended-A](https://unicode.org/charts/PDF/U11AB0.pdf)), a dialect of Western Nunavut.
-</figure>
<figcaption>A showing comparing the graphic similarities and differences between the many orthographies that use the Syllabics. Note the similarity between the Algonquian and Inuktut Syllabics traditions, and the visual distinctions of the Dene Syllabics traditions.</figcaption>
+</figure>
+
## In summary
The typography of the Syllabics may lack a formal body of literature that users can consult; however, professional typographic implementations can be achieved by observing the practices of local communities in both historical and contemporary documents. By adding to the understanding of the inherent conventions that govern the Syllabics across all of the orthographies that use the script, it is possible to deliver solutions that accommodate the best possible typographic experiences for all readers of this writing system, in their respective languages.
-</figure>
<figcaption>The above example on line one shows incorrect Carrier Syllabics forms, as rendered in Google’s Noto Sans Canadian Aboriginal Syllabics. The second line shows the correct glyph shapes for these characters, rendered in November Syllabics.</figcaption>
+</figure>
+
In addition to the preferences noted above, Dakelh users have a preference for the contemporary design of certain finals characters, particularly ᑋ ᔆ ᘁ ᙆ . Historically, these characters were rendered as serifed, Latin-script form characters, which intentionally appeared distinct from other Syllabics finals characters. Francois Prince and Dennis Cumberland confirmed with the author that the contemporary community prefers monolinear shapes for these characters, which they feel better harmonize with the total Syllabics orthography, and which remain legible in text settings. \[1\]
## Vertical positioning of finals
-</figure>
<figcaption>Above, an example of the preferred vertical positioning for the finals characters in the Carrier Syllabics.</figcaption>
+</figure>
+
Although there are disunified finals characters for Dakelh within the UCAS main block (ᑋ ᔆ ᓑ ᗮ ᘁ ᙆ ᙇ ᙚ ᣵ), the majority of the finals the orthography uses are unified with characters shared with other orthographies – notably the Inuktut and Algonquian Syllabics orthographies. This produces a conflict with the vertical positioning preferences and requirements for the respective finals glyphs ᐦ ᒡ ᑊ ᐡ ᒼ ᐣ ᐟ ᐠ in most commonly available typefaces for the Carrier community.
## Modifier marks
-</figure>
<figcaption>Showing the two variations in the graphic representation of the pure consonant "r" in the Carrier Syllabics, both of which are employed today.</figcaption>
+</figure>
+
The sound “f”—as “r”—is also not encountered in the Dakelh language, with it normally being found in French or English loan words. The shape used for marking the “f” consonant in Dakelh Syllabics texts is the UPTURNED H character, which functions in the same manner as other finals characters in the orthography. It should be noted that the upturned h (U+1DA3) is not within the UCAS repertoire. This may create rendering conflicts if this code point is shared with another orthography within a type family that has differing requirements for this character.
<figure>
-</figure>
<figcaption>A showing of the representation of consonant “f” in the Dakelh Syllabics, which is encoded using U+1DA3 ᶣ MODIFIER LETTER SMALL TURNED H, a character encoded in Unicode, but outside of the UCAS range. While the encoding location of this character within the Unicode Standard is not important, it is necessary to ensure that the typeface being used to compose Dakelh Syllabics texts contains this code point, which many pan-UCAS typefaces do not include within their glyph sets.</figcaption>
+</figure>
+
## In summary
The typography of the Syllabics may lack a formal body of literature that users can consult; however, professional typographic implementations can be achieved by observing the practices of local communities in both historical and contemporary documents. By adding to the understanding of the inherent conventions that govern the Syllabics across all of the orthographies that use the script, it is possible to deliver solutions that accommodate the best possible typographic experiences for all readers of this writing system, in their respective languages.
-</figure>
<figcaption>A comparison of Sayisi Dene Syllabics in the round form style (top) and the square form style (bottom). Note that the square form style in the bottom sample allows for the variation in the vertical positioning of the finals characters to be more clearly distinguished than in the round form style showing of the same text.</figcaption>
+</figure>
+
## Vertical positioning variation for finals
The vertical positioning of finals is largely stylistic in many Syllabics orthographies; however, in the northern Dene Syllabics orthographies (North and South Slavey, and Chipewyan), this positioning is required for the correct pronunciation of the language. This requirement—although important to these orthographies and languages—creates issues in representation in the current UCAS repertoire in the Unicode Standard. This is because the finals characters required for northern Dene Syllabics are used by other Syllabics orthographies within UCAS, which require these same forms to be rendered at the topline position.
-</figure>
<figcaption>A showing of the vertical positioning variation for finals characters across four separate Athabaskan languages that use the Dene Syllabics.</figcaption>
+</figure>
+
As a result of these preferences, Syllabics fonts wishing to support the Dene Syllabics should provide the correct vertical positioning schemes for all Dene Syllabics orthographies by offering midline and baseline finals.
## In summary
-</figure>
<figcaption>Inuktut communities across Nunavik & Nunavut (blue), Cree communites** (red), Naskapi communites** (red). The above map shows Nunavik and Nunavut communities with their preferred form of ng depicted above the community place name (ᐊᖓᒃᑯᓄᑦ, ᐊᖓᒃᑯᓄᑦ). The Nunavik region—while complying with the ICI orthographic standards—prefers an "ng" form that is different than that of the Nunavut region.</figcaption>
+</figure>
+
<figure>
-</figure>
<figcaption>A comparison of the same text using the Nunavut and Nunavik local preferences for the ng final glyph shape composition, respectively.</figcaption>
+</figure>
+
This preference is satisfied in Typotheque’s November and Lava Syllabics typefaces through the implementation of OpenType Stylistic Set substitutions, which allows for switching between these two preferred character variants for these user communities.
## In summary
-</figure>
<figcaption>Warping. Circle path remains the same; font size changes. Typeface: <a href="https://fonts.google.com/specimen/Roboto+Flex?query=Roboto+Flex&vfonly=true">Roboto Flex</a>.</figcaption>
+</figure>
+
<figure>
-</figure>
<figcaption>Warping. Circle path changes; font size remains the same. Typeface: <a href="https://fonts.google.com/specimen/Roboto+Flex?query=Roboto+Flex&vfonly=true">Roboto Flex</a>.</figcaption>
+</figure>
+
Generally speaking, warping does not produce good results, unless a very specific aesthetic style is desired (perhaps for logo work), and is not recommended in most circumstances—especially for UI work.
The second method, wrapping, is where we set text along a path so that each glyph is rotated and placed accordingly, therefore maintaining the intrinsic geometry of the glyphs. Again, the greater the font size, or the more intense the curve (the effect is the same), the more obvious the baseline distortion becomes.
-</figure>
<figcaption>Wrapping. Circle path remains the same; font size changes. Typeface: <a href="https://fonts.google.com/specimen/Roboto+Flex?query=Roboto+Flex&vfonly=true">Roboto Flex</a>.</figcaption>
+</figure>
+
<figure>
-</figure>
<figcaption>Wrapping. Circle path changes; font size remains the same. Typeface: <a href="https://fonts.google.com/specimen/Roboto+Flex?query=Roboto+Flex&vfonly=true">Roboto Flex</a>.</figcaption>
+</figure>
+
Despite this, when setting type around a full circle, it usually looks better to have the text occupy more of the circle.
<figure>
-</figure>
<figcaption>The hypothetical logo on the left looks better, as it helps imply the whole circle. Typeface: <a href="https://fonts.google.com/specimen/Anybody">Anybody</a>.</figcaption>
+</figure>
+
However, the wrapping or rotation-based option will potentially introduce noticeable visible changes to the spacing between [characters](/glossary/character). This is perhaps more noticeable with [condensed](/glossary/condensed_narrow_compressed) type, but then [wider](/glossary/wide_extended) type creates its own issues, as the rotation of each glyph becomes more obvious.
<figure>
-</figure>
<figcaption>Experimenting with the width axis in <a href="https://fonts.google.com/specimen/Anybody">Anybody</a>.</figcaption>
+</figure>
+
With this in mind, it’s advisable to experiment with different widths and different [tracking](/glossary/tracking_letter_spacing) settings depending on the angle of the curvature and the size of the font. [Variable fonts](/glossary/variable_fonts) with a [width axis](/glossary/width_axis) can be particularly useful in this regard.
[All-caps](/glossary/all_caps) type can work better due to the uniform shapes and sizes of the letterforms, but sentence case type can be fine if the typeface has a large [x-height](/glossary/x_height) and relative open tracking, as with [Roboto](https://fonts.google.com/specimen/Roboto):
-</figure>
<figcaption>With the sans serif, the triangular gaps become more consistent and obvious, and potentially more distracting. Typefaces: <a href="https://fonts.google.com/specimen/Roboto">Roboto</a> and <a href="https://fonts.google.com/specimen/Roboto+Slab">Roboto Slab</a>.</figcaption>
+</figure>
+
So, to summarize:
1. Warping rarely produces good results. For UI design, use wrapping instead.
-</figure>
<figcaption>Positioning of letters from different typefaces within their default bounding box heights. All of the examples are set to the same font size.</figcaption>
+</figure>
+
### So what’s the big deal?
What all of this means in practice is there are 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.
-</figure>
<figcaption>An overview of various problems that arise from vertical alignment within digital typography.</figcaption>
+</figure>
+
## 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.
-</figure>
<figcaption>The web renders text with half-leading above and below the 100% line-height for a font.</figcaption>
+</figure>
+
iOS platforms followed suit with the 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.
<figure>
-</figure>
-
<figcaption>iOS and Android render text nodes slightly differently, causing confusion within design tools.</figcaption>
+</figure>
+
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.
-</figure>
<figcaption>Vertical rhythm by aligning to cap-height and baseline becomes a very manual, and non-systematic process.</figcaption>
+</figure>
+
### 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 it will always be centered, no matter the line height. This makes it much easier to create a vertical [rhythm](/glossary/rhythm) within your text.
-</figure>
<figcaption>An example of how letters can and can’t be aligned to the true center of a default line-height.</figcaption>
+</figure>
+
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.
<figure>
-</figure>
<figcaption>The benefits of choosing a font that is equally centered to its line-height.</figcaption>
+</figure>
+
### 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'll be able to 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.
-</figure>
<figcaption>How leading-trim can cut a text node on the web, to allow for better cap-height and baseline positioning.</figcaption>
+</figure>
+
### 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)
-</figure>
<figcaption>The ratio of cap-height and baseline to a line-height will always be the same no matter what text-size is used.</figcaption>
+</figure>
+
## 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.
-</figure>
<figcaption>Basic weight change on hover. Typeface: <a href="https://fonts.google.com/specimen/Newsreader">Newsreader</a>.</figcaption>
+</figure>
+
The effect is rather sudden, switching between weights instantly on hover. With variable fonts, though, it’s possible smooth the effect using a simple transition:
<figure>
-</figure>
<figcaption>Subtle hover animation with variable fonts.</figcaption>
+</figure>
+
Instead of jumping between static weights, the change is continuous. Just be careful not to make animations too long—even one-second animations can feel tedious for quick hover interactions.
It’s very common for bolder weights of a typeface to occupy more space, which causes subtle shifts in positioning. For menus and other small pieces of text, such shifts can be minimized by isolating elements from each other in separate fixed containers:
-</figure>
<figcaption>Hover animation with each element in separate fixed containers to prevent layout shift.</figcaption>
+</figure>
+
## Multiplexed Weight and Grades
For more demanding situations where shifts in positioning aren’t acceptable at all, you can use “[multiplexed](/glossary/multiplexed_duplexed_uniwidth)” fonts, designed specifically to occupy the same amount of space across a range of variants. When the Regular and Bold weights occupy the same amount of horizontal spacing, the hover effect feels more seamless. It is also crucial for use within paragraphs of body text where layout shifts would be too distracting otherwise.
-</figure>
<figcaption>Typeface: <a href="https://fonts.google.com/specimen/Newsreader">Newsreader</a>.</figcaption>
+</figure>
+
<figure>
-</figure>
<figcaption>Multiplexed fonts prevent shifts in the layout by maintaining the same width requirements across variants. Typeface: <a href="https://fonts.google.com/specimen/Recursive">Recursive</a>.</figcaption>
+</figure>
+
On a related note, some variable fonts also offer a “[grade](/glossary/grade_axis)” axis separate from (and often in addition to) the standard [weight](/glossary/weight_axis) axis. This allows for multiplexed adjustments to a typeface’s apparent weight even if its standard weight axis would otherwise affect spacing.
Not all variable fonts offer multiplexed variations, but there is a [growing selection](https://v-fonts.com/tags/C9) available. And it’s worth noting that almost all [monospaced](/glossary/monospaced) variable fonts are naturally multiplexed.
-</figure>
<figcaption>Multiplexed hover animations with variations other than standard weight. Typeface: Cheee Variable.</figcaption>
+</figure>
+
Finally, for other special interactive effects, keep in mind that `:hover` isn’t limited to just hyperlinks. For example, you can wrap arbitrary elements in their own `span` elements and use that for triggering hover effects. You can also tweak the timing of a transition to make it faster or slower:
<figure>
<figcaption>Multiplexed hover effects with more expressive variations, on a letter-by-letter basis. Typeface: Cheee Variable.</figcaption>
+</figure>
+
Interactivity is a virtually infinite space for experience design, and variable fonts offer that much more room for exploration. For more ideas on using variable fonts, see the [other articles listed under the topic of variable fonts](https://fonts.google.com/knowledge/topics/variable_fonts).
-</figure>
<figcaption>Static fonts with a layout breakpoint: A single breakpoint changes padding, font sizes, and line-height.</figcaption>
+</figure>
+
A smoother and more seamless approach is to reduce the reliance on such queries, and instead try to make use of relative values that scale fluidly.
<figure>
-</figure>
<figcaption>Static fonts with intrinsic layout: The widths of the fonts remain fixed, but padding, font sizes, and line-heights change more smoothly with relative units.</figcaption>
+</figure>
+
Variable fonts allow for seamless adaptation to extend even further down to the lowest-level details in the typeface. Typographic glyphs that would otherwise be fixed in traditional static fonts can now fluidly morph to better fit their containers.
## Width
-</figure>
<figcaption>Gradual variable font changes with intrinsic layout: Everything changes smoothly thanks to relative units and the fine-tuning flexibility of variable fonts.</figcaption>
+</figure>
+
(As of October 2022, the lack of support for [interpolated values and unit division](https://css.oddbird.net/rwd/interpolation/) in CSS means smooth control over variable font width still requires either a series of closely-spaced breakpoints to adjust the font variations incrementally, or a dash of JavaScript to help set font width values seamlessly with a single intrinsic formula. Tools like [Typetura](https://typetura.com) can be helpful for this kind of intrinsic control.)
Special care should be taken when adjusting the width of a typeface, particularly in the context of running body text. Extreme widths can adversely affect readability, negating other benefits in spatial efficiency.
-</figure>
<figcaption>Avoid extremely narrow or wide font variants for paragraph text, as they can harm readability when typesetting anything more than a few words at a time.</figcaption>
+</figure>
+
## Line-filling
Speaking of width, variable fonts with adjustable widths can be used to make different pieces of text fill their containers without changing the font size. Long words can be condensed to fill the same line length as short words without resorting to artificial transformations. (For a real-world example of this effect in use, see [the 2019 Typographics website](https://2019.typographics.com)). Options for achieving this automatically still require some JavaScript, but tools like [Font-To-Width](http://font-to-width.com) or [fit-to-width](https://github.com/Lorp/fit-to-width) can make it relatively easy.
-</figure>
<figcaption>Variable fonts can be automatically condensed or expanded to fit different pieces of text on the same line length without changing the font size or resorting to synthetic squooshing.</figcaption>
+</figure>
+
## Extenders
Another approach for optimizing the spatial efficiency of a typeface is related to the clearance needed for minimal [line space](/glossary/line_height_leading). This is typically limited by the distance the [cap height](/glossary/cap_height) and [ascenders/descenders](/glossary/ascenders_descenders) extend beyond the bounds of the [x-height](/glossary/x_height). Shorter extenders allow for a smaller line space by preventing glyphs from colliding between lines.
-</figure>
<figcaption>Fonts with retractable ascenders and descenders can be used to avoid collisions for tight line spacing.</figcaption>
+</figure>
+
Some typefaces address this by simply minimizing the length of extenders across the board. It may look slightly unusual in settings where a small line space isn’t needed, but it allows for tighter settings when needed.
A technique that is much less common is to use variable fonts with an axis for adjustable extenders. This means extenders can be shortened or lengthened only as much as needed. In a responsive context, this can happen in tandem with reductions to the line space and other properties.
-</figure>
<figcaption>Variable fonts allow for extenders that shrink or grow as space allows to prevent glyphs from colliding between lines.</figcaption>
+</figure>
+
(As with the adjustment to font widths mentioned above, this technique also requires the use of breakpoints or some minimal JavaScript.)
Those are just some examples of how you might want to harness the flexibility of variable fonts for various spatial optimizations. For more ideas on using variable fonts, see the [other articles listed under the topic of variable fonts](https://fonts.google.com/knowledge/topics/variable_fonts).
projects / thirdparty / google / fonts.git / commitdiff
