How to Change font height and width in CSS and HTML

One of the most straightforward things to do when designing websites is to change font height and width either via CSS or directly in HTML. The only problem is that the traditional methods and the more modern conventions are to change the entire font size while maintaining the scaling.

How about if you want to change the font height or width independently of each other? Enter CSS to the rescue.

There are four ways you can do this with ease using a choice of three values on the transform property on the font selector.

Scale(value)

This example scales the width and height proportionally.

elem {
 -ms-transform: scale(2); /* IE 9 */
 -webkit-transform: scale(2); /* Safari */
 transform: scale(2);
 }

The Shorthand Scale(width, height)

The example below increases the width by one and a half times while the width will shrink by half.

elem {
 -ms-transform: scale(1.5, 0.5); /* IE 9 */
 -webkit-transform: scale(1.5, 0.5); /* Safari */
 transform: scale(1.5, 0.5);
 }

ScaleX

Scales the width.

elem {
 -ms-transform: scaleX(0.5); /* IE 9 */
 -webkit-transform: scaleX(0.5); /* Safari */
 transform: scaleX(0.5);
 }

ScaleY

Scales the height.

elem {
 -ms-transform: scaleY(1.5); /* IE 9 */
 -webkit-transform: scaleY(1.5); /* Safari */
 transform: scaleY(1.5);
 }

There you have it. That is how you can scale the height and width of the font using CSS on the HTML selectors.

And that’s the tip for today.

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.