Have you ever felt like you were limited in the things that you could do with your typography on a web page? I have, and before I knew what CSS was to apply a form of “kerning” to my web pages without having to create a custom text graphic. Custom graphical text is always going to look cooler, however for particular reasons you may not want to do a graphic for every time you create some text, such as a dynamic photo caption pulling from a database. Now with CSS3 becoming more browser compatible, the use of typography will begin to expand more and more.
The CSS parameter you want to use is called letter-spacing. Yes, it is that simple!
Anyways let begin. Lets say I want to have a caption for my photo that looks cool and well designed. The first photo caption is standard.
Our beautiful lake
Now Check this out!
Our beautiful lake
Doesn’t this look much better?
Anyways, here is the CSS
Take your text and wrap it in a <span> tag. This tag helps you apply a style to the text easily, however this is not the only place to use style. </span>
<span>Our Beautiful Lake</span>
Next add a style and the line spacing (int his example we are using Inline Styling, however the same styleing can be used in an external style sheet):
<span style=”letter-spacing: 5px”>Our Beautiful Lake</span>
The result is: Our beautiful lake
It’s that easy! Hope this was helpful.
Again, there are many new features that are coming available in CSS3 that will enhance the ability of typographical design without having to create textual images and such. Please return to http://scottlassiter.com/blog in the future to learn more about CSS3 features.
Tags: CSS, CSS parameters, dynamic text, in line styles, kerning, letter-spacing, photo captions, typography, web design, web development
That’s not kerning that’s letterspacing.
Yes, it is letterspacing, however in the print world it is also referred to as kerning. Lettespacing is a better term for the web. Thanks for the correction.
http://en.wikipedia.org/wiki/Kerning
That’s not kerning at all. Kerning is the space between individual letters only.
The WEB terminology for what I am trying to describe in my post is called letter spacing. The CSS parameter is called letterspacing as well. I had referred to this in a slang manner by calling it kerning, however there are some specific details in the term kerning that are different than what I am trying to describe.
http://www.adobe.com/devnet/opentype/archives/kerning.html/
http://dev.opera.com/articles/view/11-typography-on-the-web/
In the print world, I think this is actually called tracking.
Tracking is about an universal amount of space to put between regardless of the letters.
Kerning adjust letter spacing between specifics letters (glyphs). You will have a kerning amount between A and V compared to W and I for instance.
So I would say the CSS/web design letter-spacing is the equivalent of tracking as the amount of space is set regardless of the actual letters.