3.7 DESIGNS - Web Consultancy

All the Tools You Need for Rich Web Typography

Posted on 10/21/2008

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

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

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

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.

Vertical Rhythm

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.


Google Analytics Alternative