mirror of
https://github.com/google/fonts.git
synced 2025-01-07 18:20:56 +03:00
GFK Q4 Tuesday tweaks (#5637)
* Test commit * Thumbnail for `cjk_typesetting_rules` * Thumbnail for `japanese_typography_basics` * Thumbnail for `the_evolution_of_hangeul_type_design` * Thumbnail for `type_classification_in_cjk` * Thumbnail for `how_type_influences_readability` * Thumbnail for `pairing_typefaces_based_on_their_construction_using_the_font_matrix` * New `readability_06.svg` — down to 512 kb! * Renaming CJK module * Renaming Readability module * CJK module `excerpt` * Actioning Susanna’s additional edit suggestions * `figcaption` elements for 3 × history articles * Updating VF syncing article re: new Typeface app feature * Fixing missing comma * Correcting typo in `modern_type` * Copy edits to `modern_type` * Copy edits to `display_type` * Copy edits to `from_metal_to_digital` * Corrections to CJK prev/next articles * Copy edits to `type_classification_in_cjk` + metadata * Splitting `type_classification_in_cjk` into 3 articles * Inserting `related_terms: "script_writing_system"` into all CJK articles * Updating CJK module ordering in light of splitting * Dave’s re-write of the CJK module `excerpt` * Create authenticity_ex1_mock.jpg * Placing `authenticity_ex1_mock.jpg` in article * Create authenticity_ex2_mock.jpg * Placing `authenticity_ex2_mock.jpg` in article * New version of `authenticity_ex1_mock.jpg` * Alt text for `adding_an_authentic_natural_touch_to_type` * Adding `authenticity_ex1_EXTRA.svg` illo * Placing `authenticity_ex1_EXTRA.svg` in article * New `authenticity_ex1_EXTRA.svg` * Name change: `how_to_make_type_feel_authentic` * New article name in module ordering * Correcting prev/next in new `using_type` articles * Excerpt for `how_to_make_type_feel_authentic` * Excerpt for `from_type_to_logotype` * Excerpt for `vertical_spacing_and_line_height_in_design_systems` * Excerpt tweaks to `pairing_typefaces_based...` * Excerpt for `how_typefaces...` * Actioning missing alt text in all `history_of_type` articles * Actioning missing alt text in all `how_typefaces...` * Actioning missing alt text in `how_type_influences_readability` * Fixing missing link in `how_to_make_type_feel_authentic` * Fixing errors found by checker before merge * Another URL fix * 6 × excerpts for all CJK articles * Excerpts for Readability module + both articles * Copy edit to accessibility article * Fixing missing URL in `fitting_the_line` * Fixing missing URLs in `justification_hyphenation` * Fix Knowledge Graph CI * GFK edits (batch 1) * GFK Q4 batch 2 * Actioning TO-DO in `from_type_to_logotype` * New thumbnail for `...korean` * Even newer thumbnail for `...korean` * New thumbnail for `...japanese` * New thumbnail for `...chinese` * Removing duplicate CJK images Co-authored-by: nathan-williams <nlw2sx@virginia.edu> Co-authored-by: repeatdailystudio <52079926+repeatdailystudio@users.noreply.github.com>
This commit is contained in:
Elliot Jay Stocks
GitHub
parent
30a4530428
commit
fb8d0491c1
@ -1,8 +1,8 @@
|
||||
The single biggest challenge we face when [pairing type](/topic/pairing_type) is choosing a secondary [typeface](/glossary/typeface) that’s different enough from our primary choice, but not _too_ different, as described in our article “[Pairing typefaces](/lesson/pairing_typefaces)”. This can be a challenge, because it’s not always clear where the similarities and the differences should lie.
|
||||
The single biggest challenge we face when [pairing type](/topic/pairing_type) is choosing a secondary [typeface](/glossary/typeface) that’s different enough from our primary choice, but not _too_ different, as described in our article “[Pairing typefaces](/lesson/pairing_typefaces)." This can be a challenge, because it’s not always clear where the similarities and the differences should lie.
|
||||
|
||||
In this article, we want to share with you the concept of the font matrix—an approach based on the work of typography professor [Indra Kupferschmid](https://de.wikipedia.org/wiki/Indra_Kupferschmid). Understanding it can change your perception of type and give you a framework to make better decisions when pairing typefaces.
|
||||
|
||||
Please bear in mind that combining type is not a science, with hard and fast rules. It’s a creative discipline, and you can do whatever you think feels right for your project. Take the ideas shared in this article as guidelines to make your own decisions in the great adventure of pairing type.
|
||||
Please bear in mind that combining type is not a science with hard and fast rules. It’s a creative discipline and you can do whatever you think feels right for your project. Take the ideas shared in this article as guidelines to make your own decisions in the great adventure of pairing type.
|
||||
|
||||
## The problem with the current models for classifying type
|
||||
|
||||
@ -37,11 +37,11 @@ So how can we describe typefaces more accurately than with the genre classificat
|
||||
</figure>
|
||||
<figcaption>A three-layer approach for describing typefaces based upon the work of Indra Kupferschmid.</figcaption>
|
||||
|
||||
Let’s take a look at each individual layer to understand what it means, and how it can help us choose and pair typefaces.
|
||||
Let’s take a look at each individual layer to understand what it means and how it can help us choose and pair typefaces.
|
||||
|
||||
## Layer 1: Skeleton (form model)
|
||||
|
||||
This is the most crucial part, referring to the structure underneath a typeface. There are three basic form models:
|
||||
This is the most crucial part: referring to the structure underneath a typeface. There are three basic form models:
|
||||
|
||||
* Dynamic
|
||||
* Rational
|
||||
@ -60,7 +60,7 @@ It’s easier to distinguish the form models with [contrast](/glossary/contrast)
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
|
||||
</figure>
|
||||
<figcaption>The three different form models shown with sans serif typefaces.</figcaption>
|
||||
@ -92,7 +92,7 @@ With a **rational** typeface, we can see that these apertures are closed, which
|
||||
</figure>
|
||||
<figcaption>Very constructed letter shapes, like the circular “o” and “e.” The “t” is a simple cross (set in Outfit).</figcaption>
|
||||
|
||||
And with the **[geometric](/glossary/geometric) typefaces,** the apertures are not that relevant for determining the form model. Also, there is no obvious axis either. It’s more about how constructed the letter shapes are. Like the circular “e,” “g,” “a,“ and “o,” or the simple “t.” This creates a clean, modern, and functional appearance.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
@ -227,12 +227,12 @@ Now we look for a secondary typeface for inline code in the body text. Bitter do
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
|
||||
</figure>
|
||||
<figcaption>Steps 3 to 5: We look for a secondary typeface for inline code, that’s, dynamic, linear and monospace.</figcaption>
|
||||
<figcaption>Steps 3 to 5: We look for a secondary typeface for inline code that’s dynamic, linear and monospace.</figcaption>
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -268,6 +268,6 @@ This is not a perfect system. Not every typeface fits into it, and you won’t b
|
||||
</figure>
|
||||
<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>
|
||||
|
||||
When applying it to your design, other factors come into play, depending on how close the combination is, such as a similar [x-height](/glossary/x_height), or a similar or different [width](/glossary/width). Also, by using different [weights](/glossary/weight) or [styles](/glossary/style), you can hide a less-than-ideal combination.
|
||||
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).
|
||||
|
||||
So see the font matrix as a guideline to make a decision, but don’t drive yourself crazy. Even Indra Kupferschmid says that it is not binding and should not limit your creativity. It is one way—not the only way—and hopefully this will support you in finding _your_ way.
|
||||
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.
|
||||
|
||||
@ -7,15 +7,15 @@ The nineteenth century witnessed rapid changes in society and industry, which le
|
||||
</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>
|
||||
|
||||
Another early example of the new display type was the [Slab Serif](/glossary/slab_serif_egyptian_clarendon). Modern types had reduced serifs to hairline strokes, but in the Slab Serif we see the opposite extreme—very heavy serifs attached to low-contrast, robust, and [bold](/glossary/bold) [letterforms](/glossary/letterform). By the mid-1800s, out of these forms evolved a sub-genre called Clarendon, a style of Slab Serif more suited to text settings—lighter, with more contrast, and larger [x-heights](/glossary/x_height). The Slab Serif, a term coined much later, was at first known as Egyptian. Discoveries in Egypt, at the turn of the 19th century, had led to a period of Egyptomania, and it appears that type founders simply exploited this fashion, borrowing “Egyptian” to convey exotic and different, and also to convey a feeling of incised or inscriptional forms.
|
||||
Another early example of the new display type was the [slab serif](/glossary/slab_serif_egyptian_clarendon). Modern types had reduced serifs to hairline strokes, but in the slab serif we see the opposite extreme—very heavy serifs attached to low-contrast, robust, and [bold](/glossary/bold) [letterforms](/glossary/letterform). By the mid-1800s, out of these forms evolved a sub-genre called Clarendon, a style of slab serif more suited to text settings—lighter, with more contrast, and larger [x-heights](/glossary/x_height). The "slab serif," a term coined much later, was at first known as Egyptian. Discoveries in Egypt, at the turn of the 19th century, had led to a period of Egyptomania, and it appears that type founders simply exploited this fashion, borrowing “Egyptian” to convey exotic and different, and also to convey a feeling of incised or inscriptional forms.
|
||||
|
||||
## Revolution
|
||||
|
||||
But what prompted the sudden appearance of so many new typefaces and styles? The Industrial Revolution shifted production from handmade to machine made—toward industrial production and machine manufacturing. In time it came to affect every aspect of printing and type making: typecasting, [typesetting](/glossary/typesetting), paper production, book binding, and even the printing press—by the end of the century, all had been mechanized. One of the products of the Industrial Revolution, and subsequent economic expansion, was a proliferation of ephemera and display advertising—billboards, posters, and flyers of larger and larger size.
|
||||
But what prompted the sudden appearance of so many new typefaces and styles? The Industrial Revolution shifted production from handmade to machine made—toward industrial production and machine manufacturing. In time it came to affect every aspect of printing and type making: typecasting, [typesetting](/glossary/typesetting), paper production, book binding, and even the printing press. By the end of the century, all had been mechanized. One of the products of the Industrial Revolution, and subsequent economic expansion, was a proliferation of ephemera and display advertising—billboards, posters, and flyers of larger and larger size.
|
||||
|
||||
Type on a poster or billboard needs to be readable from across the street, and so must be considerably larger and bolder. And if they were to stand out among the growing number of competing billboards, then bold and atypical styles and experimental types were more likely to stop people in their tracks. The result was a kind of type explosion, with decorated, floral, chromatic, shadowed, inline, outline, Tuscan, [condensed](/glossary/condensed_narrow_compressed)—all emerging to meet the new demands of display advertising on billboards, flyers and in the thousands of new periodicals and newspapers being published. Display type was not an innovation of the 19th century, but the new designs, bolder in weight, more striking in their letterforms and often used in much larger sizes, were far more widespread and earned their own typographical [classification](/glossary/classification).
|
||||
|
||||
However, casting very large letters in lead is impossible. Large volumes of molten type metal cool at different rates resulting in deformed, cracked, or uneven type. The solution to manufacturing big type was wood. It was ideally suited to larger sizes of letter as it was light, durable, and typically only half the cost of metal type. Although wood type was not entirely new, its use really took off when in 1827, Darius Wells, in New York, invented a router, a mechanized wood-cutting tool enabling mass production. The rapid adoption of wood type was also helped by the ease with which it could be copied. If the router was attached to a pantograph, any wood type could easily be traced around and reproduced at a variety of sizes—often by wily competitors.
|
||||
However, casting very large letters in lead is impossible. Large volumes of molten type metal cool at different rates resulting in deformed, cracked, or uneven type. The solution to manufacturing big type was wood. It was ideally suited to larger sizes of letter as it was light, durable, and typically only half the cost of metal type. Although wood type was not entirely new, its use really took off when in 1827, Darius Wells, in New York, invented a router—a mechanized wood-cutting tool—which enabled mass production. The rapid adoption of wood type was also helped by the ease with which it could be copied. If the router was attached to a pantograph, any wood type could easily be traced around and reproduced at a variety of sizes—often by wily competitors.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -24,7 +24,9 @@ However, casting very large letters in lead is impossible. Large volumes of molt
|
||||
</figure>
|
||||
<figcaption>Early 19th-century reverse contrast typeface in wood.</figcaption>
|
||||
|
||||
When designing typefaces for reading, one works within fairly narrow parameters. Altering the structure and proportions of letterforms or adding novel or unusual accouterments interrupts the rhythm of the text—even if the individual letters are [legible](/glossary/legibility), readers will be distracted by unfamiliar details, and [readability](/glossary/readability) suffers. But when it comes to typefaces for advertising, where the whole purpose is to stand out , then there is much more room for innovation with both the structure and detail of letterforms. Unhindered by the exigencies of readability, typefounders (both metal and wood type) experimented with every aspect of letter design. One experiment by William Caslon IV even turned type inside out, producing the “Reverse Contrast” typeface, perhaps one of the most unusual designs of the early 19th century. From these typefaces that suffered from poor eligibility evolved a less extreme variant of reverse contrast design based on the Clarendons, and named French Clarendon. [Serifs](/glossary/serif) too were experimented with—from slabs of different lengths and thicknesses to wedged, curved, and other highly ornamental forms like the bifurcated Tuscans.
|
||||
When designing typefaces for reading, one works within fairly narrow parameters. Altering the structure and proportions of letterforms or adding novel or unusual accouterments interrupts the rhythm of the text. Even if the individual letters are [legible](/glossary/legibility), readers will be distracted by unfamiliar details, and [readability](/glossary/readability) suffers. But when it comes to typefaces for advertising, where the whole purpose is to stand out , then there is much more room for innovation with both the structure and detail of letterforms.
|
||||
|
||||
Unhindered by the exigencies of readability, typefounders (both metal and wood type) experimented with every aspect of letter design. One experiment by William Caslon IV even turned type inside out, producing the Reverse Contrast" typeface, perhaps one of the most unusual designs of the early 19th century. 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>
|
||||
|
||||
@ -37,11 +39,11 @@ The arrival of the modern advertising poster roughly coincided with the inventio
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
|
||||
</figure>
|
||||
<figcaption>Bottom line: William Caslon’s ‘sans serif’, c. 1816.</figcaption>
|
||||
<figcaption>Bottom line: William Caslon’s sans serif, c. 1816.</figcaption>
|
||||
|
||||
## The arrival of the sans serif style
|
||||
|
||||
The most consequential type style introduced in the 19th century was the sans serif. The style first appeared in type when William Caslon IV (1780–1869) designed a large all-caps [sans serif](/glossary/sans_serif) that he called English Egyptian, and which first appeared in a specimen book published in about 1816. At the time, it was hardly remarked on, and it would be some time before the sans serif was more widely adopted. In 1832, British typefounder Vincent Figgins produced a sans serif typeface in three weights, followed by another ten the following year. Figgins coined the term ‘sans serif’ to describe this ‘serifless’ typeface. In 1834, the British [typefounder](/glossary/type_foundry) William Thorowgood was the first to design a sans serif with both [uppercase and lowercase](/glossary/uppercase_lowercase) alphabets, and used the term “[Grotesque](/glossary/grotesque_neo_grotesque)” to describe them. Although sans serifs began to grow in popularity, their use in the 19th century was typically limited to small sizes in commercial printing. Their broader popularity would begin in the next century.
|
||||
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.
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
In Europe, from the 1440s when Johannes Gutenberg began printing up until the Industrial Revolution, very little changed in terms of the technologies employed to manufacture type and to print. For three and a half centuries, printing and its allied trades were very much hand trades, with metal type cast in a hand-held mould, set by human compositors, and printed on a hand-operated printing press. The 19th century witnessed a revolution with the widespread mechanization of every aspect of type production and printing. However, for the next revolution in type, we wouldn't have to wait another 350 years. In the 20th century, the acceleration of change was phenomenal. Within the space of several decades, type had been transformed from hot metal to phototype and then into digital fonts. Free of physical constraints, the design of type could change more profoundly than ever before.
|
||||
In Europe, from the 1440s when Johannes Gutenberg began printing up until the Industrial Revolution, very little changed in terms of the technologies employed to manufacture type and to print. For three and a half centuries, printing and its allied trades were very much hand trades, with metal type cast in a hand-held mold, set by human compositors, and printed on a hand-operated printing press. The 19th century witnessed a revolution with the widespread mechanization of every aspect of type production and printing. However, for the next revolution in type, we wouldn't have to wait another 350 years. In the 20th century, the acceleration of change was phenomenal. Within the space of several decades, type had been transformed from hot metal to phototype and then into digital fonts. Free of physical constraints, the design of type could change more profoundly than ever before.
|
||||
|
||||
## Rise of the sans serif
|
||||
|
||||
Although the [sans serif](/glossary/sans_serif) [typeface](/glossary/typeface) first appeared at the start of the 19th century, they were not popularized until the 20th century. What started out as a rather clumsy all-caps alphabet would evolve into a genre that would quickly eclipse serif types. The evolution from grotesque to neo-grotesque was really part of the sans serif letting go of its serif roots. The quirky irregularities and fussy details of the grotesques were reigned in or erased in favor of uniformity. This can be seen in the reduction of contrast in the letterforms, and the design of sans serif [italics](/glossary/italic) based not on cursive exemplars but as slanted or [oblique](/glossary/oblique) versions of [uprights](/glossary/regular_upright) or romans. Helvetica, designed by Max Miedinger & Eduard Hoffmann in 1957, is a prime example of this evolution of the sans serif. Initially released as Neue Haas Grotesk, and based on Akzidenz-Grotesk released by the Berthold type foundry in Germany in 1898, is one of the world’s most ubiquitous digital fonts. It became especially popular when it began to be bundled with popular software and operating systems.
|
||||
Although the [sans serif](/glossary/sans_serif) [typeface](/glossary/typeface) first appeared at the start of the 19th century, they were not popularized until the 20th century. What started out as a rather clumsy all-caps alphabet would evolve into a genre that would quickly eclipse serif types. The evolution from grotesque to neo-grotesque was really part of the sans serif letting go of its serif roots. The quirky irregularities and fussy details of the grotesques were reigned in or erased in favor of uniformity. This can be seen in the reduction of contrast in the letterforms and the design of sans serif [italics](/glossary/italic) based not on cursive exemplars, but as slanted or [oblique](/glossary/oblique) versions of [uprights](/glossary/regular_upright) or romans. Helvetica, designed by Max Miedinger & Eduard Hoffmann in 1957, is a prime example of this evolution of the sans serif. Initially released as Neue Haas Grotesk, and based on Akzidenz-Grotesk released by the Berthold type foundry in Germany in 1898, Helvetica is one of the world’s most ubiquitous digital fonts. It became especially popular when it began to be bundled with popular software and operating systems.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -11,7 +11,7 @@ Although the [sans serif](/glossary/sans_serif) [typeface](/glossary/typeface) f
|
||||
</figure>
|
||||
<figcaption>Akzidenz-Grotesk released by the Berthold type foundry in 1898, inspired the popular Neo-grotesque style.</figcaption>
|
||||
|
||||
The trend toward simplified or industrial letters, or letters that appear machine-made or constructed, can be seen in typefaces like Paul Renner’s [geometric](/glossary/geometric) sans, Futura, designed in 1927. But this concept was more fully realized in the typeface DIN 1451, released by Deutsches Institut für Normung (German Institute for Standardization). Just as the [Transitional](/glossary/transitional_neo_classical) typefaces of the 18th century had rationalized their Old Style predecessors, so too, in DIN was an attempt to design a modern standard or template alphabet—a rationalization of the sans serif style. DIN appeared on road signage throughout Germany and even on vehicle license plates. It is the precursor to countless modern sans serif designs.
|
||||
The trend toward simplified or industrial letters, or letters that appear machine-made or constructed, can be seen in typefaces like Paul Renner’s 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>
|
||||
|
||||
@ -22,7 +22,7 @@ The trend toward simplified or industrial letters, or letters that appear machin
|
||||
|
||||
## Light, digital, and postmodern type
|
||||
|
||||
Metal type used in the twentieth century looked and worked in the same way as that used in the fifteenth. Typefounding had undergone a transformation in its method of production, from pieces of metal type laboriously cast one by one in a hand mould, to mechanized typecasting with machines like the Monotype caster and Linotype machine. The next transformation would move the embodiment of type from pieces of lead alloy to silhouettes on photographic film. Phototypesetting, a technology invented in the 1890s, and used at first mostly for illustrations and headings, was more widely adopted in the 1960s. Phototypesetting machines like the Diatype worked on the same principle as the mechanical metal type casting machines, but with the three-dimensional letter mold replaced with a negative image of each letter on film. Later, those letters, on a strip of film or a disc, were exposed to photosensitive material that was then printed with photo lithography. Phototypesetting sped up composition; but it also meant that printers no longer needed to store literally tons of metal type. However, the technology of phototype was short lived, with photographed exposed alphabets making way for digital ones.
|
||||
Metal type used in the twentieth century looked and worked in the same way as that used in the fifteenth. Typefounding had undergone a transformation in its method of production, from pieces of metal type laboriously cast one by one in a hand 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.
|
||||
|
||||
From the mid 1980s, the personal computer and low-resolution printers put typography into the hands of the public. For hundreds of years, designing type had been the domain of skilled punchcutters who served long apprenticeships. But the personal computer and the widespread adoption of the graphical user interface in everyday software opened up graphic design and type design to anyone with an imagination.
|
||||
|
||||
@ -46,4 +46,4 @@ In 1984, the Macintosh computer went on sale and it was quickly exploited by a n
|
||||
|
||||
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](/glossary/variable_fonts) fonts, where multiple instances are combined into a single font file and controlled by [axes](/glossary/axis_in_variable_fonts) like weight, slant, and width, has led to their wider use both in print and as web fonts.
|
||||
The personal computer, and later the internet in the 1990s, made type design accessible to a much larger audience—one not always equipped with formal design training, and not afraid to experiment with new technologies and designs. With higher resolution displays and outline fonts came thousands of new designs, with everything from everyday informal handwriting and formal [calligraphy](/glossary/calligraphy) to weathered and grunge-style lettering reimagined as fonts. Even the chromatic types of the mid-19th-century have been reproduced as layer fonts, and more recently as [color fonts](/glossary/color_fonts) that permit embedding additional bitmapped and vector (SVG) textures and elements stored alongside the font outlines. More recently, the growth in support for [variable 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.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
When John Baskerville introduced his roman [typefaces](/glossary/typeface) in the 1750s, some complained that their [contrast](/glossary/contrast) was so high that reading them could damage your eyes. During Baskerville’s lifetime, his types were more popular abroad than in England, particularly in France and Italy. And it was there that his typefaces proved most influential. But the persistent trend towards higher contrast typefaces, which had begun long before Baskerville, was by no means over. By the 1780s, contrast would be taken to greater extremes with a new style of typeface now termed Modern—in contrast to what we now call Old Style typefaces and their various descendants. They are also known as Didone, a term coined in 1954 as part of the Vox-ATypI typeface [classification](/lesson/making_sense_of_typographic_classifications) system — a fusion of the names of the style’s most famous proponents, Didot and Bodoni.
|
||||
When John Baskerville introduced his roman [typefaces](/glossary/typeface) in the 1750s, some complained that their [contrast](/glossary/contrast) was so high that reading them could damage your eyes. During Baskerville’s lifetime, his types were more popular abroad than in England, particularly in France and Italy. And it was there that his typefaces proved most influential. But the persistent trend towards higher-contrast typefaces, which had begun long before Baskerville, was by no means over. By the 1780s, contrast would be taken to greater extremes with a new style of typeface now termed Modern—in contrast to what we now call Old Style typefaces and their various descendants. They are also known as Didone, a term coined in 1954 as part of the Vox-ATypI typeface [classification](/lesson/making_sense_of_typographic_classifications) system—a fusion of the names of the style’s most famous proponents, Didot and Bodoni.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -11,9 +11,9 @@ When John Baskerville introduced his roman [typefaces](/glossary/typeface) in th
|
||||
|
||||
Firmin Didot (1764–1836), son of François-Ambroise Didot, from the storied Parisian printing dynasty, cut Modern style typefaces that his brother Pierre printed with. However, by far the most prolific producer of Modern style typefaces, and the most influential for this new style, was the Italian Giambattista Bodoni (1740–1813). He was from a family of printers from Saluzzo in the Piedmont region in Northwest Italy, close to Italy’s western border with France.
|
||||
|
||||
In 1768, Bodoni was invited to run the newly established Stamperia Reale, or Royal Press of Duke Ferdinand in Parma. When Bodoni arrived in Parma, he immediately got to work stocking up on type by the famed French punchcutter Pierre Simon Fournier (1712–68). When Bodoni began to make his own typefaces, he credited Fournier as his primary influence. But from the 1770s, we begin to see a change in Bodoni’s style. Initially, his typography imitated that of Fournier with its rococo decoration and [Transitional](/glossary/transitional_neo_classical) style typefaces, but he gradually moved toward a new and distinctive style of his own. He rejected all forms of typographic ornamentation and borders, preferring instead vast expanses of white space and generous margins. In his typefaces, he increased contrast and introduced very fine almost unbracketed serifs, longer ascenders and descenders, and more generous line-spacing. Now, line-spacing we would usually associate with typography rather than the design of typefaces. For centuries, type had typically been set solid — that is with no additional spacers inserted between lines of type. But Bodoni incorporated extra line-space into the type itself. He did this by casting his type on a larger body, thus imitating the appearance of additional line spacing.
|
||||
In 1768, Bodoni was invited to run the newly established Stamperia Reale, or Royal Press of Duke Ferdinand in Parma. When Bodoni arrived in Parma, he immediately got to work stocking up on type by the famed French punchcutter Pierre Simon Fournier (1712–68). When Bodoni began to make his own typefaces, he credited Fournier as his primary influence. But from the 1770s, we begin to see a change in Bodoni’s style. Initially, his typography imitated that of Fournier with its rococo decoration and [transitional](/glossary/transitional_neo_classical) style typefaces, but he gradually moved toward a new and distinctive style of his own. He rejected all forms of typographic ornamentation and borders, preferring instead vast expanses of white space, and generous margins. In his typefaces, he increased contrast and introduced very fine—almost unbracketed—serifs, longer ascenders and descenders, and more generous line-spacing. Now, line-spacing we would usually associate with typography rather than the design of typefaces. For centuries, type had typically been set solid; that is with no additional spacers inserted between lines of type. But Bodoni incorporated extra line-space into the type itself. He did this by casting his type on a larger body, thus imitating the appearance of additional line spacing.
|
||||
|
||||
Reproduction of the fine details in Bodoni’s type was made possible by exceptionally smooth paper, new inks, and improved type casting methods. Under magnification, Bodoni’s typefaces reveal remarkably crisp outlines and even fill. Bodoni became a celebrity during his own lifetime, for his Modern typefaces and his meticulous typography. And the Modern style took Europe by storm, even reaching America and winning the praise of a printer named Benjamin Franklin, in future to become president of the United States, Franklin wrote to Bodoni in 1787 praising his printing and type: “It is one of the most beautiful that Art has hitherto produced.” Bodoni also counted the Pope and Napoleon as admirers of his work.
|
||||
Reproduction of the fine details in Bodoni’s type was made possible by exceptionally smooth paper, new inks, and improved type casting methods. Under magnification, Bodoni’s typefaces reveal remarkably crisp outlines and even fill. Bodoni became a celebrity during his own lifetime for his Modern typefaces and his meticulous typography. And the Modern style took Europe by storm, even reaching America and winning the praise of a printer named Benjamin Franklin, in future to become president of the United States, Franklin wrote to Bodoni in 1787 praising his printing and type: “It is one of the most beautiful that Art has hitherto produced.” Bodoni also counted the Pope and Napoleon as admirers of his work.
|
||||
|
||||
As an interesting historical aside, Bodoni and the Didots did not get along. Unable to fault Bodoni’s typefaces and typography, the brothers Didot, Firmin and his older brother Pierre, chose to attack the textual accuracy of Bodoni’s editions, jumping on even the smallest typos. In 1799 Firmin Didot wrote, “As a literary man, I condemn his editions, as a typographer I admire them.” The snub was fueled by national rivalry, snobbery, and no doubt a good amount of jealousy, too.
|
||||
|
||||
@ -27,7 +27,7 @@ In Modern typefaces, the extreme contrast between thick and thin strokes was als
|
||||
|
||||
</figure>
|
||||
|
||||
In the earliest Modern style, capital letters one would be hard-pressed to find any explicit calligraphic influence, except perhaps in the modulation of the strokes—that is, the speed with which thick strokes turn into thin strokes—a modulation characterized by the steel pointed pen calligraphy. However, in the lowercase italics, there are more explicit references to calligraphy; for example, the hairline entry and exit strokes and ball- or teardrop-shaped terminals—again, these are features already present in contemporary writing manuals.
|
||||
In the earliest Modern style, capital letters one would be hard-pressed to find any explicit calligraphic influence, except perhaps in the modulation of the strokes—that is, the speed with which thick strokes turn into thin strokes—a modulation characterized by the steel pointed pen calligraphy. However, in the lowercase italics, there are more explicit references to calligraphy; for example, the hairline entry and exit strokes and ball- or teardrop-shaped terminals. Again, these are features already present in contemporary writing manuals.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -38,8 +38,8 @@ In the earliest Modern style, capital letters one would be hard-pressed to find
|
||||
|
||||
Comparing the Moderns of Didot and Bodoni is difficult because there are so many of them, especially from Bodoni, who produced hundreds. Although typically, there is a little more symmetry or geometry in the letters of Bodoni than in Didot’s Moderns; for example, some of Didot’s romans tend to have asymmetrical or slightly lopsided [counters](/glossary/counter).
|
||||
|
||||
The types of Didot and Bodoni were widely copied. The latter more so, owing to Bodoni’s skill for self promotion and his attendant international fame.
|
||||
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.
|
||||
|
||||
## Modern-day Moderns
|
||||
|
||||
During the early nineteenth century, Modern typefaces were hugely popular. They often replaced Old Style and Transitional typefaces for setting extended texts. Nowadays, Modern or Didone typefaces are seldom used for extended texts, but they are often associated with luxury brands and fashion—a trend begun in the 1920s by the likes of Mehemed Fehmy Agha and Alexey Brodovitch, and later popularized through their use in fashion magazines like _Harper’s Bazaar_ and _Vogue._
|
||||
During the early nineteenth century, Modern typefaces were hugely popular. They often replaced Old Style and Transitional typefaces for setting extended texts. Nowadays, Modern or Didone typefaces are seldom used for extended texts, but they are often associated with luxury brands and fashion—a trend begun in the 1920s by the likes of Mehemed Fehmy Agha and Alexey Brodovitch, and later popularized through their use in fashion magazines like Harper’s Bazaar and Vogue.
|
||||
|
||||
@ -22,11 +22,11 @@ Many typefaces are conceived by type designers who have had a spark of inspirati
|
||||
|
||||
Don't we have enough fonts already? Well, imagine we decided we had all the songs we ever needed, and stopped writing more. Just as music conveys and enhances a song, a typeface embeds a visual layer into text and communicates in conjunction with it. Each typeface provides a unique, visual tone of voice to written language.
|
||||
|
||||
Typefaces also allow documents to present visual hierarchies, for example through darker headings. They also enable document designers to represent meaningful structures, by differentiating annotations, captions, and other parts of textual communication.
|
||||
Typefaces also allow documents to present visual hierarchies, for example, through darker headings. And, they enable graphic designers to represent meaningful structures by differentiating annotations, captions, and other parts of textual communication.
|
||||
|
||||
<h2>The importance of a brief</h2>
|
||||
|
||||
To ensure their time and skill is used efficiently, and they meet the needs of their client or audience, experienced type designers usually seek to define the requirements and set the parameters of a type design project in its early stages with a typeface design brief:
|
||||
To ensure their time and skill is used efficiently, and that they meet the needs of their client or audience, experienced type designers usually seek to define the requirements and set the parameters of a type design project in its early stages with a typeface design brief:
|
||||
|
||||
* What will the typeface be used for? Is its primary purpose for immersive texts, or for short display headlines?
|
||||
* What are its specific requirements? Does the typeface need to perform a certain function, such as to read clearly in very small sizes, or to operate in a particular environment such as an e-reader, or within virtual reality?
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
Reading is a complex cognitive process that involves working out what meanings are represented by a set of symbols in a [writing system](https://fonts.google.com/knowledge/glossary/script_writing_system), such as the [Latin alphabet](https://fonts.google.com/knowledge/glossary/latin). Scholars who are trying to understand how people read can have expertise in a broad range of areas such as psychology, linguistics, semiotics, literary critics, vision sciences, and anthropology. This article is a brief overview of how people read focusing on how those with normal or corrected vision (with glasses/spectacles or contact lenses) read letters, words, phrases and longer texts. This article does not cover how people read by touch with braille. This overview also introduces how typographic decisions can influence the process of reading.
|
||||
Reading is a complex cognitive process that involves working out what meanings are represented by a set of symbols in a [writing system](https://fonts.google.com/knowledge/glossary/script_writing_system), such as the [Latin alphabet](https://fonts.google.com/knowledge/glossary/latin). Scholars researching how people read can have expertise in a broad range of areas such as psychology, linguistics, semiotics, literary critics, vision sciences, and anthropology. This article is a brief overview of how people read focusing on how those with normal or corrected vision (with glasses/spectacles or contact lenses) read letters, words, phrases and longer texts. (It does not cover the use of braille.) This overview also introduces how typographic decisions can influence the process of reading.
|
||||
|
||||
Reading is what we do, and [readability](https://fonts.google.com/knowledge/glossary/readability) refers to qualities of a text that make reading easier. This includes content decisions, or format decisions, which help a reader to easily engage with and comprehend the message intended by the author. Poor readability can obscure, change, or convince the reader never even engage with the author's message.
|
||||
Reading is what we do, while [readability](https://fonts.google.com/knowledge/glossary/readability) refers to qualities of a text that make reading easier. This includes content decisions, or format decisions, which help a reader to easily engage with and comprehend the message intended by the author. Poor readability can obscure, change, or convince the reader never even engage with the author's message.
|
||||
|
||||
Readability describes how easily a reader engages with and understands the message intended by the author(s).
|
||||
|
||||
@ -37,22 +37,23 @@ There are physiological mechanisms that determine how well a person can see tex
|
||||
|
||||
</figure>
|
||||
|
||||
This process is too complex for the goals of this article, but a wealth of academic literature is available to learn about this (see [this article](https://visionlab.neuroscience.barnard.edu/sites/default/files/content/Yeatman%2C%20White_Annual%20Review%20of%20Vision%20Science_2021.pdf) for a recent review). The incredible range of individual differences in the ability to process written text, both in typical and atypical readers (e.g. low-vision patients, dyslexia in its multiple forms, etc.) are proxies of the complexity of our cognitive and neural machinery supporting the act of Reading. Every little road bump at each point of this processing hierarchy would generate a different reading style and propagate to a broad range of limitations of the reading experience.
|
||||
This process is too complex for the goals of this article, but a wealth of academic literature is available if you're interested in learning more (see [this article](https://visionlab.neuroscience.barnard.edu/sites/default/files/content/Yeatman%2C%20White_Annual%20Review%20of%20Vision%20Science_2021.pdf) for a recent review). The incredible range of individual differences in the ability to process written text, both in typical and atypical readers (e.g. low-vision patients, dyslexia in its multiple forms, etc.) are proxies of the complexity of our cognitive and neural machinery supporting the act of Reading. Every little road bump at each point of this processing hierarchy would generate a different reading style and propagate to a broad range of limitations of the reading experience.
|
||||
|
||||
There are several free tools that provide the ability to see how your typography will look to people with varying color vision capabilities. Visit [Material Design Accessibility Color Contrast Guidelines](https://m3.material.io/foundations/accessible-design/patterns), [Material Design Color and Accessibility,](https://m3.material.io/styles/color/the-color-system/accessibility) [The Perception of Color](https://www.britannica.com/science/color/The-perception-of-colour), and [Colour Blindness Awareness](https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/). To see what the 3 main types of color blindness look like, try out the [Chromatic Vision Simulator](https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=en_US&gl=US) application. To see if your choice of background and text colors meet color contrast guidelines, try the free [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) tool.
|
||||
There are several free tools that provide the ability to see how your typography will look to people with varying color vision capabilities. Visit [Material Design Accessibility Color Contrast Guidelines](https://m3.material.io/foundations/accessible-design/patterns), [Material Design Color and Accessibility,](https://m3.material.io/styles/color/the-color-system/accessibility) [The Perception of Color](https://www.britannica.com/science/color/The-perception-of-colour), and [Colour Blindness Awareness](https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/). To see what the three main types of color blindness look like, try out the [Chromatic Vision Simulator](https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=en_US&gl=US) application. To see if your choice of background and text colors meet color contrast guidelines, try the free [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) tool.
|
||||
|
||||
## Learning to read
|
||||
|
||||
Written language is a complex code that we learn where combinations of letters, or characters, systematically represent certain sounds.
|
||||
Written language is a complex code in which combinations of letters, or characters, systematically represent certain sounds.
|
||||
|
||||
For children, learning to read normally starts with becoming aware of how words sound, known as phonological processing. This awareness is coupled with matching sounds and letters. A beginner English reader learns the connections between the 26 letters of the alphabet and the approximately 44 sounds of spoken English (the phonemes). Learners actively explore different ways of reading as they become expert readers. Successful readers build the ability to recognize most words automatically and read fluently, by paying attention to grammar, punctuation, and sentence structure.
|
||||
|
||||
Adults who are learning a new language or a new [script (writing system)](https://fonts.google.com/knowledge/glossary/script_writing_system) go through a similar process of learning the relationship between the symbols, sounds, and syntax for constructing relationships between ideas. People who are learning to read are often simultaneously learning to write. As people learn to read and recognize words, they practice producing letters and words in written form.
|
||||
Adults learning a new language or a new [script (writing system)](https://fonts.google.com/knowledge/glossary/script_writing_system) go through a similar process of learning the relationship between the symbols, sounds, and syntax for constructing relationships between ideas. People learning to read are often simultaneously learning to write. As people learn to read and recognize words, they practice producing letters and words in written form.
|
||||
|
||||
To choose a typeface that supports people learning to read and write, find out if there are any fonts that are approved by local educational authorities, such as the [Foundation Fonts for Australian Schools](https://fonts.googleblog.com/) and [Japanese Universal Design fonts](https://fonts.googleblog.com/2022/04/morisawa-biz-universal-design-ud.html).
|
||||
|
||||
## Reading words for labels, titles, sentences, and paragraphs
|
||||
|
||||
The heart of typography focuses on the reader’s interactions with the words as they are seen and not the meanings of the words. Readability is a combination of typography (how words appear on screen or in print) and the actual difficulty and meanings of the words. For expert readers, word recognition and legibility happen at the same time. Sometimes people recognize a word before they recognize the letters in the word! Cognitive psychologists call this the “[word superiority effect.](https://en.wikipedia.org/wiki/Word_superiority_effect)” The outline shape of words in lowercase text are more distinctive than the outline in uppercase letters. This may also explain why people read Latin texts in lowercase faster than in uppercase and frequently prefer to read in lowercase.
|
||||
The heart of typography focuses on the reader’s interactions with the words as they are seen, not the meanings of the words. Readability is a combination of typography (how words appear on screen or in print) and the actual difficulty and meanings of the words. For expert readers, word recognition and legibility happen at the same time. Sometimes people recognize a word before they recognize the letters in the word! Cognitive psychologists call this the “[word superiority effect.](https://en.wikipedia.org/wiki/Word_superiority_effect)” The outline shape of words in lowercase text are more distinctive than the outline in uppercase letters. This may also explain why people read Latin texts in lowercase faster than in uppercase and frequently prefer to read in lowercase.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -60,7 +61,7 @@ The heart of typography focuses on the reader’s interactions with the words as
|
||||
|
||||
</figure>
|
||||
|
||||
The word superiority effect also describes why it is easier to read a string of words that are meaningfully related in a sentence rather than reading a string of words that are not in a grammatical structure. Syntax, the way the words are arranged in phrases to create sentences, has a strong impact on readability.
|
||||
The word superiority effect also describes why it's easier to read a string of words that are meaningfully related in a sentence rather than reading a string of words that are not in a grammatical structure. Syntax, which is the way the words are arranged in phrases to create sentences, has a strong impact on readability.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -113,13 +114,14 @@ Along with this, the visual design of the typeface always expresses a message in
|
||||
|
||||
Choosing a typeface that conveys the same emotion as the content and is meaningful to your readers’ lived experience involves building an understanding of their recent and current type experiences.
|
||||
|
||||
Try to discover:
|
||||
Take note of:
|
||||
|
||||
* The typefaces used in printed novels and school books, as well as popular online publications, magazines, and newspapers
|
||||
* The current type design trends in the places your readers visit, both online and in the physical world
|
||||
|
||||
## Motivation to read
|
||||
|
||||
There are different motivations behind why and how people read.
|
||||
There are different motivations for why and how people read.
|
||||
|
||||
When asked about what they read, most people think of what researchers call “long form” reading such as reading a novel, a school book, or several pages of formatted text. People might be reading these for pleasure or to learn new things.
|
||||
|
||||
@ -130,17 +132,18 @@ The shortest form of reading is called glancing, when the reader briefly looks a
|
||||
|
||||
|
||||
</figure>
|
||||
<figcaption>Time to read a source impacts the way in which people read, and what they do while they read. Reading at-a-glance is often done alongside some other task, while reading a long form document generally requires dedication to the reading itself. Most reading is done opportunistically in interludes; while waiting or taking a break.</figcaption>
|
||||
<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>
|
||||
|
||||
Interlude reading covers everything between glanceable and long form reading. There is a wide range including text messaging, navigating through headers and labels, reading some news headlines, summaries, or scanning search results. The motivations for this type of reading also vary widely, and includeing learning new things, being with friends, and finding things.
|
||||
|
||||
## Try things with your readers
|
||||
|
||||
The best solution for choosing a readable typeface will always be dependent on who your readers are, their motivations, and the message that you want them to take from your type choices. This article has provided some tools to help you make good choices for your readers, and we’ve added a few more resources below, best wishes for your creative journey!
|
||||
The best solution for choosing a readable typeface will always be dependent on who your readers are, their motivations, and the message that you want them to take from your type choices. This article has provided some tools to help you make good choices for your readers, and we’ve added a few more resources below. Best wishes for your creative journey!
|
||||
|
||||
## Resources
|
||||
|
||||
You might find these sources valuable to explore for more information on different aspects of reading:
|
||||
You might find these sources valuable for more information on readability and accessibility:
|
||||
|
||||
* Web Usability [https://www.nngroup.com/articles/how-users-read-on-the-web/](https://www.nngroup.com/articles/how-users-read-on-the-web/) (1997)
|
||||
* Glanceable fonts [https://www.nngroup.com/articles/glanceable-fonts/](https://www.nngroup.com/articles/glanceable-fonts/) (2017)
|
||||
* Interlude reading [https://www.bendsawyer.com/project/towards-individuated-reading-experiences/](https://www.bendsawyer.com/project/towards-individuated-reading-experiences/) (2022)
|
||||
|
||||
@ -14,19 +14,20 @@ First, let’s make sure we define **legibility** and **readability**. Both are
|
||||
|
||||
## Choosing accessible type
|
||||
|
||||
[Accessible typography](https://www.visionaustralia.org/business-consulting/digital-access/blog/typography-in-inclusive-design-part-1#2) considerations start with choosing [type](/glossary/type). Select [typefaces](/glossary/typeface) that have legibility built into their designs. There is no single answer about which fonts are most accessible. There are some indications of what could make a typeface more accessible to some people.
|
||||
[Accessible typography](https://www.visionaustralia.org/business-consulting/digital-access/blog/typography-in-inclusive-design-part-1#2) considerations start with choosing [type](/glossary/type). There is no single answer for which fonts are most accessible, but there *are* some indications of what could make a typeface more accessible to some people.
|
||||
|
||||
The examples in this section are for languages using the [Latin](/glossary/latin) [writing system](/glossary/script_writing_system). However, the same principles of choosing typefaces with distinct [letterforms](/glossary/letterform) (the unique shape of a letter), [numerals](/glossary/numerals_figures), punctuation marks, and [symbols](/glossary/icon_symbol) should apply to other writing systems.
|
||||
Some popular fonts, such as [Poppins](https://fonts.google.com/specimen/Poppins), have proven to be readable with individuals who have cognitive disabilities. Of course, you can also select a [typeface](/glossary/typeface) that has legibility built into its design, like [Lexend](https://design.google/library/lexend-readability/), or [Atkinson Hyperlegible](https://fonts.google.com/specimen/Atkinson+Hyperlegible), for example.
|
||||
|
||||
(The examples in this section are for languages using the [Latin](/glossary/latin) [writing system](/glossary/script_writing_system). However, the same principles of choosing typefaces with distinct [letterforms](/glossary/letterform) (the unique shape of a letter), [numerals](/glossary/numerals_figures), punctuation marks, and [symbols](/glossary/icon_symbol) should apply to other writing systems.)
|
||||
|
||||
The type designers who created [Lexend](https://design.google/library/lexend-readability/) and [Atkinson Hyperlegible](https://fonts.google.com/specimen/Atkinson+Hyperlegible) created these typefaces to be easier to read. Some popularly available fonts, such as [Poppins](https://fonts.google.com/specimen/Poppins), have proven to be readable with individuals who have cognitive disabilities.
|
||||
|
||||
## Checking readability
|
||||
|
||||
Mirroring, or flipping, occurs when readers flip or mirror letters and numbers that are the same form when flipped horizontally. For example, a reader could mistake a lowercase letter “b” for a lowercase “d”. Instead of reading the word “bog,” the reader will think the word is “dog.”
|
||||
Mirroring, or flipping, occurs when readers flip or mirror letters and numbers that are the same form when flipped horizontally. For example, a reader could mistake a lowercase letter “b” for a lowercase “d." Instead of reading the word “bog,” the reader will think the word is “dog.”
|
||||
|
||||
A different and more pervasive issue among people with dyslexia and other reading difficulties is the transpositioning of letters. For example, a reader may mistake the words “lion” for “loin,” or “line” for “lien.” Transposition is a common experience for people with dyslexia and other reading difficulties, and does not disappear with age.
|
||||
|
||||
To reduce the chances of a reader confusing letters, words and numbers, consider checking the following character pairs to make sure they are distinct enough from each other:
|
||||
To reduce the chances of a reader confusing letters, words and numbers, check the following character pairs to make sure they are distinct enough from each other:
|
||||
|
||||
- qp
|
||||
- db
|
||||
@ -169,7 +170,7 @@ Follow these guidelines for hyperlinks:
|
||||
|
||||
## Non-text elements and text in images
|
||||
|
||||
When designing content with images, it’s important to have captions and alt text for informative images. Decorative images that do not add information don’t need captions or alt text. Captions are the text that appear below an asset. They explain an asset’s contextual information–the who, what, when, and where. Both sighted and screen reader users rely on captions for descriptions of assets. Alt text describes what the image or video is showing. This information is important for people who can’t see the image or video. When an asset doesn’t load on a website, the alt text will appear for people to know what is missing.
|
||||
When designing content with images, it’s important to have captions and alt text for informative images. Decorative images that do not add information don’t need captions or alt text. Captions are the text that appear below an asset (e.g. an image or video). They explain the asset’s contextual information–the who, what, when, and where. Both sighted and screen reader users rely on captions for descriptions of assets. Alt text describes what the image or video is showing. This information is important for people who can’t see the image or video. When an asset doesn’t load on a website, the alt text will appear for people to know what is missing.
|
||||
|
||||
Learn about how to write alt text and captions in [Material Design’s Accessibility Basics](https://m3.material.io/foundations/accessible-design/accessibility-basics) (scroll to the “Writing” section). To learn about which images need captions, visit [Material Design’s From Design to Implementation](https://m3.material.io/foundations/accessible-design/design-to-implementation), the W3C [decorative](https://www.w3.org/WAI/tutorials/images/decorative/), [functional](https://www.w3.org/WAI/tutorials/images/functional/), and [informative](https://www.w3.org/WAI/tutorials/images/informative/) images articles.
|
||||
|
||||
@ -177,7 +178,7 @@ Online menus or price sheets that are images or PDF files of a restaurant menu o
|
||||
|
||||
## Resources:
|
||||
|
||||
A few resources to help understand fonts and their impact on readability in the cognitive space:
|
||||
Here are a few resources to learn more about fonts and their impact on readability in the cognitive space:
|
||||
|
||||
- [British Dyslexia Association: A Dyslexia-friendly Style Guide](https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide)
|
||||
- [Reading Well: Dyslexia Fonts](https://www.dyslexia-reading-well.com/dyslexia-font.html)
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 215 KiB After Width: | Height: | Size: 21 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 215 KiB After Width: | Height: | Size: 35 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 215 KiB After Width: | Height: | Size: 12 KiB |
@ -1,14 +1,14 @@
|
||||
## Do logos still matter?
|
||||
|
||||
Ah yes, the perennial question (or argument depending on your point of view) that provides endless nourishment for the design Twitterati and design influencers. It’s a moot discussion, of course, because—surprise—logos matter, maybe now more so than ever. Now that I’m on my soapbox, I’d like to argue that case, and explain through my own creative process how a successful logo is created: From the initial sketch right through to delivery and application. Along the way, I’ll explain the creative decisions I make in order to achieve a result that inspires and hopefully resonates with the audience—effectively communicating the idea, product, or brand.
|
||||
Ah yes, the perennial question (or argument depending on your point of view) that provides endless nourishment for the design Twitterati and design influencers. It’s a moot discussion, of course, because—surprise—logos matter, maybe now more so than ever. Now that I’m on my soapbox, I’d like to argue that case, and explain through my own creative process how a successful logo is created, from the initial sketch right through to delivery and application. Along the way, I’ll explain the creative decisions I make in order to achieve a result that inspires and hopefully resonates with the audience—effectively communicating the idea, product, or brand.
|
||||
|
||||
As design, branding, and marketing have evolved since the mid 1950s—roughly the birth of modern corporate graphic design and marketing as we know it today—so too has the role of the logo, that stalwart of visual and brand identities. It was—and is—the first thing someone sees when connecting to a brand or product. It’s the signifier that (hopefully) pulls you deeper into the world of the brand that you’re pursuing.
|
||||
As design, branding, and marketing have evolved since the mid 1950s—roughly the birth of modern corporate graphic design and marketing as we know it today—so too has the role of the logo, that stalwart of visual and brand identities. It was—and is—the first thing someone sees when connecting to a brand or product. It’s the signifier that (hopefully) pulls you deeper into the world of that brand.
|
||||
|
||||
It used to be enough that you just placed the logo on whatever you wanted to use to market your brand and that was it. Your identity was defined by the logo and how that logo was placed on everything from letterheads to vehicles to coffee cups. But, as we all know, we now live in a world where a logo has become a much smaller part in a very big ecosystem that involves language and empathy, sound and motion, messaging and positioning. Having a logo alone isn’t enough anymore to connect an audience with your brand and message. BUT (big but), your logo is still that vital first impression. That little graphic that people see and associate with your brand. The swoosh, the apple, the G, the camera, the bird, the music note—they all immediately conjure up images of what those brands mean to you, beyond the actual logo. If you get your branding right, your logo will become a mark of quality, of connection, of belonging—and people will want to own a part of it.
|
||||
It used to be enough to just place the logo on whatever you wanted to use to market your brand and stop there. Your identity was defined by the logo and how that logo was placed on everything from letterheads to vehicles to coffee cups. But, as we all know, we now live in a world where a logo has become a much smaller part in a very big ecosystem that involves language and empathy, sound and motion, messaging and positioning. Having a logo alone isn’t enough anymore to connect an audience with your brand and message. BUT (big but), your logo is still that vital first impression. That little graphic that people see and associate with your brand. The swoosh, the apple, the G, the camera, the bird, the music note—they all immediately conjure up images of what those brands mean to you, beyond the actual logo. If you get your branding right, your logo will become a mark of quality, of connection, of belonging—and people will want to own a part of it.
|
||||
|
||||
And now, with everyone living on their devices, the logo has found more relevance than ever, becoming the literal gateway into your digital world.
|
||||
|
||||
However we—and the way we consume content and interact with brands—change, one thing will remain constant: We all need symbols and marks that represent the things that surround us. Whether they were carved on stone tablets or an icon on your phone’s home screen, the need for a visual shorthand that communicates ideas and messages is here to stay.
|
||||
However we—and the way we consume content and interact with brands—change, one thing remains constant: We all need symbols and marks that represent the things that surround us. Whether they were carved on stone tablets or appear as icons on your phone’s home screen, the need for a visual shorthand that communicates ideas and messages is here to stay.
|
||||
|
||||
## What’s in a logo? A logo, a logomark, and a logotype walk into a bar...
|
||||
|
||||
@ -18,7 +18,7 @@ A *logomark* is the specific graphic element, symbol, or icon (e.g. the Nike Swo
|
||||
|
||||
When you’re designing a logo for a company, more often than not you’ll end up creating assets that consist of both a logomark and a logotype: A strong graphic symbol paired with a bespoke wordmark that really represents all the qualities of the brand. But something interesting has been happening the last decade or so: Logos need to be infinitely flexible.
|
||||
|
||||
It used to be enough to ask yourself *“Can it fax?”* If your design survived the low quality transmission of the faxing process and came out legible on the other side, you passed. Today, however, your logo needs to work as an (app) [icon](/glossary/icon_symbol), on responsive websites, on TV, on billboards, T-shirts, tote bags, and Twitch avatars, just to name a few applications—resulting in an emphasis on the logomark as a vital part of any visual identity toolkit. Gone are the days where your logo is only presented in one static lockup across every single application.
|
||||
It used to be enough to ask yourself “Can it fax?” If your design survived the low quality transmission of the faxing process and came out legible on the other side, you passed. Today, however, your logo needs to work as an (app) [icon](/glossary/icon_symbol), on responsive websites, on TV, on billboards, T-shirts, tote bags, and Twitch avatars, just to name a few applications—resulting in an emphasis on the logomark as a vital part of any visual identity toolkit. Gone are the days when a logo was only presented in one static lockup across every single application.
|
||||
|
||||
Today, a successful logo is one that can be pulled apart into its single components and reconfigured in different ways without ever losing its essence and character. The multicolored Google logo reduces into a G icon on your phone, or when it’s paired with another part of the wider Google brand ecosystem. It can move and bounce and rotate, and it informs a much bigger identity system. In the heading of this page, for example, the logo is small and single-color. And with the brand’s colors applied to a new Google Fonts icon, we never lose track that it’s *Google* wherever you interact with that logo—whether it’s on your phone, in a TV ad, across a billboard, or even that little G on a Google Home device—the experience of connecting with the brand and a logo that moves from logomark to logotype is seamless.
|
||||
|
||||
@ -28,7 +28,7 @@ And with all this in mind, let’s put everything into practice and design a log
|
||||
|
||||
For our evergreen subject matter, we’ll tackle something future-facing that will, hopefully, stay relevant for a long time: A moon mission! I admit I’m a bit of a sci-fi and space geek, and with the recent developments in the American Space Program, it looks like we actually might send people back to the moon in the next few years—so lets do a bit of speculative design to riff on that. Welcome to **LUNA 2035**, the next crewed mission to the moon!
|
||||
|
||||
So, I said, I’ll design a logotype. However, since a logomark is nowadays so vital to a successful and versatile logo, let’s make that a part of the final project, too.
|
||||
So, as I said, I’ll design a logotype. However, since a logomark is nowadays so vital to a successful and versatile logo, let’s make that a part of the final project, too.
|
||||
|
||||
## The process
|
||||
|
||||
@ -55,7 +55,7 @@ For this project, it can be easy to get sidetracked into pastiche sci-fi design
|
||||
With any project of this kind, I will always start with pen and paper sketching. The speed at which you can dot ideas on a page beats any app by miles. It just allows you to let ideas (good ones and bad ones) flow freely and get to a result very quickly. In my own practice, I’ve had logo designs approved based purely on a sketch. More famous examples are Paula Sher’s [Citi](https://nedwin.medium.com/the-1-5m-napkin-abd2702927d0) sketch and Trevor Key’s napkin doodle of what would become the [Virgin logo](https://static1.squarespace.com/static/62582f26084d6a5b79ee56c4/t/6274f909e028ed2b08247531/1651833098685/The+Virgin+logo+story.pdf).
|
||||
|
||||
When I’m sketching, I’m aiming for a few things:
|
||||
- An iconic, minimal mark (icon) that I can use as a graphic device with the wordmark, and that allows me to play with different lockups.
|
||||
- An iconic, minimal mark (icon) that I can use as a graphic device with the wordmark and that allows me to play with different lockups.
|
||||
- Clean, geometric shapes. Maybe I can replace certain letters in **LUNA** with a graphic shape?
|
||||
- Modernity: I want a simple, clean and timeless look.
|
||||
|
||||
@ -105,7 +105,8 @@ Once I feel I’m getting to a conceptual place I like, I begin to translate my
|
||||
|
||||
My go-to tool for this is Adobe Illustrator (sometimes in combination with the Adobe Capture app on my iPhone to photograph and convert sketches into SVG files that I can import into Illustrator). If you’re not using Adobe Illustrator, there are many other applications like Affinity Designer, Figma, or Sketch that are great tools for this part of the design process.
|
||||
|
||||
Now that I’m confident that I have a good set of sketched concepts, I start to edit down the list of typefaces I’ve been researching since I began the project. My initial selection yields a few interesting choices: [Rubik Mono One](https://fonts.google.com/specimen/Rubik+Mono+One/tester?query=Rubik) (bold and chunky—interesting, but perhaps too stylised), [Goldman](https://fonts.google.com/specimen/Goldman/tester?category=Display,Monospace&preview.text=LUNA%20MISSION&preview.text_type=custom) (reminds me of a modern interpretation of the Mid-Century [sci-fi classic](https://typesetinthefuture.com/2014/11/29/fontspots-eurostile/) [Eurostile](https://en.wikipedia.org/wiki/Eurostile)), and [Poppins](https://fonts.google.com/specimen/Poppins?query=Poppins&category=Sans+Serif&preview.text=LUNA%20MISSION&preview.text_type=custom) (a clean and geometric sans-serif typeface that’s versatile and robust). **[TO-DO: The text mentions Poppins, but the image uses Space Mono. Better to omit the text?]**
|
||||
Now that I’m confident that I have a good set of sketched concepts, I start to edit down the list of typefaces I’ve been researching since I began the project. My initial selection yields a few interesting choices: [Rubik Mono One](https://fonts.google.com/specimen/Rubik+Mono+One/tester?query=Rubik) (bold and chunky—interesting, but perhaps too stylized) and [Goldman](https://fonts.google.com/specimen/Goldman/tester?category=Display,Monospace&preview.text=LUNA%20MISSION&preview.text_type=custom) (reminds me of a modern interpretation of the mid-century [sci-fi classic](https://typesetinthefuture.com/2014/11/29/fontspots-eurostile/) [Eurostile](https://en.wikipedia.org/wiki/Eurostile)).
|
||||
|
||||
|
||||
<figure>
|
||||
|
||||
@ -123,7 +124,7 @@ One thing I know for sure is I want to use a secondary [monospaced](/glossary/mo
|
||||
|
||||
</figure>
|
||||
|
||||
Adapting the sketches into digital designs—and aiming for the modern, timeless look I set out to achieve—I choose **[Inter Tight](https://fonts.google.com/specimen/Inter+Tight?query=inter&preview.text=LUNA%20MISSION%2001%2FONE&preview.text_type=custom)** as my primary typeface for the **LUNA** wordmark for a few reasons. Firstly, the aforementioned timelessness. Looking at how NASA uses Helvetica (especially since the much revered [“Worm” design by Danne & Blackburn](https://www.creativereview.co.uk/nasa-worm-logo/)), I want to stay close, but look at a more contemporary iteration, one that also works great on-screen. Inter ticks all those boxes, but I feel Inter Tight adds a little extra character to the way text is typeset that strikes a perfect balance between what’s past and what’s tomorrow. And, and importantly, Azeret Mono [pairs](/lesson/pairing_typefaces) really nicely with it.
|
||||
Adapting the sketches into digital designs—and aiming for the modern, timeless look I set out to achieve—I choose **[Inter Tight](https://fonts.google.com/specimen/Inter+Tight?query=inter&preview.text=LUNA%20MISSION%2001%2FONE&preview.text_type=custom)** as my primary typeface for the **LUNA** wordmark for a few reasons. Firstly, the aforementioned timelessness. Looking at how NASA uses Helvetica (especially since the much revered [“Worm” design by Danne & Blackburn](https://www.creativereview.co.uk/nasa-worm-logo/)), I want to stay close, but look at a more contemporary iteration, one that also works great on-screen. Inter ticks all those boxes, but I feel Inter Tight adds a little extra character to the way text is typeset that strikes a perfect balance between what’s past and what’s tomorrow. And importantly, Azeret Mono [pairs](/lesson/pairing_typefaces) really nicely with it.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -139,7 +140,7 @@ Sometimes typeface choices really come down to “does it evoke the right feelin
|
||||
|
||||
</figure>
|
||||
|
||||
With my typeface choices made, I can now work at speed, creating iterations of the **LUNA** and **LUNA MISSION** lockups. As you see, I’ve subtly tweaked the letterforms of the “U” and “A” in **LUNA** to make them look slightly more like geometric shapes. I’ve also removed the crossbar in the “A”. It feels like an appropriate nod to NASA’s Worm logo) and want to integrate two dots that symbolise the relationship between Earth and the Moon—reflecting the history and significance of the event inspired by the [1967 Apollo Mission Flight Plan chart](https://moon.nasa.gov/resources/348/apollo-mission-flight-plan-1967/).
|
||||
With my typeface choices made, I can now work at speed, creating iterations of the **LUNA** and **LUNA MISSION** lockups. As you see, I’ve subtly tweaked the letterforms of the “U” and “A” in **LUNA** to make them look slightly more like geometric shapes. I’ve also removed the crossbar in the “A”. It feels like an appropriate nod to NASA’s Worm logo) and want to integrate two dots that symbolize the relationship between Earth and the Moon—reflecting the history and significance of the event inspired by the [1967 Apollo Mission Flight Plan chart](https://moon.nasa.gov/resources/348/apollo-mission-flight-plan-1967/).
|
||||
|
||||
<figure>
|
||||
|
||||
@ -211,7 +212,7 @@ The final result is a contemporary and (hopefully) timeless **LUNA 2035** logo t
|
||||
|
||||
</figure>
|
||||
|
||||
Keeping flexibility of usage in mind I create both horizontal and vertical logo lockups—with and without the supporting “Mission 01—2035” copy. This gives me—and the end client—a good range of assets that all carry the same visual design consistency across formats.
|
||||
Keeping flexibility of usage in mind, I create both horizontal and vertical logo lockups—with and without the supporting “Mission 01—2035” copy. This gives me—and the end client—a good range of assets that all carry the same visual design consistency across formats.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -225,7 +226,7 @@ Keeping flexibility of usage in mind I create both horizontal and vertical logo
|
||||
|
||||
</figure>
|
||||
|
||||
While the horizontal logo lockup can be seen as the “master logo”—it contains the full message and all design elements are represented in the unit—the vertical lockup and stand-alone “A” mark are more *iconic* and—as the following examples show—more appropriate in the context of this little project: Space exploration, where you’ll see logos live on everything from buildings, uniforms, utilities and patches (even though the “A” scales down perfectly to a social avatar).
|
||||
While the horizontal logo lockup can be seen as the “master logo”—it contains the full message and all design elements are represented in the unit—the vertical lockup and stand-alone “A” mark are more *iconic*. And, as the following examples show, they're also more appropriate in the context of this little space exploration branding project, where you’ll see logos live on everything from buildings, uniforms, utilities and patches (even though the “A” scales down perfectly to a social avatar).
|
||||
|
||||
<figure>
|
||||
|
||||
@ -299,7 +300,7 @@ The fun here, of course, is to look at potential use cases, and imagine how the
|
||||
|
||||
## Parting thoughts
|
||||
|
||||
I used to firmly believe that all logos (and especially the ones I designed) need to be created from bespoke typefaces, rather than use something that exists already. There are many arguments for that approach, but what I’ve found over the years is that *how* you use type to create something unique is more important than starting with a unique typeface. If you look around, you’ll see there are 1000s of logos that all use the same (or very similar) typefaces. And yet, each logo is unique to its brand thanks to unique design details and the context they’re placed in.
|
||||
I used to firmly believe that all logos (and especially the ones I designed) need to be created from bespoke typefaces, rather than use something that exists already. There are many arguments for that approach, but what I’ve found over the years is that *how* you use type to create something unique is more important than starting with a unique typeface. If you look around, you’ll see there are 1000s of logos that all use the same (or very similar) typefaces. And yet, each logo is unique to its brand, thanks to unique design details and the context they’re placed in.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Consider a magazine cover, where the display [typography](/glossary/typography)
|
||||
|
||||
</figure>
|
||||
|
||||
This scenario requires a touch of the human hand, and the good news is that we don’t need to manually manipulate the outlines of our type—we can add a more hand-lettered feel by using alternate glyphs with the power of [stylistic sets](/glossary/stylistic_sets) via [OpenType](/glossary/open_type) controls. (Head over to [“Introducing alternate glyphs”](https://fonts.google.com/knowledge/introducing_type/introducing_alternate_glyphs) for an overview.)
|
||||
This scenario requires a touch of the human hand. The good news is that we don’t need to manually manipulate the outlines of our type—we can add a hand-lettered feel by using alternate glyphs with the power of [stylistic sets](/glossary/stylistic_sets) via [OpenType](/glossary/open_type) controls. (Head over to [“Introducing alternate glyphs”](https://fonts.google.com/knowledge/introducing_type/introducing_alternate_glyphs) for an overview.)
|
||||
|
||||
<figure>
|
||||
|
||||
@ -70,7 +70,7 @@ Just look at how repeating [characters](/glossary/character)—or repeating sequ
|
||||
|
||||
</figure>
|
||||
|
||||
Let’s look at how we can introduce some variations here, and this time we won’t be using alternate glyphs via OpenType; instead, we’re going to employ a slightly different version of the same typeface.
|
||||
Let’s fix this by introducing some variations here. This time we won’t be using alternate glyphs via OpenType; instead, we’re going to employ a slightly different version of the same typeface.
|
||||
|
||||
Here are the different versions of the T, S, and E characters we’re going to use, set in IM FELL English, [IM FELL DW Pica](https://fonts.google.com/specimen/IM+Fell+DW+Pica?query=im+fell), and [IM FELL Great Primer](https://fonts.google.com/specimen/IM+Fell+Great+Primer?query=im+fell):
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ Because physical blocks were used, there wasn’t much room for manipulation of
|
||||
|
||||
### So what’s the big deal?
|
||||
|
||||
What all of this means in practice is a lot of discrepancies between different fonts. The one rule nearly all fonts (in [Latin](/glossary/latin) type) follow is to have every [glyph](/glossary/glyph) sitting on the ‘[baseline](/glossary/baseline).’ There are no rules about where the [cap-height](/glossary/cap_height), [x-height](/glossary/x_height) or [descenders](/glossary/ascenders_descenders) should be drawn in relation to the line-height, so you get inconsistencies that make vertical alignment tricky. This vertical alignment is necessary to create consistent, scalable designs, but aligning type perfectly can be time-consuming, especially when mixing typefaces.
|
||||
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>
|
||||
|
||||
@ -35,7 +35,7 @@ To complicate matters further, different digital platforms render text in differ
|
||||
</figure>
|
||||
<figcaption>The web renders text with half-leading above and below the 100% line-height for a font.</figcaption>
|
||||
|
||||
iOS platforms followed suit with same method, and neither the web nor iOS have changed the way they render text to this day. Android devices, however, mostly render a paragraph clipped to the default line-height for the first and last line. Total line-height will still be respected via the `lineSpacingMultiplier` property, so every line of text still has the correct spacing from baseline to baseline.
|
||||
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>
|
||||
|
||||
@ -53,7 +53,7 @@ Within common design tools such as Sketch or Figma, text will be rendered in the
|
||||
|
||||
### Manual spacing
|
||||
|
||||
To ensure consistent design across your applications, the most common method would be to just space everything manually. You can look into all of your components and designs, and ensure that any text node is spaced to the exact pixel. It removes all the guesswork out of the equation, but becomes a very manual process. Misaligning spacing becomes inevitable with all the work needed, and there is no way to truly systemise your process. Finally, it becomes particularly tricky when you need to update your typeface to a new one, and you have to go through the whole process again.
|
||||
To ensure consistent design across your applications, the most common method would be to just space everything manually. You can look into all of your components and designs, and ensure that any text node is spaced to the exact pixel. It removes all the guesswork out of the equation, but becomes a very tedious process. Misaligning spacing becomes inevitable with all the work needed, and there is no way to truly systemize your process. Finally, it becomes particularly tricky when you need to update your typeface to a new one and have to go through the whole process again.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -64,7 +64,7 @@ To ensure consistent design across your applications, the most common method wou
|
||||
|
||||
### Equally spaced font files
|
||||
|
||||
One way to combat a lot of the issues with vertical spacing is to ensure you choose a typeface that has equal spacing above and below the [characters](/glossary/character). A lot of fonts won’t be spaced centrally within their default line height, and the larger the font size, the more this becomes obvious. Choosing one that is exactly centered within its default line height means that no matter the line height, it will always be centered, making it much easier to create a vertical [rhythm](/glossary/rhythm) within your text.
|
||||
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.
|
||||
|
||||
Choosing such a font can be difficult, but luckily most design tools will show the bounding box of any text layer. Some fonts are obviously misaligned from the start, but others will need a little more investigation. Simply reduce the line-height of any text layer bit by bit until the bounding box matches your [glyph](/glossary/glyph) height. A general rule of thumb for a vertically centered font is to align to the cap-height and baseline. This will ensure your text looks centered to other elements within your designs. Read more about the idea of “equal” metrics in [this twitter thread by Roman Shamin](https://twitter.com/romanshamin_en/status/1562801657691672576).
|
||||
|
||||
@ -86,7 +86,7 @@ There are two main benefits to choosing a font like this: first, centering the t
|
||||
|
||||
### Upcoming CSS feature, leading-trim
|
||||
|
||||
For the web, a CSS feature called [leading-trim](https://www.w3.org/TR/css-inline-3/#propdef-leading-trim) is currently in proposal that actually trims a text node to pre-defined properties. You can choose from cap-height, x-height, baseline, [descender](/glossary/ascenders_descenders), or default line-height to clip the top and bottom of the node to these values, much like you can on Android. This will help ensure consistent spacing and even introduce the ability for better baseline alignment within the web. For more information, please read [“Leading-Trim: The Future of Digital Typesetting”](https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202) by Ethan Wang.
|
||||
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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user