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

Question

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.

Janot

Can we see your code, or can you set us a jsfiddle? – Acquire

Just posted it in the edit to my original post. – Janot

Answer 1

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>

Chew

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? – Bazaar

@Bazaar you are looking for transform-origin. probably transform-origin: top left; – Animate

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, ... ). – Shulamite