0

I'm using a embedded font (tex gyre adventor) for a vertical menu. The hover behaviour of the menu items works not correct because of the line height/overlapping (see image). When I try to change the line-height property of the links, nothing happens.

Using a regular font, like Arial works well (less space on top/bottom - see the blue box on the images). Any idea how to fix this?

embedded font (texgyreadventor) Arial

Community
  • 1
  • 1
toddiHH
  • 89
  • 1
  • 2
  • 6

2 Answers2

0

Several options are available depending on the environment your working in.

You can adjust the line-height with the CSS line-height property.

If for some reason due to your layout that doesn't work you can separate each line in a div or span and relatively adjust each lines margin with a negative value.

If your working in an environment that prevents you from using CSS (an email) you can download a freeware program called FontForge and refactor the actual font with reduced metrics.

davidcondrey
  • 34,416
  • 17
  • 114
  • 136
  • Thanks for the tip - I think it has to do with the web font - when I use a "regular" font (like Arial) everything works fine (with CSS). – toddiHH Jan 09 '14 at 09:46
  • Of course, different fonts have different metrics. Standard fonts typically have a typical line height, only when using custom web-fonts will you run into instances where the line height is extended. But if you want to maintain your font of choice you should be able to resolve any formatting conflicts with the techniques I listed. – davidcondrey Jan 09 '14 at 16:11
0

I've just had the exact same issue.

When applied to an inline element, such as an link, the line height doesn't register below around 14px - which is so odd.

However I noticed that in another area of the site, I had links within a block container that had a smaller font size and a smaller line height.

I made the display of the link "inline-block" and voila, line height works as expected.

This sample has incorrect line height:

.my-container a {
    font-size:16px;
    line-height:14px;
}

Modify to this:

.my-container a {
    font-size:16px;
    line-height:14px;
    display:inline-block;
}

And now the line height works as expected.

MartyF
  • 31
  • 4