Kerning on font between chrome and firefox

Question

Kerning on font between chrome and firefox

2.8k Views Asked by Ronnie At 14 April 2025 at 03:09

I am working on a menu with a custom font and in chrome (and safari) it is spaced exactly how I want it.

http://american-motorsports.net/2012/

When I view it in firefox, the kerning of the font is a little different causing a little black gap on the far right menu item. I can see the difference between the F and A in FABRICATION

The HTML is very simple right now:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="resources/css/reset.css" />
<link rel="stylesheet" href="resources/css/main.css" />
<title><?php echo date('M d, Y') . ' | '; ?>American Motorsports - Off-Road Fabrication</title>
</head>
<body>
<div id="wrap">
    <div id="header">
        <div id="logo">
            <img src="resources/images/logo.png" width="291" height="150" alt="American Motorsports - Off-Road Fabrication" />
        </div>
        <div id="menu">
            <a href="#"><span class="item">HOME</span></a><a href="#"><span class="item">SUSPENSION</span></a><a href="#"><span class="item">FABRICATION</span></a><a href="#"><span class="item">PROJECTS</span></a><a href="#"><span class="item">MEDIA</span></a><a href="#"><span class="item">CONTACT</span></a>
        </div>
    </div>
    <div id="main"></div>
</div>
</body>
</html>

and the CSS consists of this so far

@font-face {  
    font-family: bebas;  
    src: url("../fonts/bebas.ttf") format("truetype");  
    font-weight: normal;
    font-style: normal;
}

body {
    font-size: 14px;
    color: #ccc;
    line-height: 20px;
    margin: 0;
    padding: 0;
    background: url("../images/bg.png") #202020;
}

#wrap {
    background: url("../images/bg_main.jpg") no-repeat center top;
    min-height:800px;
}

#header {
    border-top: 5px solid #3a3a3a;
    height:150px;
    width:970px;
    background-color:#000000;
    margin: 50px auto;
}

#logo {
    width:324px;
    height:179px;
    background-color:#121212;
    border-top: 5px solid #3a3a3a;
    border-bottom: 5px solid #ffffff;
    margin-top:-22px;
    float:left;
}

#logo img {
    margin-left:13px;
    margin-top:17px;
}

#menu {
    width:646px;
    height:150px;
    float:right;
    margin:0;
    padding:0;  
}

#menu a {
    margin:0;
    padding:0;
}

.item {
    font-family:bebas;
    font-size:18px;
    height:150px;
    display:inline-block;
    text-align:center;
    line-height:8em;
    color:#fff;
    cursor:pointer;
    padding-left:20px;
    padding-right:20px;
    margin:0;
    text-shadow: 0 3px 3px #111;
}

.item:hover {
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #101010 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#101010));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#101010 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#101010 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#101010 100%);
    background: linear-gradient(to bottom,  #3a3a3a 0%,#101010 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#101010',GradientType=0 );
}

#main {
    width:970px;
    /*background-color:#ffffff;*/
    margin: 0 auto;
}

So the question is how to remove the gap so it looks like chrome and safari or fix the kerning issue..I just dont want that gap in firefox

Original Q&A

There are 3 best solutions below

Jukka K. Korpela On 16 October 2012 at 18:08

I don’t see what gap you are trying to remove, but what you are describing is the issue that Firefox (modern versions) apply kerning by default, if defined in a font. Other browsers don’t. So it’s a matter of kerning vs. no kerning, not a difference in kerning. Kerning is generally considered as typographically desirable. But if you really want to prevent Firefox from kerning, that’s possible using font feature settings, e.g. in this case with

#menu  { -moz-font-feature-settings: "kern" 0; }

Diodeus - James MacFarlane On 16 October 2012 at 16:46

You'd have to wrap a span around the offending letters and tweak the CSS letter-spacing: property until you get what you want.

The finesse of good typography, especially when it comes to custom fonts, isn't quite ready for prime-time on browsers.

Plan B: use an image.

**daveyfaherty** · Accepted Answer

A quick dirty solution is

#menu{
  white-space: nowrap;
  overflow: hidden; /* means you don't get a dirty edge, but the last link may be smaller on the right */
}

Ideally though, you shouldn't be relying on the width of the font to make your menu look right. If you have the time, give each of these links a class, and a custom width. Or even better, use a list with links in each item, to get greater control.

For example, if you add:

.item{
  padding: 0;
  width: 16.66%; /* assuming you always have 6 links */
}

...they will always fit, but some will look rubbish. For the most professional-looking finish, you'll want to give each a class and custom width.

Kerning on font between chrome and firefox

There are 3 best solutions below

Related Questions in CSS

Related Questions in FIREFOX

Related Questions in GOOGLE-CHROME

Related Questions in KERNING

Trending Questions

Popular # Hahtags

Popular Questions