CODEWITHSUNDEEP
cssfonts
Aivaras P
Aivaras P

Reputation: 166

Scaling fonts with css

What is the correct way to scale a font using css. And what about compatibility? Maybe it would be better to customize the font file itself?

For example i need to scale Avenir font 116% vertical scale and 105% horizontal scale. Scaling Avenir font

Upvotes: 1

Views: 2233

Answers (4)

aditya sharma
aditya sharma

Reputation: 1

we can adjust by increasing the size of font like font-size:40px; and adjust it through line-height

Upvotes: 0

OrderAndChaos
OrderAndChaos

Reputation: 3850

Two points for you.

Editing the Avenir font itself infringes the font license, you need to get permission from the font foundry for that.

Second never stretch fonts, it looks so bad. When you stretch a font it messes up the stroke widths, horizontal strokes will become thinner than the vertical strokes and when you squish a font up the vertical strokes become thinner than the horizontal ones.

So my answer is there is no correct way to do it.

If you need a condensed font there are plenty available for example:

https://www.google.com/fonts/specimen/Open+Sans+Condensed

Upvotes: 1

Pirate X
Pirate X

Reputation: 3095

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)

Upvotes: 2

Danny Pranoto
Danny Pranoto

Reputation: 214

I usually use em scaling for font because it automatically adjust to the current font size. Maybe this reference could help you to know about font-size scaling. Hope this helps

Upvotes: 0

Related Questions