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.
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
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.
CA Texteron
Metrisch
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.
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.
Fibon Neue
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.
By
