Grow your CSS skills. Land your dream job.

Helvetica, Bold, Big, Negative Letter-Spacing

Published by Chris Coyier

Comments

  1. Permalink to comment#

    good one! I think typography should be more emphasized in web design. There are so many ways to style it, so many incompatibilites, i often just tend to use Verdana because i guess it works the best across all browsers…

    Maybe you can post an article about this topic at some point, i’d be interested!

  2. Permalink to comment#

    Too true!

    BTW this site looks great in Google Chrome. But then, why wouldn’t it?!?

  3. Permalink to comment#

    Heh, this is a very personal favorite of mine. Good old letter spacing -1px!

    It changes Arial/Helvetica from boring to cool in one line of CSS ;)

  4. Permalink to comment#

    At first I went with all Helvetica on my site. But now I use it for the main headers with a mixture of Georgia for sub headers.

  5. Nice collection! Helvetica is very popular indeed. Some say it’s overused, but I think it deserves its popularity. It is one of the few typefaces I use rather frequently also.

  6. Permalink to comment#

    I’m looking forward to CSS3 and enabled type. I’m bored of Arial, Verdana, Times, Georgia & Co…

    Helvetica is gooood !

  7. Al
    Permalink to comment#

    Helvetica,
    not on my PC, obviously not a default font,

    Al

  8. Joseph
    Permalink to comment#

    Saying Helvetica is overused is like saying oxygen is overused.

    I like it. Yes, everyone is used to seeing it, but that doesn’t make it bad.

    It could be a lot worse – there is a parallel universe somewhere where everything is exactly the same except Comic Sans caught on instead of Helvetica!

  9. Turns out I followed the cool kids without even knowing it! Argh, must figure out another way to rebel…

  10. Permalink to comment#

    I tend to think that using Helvetica is still not working everywhere, so it’s not the best idea. As mentioned above, that’s why a lot of people are using the “normals standards”, so i can be sure to have my work looking as i wanted it to.. (mostly) :)
    But in fact the “letter spacing -1px-method” is perfect to have ordinary fonts looking a bit more “creative”, the “right line height” (depending on your layout Design) will do a good job too.
    As mentioned above i would realy look forward to have more articles about good typography, working with standard XHTML/CSS.. (BTW thx for a lot of good articles on css-tricks.com)

  11. Permalink to comment#

    Hmm, the twitter example is not Helvetica. Look closely.

  12. Ian Why you think so? I don’t see some extra serifs there or something different – that can’t be done with CSS styling – still it is the same font.

    And Yes there are many times where You can really explain yourself with just typography.

  13. Permalink to comment#

    It is Lucida Grande. I just checked it out in Firebug to make sure, it the style is set in Lucida Grande.

  14. VerticalResponse is Arial (only shows Helvetica if Arial isn’t installed)
    Twitter is Lucida Grande
    emurse is Arial
    Poolio is Helvetica Neue (if you have it installed, but I guess that still counts as Helvetica ;)
    SpoonGraphics is Arial

  15. Permalink to comment#

    Question is: does that mean it’s cool?

  16. slapout
    Permalink to comment#

    I don’t like it. I just looks…wrong somehow.

  17. camilo vitorino
    Permalink to comment#

    Helvetica is one of my favorite types.

  18. Anrkist
    Permalink to comment#

    Helvetica is not web safe, I don’t have it on any of my PC computers… however, Trebuchet is… and I think it’s a pretty good alternative to the “default” fonts we are all used to.

  19. 5h4rk
    Permalink to comment#

    I have “Helvetica LT” and “Helvetica Neue LT” as .otf for Windows. Is “Helvetica LT” the equivalent of the Mac version of “Helvetica”?

  20. @ 5hArk –

    Helvetica LT and Helvetica Neue LT are Linotype’s releases of Helvetica. They are compatible with Mac and PC (as all opentype fonts are).

    Also, I second Rob Cameron’s comments – while I appreciate CSS-Tricks’ articles on typography, I’d (gently) suggest you get the details right before posting…

  21. 5h4rk
    Permalink to comment#

    @Thomas Bland

    Helvetica LT and Helvetica Neue LT are
    Linotype’s releases of Helvetica. They
    are compatible with Mac and PC (as all
    opentype fonts are).

    So what is the dry Helvetica version for Windows?

  22. Permalink to comment#

    I agree, I love how bold sans-serif text looks when you set a negative letterspacing attribute onto them.

  23. @5h4rk,

    So what is the dry Helvetica version
    for Windows?

    I’m not sure – Windows XP doesn’t ship with a Helvetica font, and I’m not sure about Vista. If you have the LT versions, stick with them – in my expeience, they’re great quality.

    As far as using fonts in CSS goes, as Helvetica is not installed on the majority of machines, you’re best off declaring your font stack with Helvetica Neue and Helvetica up front, followed by the LT versions, and finally Arial and sans-serif.

  24. Permalink to comment#

    great typography makes a website, poor typography breaks a website.

    Learn that little rhyme and you’ll be fine!

    Woah! I’m a poet and i didn’t know it!

    okay i’ll stop trying to be funny now :P This is a great list Chris, well done.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".