The case for XHTML/CSS Style Guides

I have been working for a short while on a side project that I have already found very useful, and that is to develop a tool that aids in creating what I call a “CSS Style Guide.” There may be a better name for it, but the concept is quite simple, a guide for clients or website owners who will be maintaining a website after you have delivered it to them.

Style guides typically outline when you should use a H1, H2, H3, ordered lists, tables, etc… so that everything remains consistent and unified.

The interesting part about the style guide, as I have found, is that it often brings to light the incompleteness of our work as website builders.

Why the typical website building workflow leaves holes

The web is part coding (for lack of a better word) and design. The typical web design workflow starts in visual tools that represent a given page / interface and then moves into the coding and building of the site (working with text, markup, and style sheets).

What ends up happening is markup and design is only created for the elements that show up on those pages. Typically H1 – H3 (if that) and a few other design elements such as bulleted lists.

This is not great for a website that needs to grow, and a client that needs to maintain it. There may be a few rare cases where it makes sense to move all the way down to an H5 / H6.

However unless the designer thinks ahead to design a style for all common elements that fit with in websites needs, it will not have the same uniform approach that the rest of the well planned elements have.

This becomes esspeically important on any website that is content focused or content heavy.

It is bad for the website, the client and yourself if you never bothered to design what a “block quote” looks like and a blog post ends up failing to communicate that content is in fact, a quote.

What I suggest to do about it

I have learned simply through making mistakes, “agh crap, I forgot to style that.” You could just wait until specific elements need styling and have the client ping you, but that is not ideal.

Instead I have developed a simple one page “Style Guide” that lets you load or paste in CSS styling so you can get a clear picture of how the most common elements on a page look. It is flexible so you can easily see how elements wrap and/or how they look in wide and narrow columns.

Take a look, and play around

Feel free to take a look and play around with it on my server, or download it for yourself to use, update and improve.

I had a fair amount of fun just loading other peoples stylesheets to see how they stylized each level of heading and how far in the styling they actually went.

It is free to use, alter, etc… if you can keep a credit in the head section that would be great. I really would like to get more conversation around creating a guide to how a website should be styled and have it be a deliverable to clients who need it.

All the Tools You Need for Rich Web Typography

Typography has come a long way on the web, but we are still stuck with a fairly limited amount of control over our type and how we use it. Even after exploring fonts that you could use but probably don’t, and learning some advanced css typography techniques, we are left with maybe a handful of additional typefaces and techniques to really make our typography shine.

Luckily there are some tools and methods to improve the typography on the web, and most of them are simple, and scalable.

The Situations

There are two distinctly different situations where we would want to improve our web typography. They require different methods, tools, and needs. These situations are headings and body type. Headings should draw attention, have an impact, and be meaningful. Where body type should be easy to read, clean, and have a consistent flow.

When it comes to headlines we have several options to improve our CSS based typography, or use replacement techniques such as sIFR, flashImage, or CSS Based image replacement.

Body type is much more difficult, we have fewer options to really control and work with out typography. Luckily body type should do little other than be clean and legible. In this situation we really are looking at tools that will increase the legibility of our type.

Headlines

sIFR

sIFR is by far my favorite method of improving the headline typography. It addresses almost every typographic issue that you may run into. Not only can you use any typeface that you have on your computer, but you also have more control over letter spacing, leading, word spacing, font smoothing, and even some stylization.

This nifty tool (and yes I said ‘nifty’) uses javascript to dynamically insert a flash movie into the document where you have text that you would like to be displayed.

Since it is inserted dynamically you still get the semantic and SEO benefits of your H tags with the design and typographic benefits of a tool this powerful.

Of course if a user doesn’t have javascript, they are still able to see the normal HTML text and still have a positive user experience.

Their are some drawbacks however. It can be tricky to configure / install, and sometimes it takes a noticeable amount of time for it to render. It has a noticeable footprint the first time it downloads (afterwards it is cached) and of course will slow down the rendering of the page slightly.

FaceLift

FaceLift provides the same function as sIFR, but uses dynamically generated images instead of flash. Again you have the same benefits of actual semantic H tags, but have the ability to use any font that you have installed on your computer.

It seems to be a bit faster than sIFR and the technology is much less complicated. FaceLift supports transparent headlines for complicated backgrounds through the use of the PNG image format (so IE6 might require some finessing).

Simple and straight forward FaceLift is a great option for beautiful typography. However it does not support some of the advanced functions that sIFR does. Letterspacing, leading, and other stylization such as dropshadow filters and selectable text are available in sIFR but not FaceLift. However it does seem to have better consistency size wise across browser.

CSS Image Replacement

Sometimes there is no replacement for the classic method. If you have complicated typography in addition to some complex styling, it is very likely that neither FaceLift or sIFR will be able to dynamically generate the look you need. In this case you need to create the headlines in photoshop and use CSS to replace your markup. This is called “Image Replacement”

There are several methods of doing this each with their pro’s and con’s. With nine different methods to chose from, finding one that fits your situation should not be all that difficult.

The advantage for using this method for your rich typography will be that you can make it look exactly as you wish and you know everyone will see it in a very consistent way. Of course this method doesn’t work so well if you have a large CMS based site.

Body Type

As stated early there really is one major focus of body type, make it legible and clean. Of course there is some room for picking the right typeface, however with a limited range of choices you should quickly be moving on to more important things such as baseline rhythms and legibility.

Luckily there are some great tools out there to make this job easier, and if you have done it all manually you will be excited about how much time you really save.

Of course the first step is to figure out what font to use and what fonts are safe to use.

PICKING AND WORKING WITH THE FONT

FontStackBuilder makes building your font stack quick and easy. With a great cross section of fonts that are available on windows, mac, and Linux you can easily find and generate the code for a safe and effective font stack. Ensuring you have selected typefaces that all users will be able to read and understand regardless of OS will put you on the road for great typography.

But to really take advantage of typography (even in your body text) you really should have a good idea of how the type looks in all different sizes and states. This way you can make an educated choice in how to display non headline type (bold, all uppercase, etc). If you need a good render of type with out the hassle of save and preview then you need csstype.com.

CSSType.com lets you specify what typeface and words you want rendered and it will give you a whole output of different states and sizes letting you really see a range of options to use in your stylesheets.

If you are looking for more of a playground to work the your typography, have a look at CSSTypeSet.com has a simple interface with easy sliders so you can make fine adjustments on the fly, see how it looks, and get the CSS code when finished.

WORKING WITH YOUR BASELINES

But as I touched on before setting and working with your baselines is probably one of the most tricky aspects of web typography related to your body font. Setting a baseline or vertical rhythm ensures that the bottom of all elements and lines of type line up with each other creating a consistent and integrated composition.

Of course understanding how it works is pretty the first step, but afterwards you may find it quicker and easier to use the vertical rhythm calculator than doing all of the calculations and coding yourself.

Once you have developed your vertical rhythm make sure to test it using Rob Goodlattes great “syncotype” script. The script puts an overlay of the rhythm you are aiming to achieve over your site so you can see if any element doesn’t line up and make tweaks accordingly.

THOSE TOOLS SHOULD BE A GREAT START (OR SPEEDUP) OF YOUR WEB TYPOGRAPHY

Have any other tools or techniques you use to improve your web typography? Let me know so I can add them to this list.