Question

I want to increase the height of my text in html, without increasing its width proportionally. When I increase the font-size, the increase is both in the horizontal as well as vertical direction.

---

You may think of it like stretching the height of the text, with its width constant. Can I do that using CSS?

Answer 1

You can use the scale transform property from CSS3:

.condensed {
    -webkit-transform: scale(1, 2);
       -moz-transform: scale(1, 2);
        -ms-transform: scale(1, 2);
         -o-transform: scale(1, 2);
            transform: scale(1, 2);
}​

Because it takes two values, you can scale the height and width of the letters.

http://jsfiddle.net/Kyle_Sevenoaks/8bT8q/

As you can see, if you switch the values, the letters are stretched the other way.

http://jsfiddle.net/Kyle_Sevenoaks/8bT8q/1/

Be aware that this is a CSS3 property and won’t be supported by all browsers (mostly IE<9).

Also take in to account that the element will effectively keep its width as i the text were not scaled, so if you have some layout quirks this might be the reason.

http://jsfiddle.net/Kyle_Sevenoaks/8bT8q/2/

Here I set the bg color of the scaled <h1> to show the effect.