mirror of
https://github.com/google/fonts.git
synced 2024-12-17 05:31:36 +03:00
GFK Q1 prelaunch edits (#4429)
* Adding related articles to `slant_axis` Glossary term * Correcting code formatting * More CSS formatting fixes (Replacing pre with Mardown format) * Linking up `opsz` def from main OS gloss page * Copy edits to readme.md * Adding topic to language article * Fixing broken URLs * Correcting incorrect`text` link * Adding more internal links to CASL * Extra internal links in CRSV * Updating `en` copy to match new version of `em` * Fixing broken image on GRAD * Fixing incomplete alt text on GRAD illo * More relevant related terms * Attempting to fix extra space beneath first h2 in article * Adding `type_designers` link * Adding `display` link in opsz * Correcting `type_design` link * Correcting missing “from” typo * Fixing broken `oblique` link * Adding in specific heading to article link: `#avoiding-fake-weights-and-styles` (might break things?) * Fixing code example formatting * Adding missing gloss. terms into intro para. * New `en` illo to reflect changes to `em` * Extra link * Reformatting URL + adding comment * Topics, terms, and styleguide-related tweaks to web type article * Improved topics for the 4 new articles
This commit is contained in:
Elliot Jay Stocks
GitHub
parent
84dacefe47
commit
5f39180a03
@ -1,3 +1,3 @@
|
||||
# Knowledge
|
||||
|
||||
Watch this space.
|
||||
Welcome to our library of original guides to the world of typography, which the Google Fonts team is producing in collaboration with typographic experts from around the world. Google Fonts Knowledge enables designers and developers of all skill sets to choose and use type with purpose.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
“Casual” (`CASL` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). Along this axis, letterforms adjust from a more serious style to a more casual style, in a manner determined by the type designer. This can mean adjustments in stroke curvature, contrast, and terminals to go from a sturdy, rational “linear” style to a friendly, energetic “casual” style.
|
||||
“Casual” (`CASL` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). Along this axis, [letterforms](/glossary/letterform) adjust from a more serious style to a more casual style, in a manner determined by the [type designer](/glossary/type_designer). This can mean adjustments in [stroke](/glossary/stroke) curvature, [contrast](/glossary/contrast), and [terminals](/glossary/terminal) to go from a sturdy, rational “linear” style to a friendly, energetic “casual” style.
|
||||
|
||||
The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
“Cursive” (`CRSV` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts), and controls the substitution of cursive forms. “Off” (0) maintains upright letterforms such as a double-storey a and g, “auto” (0.5) allows for cursive substitution of cursive forms when combined with the [slant axis](/glossary/slant_axis), and “on” (1) asserts cursive forms even in upright text with a slant of 0.
|
||||
“Cursive” (`CRSV` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts), and controls the substitution of cursive forms. “Off” (0) maintains upright [letterforms](/glossary/letterform) such as a double-storey a and g, “auto” (0.5) allows for cursive substitution of cursive forms when combined with the [slant axis](/glossary/slant_axis), and “on” (1) asserts cursive forms even in [upright](/glossary/regular_upright) text with a slant of 0.
|
||||
|
||||
The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
An en is a unit of measurement in [typography](/glossary/typography) based on half the width of the capital M in a particular [typeface](/glossary/typography) (one en = half an [em](/glossary/em)). The en [dash](/glossary/dashes) is a dash with a width that takes up approximately half the width of an em square.
|
||||
An en is a [unit](/glossary/unit) of measurement, half the size of an [em](/glossary/em), relative to the size of the [font](/glossary/font); therefore, in a [typeface](/glossary/typeface) set at a `font-size` of 16px, one en is 8px.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -7,4 +7,4 @@ An en is a unit of measurement in [typography](/glossary/typography) based on ha
|
||||
|
||||
</figure>
|
||||
|
||||
An en itself is a [unit](/glossary/unit) of measurement, relative to the size of the [font](/glossary/font); therefore, in a typeface set at a `font-size` of 16px, one en is 8px.
|
||||
The [en dash](/glossary/dashes) is so named because its width, in theory, is one en—although in many fonts the en dash is somewhat narrower.
|
||||
@ -1 +1 @@
|
||||
<svg width="1920" height="1080" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#1A73E8" d="M1133 218h544v644h-544z"/><path fill="#fff" d="M1270 522h270v35h-270z"/><path fill="#D2E3FC" d="M243 218h544v644H243z"/><path d="M635.599 246.312h94.815V722h-52.245V290.172l1.612.645L558.521 722h-78.69L357.926 290.495l1.613-.645V722h-52.245V246.312h94.815l116.745 431.505h-.645l117.39-431.505Z" fill="#fff"/><path d="M239.464 534.464a5.002 5.002 0 0 0 0 7.072l31.82 31.819a5 5 0 0 0 7.071 0 5 5 0 0 0 0-7.071L250.071 538l28.284-28.284a5 5 0 0 0 0-7.071 5 5 0 0 0-7.071 0l-31.82 31.819Zm277.072 7.072a5.002 5.002 0 0 0 0-7.072l-31.82-31.819a5 5 0 0 0-7.071 0 5 5 0 0 0 0 7.071L505.929 538l-28.284 28.284a5 5 0 0 0 0 7.071 5 5 0 0 0 7.071 0l31.82-31.819ZM243 543h270v-10H243v10Z" fill="#FF6D7F"/></svg>
|
||||
<svg width="1920" height="1080" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#D2E3FC" d="M51.268 712h1818.73v10H51.268zM50 380h1818.73v10H50zM50 246h1818.73v10H50zM50 218h1818.73v10H50zM50 853h1818.73v10H50z"/><path stroke="#1A73E8" stroke-width="10" d="M978 195h694v694H978z"/><path fill="#D2E3FC" stroke="#D2E3FC" stroke-width="10" d="M248 195h694v694H248z"/><path d="M686.765 722V526.242c0-32.895-7.095-57.727-21.285-74.497-13.975-16.77-36.227-25.155-66.757-25.155-20.425 0-38.378 3.977-53.858 11.932-15.265 7.955-27.197 18.813-35.797 32.573-8.6 13.76-12.9 29.347-12.9 46.762l-34.83-10.642c0-24.51 6.342-46.763 19.027-66.758 12.9-20.21 30.423-36.227 52.568-48.052 22.36-12.04 47.622-18.06 75.787-18.06 41.065 0 73.423 12.362 97.073 37.087 23.865 24.725 35.797 58.91 35.797 102.555V722h-54.825Zm-245.422 0V217.932h54.825V722h-54.825Z" fill="#fff"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="973" y="159" width="684" height="779"><path fill="#1A73E8" d="M973 159h684v778.783H973z"/></mask><g mask="url(#a)"><path d="M1184.7 561.88v-34.83h255.75v34.83H1184.7Z" fill="#1A73E8"/></g><path d="M243.464 534.464a5.002 5.002 0 0 0 0 7.072l31.82 31.819a5 5 0 0 0 7.071 0 5 5 0 0 0 0-7.071L254.071 538l28.284-28.284a5 5 0 0 0 0-7.071 5 5 0 0 0-7.071 0l-31.82 31.819Zm355.072 7.072a5.002 5.002 0 0 0 0-7.072l-31.82-31.819a5 5 0 0 0-7.071 0 5 5 0 0 0 0 7.071L587.929 538l-28.284 28.284a5 5 0 0 0 0 7.071 5 5 0 0 0 7.071 0l31.82-31.819ZM247 543h348v-10H247v10Z" fill="#FF6D7F"/></svg>
|
||||
|
Before Width: | Height: | Size: 803 B After Width: | Height: | Size: 1.5 KiB |
@ -11,7 +11,7 @@ Negative grade makes the style lighter, while positive grade makes it heavier. T
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
|
||||
</figure>
|
||||
|
||||
|
||||
@ -13,6 +13,6 @@ The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) de
|
||||
|
||||
</figure>
|
||||
|
||||
Italic is a [type](/glossary/type) [style](/glossary/style) that’s almost always slanted and is designed to create emphasis in [text](/glossary/text). Originally based on semi-cursive forms, italics are a direct contrast to the [upright](/glossary/regular_upright) style. Unlike [obliques](/glossary/oblique), which are slanted versions of the upright forms, italics have a different structure informed by cursive [handwriting](/glossary/handwriting)—with their own nuances.
|
||||
Italic is a [type](/glossary/type) [style](/glossary/style) that’s almost always slanted and is designed to create emphasis in [text](/glossary/text_copy). Originally based on semi-cursive forms, italics are a direct contrast to the [upright](/glossary/regular_upright) style. Unlike [obliques](/glossary/oblique), which are slanted versions of the upright forms, italics have a different structure informed by cursive [handwriting](/glossary/handwriting)—with their own nuances.
|
||||
|
||||
Because most italic forms are slanted, for variable fonts, the italic axis and the [slant axis](/glossary/slant_axis) are very closely related. For detailed descriptions on how to use both, please see our [“Styling type on the web with variable fonts”](/lesson/styling_type_on_the_web_with_variable_fonts) article.
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
A master is a complete set of [glyphs](/glossary/glyph) designed in one particular [style](/glossary/style) within a [type family](/glossary/family_or_type_family_or_font_family). Often, several masters are designed to work together so that intermediate [weights](/glossary/weight) can be made automatically. For example, a Light master and a Bold master can be interpolated to generate a Regular weight.
|
||||
|
||||
Although it’s type designers who are most used to working with masters in font editing software, [variable fonts](/glossary/variable_fonts) have the masters embedded, and can generate intermediate instances on demand, according to requests from the end user.
|
||||
Although it’s [type designers](/glossary/type_designer) who are most used to working with masters in font editing software, [variable fonts](/glossary/variable_fonts) have the masters embedded, and can generate intermediate instances on demand, according to requests from the end user.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
Optical size (controlled with `font-optical-sizing` or `font-variation-setting: ‘opsz’ VALUE` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). It controls the [font](INSERT_URL) file’s [optical size](INSERT_URL) optimizations.
|
||||
Optical size (controlled with `font-optical-sizing` or `font-variation-setting: ‘opsz’ VALUE` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). It controls the [font](/glossary/font) file’s [optical size](/glossary/optical_sizes) optimizations.
|
||||
|
||||
The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
|
||||
|
||||
@ -13,23 +13,23 @@ The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) de
|
||||
|
||||
</figure>
|
||||
|
||||
Optical sizes in a variable font are different versions of a [typeface](INSERT_URL) optimized for use at singular specific sizes, such as 14 pt or 144 pt. Small (or [body](/glossary/body)) optical sizes tend to have less [stroke](/glossary/stroke) [contrast](/glossary/contrast), more open spacing, and taller [x-heights](/glossary/x_height) than those of their large (or display) counterparts.
|
||||
Optical sizes in a variable font are different versions of a [typeface](INSERT_URL) optimized for use at singular specific sizes, such as 14 pt or 144 pt. Small (or [body](/glossary/body)) optical sizes tend to have less [stroke](/glossary/stroke) [contrast](/glossary/contrast), more open spacing, and taller [x-heights](/glossary/x_height) than those of their large (or [display](/glossary/display)) counterparts.
|
||||
|
||||
The concept is that the numeric value for this axis should match the rendered font size in typographic points (1/72nd of an inch) in print, although browsers instead match it to the CSS px unit, since they have no concept of physical size. A new CSS attribute was introduced to go along with it: `font-optical-sizing`. The default is `auto` (or we can force it to `none` if we’d prefer to turn it off), and this is supported behavior in all modern browsers.
|
||||
|
||||
<pre>
|
||||
```css
|
||||
body {
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
</pre>
|
||||
```
|
||||
|
||||
Alternatively, we can set an explicit value by using `font-variation-settings`, like so:
|
||||
|
||||
<pre>
|
||||
```css
|
||||
body {
|
||||
font-variation-settings: 'opsz' 16;
|
||||
}
|
||||
h1 {
|
||||
font-variation-settings: 'opsz' 48;
|
||||
}
|
||||
</pre>
|
||||
```
|
||||
|
||||
@ -14,4 +14,4 @@ Small (or [body](/glossary/body)) optical sizes tend to have:
|
||||
- more open spacing,
|
||||
- and taller [x-heights](/glossary/x_height)
|
||||
|
||||
than those of their large (or [display](/glossary/display)) counterparts. Different optical sizes can be split into separate [font](/glossary/font) files or be assigned to an [axis](/glossary/axis_in_variable_fonts) within a [variable font](/glossary/variable_fonts).
|
||||
than those of their large (or [display](/glossary/display)) counterparts. Different optical sizes can be split into separate [font](/glossary/font) files or be assigned to the [optical size axis](/glossary/optical_size_axis) within a [variable font](/glossary/variable_fonts).
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
In [type design](/glossary/type_designer), an overshoot is the part of a [letterform](/glossary/letterform) that extends above or below the vertical dimensions of flatter [glyphs](/glossary/glyph). In the [Latin script](/glossary/latin), common [characters](/glossary/character) with overshoots incorporated into their design include the [lowercase](/glossary/uppercase_lowercase) “o”, which slightly extends above the [x-height](/glossary/x_height) and below the [baseline](/glossary/baseline), and the apex of the uppercase “A”, which extends above the [cap height](/glossary/cap_height).
|
||||
In [type design](/glossary/type_design), an overshoot is the part of a [letterform](/glossary/letterform) that extends above or below the vertical dimensions of flatter [glyphs](/glossary/glyph). In the [Latin script](/glossary/latin), common [characters](/glossary/character) with overshoots incorporated into their design include the [lowercase](/glossary/uppercase_lowercase) “o”, which slightly extends above the [x-height](/glossary/x_height) and below the [baseline](/glossary/baseline), and the apex of the uppercase “A”, which extends above the [cap height](/glossary/cap_height).
|
||||
|
||||
The purpose of these overshoots is to create the optical illusion that all letterforms are aligned, whether their tops and bottoms are angled, curved, or flat. Without overshoots, our eyes interpret these characters as appearing shorter than the rest.
|
||||
|
||||
|
||||
@ -7,6 +7,6 @@ A script is a collective way of describing a writing system used by multiple lan
|
||||
|
||||
</figure>
|
||||
|
||||
Other writing systems include [Greek](/glossary/greek_script) (upon which Latin is based), [Cyrillic](/glossary/cyrillic) (originally based on uppercase Greek forms), Arabic, Korean, Indic scripts South and South East Asia, Han characters, and the traditional scripts of Africa.
|
||||
Other writing systems include [Greek](/glossary/greek_script) (upon which Latin is based), [Cyrillic](/glossary/cyrillic) (originally based on uppercase Greek forms), Arabic, Korean, Indic scripts from South and South East Asia, Han characters, and the traditional scripts of Africa.
|
||||
|
||||
The combination of a script and a set of conventions for a particular language is referred to as an orthography.
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
Slant (`slnt` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). It controls the [font](/glossary/font) file’s [slant](/glossary/slant_axis) parameter for [oblique](oblique) [styles](/glossary/style).
|
||||
Slant (`slnt` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in some [variable fonts](/glossary/variable_fonts). It controls the [font](/glossary/font) file’s [slant](/glossary/slant_axis) parameter for [oblique](/glossary/oblique) [styles](/glossary/style).
|
||||
|
||||
The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
|
||||
|
||||
@ -13,6 +13,8 @@ The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) de
|
||||
|
||||
</figure>
|
||||
|
||||
Oblique [characters](/glossary/character) follow the structure of the [upright](/glossary/regular_upright) styles, while [italics](/glossary/italic) have a different structure, typically informed by cursive [writing](/glossary/handwriting). Obliques are not necessarily merely [digitally slanted](/lesson/introducing_weights_styles)—optical corrections are often made to avoid distortions and an incorrect distribution of weight. Generally, obliques are less common than italics.
|
||||
Oblique [characters](/glossary/character) follow the structure of the [upright](/glossary/regular_upright) styles, while [italics](/glossary/italic) have a different structure, typically informed by cursive [writing](/glossary/handwriting). Obliques are not necessarily merely [digitally slanted](https://fonts.google.com/knowledge/introducing_type/introducing_weights_styles#avoiding-fake-weights-and-styles)—optical corrections are often made to avoid distortions and an incorrect distribution of weight. Generally, obliques are less common than italics.
|
||||
|
||||
[//]: # (TO-DO: Turn that article link above into a regular Markdown format URL once there’s support for heading IDs in Markdown URLs.)
|
||||
|
||||
For variable fonts, the [italic axis](/glossary/italic_axis) and the slant axis are very closely related. For detailed descriptions on how to use both, please see our [“Styling type on the web with variable fonts”](/lesson/styling_type_on_the_web_with_variable_fonts) article.
|
||||
|
||||
@ -1,2 +1,5 @@
|
||||
name: "Slant axis (slnt)"
|
||||
excerpt: "An axis found in some variable fonts that controls the font file’s slant parameter for oblique styles."
|
||||
related_lessons: "introducing_variable_fonts"
|
||||
related_lessons: "designing_with_variable_fonts_in_desktop_apps"
|
||||
related_lessons: "styling_type_on_the_web_with_variable_fonts"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
Weight (`wght` in CSS) is an axis found in many variable fonts. It controls the [font](/glossary/font) file’s [weight](/glossary/weight) parameter.
|
||||
Weight (`wght` in CSS) is an [axis](/glossary/axis_in_variable_fonts) found in many [variable fonts](/glossary/variable_fonts). It controls the [font](/glossary/font) file’s [weight](/glossary/weight) parameter.
|
||||
|
||||
The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
|
||||
|
||||
@ -17,13 +17,13 @@ Weight is the overall thickness of a [typeface](/glossary/typeface)’s [strokes
|
||||
|
||||
In CSS, we can assign a variable weight property to an element of our choosing:
|
||||
|
||||
<pre>
|
||||
```css
|
||||
p {
|
||||
font-weight: 350;
|
||||
}
|
||||
strong {
|
||||
font-weight: 780;
|
||||
}
|
||||
</pre>
|
||||
```
|
||||
|
||||
Unlike in non-variable fonts, the `font-weight` values no longer have to be declared in units of 100. Rather than have body copy set in a regular weight, which would usually sit at 400, we can set it a little lighter, at 350. Similarly, whereas `strong` text would usually be set in a bold weight, most often with a value of 700, we’re setting it at 780: heavier than a bold, but not quite as heavy as an extra bold.
|
||||
Unlike in non-variable fonts, the `font-weight` values no longer have to be declared in units of 100. Rather than have [body copy](/glossary/text_copy) set in a Regular weight, which would usually sit at 400, we can set it a little lighter, at 350. Similarly, whereas `strong` text would usually be set in a Bold weight, most often with a value of 700, we’re setting it at 780: heavier than a Bold, but not quite as heavy as an Extra Bold.
|
||||
|
||||
@ -17,13 +17,13 @@ Width is the result of how much horizontal space is taken up by a [typeface](/gl
|
||||
|
||||
In CSS, we can assign a variable width to an element of our choosing using the `font-stretch` property. (Despite the name, note that the type is never literally “stretched” by browsers. This property name was chosen to make the concept more accessible to a general audience.)
|
||||
|
||||
<pre>
|
||||
```css
|
||||
p {
|
||||
font-stretch: 50%;
|
||||
}
|
||||
strong {
|
||||
font-stretch: 193%;
|
||||
}
|
||||
</pre>
|
||||
```
|
||||
|
||||
Here, our text will be quite narrow—50% is what the type designer has decided is half of the regular (100%) width—and the `strong` text will be almost twice the width of the regular. Width values are always above 0, with 100% being the regular width.
|
||||
|
||||
@ -7,7 +7,7 @@ The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) de
|
||||
| --- | --- | --- | --- |
|
||||
| 0 | 0 | 1 | 1 |
|
||||
|
||||
In the [Fraunces](INSERT_URL) [typeface](/glossary/typeface), setting wonky to “on” (1) introduces the quirkier leaning of the lowercase n/m/h upright characters, or the bulbous flags of the lowercase b/d/h/k/l italic characters. In static fonts, wonky is also available as an [OpenType stylistic set](/glossary/stylistic_sets).
|
||||
In the [Fraunces](https://fonts.google.com/specimen/Fraunces) [typeface](/glossary/typeface), setting wonky to “on” (1) introduces the quirkier leaning of the lowercase n/m/h upright characters, or the bulbous flags of the lowercase b/d/h/k/l italic characters. In static fonts, wonky is also available as an [OpenType stylistic set](/glossary/stylistic_sets).
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
@ -5,8 +5,14 @@ reviewers: "Gerry Leonidas"
|
||||
reviewers: "Laurence Penney"
|
||||
reviewers: "Richard Rutter"
|
||||
reviewers: "Thomas Phinney"
|
||||
topics: "choosing_type"
|
||||
topics: "essentials"
|
||||
topics: "families"
|
||||
topics: "language_support"
|
||||
topics: "open_type"
|
||||
topics: "systems"
|
||||
topics: "weight"
|
||||
topics: "width"
|
||||
prev_lessons: "making_sense_of_typographic_classifications"
|
||||
next_lessons: "emotive_considerations_for_choosing_typefaces"
|
||||
related_terms: "body"
|
||||
|
||||
@ -7,5 +7,7 @@ prev_lessons: "introducing_weights_styles"
|
||||
next_lessons: "exploring_width_in_type"
|
||||
next_lessons: "styling_type_on_the_web_with_variable_fonts"
|
||||
related_terms: "weight"
|
||||
related_terms: "optical_sizes"
|
||||
related_terms: "grade"
|
||||
related_terms: "weight_axis"
|
||||
related_terms: "grade_axis"
|
||||
excerpt: "There are many scenarios where multiple weights—if not multiple styles—are not just desired, but essential."
|
||||
|
||||
@ -4,8 +4,8 @@ reviewers: "Doug Wilson"
|
||||
reviewers: "Gerry Leonidas"
|
||||
reviewers: "Laurence Penney"
|
||||
reviewers: "Richard Rutter"
|
||||
topics: "choosing_type"
|
||||
topics: "essentials"
|
||||
topics: "families"
|
||||
prev_lessons: "why_care_about_typography"
|
||||
next_lessons: "making_sense_of_typographic_classifications"
|
||||
related_terms: "x_height"
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
name: "Language support in fonts"
|
||||
authors: "Elliot Jay Stocks"
|
||||
authors: "Material Design"
|
||||
reviewers: "Doug Wilson"
|
||||
reviewers: "Frank Rausch"
|
||||
reviewers: "Gerry Leonidas"
|
||||
reviewers: "Laurence Penney"
|
||||
reviewers: "Richard Rutter"
|
||||
reviewers: "Thomas Phinney"
|
||||
topics: "language_support"
|
||||
topics: "essentials"
|
||||
topics: "families"
|
||||
prev_lessons: "choosing_reliable_typefaces"
|
||||
next_lessons: "choosing_a_suitable_line_height"
|
||||
related_terms: "script_writing_system"
|
||||
|
||||
@ -10,6 +10,7 @@ The first is that web pages are inherently fluid: Content will fill the viewport
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<figcaption>The content naturally fills the width of the browser, and the height of the web page is dictated by the length of the content it contains.</figcaption>
|
||||
|
||||
</figure>
|
||||
@ -124,6 +125,7 @@ We declare the width in a relative unit called ems, which is preferable to pixel
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<figcaption>The content now stops becoming too wide on bigger viewports.</figcaption>
|
||||
|
||||
</figure>
|
||||
@ -178,7 +180,7 @@ Note: It’s usually worth getting the Bold (700) Italic font file to avoid any
|
||||
|
||||
## Self-hosting web fonts
|
||||
|
||||
If you’d prefer to host the web fonts you use on your own server, every font in the Google Fonts library is available to download. Self-hosting is also an option if fonts simply aren’t available on Google Fonts or your font delivery service of choice. We’ve prepared a quick guide on [“Self-hosting web fonts”](/lesson/self_hosting_web_fonts).
|
||||
If you’d prefer to host the web fonts you use on your own server, every font in the Google Fonts library is available to download. Self-hosting is also an option if fonts simply aren’t available on Google Fonts or your font delivery service of choice. We’ve prepared a quick guide on [“Self-hosting web fonts.”](/lesson/self_hosting_web_fonts)
|
||||
|
||||
## Optimizing the performance of web fonts
|
||||
|
||||
@ -186,4 +188,4 @@ It’s worth remembering that web fonts, just like all website assets, are resou
|
||||
|
||||
At the simplest level, this is a valid argument for using only a small number of typefaces in our designs, but also it means limiting the number of weights and styles used within those type families to save on file size. This is a core advantage of [variable fonts](/glossary/variable_fonts): If we’re using multiple weights and styles, all of them are contained in only one or two files—and that file is almost always considerably smaller than downloading many individual font files.
|
||||
|
||||
There’s more that we can do to optimize our web fonts, however. We can avoid a [flash of invisible text](/glossary/foit)—when a web page loads without the type appearing at all, before rendering to the intended typeface—and any undesirable re-rendering by combining `<link rel="preload">` with `font-display: optional`. You can read more about this technique on the web.dev articles [“Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts”](https://web.dev/preload-optional-fonts/) and [“Optimize WebFont loading and rendering”](https://web.dev/optimize-webfont-loading/).
|
||||
There’s more that we can do to optimize our web fonts, however. We can avoid a [flash of invisible text](/glossary/foit)—when a web page loads without the type appearing at all, before rendering to the intended typeface—and any undesirable re-rendering by combining `<link rel="preload">` with `font-display: optional`. You can read more about this technique on the web.dev articles [“Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts”](https://web.dev/preload-optional-fonts/) and [“Optimize WebFont loading and rendering.”](https://web.dev/optimize-webfont-loading/)
|
||||
|
||||
@ -8,7 +8,8 @@ reviewers: "Laurence Penney"
|
||||
reviewers: "Richard Rutter"
|
||||
reviewers: "Thomas Phinney"
|
||||
topics: "essentials"
|
||||
topics: "families"
|
||||
topics: "web_fonts"
|
||||
topics: "weight"
|
||||
prev_lessons: "using_web_fonts"
|
||||
next_lessons: "using_web_fonts_from_a_font_delivery_service"
|
||||
next_lessons: "styling_type_on_the_web_with_variable_fonts"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user