Good vs Bad Examples of Web Typography

Kerning A lot of webmasters have not even heard of kerning. It is very important to understand it, especially when designing logos or headlines. In all non-monotype fonts, letter spacing varies according to the width of each character. When writing complete words, it may appear as if there are gaps between letters. Notice how in the top instance, the word appears to be split into fl-ywe-bmaster whereas the bottom example flywebmaster reads as one unit.

Vertical Type Vertical type is difficult to pull off. By default, it is difficult for the eye to follow or read vertical type. It is also difficult to incorporate it into a layout, considering that its shape varies according to the width of the letters. A solution to this would be to left/right align the vertical type or change its orientation. Capitalization may be applied to remove the pointy descenders and ascenders which may appear with letters like "y" and "b" as seen in the third example. Changing the orientation also takes care of the previously mentioned legibility problem.

Stretching Type Letterforms are designed based on proportions. Stretching type takes away the qualities of the original font. As you can see in the bottom example, changing the size is an alternative that preserves the character of the real typeface.

Drop Shadow Computers are powerful and provide us with many options of treating type. Why abuse this power? Drop shadows and such are a good way of emphasizing on specific words. Excessive use of the drop shadow looks cheesy. If you are convinced that you need to have a drop shadow make sure you incorporate it with subtlety as shown in the bottom example.