65

I am using an embedded font for the top navigational elements on a site Helvetica65 and at 16px it is the perfect WIDTH but I need it to be about 90% of it's current height.

In Photoshop, the solution is simple - adjust the vertical scaling.

Is there a way to do essentially the same thing using CSS? And if so, how well is it supported?

Here is a jsFiddle of the basic nav coding.

Yasser Shaikh
  • 46,934
  • 46
  • 204
  • 281
Cynthia
  • 5,273
  • 13
  • 42
  • 71

1 Answers1

108

The transform property can be used to scale text.
It's for blocks, so you'll need to also add display: inline-block in order to use it on HTML elements like <a>, <span>, <em>, <kbd>, etc.

body {
  font-family: "HelveticaNeue-Medium", sans-serif;
  font-size: 12px;
}

a.vertical-scaling {
  display: inline-block;
  transform: scale(1, 1.5);
  /* Safari and Chrome */
  -webkit-transform: scale(1, 1.5);
  /* Firefox */
  -moz-transform: scale(1, 1.5);
  /* IE 9+ */
  -ms-transform: scale(1, 1.5);
  /* Opera */
  -o-transform: scale(1, 1.5);
}
<ul>
  <li><a class="vertical-scaling" href="/">HOME</a></li>
  <li><a href="/expert-witness">EXPERT WITNESS<a/></li>
</ul>
Cristian Ciupitu
  • 20,270
  • 7
  • 50
  • 76
way2vin
  • 2,411
  • 1
  • 20
  • 15
  • I have applied the scale transform to a heading which makes it wider and not as tall. This means the text now starts to the left of the rest of the text on the page. I have added margin to the left to push it back into line. Is there anyway to calculate this difference with transform? – RouthMedia Aug 16 '16 at 14:00
  • @RouthMedia you are looking for `transform-origin`. probably `transform-origin: top left;` – honk31 Apr 27 '17 at 13:11
  • 6
    It should be noted that this approach is based on scaling the whole block - therefore will NOT work for `display: inline;` - the element must be block-like (block, table, inline block, ... ). – jave.web Jan 01 '19 at 18:50