Question

I was wondering if someone could point me in the right direction. I am looking to display the Google Font Orbitron at consistent weights at every given font size. Sounds pretty easy, right? Not in my scenario. At certain font-sizes, some characters have multiple weights within the same character.

Note: I am testing this in Windows 7, Chrome v27

The Code:

<link href='http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
.sixteen{
    font-family: Orbitron;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
}
.nineteen{
    font-family: Orbitron;
    font-weight: 400;
    font-size: 19px;
    line-height: 22px;
}

<h4 class="sixteen">Home of Front End Developer and</h4>
<h4 class="nineteen">Home of Front End Developer and</h4>

Here is a fiddle to explain my issue. If you take a look at the fiddle, you'll see in the first line that the top line of the uppercase F, E, and D characters have more weight/thickness than the rest of the characters in that line. But as you'll notice on the next line, that

In case you cannot replicate what I'm seeing, here's a screenshot:

Font sizes: 16px and 19px

My question is two-fold:

  1. What would the best way to technically describe this? 'Multiple font weights in one given character' lacks brevity, and isn't likely to have any valuable Google results.
  2. Is there a way to fix this and make the weight consistent in every character at every font-size?
Was it helpful?

Solution

  1. What you describe is as such just variation of the visible width of strokes in glyphs, or stroke width variation to put it briefly. Such variation is normal in serif fonts and also appears, at least to some extent, in many sans-serif fonts. However, in this case, the font is designed to have a rather constant stroke width, so the visible effect is caused by font rendering differences.

  2. There is no way to remove the font rendering differences. Font rendering is a complex issue, and although some proposed or experimental CSS settings might affect some aspects of it, it’s basically outside your control. For example, font smoothing (also known as anti-aliasing) depends on the operating system and its settings as well as the browser and its settings.

OTHER TIPS

I've found this issue with a bunch of fonts used online when you go down to a certain size. It's the way the font is being anti-aliased.

You can see the same issue from Google showing off that font: http://www.google.com/fonts/specimen/Orbitron

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