CSS font-stretch Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The font-stretch property in CSS allows you to select a normal, condensed, or expanded face from a font. It enables finer control over the font appearance by stretching or compressing the text horizontally.

This property is particularly useful when you want to achieve a specific look or ensure text fits within a designated space without changing its font size.

💡 Syntax

The syntax for the font-stretch property is straightforward. You can specify a variety of keyword values to achieve the desired effect.

Syntax

Copied

element {
  font-stretch: value;
}

🎛️ Default Value

The default value of the font-stretch property is normal, which indicates no stretching or condensing of the font.

🏠 Property Values

The font-stretch property accepts the following keyword values:

Value	Description
ultra-condensed	The most condensed text possible.
extra-condensed	Extra condensed text.
condensed	Condensed text.
semi-condensed	Slightly condensed text.
normal	No stretching or condensing.
semi-expanded	Slightly expanded text.
expanded	Expanded text.
extra-expanded	Extra expanded text.
ultra-expanded	The most expanded text possible.

📄 Example

In this example, we'll apply different font-stretch values to demonstrate the effect.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS font-stretch Example</title>
  <style>
    .ultra-condensed {
      font-stretch: ultra-condensed;
    }
    .condensed {
      font-stretch: condensed;
    }
    .normal {
      font-stretch: normal;
    }
    .expanded {
      font-stretch: expanded;
    }
    .ultra-expanded {
      font-stretch: ultra-expanded;
    }
  </style>
</head>
<body>
  <h1>Demonstration of font-stretch Property</h1>
  <p class="ultra-condensed">This is ultra-condensed text.</p>
  <p class="condensed">This is condensed text.</p>
  <p class="normal">This is normal text.</p>
  <p class="expanded">This is expanded text.</p>
  <p class="ultra-expanded">This is ultra-expanded text.</p>
</body>
</html>

🖥️ Browser Compatibility

The font-stretch property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The font-stretch property is a powerful tool for web developers aiming to fine-tune the appearance of text on their websites.

By adjusting the horizontal stretching of text, you can achieve a specific design aesthetic and ensure optimal text fit within your layout. Experiment with different values to see how this property can enhance your typography and overall design.