Is it possible to change inline text height, not just the line-height?

Question

I am wondering if it\'s possible to change the height of inline text, without stretching the font, and without changing the line height in css.

An issue comes up whe

Answer 1

You can increase the height using transform:scale(3,5) The height depends upon the second parameter of transform:scale

<div>
<span>Text</span>  
</div>

div {
text-align:center;
 }

span
{    
display:inline-block;
transform:scale(3,5); 
-webkit-transform:scale(3,1); 
}

http://codepen.io/smarty_tech/pen/ZWvWav

Answer 2

You won't be able to change the height of the font alone but you can adjust the font-size to work with the line height you have set.

Answer 3

You can increase height of font using below css

transform:scale(2,3); /* W3C */
-webkit-transform:scale(2,3); /* Safari and Chrome */
-moz-transform:scale(2,3); /* Firefox */
-ms-transform:scale(2,3); /* IE 9 */
-o-transform:scale(2,3); /* Opera */

JSFIDDLE

Answer 4

There is one property that hasn't been mentioned yet that can help change the height of a font...the only problem is it is has abysmal support.

The property I refer to is the font-size-adjust CSS Property.

MDN has this to say:

The font-size-adjust CSS property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters. This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters.

As I mentioned support is horrible. As of this post, Firefox is the only browser that supports it. As of v43 of Chrome it can be enabled under the experimental Web Platform features flag.

Answer 5

You could also try decreasing the letter-spacing. Making the type a bit tighter might make it seem taller in relation to its width.

Answer 6

You cannot change font height using CSS but what you can do is to make it look taller by

• reducing letter-spacing (Note: you can use negative letter-spacing if you need.)
• reducing font-weight
• and by increasing font-size