Helvetica, Bold, Big, Negative Letter-Spacing

Michael
September 5, 2008
[ permalink ]

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!

brandon
September 5, 2008
[ permalink ]

Too true!

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

Charles
September 5, 2008
[ permalink ]

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

kyle
September 5, 2008
[ permalink ]

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.

Robert Augustin
September 5, 2008
[ permalink ]

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.

Kumo
September 5, 2008
[ permalink ]

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

Helvetica is gooood !

Al
September 5, 2008
[ permalink ]

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

Al

Joseph
September 5, 2008
[ permalink ]

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!

Eric Wendelin
September 5, 2008
[ permalink ]

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

carsten
September 5, 2008
[ permalink ]

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)

Ian
September 5, 2008
[ permalink ]

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

Dainis Graveris
September 5, 2008
[ permalink ]

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.

Ian
September 5, 2008
[ permalink ]

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

Rob Cameron
September 5, 2008
[ permalink ]

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

Tibor
September 5, 2008
[ permalink ]

Question is: does that mean it’s cool?

slapout
September 5, 2008
[ permalink ]

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

Don
September 5, 2008
[ permalink ]

Jason Santa Maria disagrees.

camilo vitorino
September 5, 2008
[ permalink ]

Helvetica is one of my favorite types.

Anrkist
September 5, 2008
[ permalink ]

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.

5h4rk
September 5, 2008
[ permalink ]

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

Thomas Bland
September 7, 2008
[ permalink ]

@ 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…

5h4rk
September 7, 2008
[ permalink ]

@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?

Jacob
September 8, 2008
[ permalink ]

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

Thomas Bland
September 8, 2008
[ permalink ]

@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.

Jordan Payne
September 19, 2008
[ permalink ]

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 This is a great list Chris, well done.

CSS-Tricks

Helvetica, Bold, Big, Negative Letter-Spacing

Responses

Leave a Comment

How do you keep track of design inspiration?

Friends

Projects

History

About the Author