How to add text height in CSS

Question

I have a tag h1and the code looks like

HTML

<h1>Awesome title</h1>

CSS

h1 {
    line-height:3px
}

I want only the text to be scaled up, the width of this text will remain the same.

Answer 1

Yes you can, with conversion. For example, this text has double height.

.tall {
    display:inline-block;
    -webkit-transform:scale(1,2); /* Safari and Chrome */
    -moz-transform:scale(1,2); /* Firefox */
    -ms-transform:scale(1,2); /* IE 9 */
    -o-transform:scale(1,2); /* Opera */
    transform:scale(1,2); /* W3C */
}

It works as follows:

transform:scale(width,height);

If I want it to be only 1.5 times higher than wide, I could use:

transform:scale(1,1.5);

Demo: http://codepen.io/Pachonk/pen/vNVaKr