Welcome to The Ultimate Collection series. Today I have compiled all the tools, blogs and resources regarding Typography. Typography is often overlooked by the webdesigner, but fortunately, that trend is changing a bit!

I might have forget a resource I definitely HAVE to include so please comment if you have that resource. I am happy to learn and add it to the collection.

Typography Blogs

My RSS feed reader includes a number of typography related blogs and if you are seriously about typography, you should be reading these blogs too.

• Speak Up (sad to see you shut up..)
• FontLover
• Typographica
• I Love Typography
• Typographer
• TypeOff
• TypeFoundry
• Jon Tan

Books

There has been written an immense number of books on typography, which I unfortunately don’t all have in my collection. However, here are a few I think are great.

• Typography Workbook: A Real-World Guide to Using Type in Graphic Design
• The Elements of Typographic Style
• Designing with Type: The Essential Guide to Typography
• The Complete Manual of Typography

Create Fonts

I have been thinking about building a professional font for a while too, but I don’t have the time. You might have the time and if you are interested in building a font yourself, these articles are must-reads.

• So You Want To Create a Font pt 1.
• So You Want To Create a Font pt 2.
• How to Design a Font (2) (3) (4)

Typography Tools

With more and more people getting interested in Typography a lot more tools gets developed.  Here are a number of typography tools I use from time to time.

• EM Calculator
• Lorum2 (Get dummy text for your new site.)
• TypeChart (See how fonts are used > grab the CSS)
• CSS Type Set (Customize your typography and grab the CSS right away.)
• TypeTester (Compare Screen Text > grab CSS)

Inspiration

Getting inspiration is not only important with webdesign in general, but with Typography too. When I build a site based on typography, I always find inspiration in the following sources.

• Typography Served
• Use Typography
• I love Typography Flickr Pool

Large Companies Typography Sections

I didn’t know that large companies usually have a large section of typography related information on their sites. Here are some of the largest.

• Microsoft Typography
• Adobe Typography (shop + information)
• Apple Fonts Section

Download Fonts

There are thousands of font designers out there that offer their fonts for free or for money. Take a look on the following sites that provide these downloads.

Get Free Fonts

• DaFont
• 1001 Free Fonts
• Font Post
• Search Free Fonts
• Jos Buivenga

Get Premium Fonts

• Font Shop
• Process Type Foundry
• LinoType
• MyFonts

Typography Options on the Web

It’s hard to implant great typography on the world wide web because only a few fonts are fully supported. That’s why we sometimes have to improvise.

• sIFR3 (tutorial)
• FLIR (tutorial)
• Typeface.js (tutorial)

We have been talking about and introducing great CSS typography alternatives like sIFR3, FLIR or Typeface.js. They have given us more typography possibilities and options.

When we use a technique like FLIR, we face another problem: where to get fonts for your projects.

Many quality fonts are copyrighted and that means you have to pay to use them. I could understand that you don’t want to buy (could be for any reason), so you would like an alternative like free fonts. But do they have quality, and how do you know which one is in the public domain?

How and Where to search?

I have picked up a small little trick that made me browse fonts that were in the public domain or are free to use. We will use DaFont to search and download fonts. Here is small guide:

1. Browse to DaFont.
2. Choose your font category.
3. Choose the options you would like to specify.
4. Click “more options”
5. Select Public domain / GNU GPL and Free
6. Browse the fonts.

10 Quality and Free Fonts

To make things as easy as possible, here are 10 fonts that I think are really nice. You can use any of them in sIFR3, FLIR or Typeface.js as long as you don’t sell them.

Port Credit

Very nice looking font that you can use in many projects. The download comes with 2 font files, a normal and a bold version.

Download this font

Prociono

Prociono is a font by Barry Schwartz. This font has a high quality and is very detailed. Looks great in headings and titles.

Download this font

36 Days ago

36 days ago is a font that is pretty old but it remains very stylish. This font comes with 2 font files, a normal and bold version.

Download this font

Goudy Bookletter 1911

The author has found inspiration for this font in the older font Kennerley Old Style. This font comes with one normal version and is released in the public domain.

Download this font

Aubrey

Aubrey is a clean font that looks good for heading and titles. The download comes in a normal version.

Download this font

Harrison

Harrison is a handwritten font that looks great as heading and maybe you can use it in a logo too. This font comes in a normal version.

Download this font

Essay 1743

This font will look absolutely lovely in a grungy website. Essay 1743 includes 4 fonts (normal, italic, bold, bold-italic) and you can see the author has put much time in this.

Download this font

Delicious

This is a font by Jos Buivenga and it looks awesome. He started with a normal font but after some time it turned out font family. You can use this font in personal and commercial projects.

Download this font

Apantasia

Apantasia is a handwritten font that can work great in grungy websites. This font has almost every character included.

Download this font

Lupinus

Lupinus is a good font that could be used for headings and titles and it works well. It has a bit “blocky” feel and that is nice here!

Download this font

More and more alternatives for CSS typography are seeing daylight and that is great news for the webdesigner who would like to have some more typography options on the web.

Recently I have written tutorials about the use of sIFR3 and FLIR. Check them out if you like. Today it is time to teach you something about a technique I have just discovered. Today you will learn how to use typeface.js.

Basic information about typeface.js

Typeface.js is a JavaScript library that adds the possibility to choose from fonts that aren’t installed on your visitors’ computer. The JavaScript transform basic HTML and CSS to images with your custom font. Typeface.js is developed by David Chester, and I am sure we will see many more features for typeface.js in the future.

Cross-platform

Something that is really great about this technique is that it works in most browsers like Internet Explorer 6+, Firefox 1.5+ and Safari 2+, and if typeface.js is not supported by an older browser, it will degrade gracefully. No problems for the visitor: they will not notice they are missing the fun.

Search Engine Friendly?

One of the most important things about these kind of techniques is the search engine friendliness. If that’s not the case, we aren’t able to use it because it’ll hurt our search engine results.

Fortunately, typeface.js is very search engine friendly. You write just normal HTML and CSS, so the search engine can still know what your content is all about.

Advantages of using Typeface.js

I feel that this technique has many advantages and with some more development this can really turn into the perfect alternative to SIFR3.

Simple to use – The advantage above SIFR3 is that it is more easy to install and use.

Light-weight – You shouldn’t use typeface.js for whole paragraphs, but when you use it for headings or titles, typeface.js loads faster than alternatives like SIFR3 or FLIR.

No flash, No PHP, just JavaScript – The alternatives use PHP or flash to render their text. Typeface.js is only a piece of JavaScript.

Select your text – Although it isn’t as developed as one could wish, the option exists to select and copy text. You just need to select the text as usual and copy and you will have the text copied. The problem with this is that you can’t see what you’ve selected.

Installation to your website

After this introduction it’s about time to start installing and using typeface.js. You need to start with downloading the JavaScript library and place it somewhere in your site. I recommend you make a special folder called js to store all your JavaScript files.

Converting a font

Next we need to convert a TrueType font to a JavaScript file. We can do that by using the converter on the official site. Click here to visit the generator.

Choose your TrueType font file from the /WINDOWS/fonts folder on Windows. In a Mac you can find them here. Please keep in mind that you might not have permission to use every font you have installed, so check that out first. If you have your font converted and downloaded, copy the YOURFONT.typeface.js file in the same folder with your typeface.js.

Tip: If you can’t select your TrueType font from inside the /WINDOWS/fonts folder, try copying your file to another folder.

Implanting Typeface.js in your website

Now our preparation is done and we can start implanting the files into your website.

External CSS file – You will have, most likely, an external stylesheet in place. The next step is implanting the JavaScript files and it is really important to load your external stylesheet before the JavaScript.

Implant your external CSS file like this:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Implant the JavaScript – Next we will add the typeface.js library and the typeface.js fonts to our site. Here are the codes:

<script src="js/typeface-0.10.js" type="text/javascript"></script>
<script src="js/YOURFILE.typeface.js" type="text/javascript"></script>

The YOURFILE.typeface.js is the font you have converted earlier.

Using in your website

Using typeface is very easy, you only have to do some basic HTML and CSS.

<div class="typeface-js" style="font-family: YOURFONT">
Typeface.js will convert these lines of text to YOURFONT.
</div>

You have to add the class typeface-js to the element your text will need to show. If you already used a class on that element, simple add more:

<div class="class another-class typeface-js"></div>

The inline style declarations aren’t the perfect solution, but I guess that will be solved in future versions of the typeface.js library. You should replace YOURFONT with the name of the font you used when converting your TrueType font.

Mission Accomplished

That’s right, that’s all it takes to implant typeface.js in your site or blog.

I have created an example for you and I have did that in 1 minute. It is really that easy! Click here to view my example or here to view the developers example.

You want more Typeface.js?

I suggest you take a look at some of the links below for more information.

• Developers Homepage
• Dafont - For free fonts
• Examples

The paragraph is a subject many webdesigners doesn’t even look at when they design a website and therefore they keep their paragraphs simple. But with some more attention to this part of typography we could improve the look of our whole site.

In an article I have written some time back I have shown you how you can use CSS to improve your paragraph’s typography without much hassle.

Today I will give you some creative (as far as creationism goes with paragraphs) and good looking examples of sites that did work on their paragraphs. These examples with different colors, backgrounds, sizes and typefaces should give you some inspiration for your own site!

Bright Creative

Cappuccino

Loodo

SpeakLight

Made In England

Stylized Web

Your Church

Five Run

Anidan Design

Thuiven

Bergan Blue

Lonnroth

BittBox

Breeze Legal Solutions

iLoveTypography

Larissa Meek

Typography

Viget – Extend

As we’ve talked about before, I am not happy with the lack of support for awesome typography on the internet. The possibilities are just limited, so we looked for alternatives. We have discussed sIFR3 in the past, so today it’s time we will experiment with another typography alternative: FLIR.

Basic Information about FLIR

Facelift Image Replacement or FLIR has been build because the author Cory Mawhorter got tired with the basic Arial and Times New Roman (who doesn’t?), and he didn’t like the way sIFR was solving this problem.

So he decided to develop an alternative called FLIR. It works with JavaScript, PHP and CSS, and doesn’t use Flash at all.

How does FLIR work?

When you have installed FLIR on your website and your visitor loads a webpage, your browser detects the JavaScript file. The text that is identified as “FLIR” text get send to your PHP server which will generate images with the fonts you specified. The original text will remain in the source and that makes FLIR search engine friendly.

This whole process is faster than sIFR and your visitors will not notice anything.

What if Javascript isn’t supported?

If Javascript isn’t supported the browser will simply return normal browser text and therefore FLIR is a very accessible technique that works anywhere.

FLIR Installation

When I was researching this technique I found out it is very easy to install FLIR to your website. We will install FLIR via 4 easy-to-follow steps:

• Download the files
• Configuring
• Add to the website
• Styling

1. Download the files

The first things you need are the files to make everything work. We need to download the latest version of FLIR files from the official download page. The version I use in this tutorial is 1.2.

2. Configuring

We need to configure the config-flir.php file to define the fonts we would like to use. Open the file and find the following lines:

 }<?php
// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating']     = 'ArtOfIlluminating.ttf';
$fonts['okolaks']     = 'okolaksBold.ttf';
$fonts['wanta']         = 'wanta_091.ttf'; ?>

If you would like to add ‘arial’ for example, you need to copy the arial.tff file to the fonts folder. Next you need to add the following lines of codes:

<?php $fonts['arial']         = 'arial.ttf'; ?>

Add as many fonts as you need on your site. There are more options that you can change but remember everything you do could have consequences for the output.

3. Add to the website

Once you have saved the config-flir.php file you are ready to implant FLIR in your website.

Add this line of codes between your <head> tags and after your stylesheet(s).

<script src="/path-to-flir/js/flir.js" type="text/javascript"></script> 

Next, you need to find the </body> tag and you should add these codes before this tag.

<script type="text/javascript"><!--
FLIR.init( { path: '/path-to-flir/' } );
FLIR.replace();
// --></script>

These steps are important and if you don’t do it exactly like this, FLIR will not work correctly.

4. Styling

By default FLIR styles h1 to h5, but you could add more elements to this list. For example, you may want to style strong or em elements, or others. You can do that in this way:

Find the FLIR.replace(); attribute you’ve just added before the </body> tag. You can edit that attribute like this:

FLIR.replace( 'h2', new FLIRStyle({ cFont:'some font' }) )
FLIR.replace( 'div#entries h3', new FLIRStyle({ cFont:'some font' }) )

As you can see, you can add multiple elements to this list and give them a specific font.

If you would like to specify a default font, you can do it with the other FLIR function you’ve added before called FLIR.init();

<script type="text/javascript"><!--
FLIR.init( { path: '/path-to-flir/' }, new FLIRStyle({ cFont:'your font'
}) );
// --></script>

CSS

Styling the elements you have included in the FLIR.auto(); is very easy and can be done with normal CSS.

h1#permalink{
font-family: 'your custom font', Arial, Helvetica, sans-serif;
}

You should replace your custom font with a font you have added in step 2, in the flir-config.php. FLIR should be working fine now.

Other CSS styles

There is more. You can style your FLIR images exactly how you can style your browser text. For example:

h1#permalink{
font-family: 'your custom font', Arial, Helvetica, sans-serif;
font-size:30px; /* All font-sizes are supported */
color:#ccc;
text-align:center;
}

Tips & Tricks

The basic installation is finished, FLIR should be working correctly right now. Here are some links related to FLIR that might interest you as well.

• FLIR homepage
• FLIR examples | detailed examples
• FLIR WordPress Plugin
• FLIR on DivitoDesign

sIFR vs FLIR?

After testing and documenting both techniques I came to the conclusion they are both awesome alternatives to the default CSS typography. FLIR loads fast on your website and has a very easy implantation process, while sIFR uses Flash and has a more advanced installation method.

I would recommend choosing FLIR, because the ease of implantation and loading time compared to sIFR.

What The Author Has To Say

Because I am absolutely no expert in FLIR or Javascript, I wasn’t sure if I’ve covered everything FLIR can do, so I emailed the author Cory Mawhorter and he gave me some tips to improve the tutorial. He also wanted to respond to a couple of comments that have been made about the issues FLIR might have.

Scalability (comment)
You can use the the RefreshImages plugin included with FLIR to actually do a
better job than sIFR at resizing text. Any browser that actually changes
the font size when you zoom will be detected and the image updated. If the
element is set to wrap, this will also be detected. So if you resize the
browser window, the elements will wrap properly instead of travel off the
page.

Selectability (comment)
It is true FLIR lacks a bit in this department. I see it more as a browser
drawback, though. Copying works as expected in FF but not in other
browsers. In FF, when you select and copy a replaced image the ALT text is
grabbed, which gives you the desired result and actually allows you to copy
blocks of text. (In sIFR, you cannot copy the header that is replaced and
also the paragraph below it.)

Also, since FLIR was built with plugins in mind you could write a plugin to
handle the copying and pasting. I plan on eventually doing this but haven’t
yet.

Kerning Issues (comment)
The issue with the “I” isn’t a kerning issue but is actually a problem with
PHP and GD and the way it handles alpha transparency with font glyphs.
There are already multiple workarounds available that I have not implemented
on my own site (which is why it is still like that). They include, simply
changing the output from PNG to GIF or using the FancyFonts plugin, if you
need to maintain transparency.

To output GIF: FLIRStyle({ output:’gif’ })
To use FancyFonts: FLIRStyle({ mode:’fancyfonts’ })

Paragraphs are often overlooked when we talk about design or typography, we give our titles a lot more attention. While paragraphs are used to actually bring over the message. Why not give your message the look and feel your readers deserve? Let’s take a look at the paragraph in typography today.

Designing your Paragraph

When we markup our paragraph we have to choose from 8 options in CSS. If used properly, all of these can drastically improve the experience the reader has with your paragraph. It is the combination of all of these that can make the difference between easy to read and hard to read.

• font-family
• font-size
• color
• line-height
• letter-spacing & word-spacing
• text-align
• text-indent
• Whitespace
  

We will discuss all of these next.

Font-family

The font-family property is the most important part of your paragraph. It is really important to choose a font that flows with your layout but most important it works in your layout. For example: Georgia should work on a personal blog, while Arial could be used when you go for a professional look.

In general, we have to choose between these regular options in the font-family attribute:

• Arial, Helvetica, sans-serif
• “Times New Roman”, Times, serif
• “Courier New”, Courier, monospace
• Georgia, “Times New Roman”, Times, serif
• Verdana, Arial, Helvetica, sans-serif

We can’t simply add the fonts you like because they aren’t web-safe. Here is a list of Web-safe fonts you can use on your website. Make sure you choose one of these.

p{
font-family:Arial, Helvetica, sans-serif;
}

Font-size

You should always find the balance between both lovely and accessible, that means you should choose a font-size that is too small (because older people have more problems to read it!) or too large, because that might irritate your reader.

If you have set your body base font-size at 100%, your paragraph should have a font-size that could range between 0.75em and 1em but you could experiment with this to see what fits best on your site.

p{
font-size:1.3em;
}

Color

Colors are important to create a nice flowing layout, but not only the colors have a part in that, contrast is important too. For example, you could just use plain black for your normal text, but you can also use a dark-gray. This makes the text a bit easier to read and you make your italic, strong or heading tags stand out a bit more.

Just a quick reminder; don’t tone down your contrast too much. That will make it harder for older people to read your content.

Read more about the contrast in design in an excellent article from the Usabilitypost.

p{
color:#444;
}

Line-height

The line-height is the distance between the lines of text and changing this value can help people navigate better and read easier and relaxed. You should experiment with your line-height as you like, just don’t choose it too small!

Here’s an example to show you what a larger line-height can do to your paragraph.

p{
line-height:1.5em;
}

Word-Spacing & Letter-spacing

CSS has the possibility to change the margin between words and letters. Usually I only use these elements on headings, but adding just a little bit more or less spacing between words or letters can just make a little difference in user experience. Just experiment a bit and see what works for your paragraph. Remember to not overdo it.

p{
word-spacing:.1em;
letter-spacing:.01em;
}

Text-align

You can change the align of your paragraph too and by default, everything is aligned to the left. Choosing a text-align of center or right is not your best choice. But there is one more option: justify. Your paragraph will be justified on both left and right.

Justify makes your paragraph looks much better and more professional. If you aren’t sure what I mean, I’ve set up an example that can help you.

p{
text-align:justify;
}

Text-indent

In traditional writing a paragraph that is separated from the rest (e.g. not as a follow up on h1, h2, h3, lists or blocks), should have a indent on the first sentence. You can do this on the web too:

p{
text-indent:1em;
}

However, these codes does show an indent right after the h1, h2, h3 items, which is not what we want. I learned there is a possibility to do that:

h1 + p, h2 + p, h3 + p {
text-indent: 0;
} 

Here’s an example that shows you what you can do.

Whitespace

You should keep in mind that you have only styled a single paragraph with the options above. To make the reader recognize the paragraphs as paragraphs you need to add space to separate them. We will do that with the margin element in CSS.

When you add the same value we gave line-height to margin-bottom, we get a simple line-break between the two paragraphs, just like how we see that in original print industry.

This will do the job:

p {
line-height:1em;
margin-bottom:1em;
} 

Final Example

To give you an complete example to see what is possible, I have set the default paragraphs against a more complete paragraph. I have used all the properties I have described in this article, so you can see what they can do.

Take a look at the example and I think it is clear which one looks best and is best readable too. If you want to customize this paragraph to your needs you can find the CSS codes below:

CSS

p{
line-height:1.6em;
font-family: Arial, Helvetica, sans-serif;
font-size:80%;
color:#444;
text-align:justify;
word-spacing:0.1em;
text-indent:1em;
margin-bottom:1.6em;
}
p strong, p em{
color:#000;
}
h1 + p, h2 + p, h3 + p {
text-indent: 0;
} 

The definition of typography is roughly said “the art of designing with fonts”. Typography is how fonts are used in a newspaper, a magazine, a website or book to give readers the content in a good-looking way.

Did you ever look in a traditional type of media like a newspaper and saw all those different kind of fonts, sizes and usages of text? That is exactly what typography is all about: finding the right way to display the right kind of text in the right place.

CSS & Typography

In new types of media this form of design hasn’t been forgotten. Actually, it is used more often and the use of fonts and sizes gained more attention over the years. Today we will discuss the use of typography combined with CSS.

The possibilities of typography in today’s web-world aren’t what they could be, but it is still possible to create something nice with the tools we have been given. The tools we will use are the websafe fonts and the markup language CSS.

Titles & Typography

Titles or headings are always one of the most important “attention” areas of an article. You want people to know what your article is about and with typography you can really let your title stand out.

Think about it, why do you read a newspaper article? Or you are interested in the content, Or you got interested by the title. Newspaper editors called the title numerous times ‘the most imporant part of the whole article’.

But what makes a great heading? A title is always bigger, bolder and always stands out from the other content. It grabs the attention.

Below are a couple examples of what could make a great heading and the CSS codes are included so you can use it on your own blog.

Typography examples: Headings

h2{
font-family: georgia,serif;
color: #780101;
font-size: 4em;
letter-spacing: -2pt;
word-spacing: 4pt;
font-weight:normal;
}

h2{
font-family: georgia,serif;
color: #333333;
font-size: 3.5em;
font-weight: bold;
font-style: italic;
letter-spacing: -2pt;
word-spacing: 3pt;
line-height: 0.9;
}

h2{
font-family: arial,sans-serif;
color: #550080;
font-size: 35px;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: -2.4pt;
word-spacing: 3pt;
line-height: 1.2;
}

Paragraphs & Typography

Paragraphs are a part of webdesign most people don’t think it’s an important design-aspect. But in fact it is really, really important. The content is the part people are reading, the part people are looking at most of the time.

An article can be read with more ease when the designer chooses for images, sub-titles, bold and italic text and a typeface that fits into the style of the article. An well designed article will increase the users reading experience.

Here are some examples typography for paragraphs with large amounts of text.

Paragraph with Georgia

p{
font-family: Georgia;
color: #444;
text-decoration: none;
word-spacing: 0.3em;
text-align: left;
letter-spacing: 0;
line-height: 1.6em;
font-size: 1.2em;
}

Paragraph with Courier New

p{
font-family: Courier New;
color: #5b3600;
text-decoration: none;
word-spacing: 0.25em;
text-align: left;
letter-spacing: 0;
line-height: 1.4em;
font-size: 1.2em;
}

Paragraph with Arial

p{
font-family: Arial;
color: #000;
text-decoration: none;
word-spacing: 0.25em;
text-align: left;
letter-spacing: 0;
line-height: 1.4em;
font-size: 1.1em;

Examples & Resources

Here are the Live Examples of the typography shown in this article.

If you are interested in more typography news, resources and updates, take a look below:

• ILoveTypography.com
  
• DesignWorkPlan.com (great real-life examples of typography!)
• Wikipedia
• TypeTester (Expirement with Fonts in a webbrowser)

Let’s have some typography talk now. We will talk about the fonts you could use on the internet. Fonts that are safe to use in your website to produce a quality layout with the fitting typography choices.

Why safe?

I realize myself almost every day there are so many awesome fonts out there. A couple weeks back I looked at a post over at Noupe that featured some great fonts from deviantART. Lovely, those fonts. I want to use them, but I simply can’t, because it doesn’t show on every computer. Why? Because not every visitor has that font installed on their computer.

What can we do about it? Nothing. It’s the same problem we have with Internet Explorer 6, it just doesn’t leave the scene, because there are still too many people who use it. We just can’t say, “All computer users, install this disk with free fonts”. Even if we did that, not everyone will install the fonts, and the problem isn’t solved.

So, we have a problem. Where the solution? We always have those people that started to look for some inventive solutions. They found them, take a look below for at a couple of ‘em.

Web Safe Fonts

To give your paragraphs, headings and titles a somewhat special look even with normal fonts, we have to improvise with the possibilities that are available (take a look around, we all have to deal with the problem): fonts that are installed by default on most (if not all) operating systems and therefore we have the best chance these fonts work.

Dustin Brewer has done some great researching work when he wrote this post. Fortunately for us, we now have a complete list (or almost!) of the fonts we could use on the internet, without fearing some people don’t see our content.

sIFR

In the past, I have wrote a tutorial about this technique (it’s aged now). sIFR is a combination of Flash, HTML, CSS and Javascript and I know, that sounds hard. But really, it is not that bad.

Recently, sIFR has released a great new version, called sIFR 3.0 and it has gone a long way since its first release. It has features like text-resizing, turning sIFR on/off and printing solutions. Take a look on the site for more features.

This is an awesome solution to our little problem, at least for headings or titles.

Image Replacement

Another way to include some sexy fonts in your website is by using images. You know, those images you designed in Photoshop with a special font and replaced with the original, standard looking heading. But, what if you run a blog, should you be designing a image for every post you write?

Of course not, we have inventive people with us on the web. There are plenty of software packages around that show you how to use image replacement on a user friendly and accessible way.

FLIR is the one I recently read about, and I think we will hear loads of this technique in the future. Oh yeah, here is a tutorial to learn how to install and use FLIR on your website.

Any More?

I am sure there are more tips and tricks available but usually those aren’t the best. Maybe they have problems with accessibility or it’s not compatible on every computer. If I have forgotten your personal favorite or an absolute awesome kit, comment and I will add it to the list.

Cheers.