Add font-width property and descriptor #42935
+621
−73
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,188 @@ | ||||||
| --- | ||||||
| title: font-width | ||||||
| slug: Web/CSS/Reference/At-rules/@font-face/font-width | ||||||
| page-type: css-at-rule-descriptor | ||||||
| browser-compat: css.at-rules.font-face.font-width | ||||||
| sidebar: cssref | ||||||
| --- | ||||||
|
|
||||||
| The **`font-width`** [CSS](/en-US/docs/Web/CSS) descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the {{cssxref("@font-face")}} at-rule. | ||||||
pepelsbey marked this conversation as resolved.
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment. I think this page needs a similar note to the one you've got at the start of the |
||||||
|
|
||||||
| For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-width` descriptor to explicitly specify the font face's width. The available `font-width` descriptor values are the same as those of the corresponding {{cssxref("font-width")}} property. | ||||||
|
|
||||||
| ## Syntax | ||||||
|
|
||||||
| ```css | ||||||
| /* Single values */ | ||||||
| font-width: ultra-condensed; | ||||||
| font-width: extra-condensed; | ||||||
| font-width: condensed; | ||||||
| font-width: semi-condensed; | ||||||
| font-width: normal; | ||||||
| font-width: semi-expanded; | ||||||
| font-width: expanded; | ||||||
| font-width: extra-expanded; | ||||||
| font-width: ultra-expanded; | ||||||
| font-width: 50%; | ||||||
| font-width: 100%; | ||||||
| font-width: 200%; | ||||||
|
|
||||||
| /* multiple values */ | ||||||
|
Contributor
There was a problem hiding this comment.
Suggested change
For consistency with the previous comment. This needs changing on the |
||||||
| font-width: 75% 125%; | ||||||
| font-width: condensed ultra-condensed; | ||||||
| ``` | ||||||
|
|
||||||
| The `font-width` descriptor can take a single value from the list below. | ||||||
|
|
||||||
| ### Values | ||||||
|
|
||||||
| - `normal` | ||||||
| - : Specifies a normally condensed font face. | ||||||
| - `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` | ||||||
| - : Specifies a more condensed font face than normal, with ultra-condensed being the most condensed. | ||||||
| - `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` | ||||||
| - : Specifies a more expanded font face than normal, with ultra-expanded being the most expanded. | ||||||
| - `<percentage>` | ||||||
| - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this descriptor. | ||||||
|
|
||||||
| In earlier versions of the `font-width` specification, the descriptor accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a `<percentage>` value as well. This enables variable fonts to offer a continuous variation of character widths. For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying widths. | ||||||
|
|
||||||
| If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. | ||||||
|
|
||||||
| ### Keyword to numeric mapping | ||||||
|
|
||||||
| The table below shows the mapping between keyword values and numeric percentages: | ||||||
|
|
||||||
| <table class="fullwidth-table standard-table"> | ||||||
| <thead> | ||||||
| <tr> | ||||||
| <th scope="col">Keyword</th> | ||||||
| <th scope="col">Percentage</th> | ||||||
| </tr> | ||||||
| </thead> | ||||||
| <tbody> | ||||||
| <tr> | ||||||
| <td><code>ultra-condensed</code></td> | ||||||
| <td>50%</td> | ||||||
| </tr> | ||||||
| <tr> | ||||||
| <td><code>extra-condensed</code></td> | ||||||
| <td>62.5%</td> | ||||||
| </tr> | ||||||
| <tr> | ||||||
| <td><code>condensed</code></td> | ||||||
| <td>75%</td> | ||||||
| </tr> | ||||||
| <tr> | ||||||
| <td><code>semi-condensed</code></td> | ||||||
| <td>87.5%</td> | ||||||
| </tr> | ||||||
| <tr> | ||||||
| <td><code>normal</code></td> | ||||||
| <td>100%</td> | ||||||
| </tr> | ||||||
| <tr> | ||||||
| <td><code>semi-expanded</code></td> | ||||||
| <td>112.5%</td> | ||||||
| </tr> | ||||||
| <tr> | ||||||
| <td><code>expanded</code></td> | ||||||
| <td>125%</td> | ||||||
| </tr> | ||||||
| <tr> | ||||||
| <td><code>extra-expanded</code></td> | ||||||
| <td>150%</td> | ||||||
| </tr> | ||||||
| <tr> | ||||||
| <td><code>ultra-expanded</code></td> | ||||||
| <td>200%</td> | ||||||
| </tr> | ||||||
| </tbody> | ||||||
| </table> | ||||||
|
|
||||||
| ### Variable fonts | ||||||
|
|
||||||
| Most fonts have a particular width that corresponds to one of the keyterm values. However, variable fonts can support a range of widths with fine granularity, giving the designer a greater degree of control over the chosen weight. For this, percentage ranges are useful. | ||||||
|
|
||||||
| For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying glyph widths. | ||||||
|
|
||||||
| ## Accessibility | ||||||
|
|
||||||
| People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low color contrast ratio](/en-US/docs/Web/CSS/Reference/Properties/color#accessibility). | ||||||
|
|
||||||
| - [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) | ||||||
| - [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) | ||||||
|
|
||||||
| ## Formal definition | ||||||
|
|
||||||
| {{cssinfo}} | ||||||
|
|
||||||
| ## Formal syntax | ||||||
|
|
||||||
| {{CSSSyntax("font-width")}} | ||||||
|
|
||||||
| ## Examples | ||||||
|
|
||||||
| ### Setting a percentage range for font-width | ||||||
|
Contributor
There was a problem hiding this comment. Could this example be expanded so that it also incorporates |
||||||
|
|
||||||
| The following example uses the [League Mono](https://www.theleagueofmoveabletype.com/league-mono) font to synthesize different font families from the same font file using the `font-width` descriptor with different keywords and percentages. | ||||||
|
|
||||||
| ```html | ||||||
| <p>League Mono</p> | ||||||
| <p>League Mono</p> | ||||||
| <p>League Mono</p> | ||||||
| ``` | ||||||
|
|
||||||
| ```css | ||||||
| @font-face { | ||||||
| font-family: "League Mono Ultra Condensed"; | ||||||
| src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); | ||||||
| font-width: ultra-condensed; /* same as 50% */ | ||||||
| } | ||||||
|
|
||||||
| @font-face { | ||||||
| font-family: "League Mono Normal"; | ||||||
| src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); | ||||||
| font-width: 100%; /* same as normal */ | ||||||
| } | ||||||
|
|
||||||
| @font-face { | ||||||
| font-family: "League Mono Ultra Expanded"; | ||||||
| src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); | ||||||
| font-width: ultra-expanded; /* same as 200% */ | ||||||
| } | ||||||
|
|
||||||
| p:nth-child(1) { | ||||||
| font-family: "League Mono Ultra Condensed", sans-serif; | ||||||
| } | ||||||
|
|
||||||
| p:nth-child(2) { | ||||||
| font-family: "League Mono Normal", sans-serif; | ||||||
| } | ||||||
|
|
||||||
| p:nth-child(3) { | ||||||
| font-family: "League Mono Ultra Expanded", sans-serif; | ||||||
| } | ||||||
| ``` | ||||||
|
|
||||||
| {{EmbedLiveSample("Setting font width percentages", "100%", 200)}} | ||||||
|
|
||||||
| ## Specifications | ||||||
|
|
||||||
| {{Specifications}} | ||||||
|
|
||||||
| ## Browser compatibility | ||||||
|
|
||||||
| {{Compat}} | ||||||
|
|
||||||
| ## See also | ||||||
|
|
||||||
| - Legacy {{cssxref("@font-face/font-stretch")}} alias descriptor with better browser support | ||||||
| - {{cssxref("@font-face/font-display", "font-display")}} descriptor | ||||||
| - {{cssxref("@font-face/font-family", "font-family")}} descriptor | ||||||
| - {{cssxref("@font-face/font-weight", "font-weight")}} descriptor | ||||||
| - {{cssxref("@font-face/font-style", "font-style")}} descriptor | ||||||
| - {{cssxref("font-feature-settings", "font-feature-settings")}} property | ||||||
| - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} descriptor | ||||||
| - {{cssxref("@font-face/src", "src")}} descriptor | ||||||
| - {{cssxref("@font-face/unicode-range", "unicode-range")}} descriptor | ||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Question: In such cases, don't we usually tend to remove the legacy alias pages, redirect them towards the new name pages, and then cover the legacy name in the BCD for the new name (with "alternative name") and in the page description if we need to say something more?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, but it’s a special case: adoption and browser support for the legacy property are so big, compared to the modern one, that it’s much more practical to use the legacy one. So most of the developers (and search engines) will start looking for the
font-stretch.Only when the
font-widthbecomes widely supported and used, should we start considering redirecting thefont-stretch.