Five Typography Tips for your Website

by | Jan 25, 2018 | Responsive Website Design, App UX Design, Mobile App Development

“It’s not what you say, it’s how you say it.” In this case, the “how” is which of the hundreds of thousands of fonts you choose for your website. In “Web Design is 95% Typography”, Oliver Reichenstein says selecting the best font enhances the page’s “readability, accessibility, usability and overall graphic balance.”

 

Help out your web visitors and yourself by following these five easy type tips.

 

1.Less is more

 

642285807

 

Limit the number of fonts on your web page to three. By combining multiple font styles, the words fight for attention, and often the message in the words is lost.

 

Additionally, ensure the fonts you choose work harmoniously. For example, don’t select a heavy and densely spaced font like Impact and pair it with the serif and spaced Times New Roman.

 

 

2.If it ain’t broke, don’t fix it

 

Helvetica Vs Arial By Harajukumatt 1There’s a reason popular fonts, like Arial and Helvetica, are so well known. They are easily legible on mobile and desktop websites and are available on all website hosting sites.

 

You might be compelled to create your own font or download a custom one of third-party websites. This can cause a few problems. Because the popular fonts are so common, people can read them faster, allowing them to quickly read your pages and understand your business. If the user has trouble discerning your font, they might stop reading. Further, it’s important to remember users are visiting the page for information, not the font.

 

3.Be accessible

 

Screen Shot 2017 09 17 At 9.13.47 Pm

You never know who will visit your website. Therefore, it’s important to be as accessible to the general public as possible.

 

First, avoid coloring your type green or red, as these are the most common forms of color blindness. Over eight percent of men are color blind, so ensure your website accommodates them. While you can still use green and red, give another indicator to ensure their importance is understood, like an asterisk or bolding the text.

 

Secondly, do not blink text on your web page. This can sometimes cause seizures and is also very distracting to visitors.

 

4.Size matters

E1E10E19786218786B3E91A9811Bfa18

 

When selecting a font, make sure to test it in a variety of sizes, weights, and formats. A font that might look great as body text could be illegible as a bolded section heading. Try out any and all use cases for the type to ensure its legibility.

 

Further, be mindful of the devices a visitor might use to access your web page. Type that looks great spanning the top of a desktop page needs to be modified in the mobile version. For body copy, find the balance between easy legibility and infrequent website scrolling.

 

5.STOP THIS

 

Avoid All Caps

Capitalizing all letters of a word is not only distracting, but also incredibly difficult to read compared to fonts in lower-case, according to Legibility of Print by Miles Tinker. Of course, capitalizing acronyms or your business name in a logo is perfectly acceptable but limit its use.

Not sure if you are ready for SEO services?

That's ok with us!

Fill out the quick survey and we will do the research for you.

Intraspire's Austin, TX SEO experts will conduct an audit of your website and schedule a quick, 30-min consultation to discuss our findings.