Advertisement
  1. Web Design
  2. Web Typography
Webdesign

A Guide to Selecting Custom Fonts for Your Website

by
Length:ShortLanguages:

In the early days of web design, typography was somewhat overlooked. Font choices were quite limited and so the biggest decision made was often “serif vs. sans-serif”. How times have changed.

The modern web provides an enormous amount of fonts to choose from. Plus, design and CSS have evolved to the point where typography is often front and center of a site’s look and a key to its accessibility.

In short, we’ve gone from having almost no choice to a nearly unlimited palette of options. That means we need to make the right decisions early on in the design process. With that in mind, here are some best practices to consider when choosing custom fonts for your website. Alongside each tip, we’ll provide some examples using a selection of beautiful fonts available with a subscription to Envato Elements.

1. Readability First and Foremost

Whether we’re talking about typefaces for headings or body text, readability should be a top priority. This is especially important when it comes to mobile devices. While you might get a heading to look both attractive and easy to read on a large desktop screen, not every font is ideal for a phone or tablet. Try to avoid characters that are overly wide, unless you’re certain that headings will be kept to a minimum length.

Body text should be clean, with enough line and (where appropriate) character spacing to give content some room to breathe. Lines or characters that are too close together will result in content that’s difficult to read.

Overall, typefaces can be fun and stylish, but making sure they are readable is key.

Appareo Medium

Appareo Medium by kimmydesign
Appareo Medium by kimmydesign

Bw Modelica Font Family

Bw Modelica Font Family by bwtype
Bw Modelica Font Family by bwtype

2. Use Fonts That Appeal to Your Audience

One of the first things you should do when setting up a website is to think about your target audience. Demographic information such as age, gender, level of education and income should be prime considerations. Fonts define character, and are an important part of appealing to the people you’re looking to reach.

For example, a website for a luxury car dealership is going to benefit from a font that mirrors the luxurious presence of the product. A children’s entertainer, on the other hand, will be well advised to opt for something fun and informal.

Cormier

Cormier by MehmetRehaTugcu
Cormier by MehmetRehaTugcu

Lunchbox Regular

Lunchbox Regular by kimmydesign
Lunchbox Regular by kimmydesign

3. Create a Distinction Between Content

If a page has several sections of text content, the use of a good header font can help users distinguish one from the next. A tried-and-true way to accomplish this is to use different font styles for header and body text. Often, we see websites that use a serif font for headlines and a sans-serif for content. While it’s perfectly acceptable to use the same type for both header and body text, you may want to consider a different font weight or color to ensure that headings stand out.

Another strategy to consider is the use of glyphs or icon fonts (though directly using SVG to decorate your web page does tend to give more control). For example, using an arrow icon next to a header will help it to stand out. This can be setup through a CSS pseudo selector to automatically display before a specific heading tag.

Avaline Extras

Avaline Extras by kimmydesign
Avaline Extras by kimmydesign

CA Texteron

CA Texteron by capearcona
CA Texteron by capearcona

Metrisch

Metrisch by formikalabs
Metrisch by formikalabs

4. Fonts Should Complement Each Other

One aspect of great typography is that, while the fonts you choose can be different, they should fit together in some way. As an example, you probably wouldn’t want to use two opposing serif typefaces together for heading and body text. The unique way in which serifs are designed could cause a bit of a clash when multiple styles are combined.

Still, this is a bit of a subjective area. We all have different tastes and communicate in our own ways. When picking out fonts, use your own best judgement as to what goes together.

Bw Glenn Slab

Bw Glenn Slab font family by bwtype
Bw Glenn Slab font family by bwtype

Bw Glenn Sans

Bw Glenn Sans font family by bwtype
Bw Glenn Sans font family by bwtype

5. Limit the Number of Typefaces Used

With so many delightful choices, you might feel like the proverbial kid in a candy store when deciding which fonts to use. But to make the most impact, you’ll find it best to limit your designs with no more than two or three typefaces. That will help to create some balance in your design and generally make things easier for users to follow.

Furthermore, loading custom fonts does take up bandwidth and server resources–something which could have real impact on load times. So, to keep things looking and performing at a high level, limit the number of fonts used on your website.

Catalina Typewriter

Catalina Typewriter by kimmydesign
Catalina Typewriter by kimmydesign

Fibon Neue

Fibon Neue by hederaedesign
Fibon Neue by hederaedesign

Harness the Power of Web Typography

The sheer variety of available fonts, coupled with the powerful methods to implement them, have brought web typography out of the shadows and into the spotlight. Type provides designers with the freedom to express their creativity through more than just graphics.

And, with over 1,300 available fonts, Envato Elements is a vast resource for keen typographers. For the price of a monthly subscription, you’ll have unlimited access to fonts and a whole lot more. It’s a great way to tap your creativity.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.