Grow your CSS skills. Land your dream job.

font-stretch

Last updated on:

The font-stretch property, introduced in CSS3, selects a normal, condensed or expanded face from a font.

In order to use font-stretch and see a result of some kind, the font being used has to have a face that matches the value given. In other words, font-stretch will not work on just any font, but only on fonts that are designed with different faces matching the defined sizes.

p {
    font-stretch: ultra-condensed;
}

font-stretch accepts one of the following values:

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

If a particular font does not have all the faces represented, any value used will map to the closest equivalent face. Normal or condensed values will map to a narrower font and expanded values will map to a wider face, or else the nearest narrower face.

In supporting browsers, font-stretch can be used as part of the font shorthand property.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
none none 9+ none 9+ none none

Comments

  1. Hi, I was looking this up in w3 and it says that it isn’t supported in any browsers. I don’t know who’s right, but I didn’t notice the “try me” testing code from w3 working in either firefox or IE..and both are higher than 9

    • Hi Carine. Read the 2nd paragraph in this article and you’ll see why it wasn’t working. The font face itself has to support it, along with the browser. Just because the browser supports it, doesn’t mean this one will work. It’s kind of a strange thing with fonts and certain properties, but that’s just how it is.

      Also, keep in mind that “w3schools” has nothing to do with “w3c” (which is the proper organization). W3schools is okay for learning the basics, but they don’t have any authority as a standards body or anything like that.

  2. Oh ok…Thanks. I had been wondering where the rules were….I know there were resources on w3 schools and Mozilla but never knew the official one. Thanks again.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".