The font-stretch
CSS property selects a normal, condensed, or expanded face from a font.
/* Keyword 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; /* Percentage values */ font-stretch: 0%; font-stretch: 50%; font-stretch: 200%; /* Global values */ font-stretch: inherit; font-stretch: initial; font-stretch: unset;
Some font families offer additional faces in which the characters are narrower than the normal face (condensed faces) or wider than the normal face (expanded faces).
You can use font-stretch
to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.
To see the effect of this property on some sample fonts, see the Font face selection section below.
This property may be specified as a single keyword value or a single <percentage>
value.
normal
semi-condensed
, condensed
, extra-condensed
, ultra-condensed
semi-expanded
, expanded
, extra-expanded
, ultra-expanded
<percentage>
<percentage>
value. 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.
However, note that the <percentage>
syntax is not yet supported by all browsers: check the Browser compatibility table for details.
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% |
The face selected for a given value of font-stretch
depends on the faces supported by the font in question. 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.
The table below demonstrates the effect of supplying various different percentage values of font-stretch
on two different fonts:
50% | 62.5% | 75% | 87.5% | 100% | 112.5% | 125% | 150% | 200% | |
---|---|---|---|---|---|---|---|---|---|
Helvetica Neue | |||||||||
League Mono Variable |
font-stretch
less than 100% select the condensed face, while all other values select the normal face.font-stretch
.<font-stretch-absolute>where
<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>
Note that this example will only work in browsers that support <percentage>
values.
<div class="container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> </div>
/* This example uses the League Mono Variable font, developed by Tyler Finck (https://www.tylerfinck.com/) and used here under the terms of the SIL Open Font License, Version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web */ @font-face { src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf'); font-family:'LeagueMonoVariable'; font-style: normal; } .container { border: 10px solid #f5f9fa; padding: 0 1rem; font: 1.5rem 'LeagueMonoVariable', sans-serif; } .condensed { font-stretch: 50%; } .normal { font-stretch: 100%; } .expanded { font-stretch: 200%; }
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 4 The definition of 'font-stretch' in that specification. | Working Draft | Adds the <percentage> syntax for variable fonts. |
CSS Fonts Module Level 3 The definition of 'font-stretch' in that specification. | Candidate Recommendation | Initial definition. |
Note: The font-stretch
property was initially defined in CSS 2, but dropped in CSS 2.1 due to the lack of browser implementation. It was brought back in CSS 3.
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | a font stretch |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 60 | 12 | 9 | 9 | 47 | 11 |
<percentage> syntax |
No | ? | 61 | No | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 60 | 60 | 12 | 9 | 47 | ? | ? |
<percentage> syntax |
No | No | ? | 61 | No | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch