The font you choose for your web design is critical in connecting with users, helping them navigate through and accomplish goals on your website.

Appropriate typography makes reading and communication effortless, while over-the-top fonts push users away from content. Finding the right typography for your brand and website not only optimizes readability, but accessibility and user experience through graphic balance.

We’ll go over some general typography guidelines for your web design, and our recommendations on unique fonts that’ll make communications clear, and your marketing messages stand out.

Eden’s Tips on Typography

Whether you’re selling iceboxes or insurance, these tried-and-true typography tips are something to write home about.

1. Limit the Number of Fonts Used

Using over three fonts in your website is unstructured and unprofessional, looking more like a child’s school project than your company’s website.

Keep your font families tight – one is enough, two is acceptable, three is the absolute max. If you opt for a duo, consider how they’ll complement one another.

For example, a basic combo of Georgia and Verdana are similar, creating a complimentary pairing.

2. Choose Fonts that Adapt to Various Sizes

With more and more web traffic coming from handheld devices, it’s essential that your font choice maintains readability and accessibility across multiple sizes and weights.

Your font must be legible on smaller screens, catering to the many smartphone users out there. Choosing a cursive script font, for example, may look cool and unique on a desktop, but crowded and unclear on a handheld.

Generally, you’ll want to opt for larger fonts – particularly with headlines – throughout your website to create an open, airy design that’s easy reading on the eyes. Larger fonts translate well to smaller smartphone screens too, further improving readability for growing mobile masses. We recommend a minimum 18x point font for body copy, while headline sizes will be dependent on your overall web design.

3. Never Use All Caps

Aesthetics aside, according to Miles Tinker’s definitive work, Legibility of Print, all-caps type severely reduces scanning speed in comparison to regular, lower-case type.

Okay, back to aesthetics: IT LOOKS TERRIBLE, AND KIND OF LIKE YOU’RE SHOUTING. SEE, IT SEEMS LIKE WE’RE YELLING AT YOU HERE, BUT WE’RE PERFECTLY CALM.

PERFECTLY CALM.

Yeah, we felt that chill up our spines, too.

4. Avoid Red and Green Texts

Colour blindness is a condition that affects more people than you’d think; 8% of men are colour blind, for example.

Steer clear of using red and green fonts in your web design if you can help it. These are the colours that are difficult to decipher for people with the most common form of colour blindness.

If you’re using red to denote something of significance – say, a Required Field section – and refuse to change, add a * or another symbol to indicate importance.

Get with the Times (New Roman), man

Now that you’re familiar with a bit of font & typography theory, we’ll go over some practical font choices and their strengths to help you make a decision on your site’s font.

You might recognize some of these (type)faces, along with some new ones:

For fashion-forward, chic websites, GT Walsheim brings that uptown funk to your brand.

Introduced to font families across the web in 2011, GT Walsheim has become a staple on many art and music websites. While it’s trendy and modern, its classy and professional, thanks to its 1930s inspirations from designer Noel Leu.

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

Used in typography for almost three centuries, you may recognize this font if you’re a history buff – it’s the font used to print the U.S.’s Declaration of Independence.

From the Declaration to digital, Caslon has made a smooth transition to the present, most notably used in The New Yorker magazine, and modern websites on the World Wide Web.

This geometric-based font continues to grow in popularity, chosen by big brands like Airbnb and Mint for their most recent website refreshes.

It’s a solid, sturdy font with a touch of style every few letters, giving LL Circular some edge and vibrancy.

The most notable benefit of this font is it maintains its readability, especially from a distance, without losing its aesthetic charm.

Arguably the most recognizable font on the web, Open Sans is best known as the go-to typeface on WordPress.

Labeled a ‘humanist sans-serif typeface’, Open Sans is your jack-of-all-trades font: it’s sophisticated, modern, highly legible, offers a fantastic reading experience, and provides unmatched range when using accents and non-Latin characters. It also seamlessly transitions across print, web, and mobile UIs.

Open Sans is a safe choice, but a strong one.

Complimenting your web design with an appropriate font makes communication clear, and helps customers feel comfortable. The more at ease they are, the more likely they’ll read your content, building trust, and improving your chances of doing business with them.

Eden’s web design team can help you communicate your marketing message through more than words. For a fresh, modern web design that truly embodies your brand, contact us today and we’ll get started with a FREE website design audit!