29

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 when I have multi-line links with a hover effect: when moused over the lines the effect flickers on and off because of the increased line height: Example

Is there another way to do this?

Kuba Holuj
  • 687
  • 1
  • 6
  • 16
  • 1
    interesting question. I hate to break your heart, but there may not be a clean way to keep the link inline ant prevent that flickering effect at the same time. Sorry, man. Hard luck. :( – jrharshath Jun 03 '09 at 04:25
  • i was wondering of the same thing too. i want the font to be taller, but not font-size :D – mars-o Aug 02 '13 at 15:19

8 Answers8

44

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

Prashant Tapase
  • 2,132
  • 2
  • 25
  • 34
  • This is only scaling the element that has the applied css. This is a more modern css property and older. Please see [w3schools article](http://www.w3schools.com/cssref/css3_pr_transform.asp) for more information on what browsers support this property. The prefixed version of the scale property is what makes it work for most browsers. – CoasterChris Jun 16 '15 at 02:03
  • This should be the accepted answer indeed :) Very useful – Kojo Sep 30 '16 at 14:25
15

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.

aguadoe
  • 150
  • 2
  • 9
Andrew Hare
  • 344,730
  • 71
  • 640
  • 635
7

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

Evan Meagher
  • 4,517
  • 21
  • 18
3

http://www.css3.com/css-font-stretch/

This command will help you to solve problem

This will help you!

Sarin Suriyakoon
  • 420
  • 1
  • 7
  • 19
  • 2
    Late to the party, but completely irrelevant to the question asked. He asked about height, not width. – Mave May 27 '14 at 08:42
  • 3
    @Mave - Decrease the width of the font and it looks taller. I didn't have any luck with css font stretch, but a similar technique (http://stackoverflow.com/questions/6351013) using transform:scale(0.8,1) did work for me. – Sam Finnigan Jul 18 '14 at 08:25
  • `http://jsfiddle.net/d2xmesqq/` i check above link but it is not working. can u tell me more detail about this – Prashant Tapase Oct 05 '14 at 08:25
  • To add to this (as of posting this) `-webkit-` [doesn't support](http://caniuse.com/#feat=css-font-stretch) `font-stretch` which means it won't work in Chrome, Opera or Safari. – L84 Jun 23 '15 at 00:19
3

You can increase the height, width of a text using transform property. For instance: transform: scale(0.7, 1.0);

  1. The first value inside the scale property changes width of the letter/text.
  2. And the second value changes the height of the letter/text.

 **h1 {
    font-size: 60px;
    transform: scale(0.7, 1.0);
    margin-left: -90px 
}**

I used margin to align the text's

Note: Its always a best practice to use Vendor Prefixes

  • -webkit- (Chrome, Safari, newer versions of Opera.)
  • -moz- (Firefox)
  • -o- (Old versions of Opera)
  • -ms- (Internet Explorer)

Example: -webkit-transform: scale(0.7, 1.0);

Gnanasekar S
  • 1,820
  • 14
  • 15
1

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
Kaleem Sajid
  • 230
  • 1
  • 2
  • 13
1

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.

L84
  • 45,514
  • 58
  • 177
  • 257
0

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

Bhawna Malhotra
  • 476
  • 5
  • 18