Font Choices in Web Design
Font plays an important role in the overall look of a website. It can give the impression that the person behind the site is professional, warm, whimsical, or adventurous if done properly. If done poorly, it can look unprofessional, clumsy, and sloppy. Lack of consistency with regard to typography is a common mistake on many sites. To know which fonts to use in web design, you’ll need to learn a bit about typography and how it affects the site’s readability for users. Read on to find out the most commonly used fonts, and how color and size affect your site’s readability.
Font Classifications for Web Use
There are, in general, two font classifications used in web design: Serif and sans serif. Serif fonts have additional elements at the end of the letters, which are often called feet or tails. Sans serif is a plainer style of text without additional details on the ends of the letters. In print, serif fonts are often used to make the text easier to read. Online, though, the opposite is true. For body text, sans serif fonts are more appropriate to keep the text looking as uncluttered as possible. Serif fonts are more appropriate for headlines to set them apart from the rest of the text. Most designers use a serif font for headline text and a combination of sans serif fonts for subheadings and body text.
It’s Not All Black and White
Contrast, color, readability, and size are all important when selecting web site fonts. Because colors from a monitor are created by light, text must be properly contrasted against its background to make it readable. Poorly contrasting text is a strain on the eyes. Black text against a pale background is often the most readable due to high levels of contrast. However, many decide to use a black background with white text, but this is often hard on the eyes. Other color combinations are acceptable as long as care is taken to ensure there’s lots of contrast. Pale neutral colors serve best as backgrounds, while dark colors like blue, black, brown, and dark gray serve well as text colors.
Does Size Matter?
Size is another important factor regarding your site’s readability. The three most popular units of measure for fonts are em, percentages and pixels. Em is a popular choice because it enables you to adjust fonts in finer increments. Percentages are useful because the font size is controlled by the user’s browser settings. Kerning, the space between letters, and leading, the line-height, also affect how your font looks. All of these settings can be controlled in the CSS.
Which Fonts are Easy to Read?
While there are thousands of fonts available, only a handful are considered as acceptable standards for the web. These web-safe fonts are: Arial, Times New Roman, Verdana, Georgia, and Courier. Other safe, though slightly less common, options are Impact, Tahoma, and Trebuchet MS. All of these fonts are widely used because they are found on most computers. Popular fonts for Mac computers are Helvetica and Times; these are the equivalents to Windows fonts Arial and Times New Roman, respectively. To ensure your site’s users are able to see the text the way you want them to see it, include several fonts in your CSS in case they don’t have the first one. This is called a font stack.
As you can see, even something as small as a choice in font can make a big difference to the ultimate appeal and image of your website. Partnering with professional, experienced designers is vital in order to end up with a website that does everything that you want. For great web design, contact Infintech Designs.
3110 Magazine St., #120
New Orleans, LA 70115