Typeface is Important to Your Website

18-Sep-2019 10:39 AM Website Design

Choosing a font is pretty hard for designers as there are many to choose from while only a handful are best suited for design. Some of the mistakes committed while designing websites are related to font. Here is why typography is important and what to keep in mind while building websites.

Typography is important for a website because, say what you may about images and the design elements of the website, a user always looks for textual content. Text is the major source of information and it is important for people to read your content properly.

The art of arranging content in your website, presenting information professionally and presenting the information in a readable format is called typography. Designers must know different typefaces because at the dawn of print, typography was a specialized occupation. These days, every designer must know it.


Why is Typography Important?

  1. It reflects professionalism and communicates the nature of business: When you visit a website, the font and the size will actually tell you what sort of a website it is. The appropriate usage of text font and the right size gains trust of potential customers. A good font and size will add benefits to your marketing. A good typography makes the potential customer feel secure about your business.
  2. It is attention grabbing: The font must be as clean and legible as possible to attract attention. You must use fonts that are easy to read. The web copy must have the correct choice of font, color and text size to attract your audience.
  3. It conveys a certain mood: Web copy about certain businesses must use certain fonts. For example, a web page on a video game must have a playful font. A website that is selling a software must be plain, simple and professional.
  4. You can establish information hierarchically: In a web copy, designers can use different font size to place content according to their importance. They can determine where the title can go. The title must tell the audience the gist of what the website is about. Less important text can be placed below the title.
  5. It builds recognition: Using large fonts will help the audience remember your brand, adding to your brand recall, and it works as an identification for your user.

Improving Typography

Readability and legibility:

The readability of a bunch of text depends on content and its typography. Typography involves selecting the font family, its size, letter spacing, line length, and line spacing. The letters must be arranged in such a way to facilitate reading.

Legibility means the capacity of a reader to distinguish between individual characters. A single typeface may have multiple fonts such as bold, italic and condensed that can be applied differently. For a blog post, serif typeface will read better. Tracking or kernig, which is the spacing between individual letters, improves readability.

Font size:

Make sure to use 14 pixels as your font size for the text because it shows well on desktops and mobile devices. The font color also matters in a web copy. Black font on a white background never goes out of style because the sharp outlines and letters become easier to identify and distinguish. Medium, a blog provider, uses 22 pt fonts.

While choosing fonts, it is important to distinguish between a ‘serif’ and a ‘sans-serif’. A serif typeface has small lines at the end of the stroke of the letter. It is sometimes referred to as Roman typeface because Romans had the habit of carving lines on stones. Sans-serif typeface has no lines at the end of the strokes. It is referred to as ‘Grotesk’ or ‘Gothic’ fonts.

‘Script’ and ‘decorative’ are another distinction of typefaces. Script mimics handwriting or calligraphy styles while decorative typefaces focus more on ornamentation.

Font color:

You can use Colorable to test the contrast between font color and background. Adjust the contrast checker to see what font colors you can use against the background. The tool will immediately tell you if it is a fail or good to go.

Whitespace:

Whitespace is important for a website because it allows breathing space for headings and paragraph text. You must add whitespace wherever you can – in between the lines, between headings and paragraphs, etc. Adding line height will improve readability too.

Underline links:

Links must be underlined: In a web page, backlinks are important for SEO. You must distinguish between normal text and links. Links must be underlined with a different color. When you hover the mouse over the link, the style must change.

Line length:

This is the final thing to consider. In a sentence the ideal number of characters must be between 50 to 75.

Fonts Add to Load Time

While choosing a typeface, keep the load time in mind. If a website loads slowly, it does not matter how much you like the typeface, you must think of an alternative. Just like images, even fancy typefaces will add to load times. When selecting a typeface, test for website loading speed. So, use limited number of typefaces, and select those that you plan to use.

Examples of Websites

Example 1: Ixigo


Ixigo is an airfare, hotel and travel aggregator. Notice how the headline is of simple text delivering a crisp message. The background image is not too bright, and the font used is friendly. There is plenty of whitespace.

Example 2: Skylark Drones


The Skylark Drones website has plenty of whitespace and the fonts are legible with ample space between the letters. The line height is good too, making the text readable.

To conclude, fonts determine the usability of a website and there are subtle things that can create a huge impact. Successful websites pick up fonts very carefully after some deliberation. Font styles build brand identity, conveying different messages. You can use fonts to psychologically influence your readers.

Verbinden Communication has designed and built websites that have worked well for many businesses. Contact us to assess your existing website and build a new website/web application for your business with the right fonts.