How To Stretch A Font/Text Horizontally And Vertically With CSS?

Some days ago I was designing a template. I liked a font that is long in it’s vertical length. I added it to my template and then it start looking good. Then when it comes for SEO, I checked it on PageLoading time then it was too high that is totally against SEO. So I start checking again what the real problem and i got it on WebFont. So I have to remove it but I also liked it. In the new era SEO is on top beyond the designing so I removed that font. Then here came an idea about converting a WebSafeFont into that stylish new font. I got the 99% matching WebSafeFont but 1% difference came on font vertical length. Then it’s time to remove that 1% difference also.

Then I started searching that “How To Stretch A Font Horizontally And Vertically With CSS?” and I got answer at w3schools but there was a sentence that “None of the major browsers support the font-stretch property.”. Is not irritating that they created a page that is not supported by any browser then for which they write it here. I think for CSS4 :-). Then after more searching better one, I got nothing related to it but then I think that it’s time to fix it with other codes. I just got use of ‘transform:scale’ that solved my problem of font stretching that i am going to share here.

The font-stretch property allows you to make text wider or narrower, higher and lower. From this you can redesign a simple font to your desired on stylish font. It’s a simple and easy to understand code. So without any more preface, here comes the live demo. Check this out and have a look on features then get the code and make it done.

Features:

1.) Pure CSS Property.
2.) Simple And Easy To Add.
3.) Work Perfectly With Any Fonts.
4.) Quick To Load With Font.
5.) Can Be Used With Any HTML Tag.
6.) CSS 2.1 Compatible.
7.) Cross OS Supported Like Mac, Windows etc…
8.) Works In All Latest Browsers.
9.) Chrome, Firefox, Opera, Safari Browser Tested.
10.) Transform-Scale Code Used.
11.) Size No Can Be Used In Points Digits Also.
12.) Don’t Use Minus- Numbers For Changing Size.
13.) Size Should Be Between 0-1092.
14.) No Pixel Will Loose.
15.) Perfect Font Graphics Remains.

CSS Code:

p {
display:inline-block;
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 */
/* Rest Of CSS Code Here*/
}

Customization:

1.) Change All Blue No With Your Desired Horizontal Length Of Font.
2.) Change All Red No With Your Desired Vertical Length Of Font.
3.) Change p With Your Desired HTML Tag.
4.) Add Font Style Color Size Margin Padding Height etc Below /* Rest Of CSS Code Here*/.
5.) Save And Done.

Bug Fixed:

While you will stretch font in vertical direction then it will be automatically stretch between center and will increase from bottom and top equally and also automatically moved the upper line high and bottom line lower to set itself perfectly without overlapping them.

And while you will stretch font in horizontal direction then it will be also automatically stretch between center and will increase from left and right equally but not automatically moved the left and right words aside to set itself perfectly because it will overlap on that words. So for fixing this bug please use margin-left,margin-right property to keep words aside and stopping it to overlapping on that.