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.
