1
0
mirror of https://github.com/google/fonts.git synced 2024-12-17 05:31:36 +03:00

Axis def tweaks (#4425)

* Updating URLs to point to the new axis defs in the Glossary

* Removing spaces around em dash

* Removing hyphen in `line-height`

* Missing URL fix

* Small copy tweaks & broken URL fixes

* Fixing unclosed figure tag
This commit is contained in:
Elliot Jay Stocks 2022-03-28 10:16:23 +01:00 committed by GitHub
parent cfce9851ac
commit 84dacefe47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 6 deletions

View File

@ -7,4 +7,4 @@ In [variable fonts](/glossary/variable_fonts), the axis usually refers to a sing
</figure>
Common axes include [italic](/glossary/italic), [optical size](/glossary/optical_sizes), [slant](/glossary/oblique), [weight](/glossary/weight), [width](/glossary/width), and these five are registered (defined) in the OpenType file format specification. However, any property of a typefaces design can be mapped to an axis—the choice is up to the [type designer](/glossary/type_designer). Using axes is possible in CSS via the `font-variation-settings` attribute.
Common axes include [italic](/glossary/italic_axis), [optical size](/glossary/optical_size_axis), [slant](/glossary/slant_axis), [weight](/glossary/weight_axis), [width](/glossary/width_axis), and these five are registered (defined) in the OpenType file format specification. However, any property of a typefaces design can be mapped to an axis—the choice is up to the [type designer](/glossary/type_designer). Using axes is possible in CSS via the `font-variation-settings` attribute.

View File

@ -115,6 +115,8 @@ Theres so much typographic power to unlock via OpenType if the features exist
![A montage of OpenType features: The four different flavors of numerals, stylistic sets, fractions, and contextual alternates.](images/thumbnail.svg)
</figure>
Read more in our articles [“Introducing alternate glyphs”](/lesson/introducing_alternate_glyphs) and [“Implementing OpenType features on the web.”](/lesson/implementing_open_type_features_on_the_web)
### Even better: It has additional weights and styles (or grades)

View File

@ -7,7 +7,7 @@ When talking about [type](/glossary/type), its useful to have some familiarit
</figure>
We often discuss vertical proportions (or vertical metrics) when talking about optimal typesetting. In multiple lines of text, one of the most important roles played by an appropriate [line height](/glossary/line_height_leading) is to ensure that theres no clash between descenders in one line and ascenders in the following line. The varying proportions in different typefaces and in particular their x-heights [can cause type to appear larger or smaller than others](lesson/exploring_x_height_the_em_square), even when the font size isnt changed.
We often discuss vertical proportions (or vertical metrics) when talking about optimal typesetting. In multiple lines of text, one of the most important roles played by an appropriate [line height](/glossary/line_height_leading) is to ensure that theres no clash between descenders in one line and ascenders in the following line. The varying proportions in different typefaces—and in particular their x-heights—[can cause type to appear larger or smaller than others](lesson/exploring_x_height_the_em_square), even when the font size isnt changed.
<figure>

View File

@ -30,7 +30,7 @@ Some writing systems, such as Arabic and Hebrew, are displayed with characters a
UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored to ensure content is easy to understand. For more information, please read [Bidirectionality on Material Design](https://material.io/design/usability/bidirectionality.html#mirroring-elements).
Many writing systems might require different [line-height](/glossary/line_height_leading) and spacing adjustments. Line length, line spacing, and character spacing can vary within a script that is used for many languages.
Many writing systems might require different [line height](/glossary/line_height_leading) and spacing adjustments. Line length, line spacing, and character spacing can vary within a script that is used for many languages.
## Height
@ -69,7 +69,7 @@ For ease of internationalization, Google has categorized languages into three ca
In Android, Noto fonts are the default typefaces for all languages not covered by the original Roboto. The set is designed to be visually harmonious across languages and scripts, with compatible heights and stroke thicknesses. The project covers over 150 scripts, each defined in Unicode.
For more about Noto, please visit [the Noto page on Google Fonts](INSERT_URL).
For more about Noto, please visit [the Noto page on Google Fonts](https://fonts.google.com/noto).
Noto Chinese, Japanese, and Korean (CJK) typefaces each have seven weights that match the original Roboto, with the same weight settings as English.

View File

@ -1,9 +1,10 @@
The internet is so entrenched in our everyday lives, it can be easy to forget that its a relatively young medium, and that reading [text](/glossary/text) on screen is actually a pretty new behavior. However, although web [typography](/glossary/typography) brings its own conventions, its based on long established practices of printed typography—a practice that has been evolving over the last several hundred years.
The internet is so entrenched in our everyday lives, it can be easy to forget that its a relatively young medium, and that reading [text](/glossary/text_copy) on screen is actually a pretty new behavior. However, although web [typography](/glossary/typography) brings its own conventions, its based on long established practices of printed typography—a practice that has been evolving over the last several hundred years.
## Reading and writing on the web
There are two main reasons why web typography—and reading on-screen as a whole—differs from the world of printed media.
The first is that web pages are inherently fluid: Content will fill the viewport, whether its narrow or wide, and the vertical height of each web page is dictated by the content itself, whether short or long. This is in direct contrast to the world of printed media, where the constraints are fixed by the pages themselves, and content is forced to work within those fixed parameters. (In the early 00s, some web designers attempted to mirror this approach, with technologies like Flash, but returned to its naturally fluid roots with the arrival of smartphones that required [responsive web design](http://www.alistapart.com/articles/responsive-web-design/) in 2010.)
<figure>
@ -13,7 +14,7 @@ The first is that web pages are inherently fluid: Content will fill the viewport
</figure>
The second reason is that text flow is unpredictable, especially when a template design is finished before the text content is even written. Whether its a journalist writing a story in a newspaper websites [CMS](https://en.wikipedia.org/wiki/Content_management_system), or a user leaving a comment on social media, theres a limited notion of what the content actually is before its rendered on the page. This is unlike printed media, where content is edited to fit the page exactly, perhaps even being edited at a word-by-word level to make for a more harmonious appearance.
The second reason is that text flow is unpredictable, especially when a template design is finished before the text content is even written. Whether its a journalist writing a story in a newspaper websites content management system, or a user leaving a comment on social media, theres a limited notion of what the content actually is before its rendered on the page. This is unlike printed media, where content is edited to fit the page exactly, perhaps even being edited at a word-by-word level to make for a more harmonious appearance.
Different viewports, the often subtle differences between different devices and platforms, and the growth of user-generated content together represent the inherent flexibility of the web: a thoroughly modern challenge in terms of typography. But again, the way that we treat type on screen is based on the well-developed typographic practices honed over time, and the [typographer](/glossary/typographer)s goal remains the same: Make text readable and carry the texts message.
@ -83,6 +84,8 @@ CSS is the second language we use to add typographic style and layout to HTML. I
Now, working in that separate CSS file, its time to apply our own typography to our text. Sticking with [system fonts](/glossary/system_font_web_safe_font) rather than [web fonts](/glossary/web_font) for now, well improve its overall appearance.
First, lets increase the contrast in size between our headings and paragraph text:
```css
body {
font-size: 16px;
}
@ -92,6 +95,8 @@ h2 {
h1 {
font-size: 200%;
}
```
Now lets make everything a bit more readable by opening up the line-height a bit:
```css