07 May Basic Tips on Typography For Web Design
In life and in websites, it’s the little things that count. Small details like font size, spacing and text color may not seem significant, but in fact they make a major difference in the ambiance of a website. Use the same care in selecting your typography as you do in designing your layout and graphics. Unfortunately this aspect of building websites is often overlooked, and it can make a terrible first impression if not done correctly.
Build a beautiful website by following these typography tips:
Use Simple Fonts
Do not make the beginners’ error of selecting ostentatious fonts like script fonts for your website. Some may admire the novelty of decorative fonts, but for the majority of readers, they are difficult to read for long periods of time. Let the focus be on the writing, not pompous text. Choose plain, simple text.
Though many novice web designers try to attract attention through bright, flashy colors, the effect can be like cheap wine. Do not cause eyestrain and headaches for your visitors by using text that does not contrast enough with the background. In most cases, text color should be black or very dark gray over a white or very pale background. Although there may be exceptions, avoid white text on a black background.
To Serif, or Not to Serif?
In typography, a serif is a small line protruding at the end of each letter stroke. Sans-serif fonts are those without serifs (“sans” is French for “without”). Well-known serif fonts include Times New Roman and Georgia, while common sans-serif fonts include Veranda and Arial.
Serif fonts are usually considered more elegant, but they are not always the best choice for websites. Sans-serif fonts, however, provide a sleek, modern look and are much easier to read on bright computer screens.
And I Quote…
Quotation marks are more important than you might think, and their style changes with various fonts. Sans-serif fonts often use straight quotation marks, but curved quotes are more aesthetically pleasing. They also more easily guide the reader’s eyes in and out of a quote.
To bypass the default quotation marks on sans-serif fonts and make them curved, type %ldquo; at the beginning of a quote and &rdquo at the end when editing in html.
Give Me Room
Line spacing, also known as “leading”, refers to the amount of white space between each line of text. Insufficient leading on a website can make text seem crowded and unprofessional.
To make your site easy to read, adjust your line spacing to around 120% or 150%. You may need to play around with this depending on the font you choose.
Also avoid dense paragraphs. Break up long blocks of text into shorter paragraphs to leave more white space and make your content easier to read.
Kerning is the name for the space between pairs of letters. While some html or blog editors permit you to control this in the text areas, this usually applies to text graphics like those created in Photoshop and uploaded as a jpeg.
Kerning that is too wide can make text appear disjointed. Making the kerning smaller brings letters that stick out at the top (such as “V” and “T”) slightly closer to the letters on the bottom. Nestling the second letter somewhat into the first letter’s space removes white space between the two letters, which improves readability.