How to Adjust a Font's Vertical Scaling Using CSS

Is it possible to adjust a font's vertical scaling using CSS?

transform property can be used to scale text:

.menu li a {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "HelveticaNeue-Medium", sans-serif;
  font-size: 14px;
  display: inline-block;
  transform: scale(1, 1.5);
  -webkit-transform: scale(1, 1.5); /* Safari and Chrome */
  -moz-transform: scale(1, 1.5); /* Firefox */
  -ms-transform: scale(1, 1.5); /* IE 9+ */
  -o-transform: scale(1, 1.5); /* Opera */
}

Scaling fonts with css

You can use this to

HTML

<p>
 Hello
</p>

CSS

p {
display:inline-block;
transform:scale(1,4); 
-webkit-transform:scale(1,4); 
-moz-transform:scale(1,4); 
-ms-transform:scale(1,4); 
-o-transform:scale(1,4); 
} 

JSFIDDLE

You can change the scale(x,y) value according to your need considering you are changing the height and width differently (i.e the ratio of Height:Width is not 1:1)

How to scale and center text vertically in a fluid layout? (using CSS)

The line-height approach centers the text when you only have one line. You are using percentages, so I think this question might help in that respect.

What you could do instead is use some more jQuery or JS to, on load:

• Measure the outer height of the paragraph (or whatever element you are using) in the .content

• Calculate the bottom offset of this paragraph in relation with the .content (how much space you have remaining from the bottom border of the paragraph to the bottom border of the .content div)

• Divide the remainder in two, and add that number as a top margin or top position for the paragraph.

This will let you have longer text without messing with the line-height.

If you want a pure css solution, check these alternative ways of centering vertically.

Web fonts vertical spacing

Setting the line-height property to a fixed-pixel value on your desired element will work.

How to stretch font height wise using CSS?

Try this:

p {

  display: inline-block;

  font-size: 32px;

  transform: scale(.5, 1);

}

<p>This is text.</p>

Force fit height of font with css or js

let el = document.querySelector(".box");

let width = 300;

let height = 300;

let ws = (width / el.offsetWidth);

let hs = (height / el.offsetHeight);

el.style.transform = `scaleX(${ws}) scaleY(${hs})`;

<div class="box" style="display:inline-block; transform-origin: top left; background-color: coral;">

  MY TEXT

</div>

Responsive font size in CSS

The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser.

Media Queries

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.

For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Viewport percentage lengths

You can also use viewport percentage lengths such as vw, vh, vmin and vmax. The official W3C document for this states:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Again, from the same W3C document each individual unit can be defined as below:

vw unit - Equal to 1% of the width of the initial containing block.

vh unit - Equal to 1% of the height of the initial containing block.

vmin unit - Equal to the smaller of vw or vh.

vmax unit - Equal to the larger of vw or vh.

And they are used in exactly the same way as any other CSS value:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.

---

Related Topics