How to Change font height and width in CSS and HTML

Change font height CSS and HTML

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.


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);


Scales the width.

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


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.

SUGGESTED  3D Math for Game Programming: Vectors - Part 5

And that’s the tip for today.