CSS FONT-STRETCH

The font-stretch property is used to expand or contract (condense) the horizontal width of the font. The change is relative to the normal width of the font as displayed by the browser. narrower: The narrower value contracts the font to the next smaller width. wider: The wider value expands the font to the next larger width. The order descends from narrowest to widest in value. The normal value is the normal width of the font as displayed by the browser.

Example

1
2
3

h2 {
font-stretch: ultra-condensed
}

Possible Values

normal: Sets the scale of condensation or expansion to normal
wider: Sets the scale of expansion to the next expanded value
narrower: Sets the scale of condensation to the next condensed value
ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded: Sets the scale of condensation or expansion of the font-family. “ultra-condensed” is the most condensed (narrowest) value, and “ultra-expanded” is the most expanded (widest) value

Baz

I have tried the font-stretch CSS and it doesnt seem to work in most browsers, especially on MAC
Ron Watt

I’d love to use this … but how widely, and bullet-proof is it implemented?
http://blog.jordanshaw.com JSHAW

I’ve been trying to do this as well. The feature is built in CSS3 but still seems to not be implemented in mac browsers from what i can see. Does anyone know of any alternatives other than images….?
OSlimey1

Didn’t work for me either. PC. I used live view in CS4, and it didn’t work.
batty13

no go in firefox surprisingly either.
(version 3.0.10)
http://homework.sdmesa.edu/pbille/ DearOl’Dad

font-stretch:ultra-condensed
No EFFECT with Internet Explorer 8 v8.0.6001.18702
http://www.manticorp.co.uk Harry

It is my understanding that this only calls for a condensed version of the font, the same as calling font-style: arial narrow; so the user needs the font installed for it to work.
http://www.miguelrincon.info/ Miguel Rincon

Yes, it depends on the the fonts installed. Testing on Windows XP/Firefox 3 and strech does not have any effect on Arial.

I could use font-family:”Arial Narrow”… it can be useful to someone!
tinu

pls. some example to how to works and effect on text ….
Rui

Boa merda…
http://ows.untergrund.net Aszazin

Currently none of the major browsers support this.

It should use a narrower/wider font (-> a character with a normal size of 10wx10h becomes one of 8wx10h for example)

Currently I use the ‘letter-spacing’ property for adjusting text width. Keeps the size of the characters, but lessens/widens the space between them.
This property would be nice when implemented!
Paborito

Not working for me either.

Im using Dreamweaver CS3 (really old). Yet this “font-stretch” appears on the code-hinting drop down… how can this property be there when its not working (I need enlightenment T_T).
http://YourWebsite Joshua Richardson

You can use CSS transforms to achieve the effect with any font.

CSS3.com - A comprehensive CSS 3 reference guide, tutorial, and blog

CSS FONT-STRETCH

Example

Possible Values

Sponsors

Properties