I have been trying to use a Neue Helvetica Thai Light webfont for a vertical menu. Letters in this menu are supposed to be large but space between lines is not. So I have set font-size and line-height in css and appereance is perfect but functionality is not.
Each link is extending above and below the letters so that neighboring items clickable areas overlap preventing the user to follow a link on which they have clicked. This problem is non extistant when using usual fonts like Arial, Verdana etc.
The problem is probably in the font itself but how can it be avoided, is there some workaround? I have sent question to the fonts.com - website that provided the font but still waiting for an answer.
HTML:
<ul class="menu">
<li><a href="1">Item 1</a></li>
<li><a href="2">Item 2</a></li>
<li><a href="3">Item 3</a></li>
</ul>
CSS:
ul.menu a {
font-family: 'HelveticaNeueW31-Light';
font-size: 39px;
line-height: 28px;
}
After further (re)search on the Internet I have stumbled upon this post and ended up using a slightly modified version of provided solution. Im not keen on answering my own question but it might be helpful for someone since this issue is not so common and so the answer(s) are not easy to find.
The trick is to hide overflowing part of the anchor. Since inline elements like anchors ignore overflow property anchor display is changed to display: block, and then set overflow: hidden. Afterwards adjust height so that the letters are not cut off. Use letters that go below baseline the most in your font since bottom part should be cut off first, for Helvetica small leter g was used.
ul.menu a {
font-family: 'HelveticaNeueW31-Light';
font-size: 39px;
display: block;
height: 47px;
overflow: hidden;
}
Here is fiddle with the solution.