is Helvetica websafe ?

Discussion in 'Web Design and Development' started by Tex-Twil, Jun 20, 2010.

  1. Tex-Twil macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #1
    Hi,
    I'm playing around with iWeb to make a small site but when I was testing it, I realized that the fonts or Windows look different. I use the default template font Helvetica Neue but it is not displayed correctly on windows. Is it supposed to be web safe ?

    If not which other font could I use to get the same design on Win and OSX ? Why is Apple using non websafe fonts in their template ?

    Thanks,
    Tex
     
  2. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #2
  3. Tex-Twil thread starter macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #3
    Ah I forgot it include the screenshots. Left OSX, right Windows. It looks like it is a different font.
     

    Attached Files:

  4. telecomm macrumors 65816

    telecomm

    Joined:
    Nov 30, 2003
    Location:
    Rome
    #4
    Helvetica is not part of any Windows default font set, so Windows users are likely to see a substitute font. If that's a concern, avoid Helvetica.

    There's a collection in Font Book labelled "Web", which gives the following list of common fonts. However, even those are not always available on Windows machines.
     

    Attached Files:

  5. Bartelomeus macrumors newbie

    Joined:
    Jun 20, 2010
    #5
    Only 7% of Windows users and 26% of Linux users have Helvetica installed. Much more common is Arial. If you create a css font stack I would use:

    Arial, "Arial Unicode MS", Helvetica, "Helvetica Neue", HelveticaNeue, "Nimbus Sans L", FreeSans, "Liberation Sans", sans-serif;
     
  6. Tex-Twil thread starter macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #6
    ok. Thing is that iWeb allows very little customization so I will have to modify the generated css.

    Thanks
     
  7. jdavtz macrumors 6502a

    Joined:
    Aug 22, 2005
    Location:
    Kenya
    #7
    I think that's going to be a waste of time as 99.99% of everyone will have Arial installed, so they all will see Arial.
     
  8. JFreak macrumors 68040

    JFreak

    Joined:
    Jul 11, 2003
    Location:
    Tampere, Finland
    #8
    Because built-in fonts in Windows suck big time, that's why. Should we also open a back door for Windows viruses to get the same experience the Windows people have? Should the app developers not use advanced OSX features such as Grand Central just because the competition does not have it?

    Sorry about the rant but I'm fed up with thinking about Windows compatibility (or even worse, Idiot Exploder compatibility...)
     
  9. Tex-Twil thread starter macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #9
    I don't see what viruses have to do with this conversation ...

    Anyway, I asked because I want to design a page which will look great on all platforms and I don't care about a OSX vs Windows fight. It looks like there are very few fonts which are actually cross OS compatible so I see now why iWeb uses OSX fonts only.

    I also found this article which show that I can map my OSX font to another one on PC. I haven't tried it yet but it will probably resolve my issues.

    cheers,
    Tex
     
  10. MagicWok macrumors 6502a

    Joined:
    Mar 2, 2006
    Location:
    London
    #10
    You can try to embed the typeface using @font-face in the CSS style for those browsers that now, and will, support it. You will have to buy the font however from one of the foundaries that specify in the licensing that you're able to do so. I've been designing recently for a fairly large news organisation, and this is one approach being considered.
    Some background: http://www.css3.info/preview/web-fonts-with-font-face/
    Also a great article from A List Apart: http://www.alistapart.com/articles/cssatten

    What is kind of interesting, @font-face isn't a CSS3 new thing, but was originally introduced in CSS2! IE4 actually had capability of sorts to support this, even though when CSS2.1 came around, it was removed. Firefox 3.5 and later supports it.

    Arial is a much more common font on PC's, and the two typefaces are fairly similar. You probably won't get into this much detail as I have, but just a bit fun knowledge, almost all fonts are rendered differently on PC or Mac, and browsers render fonts differently as well. No surprise that Safari actually does the best with line-height etc. For most websites, the discrepancies aren't an issue however for most websites. Also note, Helvetica looks awful on PC...

    If you still want to use Helvetica, I would avoid this recommendation entirely. Otherwise not one user will see Helvetica, even if they have it lol, as Arial will be selected 99% of the time =) !

    I would use this if I were you: Helvetica, "Helvetica Neue", Arial, sans-serif;

    Some reading: http://meiert.com/en/blog/20080220/helvetica-arial/
    Further reading on font availability: http://www.awayback.com/revised-font-stack/
    How to create good font stacks: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
     
  11. Bartelomeus macrumors newbie

    Joined:
    Jun 20, 2010
    #11
    Helvetica renders very poorly on MS Windows. Your website will look awful for a lot of people. For mac users it is recommended to disable Arial. This way mac users will see Helvetica instead of Arial on the whole web...
     
  12. dcubed20 macrumors member

    Joined:
    Jan 21, 2008
    #12
    The font "Helvetica" doesn't display well on the web, anywhere. "Helvetica Neue", on the other hand, does. Use this font stack:

    font-family: "Helvetica Neue", Arial, sans-serif;

    In this case Mac users will see the best-rendering, most appropriate font for them; everyone else will see Arial.
     
  13. Bartelomeus macrumors newbie

    Joined:
    Jun 20, 2010
    #13
    Helvetica Neue, sounds new but is not as good as the original. The only advantage is the size of the family. But we are not using any light version here ;-)

    Btw, it is a display type, not so good for body text... but that is a complete different story :)
     
  14. JFreak macrumors 68040

    JFreak

    Joined:
    Jul 11, 2003
    Location:
    Tampere, Finland
    #14
    Sory about that rant. Just wanted to point out that you really should use whatever you like, not what is the lowest common denominator between all systems.
     
  15. Tex-Twil thread starter macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #15
    ok, this seems to be the best solution.

    How do I know if I have the rights to use/embed a font of my OS (Helvetica here).

    There are tools which allows me to convert the .dfont format to otf but I don't know if that's legal.

    EDIT: I've just tried and it works everywhere (Linux/OSX/Windows, FF, Safari, Chrome) but not in IE8. Even if I used the EOT file type.
     
  16. stainlessliquid macrumors 68000

    Joined:
    Sep 22, 2006
    #16
    You should use Arial regardless because it renders better on screen, Helvetica is wonky looking at small sizes.
     
  17. Tex-Twil thread starter macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #17
    with a size 14 it looks pretty nice on all browser?OSs. But I'm still fighting with IE8. I found another article which explains font-face in browsers but my IE8 just does not react.

    I have this css:

    HTML:
    @font-face{
      font-family: 'HelveticaNeue';
      src: url('HelveticaNeueLTPro-Roman.eot'); 
    
    }
    
    @font-face{
      font-family:'HelveticaNeue';
      src: url('HelveticaNeueLTPro-Roman.otf') format('opentype'); 
    }
    
    IE8 shows everything in Arial ..

    I even had a look at what is going on the network and IE downloads correctly the font:
    Code:
    GET /~tex/fonttest/css/HelveticaNeueLTPro-Roman.eot HTTP/1.1
    Accept: */*
    Referer: http://192.168.0.2/~jan/fonttest/
    Accept-Language: en-US
    UA-CPU: x86
    Accept-Encoding: gzip, deflate
    User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)
    Host: 192.168.0.2
    Connection: Keep-Alive
    
    HTTP/1.1 200 OK
    Date: Thu, 24 Jun 2010 21:32:20 GMT
    Server: Apache/2.2.14 (Unix) mod_ssl/2.2.14 OpenSSL/0.9.8l DAV/2
    Last-Modified: Thu, 24 Jun 2010 20:50:53 GMT
    ETag: "1e9b67-a9d2-489cccf69e540"
    Accept-Ranges: bytes
    Content-Length: 43474
    Keep-Alive: timeout=5, max=98
    Connection: Keep-Alive
    Content-Type: application/vnd.ms-fontobject
    
    EDIT: maybe my eot file is corrupt or something. I tried with another eot file from the article and it works :s

    EDIT2: yes, the converted EOT file was not ok. I tried another converter which worked !
     
  18. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #18
    Or you can use something like Typekit or the Google Font Directory.
     
  19. Tex-Twil thread starter macrumors 68020

    Tex-Twil

    Joined:
    May 28, 2008
    Location:
    Europe
    #19
  20. Bartelomeus macrumors newbie

    Joined:
    Jun 20, 2010
    #20
    You know it is illegal to embed commercial fonts? Helvetica (Neue) is not free.
     
  21. Melrose Suspended

    Melrose

    Joined:
    Dec 12, 2007
    #21
    That font stack is way too overloaded, too many fonts and too many fonts that most users won't have. And give the font you prefer to display precedence. :)

    Better would be this
    Font stacks work from the top most desired backwards; Desired > Alternative > Common > Generic. In this case, Arial is a close alternative to Helvetica whilst also being very common, so you only need to specify the two.


    I find TypeKit has a better selection, but slow load times. Maybe it's just me. Google Fonts load quick, but the selection is stinkin' slim :( It's safe (as safe as you want to get) to embed your own using @font-face, and checking out a place like Font Squirrel which catalogues license-free typefaces.
     
  22. Bartelomeus macrumors newbie

    Joined:
    Jun 20, 2010
    #22
    You forget Linux. And if a user has a font, the webbrowser won't look any further. You do not want to put the most desired one as first in the font stack in all cases. You also have to consider consistency and render quality on different platforms.
     
  23. panoz7 macrumors 6502a

    panoz7

    Joined:
    Nov 21, 2005
    Location:
    Raleigh, NC
    #23
    Can you explain this further? Why in the world would you want a less desirable font to be displayed first?
     
  24. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #24
    Yeah Font Squirrel has some good stuff. I've been able to find enough good fonts on TypeKit to make it worth my while and the free account level is plenty for me right now (and I don't mind the tiny TK tag in the lower right-hand corner, either). I've not had any problems with load times so far.
     
  25. Bartelomeus macrumors newbie

    Joined:
    Jun 20, 2010
    #25
    Because, as I wrote, you could prefer a more consistent look or the preferred fonts are not rendered very good on different platforms (e.g. Helvetica).
     

Share This Page