font-stretch
Quick Summary for font-stretch (@font-face)
The 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.0

Formal definition

Related at-rule@font-face
Initial valuenormal
Computed valueas 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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Our brains are wired to find things we are looking for - if your always cynical or waiting for things to go wrong, then your life will reflect that. On the other hand, having a positive outlook on life will bring you joy and provide you with inspiration when you least expect it ☀️🍉🌴
Unknown
Random CSS Property

font-family

The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
font-family css reference