mirror of
https://github.com/google/fonts.git
synced 2024-12-27 02:33:16 +03:00
b2adcd7796
* 1st commit: all content, basic formatting, svg links This is the new Q1 content. Almost all formatting is needed. Excerpts are all missing. There’s absolutely no “related” metadata yet. No alt text, either. But images are all in, renamed to `thumbnail.svg` where appropriate, and structurally everything is there. * Testing link format * Adding all CSS v2 API links for axis defs * Testing Markdown-format tables for axis steps * Adding 2 gloss links to all axis defs’ opening para * More links in intro paras * Inserted all link (blank) into all gloss. terms Almost all of these links need the URLs added later, but at least they’re now marked up to resemble anything that was underlined in the Google Docs. * Inserted all (blank) links in articles Also formatted most of the big tables in new Markdown table format * Gloss. excerpt test * Excerpts for all axis definitions * Remaining (non-axis) glossary excerpts * Renaming 1 illo per article to `thumbnail` * Updating illo filename in content to reflect `thumbnail` name change * Adding prev/next URLs for all new articles * Captions for all articles Some still need font credits adding * Alt text for `a_checklist_for_choosing_type` * Alt text for `language_support_in_fonts` * Alt text for `the_foundations_of_web_typography` * Alt text for `an_overview_of_latin_type_anatomy` Only a small change, as most alt text was already present for this one. * Illo alt text for all axis definitions in Glossary (And table formatting, too.) * Updated illos for `cursive_axis` & `wonky_axis` * Remaining illo alt text for non-axis-related Glossary terms * Added all related gloss. terms to new articles * Added all related articles to gloss. terms * First round of actual URLs on new Gloss. terms * Actual URLs in all remaining Gloss. terms * All real URLs for all new articles And improved checklist formatting * New Thai & Devanagari illos Hopefully the final versions * OG excerpts for all 4 new articles * New illo as per Dave’s rec + TP copy tweak + illo filenames * Article ordering within each `module.textproto` file * Update prev/next for existing articles to reflect new Q1 content
28 lines
1.7 KiB
Markdown
28 lines
1.7 KiB
Markdown
|
||
Width (`wdth` 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 [width](/glossary/width) parameter.
|
||
|
||
The [Google Fonts CSS v2 API ](https://developers.google.com/fonts/docs/css2) defines the axis as:
|
||
|
||
| Default: 100 | Min: 25 | Max: 200 | Step: 0.1 |
|
||
|
||
<figure>
|
||
|
||
|
||
|
||
</figure>
|
||
|
||
Width is the result of how much horizontal space is taken up by a [typeface](/glossary/typeface)’s [characters](/glossary/character). A [condensed](/glossary/condensed_narrow_compressed) face takes up considerably less space than a [wide](/glossary/wide_extended) one.
|
||
|
||
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>
|
||
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.
|