You are here: / Guides / Programming / Technology / Tips / How to Change font height and width in CSS and HTML

How to Change font height and width in CSS and HTML

Change font height CSS and HTML

Share!



One of the most straight forward thing to do when designing websites are 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.

Read Also  Meet Gradle the Multi-Language Build Automation Tool

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.