September 5, 2008
by Chris Coyier
All the cool kids are doing it.
This is a pretty basic trick that will be obvious to many of you. But for whatever reason, the solution …
Randomly, I made a letter flipper thingy the other day. I saw a similiarish effect on a Flash site and …
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!
BTW this site looks great in Google Chrome. But then, why wouldn’t it?!?
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 ;)
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.
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.
I’m looking forward to CSS3 and enabled type. I’m bored of Arial, Verdana, Times, Georgia & Co…
Helvetica is gooood !
not on my PC, obviously not a default font,
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!
Turns out I followed the cool kids without even knowing it! Argh, must figure out another way to rebel…
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)
Hmm, the twitter example is not Helvetica. Look closely.
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.
It is Lucida Grande. I just checked it out in Firebug to make sure, it the style is set in Lucida Grande.
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
Question is: does that mean it’s cool?
I don’t like it. I just looks…wrong somehow.
Jason Santa Maria disagrees.
Helvetica is one of my favorite types.
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.
I have “Helvetica LT” and “Helvetica Neue LT” as .otf for Windows. Is “Helvetica LT” the equivalent of the Mac version of “Helvetica”?
@ 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…
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?
I agree, I love how bold sans-serif text looks when you set a negative letterspacing attribute onto them.
So what is the dry Helvetica version
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.
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.
*May or may not contain any actual "CSS" or "Tricks".