font-stretch
Quick Summary for font-stretch (@font-face)
font-stretch
CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face
rule.
Code Usage for font-stretch (@font-face)
/* Single values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; /* multiple values */ font-stretch: 75% 125%; font-stretch: condensed ultra-condensed;;
More Details for font-stretch (@font-face)
font-stretch
The font-stretch
CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face
rule.
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-stretch
descriptor to explicitly specify the font face's stretch. The values for the CSS descriptor is same as that of its corresponding font property.
Syntax
/* Single values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; /* multiple values */ font-stretch: 75% 125%; font-stretch: condensed ultra-condensed;;
The font-weight
property is described using any one of the values listed below.
Values
normal
Specifies a normal font face.
semi-condensed
, condensed
, extra-condensed
, ultra-condensed
Specifies a more condensed font face than normal, with ultra-condensed as the most condensed.
semi-expanded
, expanded
, extra-expanded
, ultra-expanded
Specifies a more expanded font face than normal, with ultra-expanded as the most expanded.
<percentage>
A <percentage>
value between 50% and 200% (inclusive). Negative values are not allowed for this property.
In earlier versions of the font-stretch
specification, the property 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 something more like a continuum 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:
Keyword | Percentage |
---|---|
ultra-condensed | 50% |
extra-condensed | 62.5% |
condensed | 75% |
semi-condensed | 87.5% |
normal | 100% |
semi-expanded | 112.5% |
expanded | 125% |
extra-expanded | 150% |
ultra-expanded | 200% |
Variable fonts
Most fonts have a particular width which corresponds to one of the keyterm values. However some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer 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 concerns
People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a low contrast color ratio.
MDN Understanding WCAG, Guideline 1.4 explanations Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0Formal definition
Related at-rule | @font-face |
---|---|
Initial value | normal |
Computed value | as specified |
Formal syntax
<font-stretch-absolute>{1,2}where
<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>
Examples
Setting a percentage range for font-stretch
The following find a local Open Sans font or import it, and allow using the font for normal, semi-condensed and semi-expanded states.
@font-face { font-family: "Open Sans"; src: local("Open Sans") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); font-stretch: 87.5% 112.5%; }
Specifications
Specification |
---|
CSS Fonts Module Level 4 # font-prop-desc |
See also
font-display
font-family
font-weight
font-style
font-variant
font-feature-settings
font-variation-settings
src
unicode-range descriptor
Last modified: Jan 17, 2022, by MDN contributors