CSS font-stretch playground

Explore font-stretch with controls for testing typographic widths, keywords, and percentages on real text.

WIDTH AXIS CSS FONT STRETCH Condensed and expanded faces only appear when the selected font provides them. Compare 75%, 100%, 125% and the named width keywords before copying the CSS.

HTML

<p class="font-stretch-sample">
  WIDTH AXIS CSS FONT STRETCH
  Condensed and expanded faces only appear when the selected font provides them.
  Compare 75%, 100%, 125% and the named width keywords before copying the CSS.
</p>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<p class="max-w-2xl [font-family:Avenir_Next,_Arial,_Helvetica,_sans-serif] text-3xl font-bold leading-none [font-stretch:75%]">
  WIDTH AXIS CSS FONT STRETCH
  Condensed and expanded faces only appear when the selected font provides them.
  Compare 75%, 100%, 125% and the named width keywords before copying the CSS.
</p>

CSS

.font-stretch-sample {
  max-inline-size: 42rem;
  font-family: "Avenir Next", Arial, Helvetica, sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  font-stretch: 75%;
}