CSS Font-Stretch Adjust Text Width Easily

Introduction

The font-stretch property in CSS is a handy tool that lets you adjust the width of text by selecting different font faces. It’s great for fonts that offer options like condensed (narrower than normal) or expanded (wider than normal) faces. This feature has been available since September 2017 and is widely supported across many devices and browsers.

Note: The font-stretch property has been renamed to font-width in the specifications, but font-stretch is still recognized and widely used. The new name font-width isn’t supported by any browsers yet.

This property can really enhance your web design by adjusting the text width to fit your layout perfectly.

Specification

The font-stretch property is part of the CSS Fonts Module Level 4 specification. This module defines how fonts are used and manipulated in web design. The font-stretch property lets you adjust the width of text by selecting different font faces.

The specification details the various keyword and percentage values that can be used with the font-stretch property. These values help you choose the appropriate width for your text, making it easier to create balanced designs.

Note: As mentioned earlier, the font-stretch property has been renamed to font-width in the latest specifications. However, font-stretch is still widely used and recognized by browsers. The new name font-width is not yet supported, so you can continue to use font-stretch in your CSS.

By understanding the specification, you can effectively use the font-stretch property to control the appearance of text in your web projects. This can be particularly useful for creating responsive designs that adapt to different screen sizes and resolutions.

Description

The font-stretch property in CSS allows you to adjust the width of text by selecting different font faces. This is particularly useful for font families that offer additional faces, such as condensed (narrower than normal) or expanded (wider than normal) faces.

By using font-stretch, you can fine-tune the appearance of your text to better fit your design layout. Whether you want to save space with condensed text or make a bold statement with expanded text, font-stretch provides the flexibility you need.

However, not all fonts support condensed or expanded faces. If the font you are using does not offer these options, the font-stretch property will have no effect. Therefore, it’s essential to choose a font that supports these features if you want to take full advantage of the font-stretch property.

Syntax

The font-stretch property in CSS can be specified using either keyword values or percentage values. The syntax is straightforward and allows you to easily control the width of the text.

Here is the basic syntax for the font-stretch property:

font-stretch: <font-stretch-css3> | <percentage>;

Keyword Values

The keyword values for font-stretch include:

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

Percentage Values

The percentage values for font-stretch range from 50% to 200% (inclusive). Negative values are not allowed for this property.

Global Values

In addition to the specific font-stretch values, you can also use the following global values:

• inherit: Inherits the value from its parent element.
• initial: Sets the value to its default value.
• revert: Resets the property to the user-agent stylesheet value.
• revert-layer: Resets the property to the value defined in the previous cascade layer.
• unset: Resets the property to its natural value, which means it behaves like inherit if the property is inherited or initial if it is not.

Example Syntax

Here are some examples of how to use the font-stretch property:

/* Keyword values */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;

Summary

The font-stretch property provides a simple and effective way to adjust the width of text in your web designs. By using the appropriate keyword or percentage values, you can create visually appealing and balanced layouts that enhance the overall user experience.

Values

The font-stretch property in CSS allows you to adjust the width of text using both keyword values and percentage values. Understanding these values is crucial for effectively controlling the appearance of your text.

Keyword Values

The keyword values for font-stretch include:

• normal: Specifies a normal font face.
• semi-condensed, condensed, extra-condensed, ultra-condensed: Specify a more condensed font face than normal, with ultra-condensed being the most condensed.
• semi-expanded, expanded, extra-expanded, ultra-expanded: Specify a more expanded font face than normal, with ultra-expanded being the most expanded.

Percentage Values

The percentage values for font-stretch range from 50% to 200% (inclusive). Negative values are not allowed. These values provide a more granular control over the width of the text.

Global Values

In addition to the specific font-stretch values, you can also use the following global values:

• inherit: Inherits the value from its parent element.
• initial: Sets the value to its default value.
• revert: Resets the property to the user-agent stylesheet value.
• revert-layer: Resets the property to the value defined in the previous cascade layer.
• unset: Resets the property to its natural value, which means it behaves like inherit if the property is inherited or initial if it is not.

Example Values

Here are some examples of how to use the font-stretch property with different values:

/* Keyword values */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;

Summary

The font-stretch property provides a wide range of values to adjust the width of text. By using keyword values, you can quickly select predefined widths, while percentage values offer more precise control. Understanding these values allows you to create visually appealing and balanced layouts that enhance the overall user experience.

Keyword to Numeric Mapping

The font-stretch property in CSS allows you to adjust the width of text using keyword values. Each keyword value corresponds to a specific percentage value, which provides a more granular control over the text width. Understanding this mapping can help you better utilize the font-stretch property in your web designs.

Below is the table that shows the mapping between the font-stretch keyword values and their corresponding numeric percentages:

Explanation

• ultra-condensed (50%): This keyword value makes the text very narrow, which is suitable for saving space in your design.
• extra-condensed (62.5%): This value condenses the text slightly more than condensed, offering a middle ground between ultra-condensed and condensed.
• condensed (75%): This value makes the text narrower than normal but not as much as extra-condensed.
• semi-condensed (87.5%): This value condenses the text slightly, making it just a bit narrower than normal.
• normal (100%): This is the default value and does not stretch the font.
• semi-expanded (112.5%): This value expands the text slightly, making it just a bit wider than normal.
• expanded (125%): This value makes the text wider than normal but not as much as extra-expanded.
• extra-expanded (150%): This value expands the text significantly, making it much wider than normal.
• ultra-expanded (200%): This keyword value makes the text very wide, which is suitable for making a bold statement in your design.

Practical Use

Understanding the mapping between keyword values and their corresponding percentages allows you to fine-tune the width of your text to achieve the desired visual effect. Whether you need to save space with condensed text or make a bold statement with expanded text, the font-stretch property provides the flexibility you need.

Font Face Selection

The font-stretch property in CSS is used to select different font faces from a font family, based on the width of the text. 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, the browser will map the values to the closest available face.

How It Works

• Values Less Than 100%: These values select a narrower face, which is useful for creating condensed text.
• Values Greater Than or Equal to 100%: These values select a wider face, which is useful for creating expanded text.

Example

Let’s look at an example to understand how the font-stretch property selects different font faces based on the available options in the font family.

/* Selecting different font faces based on font-stretch values */
p.normal {
  font-stretch: normal;
}

p.condensed {
  font-stretch: condensed;
}

p.expanded {
  font-stretch: expanded;
}

<p class="normal">This is normal text.</p>
<p class="condensed">This is condensed text.</p>
<p class="expanded">This is expanded text.</p>

In this example, the font-stretch property is used to select different font faces based on the specified values. The text within the paragraphs will be rendered with different widths according to the font-stretch values.

Summary

The font-stretch property is a powerful tool for adjusting the width of text in your web designs. By understanding how it selects different font faces based on the available options, you can create visually appealing and balanced layouts that enhance the overall user experience. Whether you need to save space with condensed text or make a bold statement with expanded text, the font-stretch property provides the flexibility you need.

Formal Definition

The font-stretch property in CSS is defined in the CSS Fonts Module Level 4 specification. This property allows you to adjust the width of text by selecting different font faces from a font family.

Initial Value

The initial value of the font-stretch property is normal.

Applies To

The font-stretch property applies to all elements and text, including the pseudo-elements ::first-letter and ::first-line.

Inherited

Yes, the font-stretch property is inherited.

Computed Value

The computed value of the font-stretch property is as specified.

Animation Type

The font-stretch property is animatable. The animation type is a discrete step.

Formal Syntax

font-stretch =
  normal |
  ultra-condensed |
  extra-condensed |
  condensed |
  semi-condensed |
  semi-expanded |
  expanded |
  extra-expanded |
  ultra-expanded |
  <percentage>

Example Usage

/* Keyword values */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;

Summary

The formal definition of the font-stretch property provides a clear understanding of its initial value, applicability, computed value, and animation type. By knowing these details, you can effectively use the font-stretch property to control the width of text in your web designs.

Examples

Setting Font Stretch Percentages

<p class="semi-condensed-87">semi-condensed text (87.5%)</p>
<p class="condensed-75">condensed text (75%)</p>
<p class="expanded-125">expanded text (125%)</p>
<p class="extra-expanded-150">extra-expanded text (150%)</p>

@font-face {
  src: url("( WebsiteUrl )");
  font-family: "LeagueMonoVariable";
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

p {
  font: 1.5rem "LeagueMonoVariable", sans-serif;
}

.semi-condensed-87 {
  font-stretch: 87.5%;
}

.condensed-75 {
  font-stretch: 75%;
}

.expanded-125 {
  font-stretch: 125%;
}

.extra-expanded-150 {
  font-stretch: 150%;
}

This example demonstrates how to use percentage values to create condensed, normal, and expanded text.

Using Keyword Values

<p class="ultra-condensed">ultra-condensed text</p>
<p class="extra-condensed">extra-condensed text</p>
<p class="condensed">condensed text</p>
<p class="semi-condensed">semi-condensed text</p>
<p class="normal">normal text</p>
<p class="semi-expanded">semi-expanded text</p>
<p class="expanded">expanded text</p>
<p class="extra-expanded">extra-expanded text</p>
<p class="ultra-expanded">ultra-expanded text</p>

@font-face {
  src: url("( WebsiteUrl )");
  font-family: "LeagueMonoVariable";
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

p {
  font: 1.5rem "LeagueMonoVariable", sans-serif;
}

.ultra-condensed {
  font-stretch: ultra-condensed;
}

.extra-condensed {
  font-stretch: extra-condensed;
}

.condensed {
  font-stretch: condensed;
}

.semi-condensed {
  font-stretch: semi-condensed;
}

.normal {
  font-stretch: normal;
}

.semi-expanded {
  font-stretch: semi-expanded;
}

.expanded {
  font-stretch: expanded;
}

.extra-expanded {
  font-stretch: extra-expanded;
}

.ultra-expanded {
  font-stretch: ultra-expanded;
}

This example demonstrates how to use keyword values to create various text widths, from ultra-condensed to ultra-expanded.

Summary

The font-stretch property is a powerful tool for controlling the width of text. By understanding its formal definition and seeing practical examples, you can effectively use this property to create visually appealing and balanced web designs.

Browser Compatibility

The font-stretch property is well-supported across many modern browsers, ensuring consistent performance across different platforms.

Compatibility Table

Summary

The font-stretch property is a powerful tool for adjusting the width of text in your web designs. With good browser support and various customization options, it can help you create visually appealing and balanced layouts. Explore the additional resources to further enhance your CSS and font styling skills. Happy coding!

Additional Resources

If you’re looking to learn more about CSS and font styling, here are some helpful resources:

Related Properties

• font-style: Lets you set the font style, like normal, italic, or oblique.
• font-weight: Sets the font weight, such as normal, bold, or a specific number.
• font-size: Sets the font size.

Useful Links

• CSS Fonts Module Level 4: The official specification for CSS Fonts.
• MDN Web Docs - CSS Fonts: A comprehensive guide to CSS fonts.
• Fundamental text and font styling: A tutorial covering the basics of text and font styling.

Related Tutorials

• CSS Fonts Tutorial: Learn how to style and manipulate fonts with CSS.
• Web Typography: A comprehensive guide to web typography.

Community and Support

• CSS-Tricks: A community-driven site with CSS tutorials and resources.
• Stack Overflow: A forum where you can ask questions and share knowledge about CSS.

Summary

The font-stretch property is a powerful tool for adjusting the width of text in your web designs. With good browser support and various customization options, it can help you create visually appealing and balanced layouts. Explore the additional resources to further enhance your CSS and font styling skills. Happy coding!