Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS font-stretch Property

Posted in CSS Tutorial
Updated on Oct 03, 2024
By Mari Selvan
👁️ 14 - Views
⏳ 4 mins
💬 1 Comment
CSS font-stretch Property

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
Copy To Clipboard
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:

ValueDescription
ultra-condensedThe most condensed text possible.
extra-condensedExtra condensed text.
condensedCondensed text.
semi-condensedSlightly condensed text.
normalNo stretching or condensing.
semi-expandedSlightly expanded text.
expandedExpanded text.
extra-expandedExtra expanded text.
ultra-expandedThe most expanded text possible.

📄 Example

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

index.html
Copied
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy