cssfontsscalingembedded-fonts

Is it possible to adjust a font's vertical scaling using CSS?

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.

Solution

  • 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>