Letter spacing issue with 'overlapping' character

StackOverflow https://stackoverflow.com/questions/12520287

Question

I'm having some trouble with a font I found on Google Web Fonts.

As you can see in the image posted below, the capital V in 'Versus' overlaps with the 'e' when i'm using Firefox. Though when i'm using Chrome (or IE) it does not overlap and leaves me with an ugly space between the two characters.

Is there any way to fix this and make it look like the one in Firefox? Or should I start looking for another font?

Chrome/IE & Firefox Comparison

My HTML:

<html>
<head>
    <meta charset="utf-8">
    <title>Versus</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
</head>
<body>
    <div>
        <h1>Versus</h1>
    </div>
</body>

My CSS:

h1 {
font-family: 'Marck Script', cursive;
font-size: 100px;
color:#444;
text-align:center;
padding:0 50px;
text-shadow: 2px 2px 3px #777;

}

Thanks in advance!

Was it helpful?

Solution

In order to fix the spacing in a font you should use:

letter-spacing: 10px /* How ever much you need */

Without knowing the specifics on the HTML and the CSS you already have in place, you can fix the problem area by using something like this:

style

span { letter-spacing: -4px }

html

<span>V</span>ersus

It's hokie, but it should work.

OTHER TIPS

Firefox nowadays supports kerning when using a font with kerning pairs. Other browsers haven’t caught up. There are several proposed CSS features that would affect kerning, and Firefox has some support to them, but the other browsers don’t.

So you should look for another font. Manually tuning spacing by letter-spacing or margin properties is troublesome and risky; you easily end up with breaking things on Firefox.

If you keep using the Marck Script font, it is better to download it and install it on your server and use it from there. There are problems with many Google fonts when used on the Google server. In this case, IE 9 in Standards Mode does not use the font; the error code CSS3117 appears in the console, so there is apparently something wrong in Google settings.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top