Skip navigation
royterrr
Currently Being Moderated

Helvetica font looking distorted on website

Apr 14, 2013 6:55 PM

I am using the "Helvetica Neu LT 35 Thin" (ttf format) which is looking great on my website (iOS) but horrible and distorted when the website  viewed on windows.
I heard that otf is better for web so I used an online converter to convert the font to OpenTypeFont (http://www.freefontconverter.com/), I did help a bit bu the ugly distortion is still there.

How can I solve this problem? and whats causing it?.

 

PS: the font look great in Photoshop in both cases

Site: www.dronesinteractive.com

 
Replies
  • Currently Being Moderated
    Apr 14, 2013 9:52 PM   in reply to royterrr

    In the time that the experts get back to you with an answer, can you read this article and see if it helps you?

     

    Why some fonts suck on Windows (http://blog.webink.com/why-fonts-suck-windows-hinting/)

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 14, 2013 11:44 PM   in reply to royterrr

    Photoshop gives you anti-aliasing options such as 'Sharp', 'Crisp', 'Strong', etc... which are not supported by CSS3 by default.

     

    You could, however, try adding this to your CSS to see if it helps:

     

    text-rendering: optimizeLegibility;

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 14, 2013 11:47 PM   in reply to royterrr

    On a sidenote, just wanted to ensure you're aware of the fact that copyright violations on fonts will put you in trouble.

     

    Not all fonts give you a free 'webfont' license which is required to embed your font online. You may want to check with your font license to ensure you're not breaking the law.

     

    To avoid any issues, you may want to stick to using a great collection of freely available webfonts from Google webfonts here - http://www.google.com/webfonts

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2013 5:46 AM   in reply to royterrr

    Roy,

     

    I believe the Helvetica font you've used is native to the Mac OS systems, and not Windows. I investigated it once on behalf of a client who was using it. The only way I could have used it on the website also was to buy a very expensive license, and the client was a start-up with no such available funds.

     

    Browsers will display the specified font only if that font is installed on the user's computer. Otherwise, it will select the next best match . . . which may or may not make your site look crisp and as you designed it. [This is why you declare font families in style sheets; Arial for Windows, Helvetica for Macs, sans serif in the event neither of those two fonts are installed.]

     

    The only way to ensure the font of your choice is employed consistently on your website is to provide a direct link to the font files, either by installing the font on your server or using Google webfonts. Basically, I'm seconding what Sudarshan wrote above. Copyright issues are involved. If you install a font, make sure you are licensed to do so for the web. Or go the free route via Google. Another option is, if you are an Adobe Creative Cloud subscriber, you have access to the fonts in TypeKit as part of your subscription.

     

    Chris

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2013 6:19 AM   in reply to royterrr

    C. Bavota has a very nice tutorial about how to embed fonts in a website. It's good general knowledge. That will help you in this area of where to insert a line.

     

    But there are lots of reasons why a particular typeface may not look optimal on various platforms.

     

    Firstly, if you're on a Mac, one of the typefaces that comes with your operating system is Helvetica. Microsoft decided that Helvetica was "too expensive" or not up to their standards or something and they supply Ariel. It looks kind of like Helvetica, but it's not.

     

    When we define a sans-serif font in a website, we offer several options that cover all platforms:

     

         font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

     

    Now, Lucida Sans Unicode is different from Lucida Grande. It supports Latin, Greek, Cyrillic and Hebrew scripts, as well as all the letters used in the International Phonetic Alphabet. It was developed by Charles Bigelow and Kris Holmes in 1993 and shipped with Windows NT 3.1.

     

    Lucida Grande was also developed by Bigelow and Holmes and was installed in Apple's OS X in 1999. It is included in Apple's Safari browser, so it also is installed on those Windows computers that installed Safari.

     

    Now, in the font stack above, we name these typefaces specifically and you can tell that we're naming a particular typeface because it's in quotes in our code (this would be in a CSS document or it would be in a CSS font definition in the head region of a web page).

     

    But there are a few Windows 3.1 computers out there still. And there are computers that run Linux. There are other operating systems in the world that display typefaces (or try to, accurately).

     

    You see a third call for a font, but it's not a named font, it's a generic name for any sans-serif typeface. In this case, one's computer will try to find a sans-serif typeface in its library of fonts and substitute that in for Lucida Sans Unicode or the fall-back, Lucida Grande.

     

    So when you're setting up your fonts, you need to give the client (someone's web browser) a fighting chance to display somthing that is fairly similar to what you want to see on the page. If all you have defined is "Helvetica Neu LT 35 Thin", then you may not have given computers without that typeface or without the ability to display your embedded font a fall-back font to use if it cannot.

     

    Including a font with a web page may not always work. Some browsers simply cannot read the embedded font. Other browsers render the font differently. Each browser has its own rendering engine for type, so on the same platform, you may see web pages that look completely different with respect to the type displayed.

     

    CodeStyle has a very nice web font stack builder that can really help you. Even if you are embedding a font, it makes a lot of sense to offer a font stack that will, at least, make your line breaks similar.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 15, 2013 6:22 AM   in reply to royterrr

    @cdeatherage: Typekit may not be the best option for this user as it has pageview restrictions - here's more about their plans: https://typekit.com/plans. Also, the OP has already embedded the custom .otf font file on their server that is showing up on the webpage.

     

    @royterrr: On your site, I see the 'Helvetica' font used only in #main1 ID on all pages. If that's the only place you're using it, add the code I mentioned above to the same CSS rule:

     

    #main1

    {

        font-family: "helv1";

    color:#FFFFFF;

    text-rendering: optimizeLegibility;

    }

     

    This should apply the selector to all pages that use the value <div id="main1"> and thereby change all content within this DIV to render in a fashion where legibility is optimized by the browser.

     

    Do note that this selector is stil 'Work in progress' and is not compatible with all browsers yet. Here's a compatibility chart: https://developer.mozilla.org/en-US/docs/CSS/text-rendering#section_7

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2013 6:41 AM   in reply to royterrr

    Ignoring any legal issue of using Helvetica without paying for the internet usage license...

     

    Do you have both an .eot and .ttf version of the font installed on your server?

     

    IE 9 only supports .eot and the rest of the major browsers use .ttf

     

    Also, only IE9 and IE10 see the imported font, if you are using IE8 or lower to view it, it won't show up.

     

    EDIT: Forgot to mention a .woff will work on all browsers that support the @font-face.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2013 6:46 AM   in reply to Jon Fritz II

    Yes but even then, since web browsers each have their own rendering engine, you will still see differences.

     

    I recommend a font stack that will allow any browser that cannot read your .eot, .ttf or .woff font to move on to a different typeface—just in case. That's why we use font stacks.

     

    Lisa Smith has a few comments here about how to get around these basic browser incompatibilities—but even then she found that there were just some browser/OS combinations that defeated her. I think this is always going to happen. A web browser is not a Linotronic press.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2013 7:04 AM   in reply to mhollis55

    I don't disagree, you should always have a set of fallback values for your font-family attribute just in case something doesn't download correctly.

     

    After taking a look at the OP's site though, they only have .otf and .ttf which IE9 ignores completely. So right now, because there is nothing else set in the font-family attribute to fall back to, they're getting the default serif font.

     

    Adding an .eot version of the font to the server and a link to it on the page should make it function correctly in IE9.

     

    I've never bothered with paying for Helvetica so I've never used it on a site.  I'm not sure if it's going to be one of those "still looks funny between computers" fonts, but I generally have issues with Macs making imported fonts go south (usually too bold), not Windows IE.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2013 7:26 AM   in reply to Jon Fritz II

    royterr is not just using Helvetica. That would be generally supported if one set up a proper font stack. For example, looking at CodeStyle's site, they let you know how well standard Helvetica would be supported by the various operating systems.

     

    Regular Helvetica is found on only 6.43% of Windows computers. Helvetica Neue on 1.32%. But Apple has long-supported Helvetica with 100% of Macs able to display it. Obviously, the third typeface one should put in one's font stack is Arial, which is displayed properly on 92.16% of Windows machines (those that do not have either type of Helvetica).

     

    I'm actually surprised that 68.88% of Linux machines will display Arial. The final fall-back must be sans-serif.

     

    royterr wants to use a very specific Helvetica, one that only a very small minority of people who do desktop publishing might have on their computers. So he's including the font on his site, which is good, but he is not including the right one for all browsers.

     

    Frankly, what I recommend he does (and this would never infringe on a copyright) is to use Google's Lato, probably ultra-light 100 or Book 300 -200. That would get him where he wants to go.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2013 8:15 AM   in reply to royterrr

    First, you have no font stack.

    Second, you have no font stack.

    Third you have no font stack.

     

    Additionally, you only have a truetype font, which may not be displayable in all browsers. Your style sheet has the following:

     

    @font-face {

        font-family: "helv1";

        src: url("HelveticaLT35Thin.ttf");

    }

    #main1

    {

        font-family: "helv1";

              color:#FFFFFF;

    }

     

    You're trying to do a thin Helvetica font. I get that. And it looks like garbage in Windows. And you're ignoring what Jon told you. Microsoft's Internet Exploder does not work with .TTF fonts.

     

    Try this instead:

     

    Just below the Title of your web page:

     

    <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>

     

    Then, in your stylesheet, take out the whole @font-face stuff. In your #mail1 ID define your font thusly:

     

    #main1 {

         font-family: 'Lato', sans-serif;

         color: #FFF;

    }

     

    See how that works for you.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points