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:
parent
cfce9851ac
commit
84dacefe47
@ -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 typeface’s 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 typeface’s 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.
|
||||
|
@ -115,6 +115,8 @@ There’s 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)
|
||||
|
@ -7,7 +7,7 @@ When talking about [type](/glossary/type), it’s 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 there’s 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 isn’t 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 there’s 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 isn’t changed.
|
||||
|
||||
<figure>
|
||||
|
||||
|
@ -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.
|
||||
|
||||
|
@ -1,9 +1,10 @@
|
||||
|
||||
The internet is so entrenched in our everyday lives, it can be easy to forget that it’s 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, it’s 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 it’s 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, it’s 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 it’s 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 it’s a journalist writing a story in a newspaper website’s [CMS](https://en.wikipedia.org/wiki/Content_management_system), or a user leaving a comment on social media, there’s a limited notion of what the content actually is before it’s 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 it’s a journalist writing a story in a newspaper website’s content management system, or a user leaving a comment on social media, there’s a limited notion of what the content actually is before it’s 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 text’s 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, it’s 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, we’ll improve its overall appearance.
|
||||
|
||||
First, let’s 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 let’s make everything a bit more readable by opening up the line-height a bit:
|
||||
|
||||
```css
|
||||
|
Loading…
Reference in New Issue
Block a user