CSS Tip: Improve the Look of Your Headlines Using Letter-Spacing
There is a term used in typography called kerning. Kerning refers to the adjustment of space between letters. Fonts are generally fairly well calibrated by default, but at larger sizes you can begin to see imbalances in spacing between letters.
Kerning is used a lot in the print industry, especially for headlines and logotypes; but it’s something that’s not widely used on the Web because of the lack of control we have over fonts.
But we do have some control. There is a CSS property called letter-spacing which can be used to manage just that — the amount of space between letters. This isn’t true kerning since we cannot tweak individual letters, but it’s better than nothing. For large fonts used in headlines letter-spacing can come in very handy because at larger sizes the gaps between letters are sometimes a little too big.
Let me show you an example. Here’s a sentence written in Arial size 28 pixels font:
Looks pretty good, but I think we can tighten that font a tiny bit. Here’s the same sentence but with a letter-spacing property of -1 pixel applied to it:
I think that looks nicer, especially for headlines. Here’s the CSS code used to achieve this:
#headline {
font-family: Arial;
font-size: 28px;
letter-spacing: -1px;
}
Letter-spacing is something that in my opinion should be utilized more on the Web. If you haven’t tried it out already, give it a go — your headlines will thank you for it.
Excellent post. Don’t forget that there is also Word Spacing.
“word-spacing: 1px;”
You can also specify this in ems, which means it scales with changes in font-size.
Anthony: I didn’t even know about that one, thanks for mentioning it — will have to try it out :)
Scott: That’s even better! Thanks for the tip.
A bit of a trend these days is big, sans-serif type (often Helvetica) with -1 letter spacing.
What you are referring to as ‘Kerning’ is actually Tracking.
Kerning is adjusting the spacing between two individual characters.
Hilowitz: I did mean kerning — I realize letter spacing is different and I did point that out above :)
I haven’t done extensive test on this, how does this affect printing? I’ve noticed some oddities when i used word-spacing or letter-spacing. things look fine on the screen, but prints out odd on paper. e.g. word spacing etc. I was using FF at the time.
That’s another brilliant post, Dmitry. Well done.
Great tips, I applied this method at my website for the headers.
Here is also a post with header inspiration, you can see various examples of the tight letter spacing.
Yep. I’m starting to use it more and more. I think Arial + strong + negative letter-spacing kicks ass.
I do think you should read more about typography. Your example shows a biggest mistake made by amateur designers. Spacing between bigger one font letters should be bigger than the same font with smaller letters.
You do totally different and I hope there will be much less readers for this post so we do not have new “designer trend” in web-world.
I actually fail to see why the second title looks better; I feel the opposite. The second title is harder to read because the whole thing looks like one word to me.
I’m a little surprised no one’s mentioned the famous line by Frank Goudy, “A man who would letterspace lower case would steal sheep.”
There’s a small page on “The Elements of Typographic Style Applied to the Web” (http://www.webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.7/) that talks about not letterspcing lower case without a reason. While I agree with this, your post here mentions one of the good reasons for trying out letterspacing: headlines.
If used in moderation, adjusted letterspacing can look quite nice in headlines (just look at Coudal.com). Increased spacing doesn’t usually look so great but subtle negative spacing can be a nice touch. However, I think it’s fair to say that letter spacing should hardly ever be used on body type.
Mr.SergE: Thank you for your comment but I must disagree. Do you consider Coudal or Happy Cog to be amateurs? They both use negative letter-spacing in their work :) If they’re amateurs, then I really don’t know who the pros are.
Jason: I guess it comes down to taste — sometimes you may want to add positive letter-spacing to space it out a little. As Nick pointed out though, this must be used in moderation, which is why I’ve used only a tiny 1 pixel to shift it, and it already made a difference.
Negative letter-spacing is effective on headlines because headlines are not the same thing as body text. Sometimes they look better when tightened as you get a clearer line of words, rather than just a larger font. Font designers don’t expect your body type to be 28 pixels or more, so the default spacing can be tweaked.
P.S. Mr.SergE: Your own blog theme uses negative letter-spacing ;)
Jin: Very good question! I haven’t done a lot of tests on this either so not really sure what may be causing it — will have to have a look into it.
Actually, Hilowitz is completely correct. Kerning doesn’t enter here at all. Though you clarify, it’s not even fake kerning. It is tracking. The two are completely separate and kerning doesn’t feature here at all.
That said, I do agree that for headings letter-spacing is a nice touch, especially for readability *but* I also agree with Mr.SergE and Jason - I prefer increased letter-spacing. Maybe it’s personal preference, but tightening the tracking IMO reduces readability.
Harry: I never said it’s fake kerning :) I said there isn’t any way to kern letters with CSS, but there is a way to manage letter spacing. I didn’t feel like introducing another typography term in there. I guess I wasn’t very clear, my apologies.
I agree that it may indeed decrease legibility — but headings aren’t very long and the effects aren’t very severe so I would say improving the looks provides more value in this context. As Nick said, I wouldn’t change letter spacing in the body text.
[...] Usability Post: CSS Tip: Improve the Look of Your Headlines Using Letter-Spacing [...]
Dmitry: I know, but you said it isn’t ‘true kerning’ so I made a point of saying that it’s that far from kerning that it’s not even fake. I think it’s fair to say that it wasn’t a case of anyone being wrong, rather people using different terms.
And yes, it’s unlikely to be too detrimental on headings, but definitely shouldn’t be used in body copy.
One of the best tips I’ve seen in a while! Yet, so simple. Thanks :)
I always use positive letter spacing on header text. Don’t know why I like it better.
Another vote for +1 letter spacing.
It’s personal preference but the effect I find it has is that it will open up a design, things will feel lighter and airy. Like it gives headers room to breathe.
I employed it on an older design whilst it’s not perfect has has it’s faults. You can’t deny that the increased tracking reflects the cloud, air and sky motifs.
http://www.grantmeahigherlove.com/
Nice, I just tried it and it does make arial more interesting
I think the headline with the original letter-spacing is much better than the modified one. Especially in terms of readability the second example is imho quite bad.
[...] Usability Post » CSS Tip: Improve the Look of Your Headlines Using Letter-Spacing (tags: css typography webdesign programming) [...]
Whether or not adjusting the tracking “improves the look” of headlines is a matter of personal preference, and one’s susceptibility to a current trend to set headings big and tight.
As long as I can read, on top of that page is written “Usability post”. Legibility is very important for usability. But I see some are talking about “taste” and “looks pretty good”, but wait a second, that is the author of this article on usability that is saying these. He even says: “I agree that it may indeed decrease legibility”. So it is OK to neglect legibility, isn’t it Dmitry?
The problem is not that you don’t care about legibility. The problem is not in the 1px negative tracking, used here and there, it’s OK. The problem is that some young fellas come here to read about “usability” and they are told that legibility is not a matter of concern, that the designer’s taste is more important than users’ convenience.
You ain’t Carson, right? And web is not a place for expressionistic typesetting.
Oh yeah, pulling in the letter spacing on big bold Helvetica is a must if you ask me. Everybody is doing it. =)
Kerning is a must when providing content on the web. To be able to use letter spacing in your content is a must as a designer. I agree with Coyier that you have to include letter spacing when using web fonts. You would do the same thing if you were going to be embedding the fonts in an image right?
krustev: Thanks for your comment. You have to remember that usability is about how “usable” something is and being attractive and aesthetically pleasing is part of it. Usability is making things easy and enjoyable to use. Good design is all about being able to fuse function and form into harmony — it’s not all about function.
[...] http://www.usabilitypost.com/2.....ter-spac... [...]
I think letter-spacing is a great idea, but your example makes a decent headline worse.
You’ve crammed all of the letters together, which makes it feel uncomfortable and more difficult to read.
Arial, strong, letter spacing -1px kick ass Period.
Anyone with even the smallest amount of graphic design understanding, knows that headlines should be kerned/tracked tighter, i.e. -1, as the Blog’s author contends. +1 on a headline? No way!
Jin: If you specify letter-spacing in em’s it *should* print as it is displayed (with the exception of hinting/pixel alignment).
You can always use the @media print rule to get around odd looking prints.
hi
rdmfjw4ew11c7hiw
good luck
Все отлично: и по стилю изложения, и по содержимому. Так держать!
I use a negative value in em’s sometimes for letter spacing using Helvetica for a nice effect, also i use word spacing where needed. Definite best tricks. Nice one! @chriscoyier another great post on the same theme. I commented before reading what others had said duh :)
This is very helpful, but I am having a Wordpress problem. The headline is justifying instead of aligning flush left. I see no way of adjusting this.
[...] CSS Tip: Improve the Look of Your Headlines Using Letter-Spacing (Usability Post) download yes man [...]
One thing I noticed was when using the letter-space property and when the headline happens to wrap to the next line it looks pretty ugly with crazy amount of word space.
I might have to try it out with word-spacing as well. Anyone else faced the same issue? Any workarounds?