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.
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.
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.
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 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.
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.
This is the final thing to consider. In a sentence the ideal number of characters must be between 50 to 75.
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.
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.