Using a different font causes line-height spacing

Question

I have a form with a couple of columns and two or three inputs in each. When I just use the default font there is no problem and everything lines up properly but when I use a different font it adds a little vertical space underneath the labels.

the font I'm trying to use is TheMixRegularCaps - http://www.fontslog.com/themix-regularcaps-otf-32939.htm

How can I fix this?

thanks

Answer 1

The problem is most likely the font itself. Some fonts have more vertical spacing than others. You should use CSS to attempt to overlap the different labels vertically to make it look like there isn't a large gap.

Take a look at this jsFiddle I just made demonstrating your objective: http://jsfiddle.net/KWfnq/