Basic Tips On Typography For Web Design

Basic Tips On Typography For Web Design

Sometimes even the smallest details can have a big impact on the way a website looks. Typography is a perfect example of one of those small details. It is also one of the most overlooked design elements on the majority of websites. Even if the rest of the layout and graphics are well-designed, the end result can be unattractive or difficult to read with the wrong typography.

There are a number of typography tips and tricks that you can use to improve the looks and readability of your website, however. Tweaking the following oft-overlooked areas can make a huge difference and possibly increase readership and the amount of time visitors spend on your site.

Simple Fonts

One of the biggest novice typography mistakes is choosing overly decorative fonts, like script fonts, on their websites. Decorative fonts may look good to some, but they are most likely a sure way to agitate the majority of your readers, as they are very difficult to read for long periods of time. Keep your font plain, simple, clean, and easy to read. Let your brilliant writing show you off, not fancy-looking text.

Color

As mentioned, text on a website should be easy to read and easy on the eyes. Although many novice web designers try to jazz up the looks of their websites by using flashy or unique color combinations, the effect is usually headache-inducing. Text that does not contrast enough with the background and brightly colored text is almost sure to lead to eyestrain. In general, text on a website should be black or very dark gray over a white or very pale background, and white text on a black background should be avoided in most cases.

Serif vs. Sans-serif

Serif fonts have small protrusions or accents at the end of each letter stroke, while sans-serif fonts do not. A couple common examples of serif fonts include Times New Roman and Georgia; common sans-serif fonts include Veranda and Arial. Serif fonts are deemed to be more elegant or classic, but they are not always best for websites. Sans-serif fonts, on the other hand, not only give websites a clean, modern look, but they are also much easier to read on bright computer screens.

Quotation Marks

Straight quotation marks are often incorporated into sans-serif fonts. However, curved quotes are much more aesthetically pleasing and they help the readers’ eyes flow into and out of a quote better. To make curved quotes type %ldquo; at the beginning of a quote and ” at the end of a quote when editing in html. Seems a minor point, but it’s the little things that make a big difference.

Line Spacing

Sometimes known as leading, line spacing refers to the amount of white space that is between each line of text. An insufficient amount of line spacing on a website can make blocks of text appear to be squished together. To make your website a little easier to read, adjust it to around 120% to 150%. Since different fonts look best with different line spacing, you may need to experiment with this until you get it perfect.

Also, break up long blocks of text into shorter paragraphs in order to leave more white space and make your website easier to read.

Kerning

Kerning refers to the space between certain pairs of letters. Some html or blog editors allow you to control this in the text areas, but for the most part this applies to text graphics, such as those created in Photoshop and uploaded as a .jpeg rather than typed out directly.

If the kerning between letters is too wide, it can make the text appear fragmented and disjointed. Decreasing the kerning helps bring letters that jut out at the top (like V and T) slightly closer to the letters on the bottom. Nestling the second letter slightly into the first letter’s space helps eliminate white space between the two letters, improving readability.

Typography is an entire art form in itself. The quick tips above should help your websites look better without a lot of study. For more resources, check out these typography sites.

 

Front Cover Image provided by Shutterstock

Image: Abstract dark blue design and typography background via Shutterstock

  1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>