Search code examples
htmlcssgoogle-chromebrowserletter-spacing

Why does Chrome & Opera ignores my letter-spacing: 0.03em;?

So any idea why does Chrome (17.0.963.79) & Opera (12.12) ignores my "letter-spacing: 0.03em;" to the body text? While in Mozilla and IE it works.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />
    <title>test page</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            font: normal 100%/1.375  Georgia, serif;
        }
        html { background-color: #333; }
        body { 
            margin: auto; 
            max-width: 75em;
            padding-top: 1.375em;
            background-color: #fff;  
            }
        h1 {
            font-weight: normal;
            word-spacing: -0.05em;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            }
    </style>
</head>

<body>

    <h1>Hello World</h1>

</body>

</html>
Solution

  • I tried your code on Chrome (Version 24.0.1312.57 m) with a 1680×1050 screen. When I flipped between your letter-spacing: 0.03em; and letter-spacing: 0.0em; it looked the same at default size, but when I zoomed in one level (CTRL +), the 0.03em text rendered wider than the 0.0em text.

    So, I see several possible answers to your question:

    • At default zoom level (CTRL 0), the 0.03em letter-spacing isn't wide enough to show any difference, but zoom level +1 (CTRL +) does show a difference.
    • Maybe your down-level Chrome (17.0.963.79) doesn't handle sub-pixel letter-spacing: [tiny]em; as well as Chrome (24.0.1312.57 m) handles it.
    • Maybe your screen resolution isn't large enough to show a difference.