09 Sep Understanding Web Fonts

Websites use many different fonts in their design, each one providing a distinct visual effect for users to experience, so they’re very important for your website design strategy overall and will influence how people perceive your content.

Fonts seek to create a greater meaning  and by a thoughtful and deliberate selection of font, size, colour, layout, alignment, and other factors it can affect the design of type on a page. There are two major classifications of fonts to choose from: serif and sans serif fonts.

Sans serif fonts

A category of typefaces that do not use serifs, which are small lines at the ends of characters. Popular sans serif fonts include Helvetica, Avant Garde, Arial, and Geneva.

These fonts are without serifs; no extra details are found on the end of each letter.

Serif fonts

Serif have extra embellishments at the end of stokes; some call them feet or tails.

Some of the most used serif fonts include Times New Roman, Garamond, Baskerville, Georgia, and Courier New.

Web Safe (Web Friendly) Fonts

Computers, mobile phones, and tablets usually come with Web Safe fonts pre-installed. Fonts that are installed on a device (like mobile or web) are readable and look the same across browsers and devices.

Many computers have access to only a few of these fonts. As a result of CSS2 specifications, font choices on the web are currently limited.

Here are the popular web safe fonts for HTML and CSS:

• Arial (Arial is a popularly used sans-serif fonts)
• Times New Roman (Mac OS equivalent is Times)
• Verdana
• Georgia
• Courier
• Helvetica (Helvetica is one of the highly trusted web safe fonts. In designs, when other font falters, Helvetica make things better

Other popular fonts:

• Impact
• Lucida Console (Mac OS equivalent is Monaco)
• Lucida Sans (Mac OS equivalent is Lucida Grande)
• Palatino
• Tahoma (Mac OS equivalent is Geneva)
• Comic Sans
• Trebuchet MS

When using any of these fonts—especially the ones from the second list—it’s a great idea to include a few options to fall back on in your CSS.
A Web page is built using HTML (the Hypertext Markup Language) and CSS (the Cascading Style Sheet). In HTML, the structure is provided by HTML, and in CSS, the layout (visual and structure) is provided by CSS.

Common Font Mistakes

It’s a common mistake for new web designers to lack consistency in their font selection. Using CSS to control font properties is good practice for all your pages, since font family, size, colour, line height and weight should all be set globally.

The heading styles for h1, h2, and h3 should also be set globally. Globally setting link styles is also recommended. It is not a good idea to choose fonts with too much similarity, and it is better to choose something that is appropriate based on both the font style and the design of the site. The body text is usually written in sans serif fonts with serif headings.

Website Font Examples

This section contains examples of websites that demonstrate effective font usage.

The importance of a website design strategy should not be underestimated. If you’re ready to create a website your customers love, SOMS Digital Agency is ready to help you get started.