Tag Archives: how to use fonts for website

Give Your Site A Fonts Facelift

Danish Ansari 0 Comment
• WordPress
• best fonts for my website, how should my fonts look like, how to use fonts for website, how to use fonts?, typography best practice

As we entered new year, we tried every possible thing to change our online presence in a better way so that it would look good for a newly visiting prospect. No doubt, our websites appearance affects our prospects purchasing decisions. Where we have tried and tested so many things, why not give a fonts facelift to out website so that it will drop that much needed impact onto your site visitor.

Let’s talk about some possible revamps we can do to our site, my suggestion is to start with typography.

Step 1. How Your WordPress Website’s Current Typography Looks Like?

Before even starting any changes to your site, assess what you have currently and most importantly how things are going on in your niche industry. I’ll suggest to analyze some top notch competitors of your niche. Look at the way their site is performing depending on how they have arranged their fonts and typography.

In order to evaluate a website’s typography, ask yourself the following questions:

1. From where the current font(s) came?

Are you aware of how your site’s current font selections came about? If your site uses the default fonts from your WordPress theme or they were chosen on a whim, that’s usually a good sign that they need to be changed. While they probably look good enough, they were not hand-selected to fit with your brand’s unique style. Consistency in design is key – from the images you use all the way down to the typography.

2. Is your fonts family complete?

Alright, so now after a lot of research and commitment we’ve finally found the best suited fonts those are meshing well with our site and giving a fresh new attractive look to our website. But is it complete? or just a shorter version of what’s going to be launched later. In short, the question that should come into your mind is whether the fonts you’ve selected is complete or not?

If you’re unsure of whether or not you have a complete typeface that includes all letters, numbers, and symbols, go back to the source of the font. There should be a preview field where you can enter custom text. Insert the following lines of text to ensure that all essential characters are present:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
àèéïöùüçûæÆœŒ
.,;:?!/[]{}()*-– —…“”‘’_
0123456789
≤≥÷+=≈≠±-·√°@€£$%&*|«»\<>/~”‘§¶©®™/

3. Are there any readability issues?

Mac users, I’d suggest you to download Font Book. Once you’ve digged up the font of your interest, install it in Font Book to test for readability issues. You can use this to:

• Check for a complete set (like with test #2 above).
• Preview the font digitally to get a sense for how it’ll appear on your website.
• Print the full character set at different sizes and styles to determine which ones are the most reader-friendly.

This also happens to be a great tool for storing your fonts and keeping them organized for the next time you want to give your typography a makeover.

4. How is it look on mobile?

There are some online free tools like Responsinator which makes it much easier to check for responsive compatibility easy. These same responsive checkers can also be used to review your site’s typography for mobile-friendliness.

The standard recommendation for cross-platform font sizing is 16 points or more. That may not be the case if you choose a highly stylized or tightly-kerned font, so be sure to verify that on one of these tools before committing.

You can also use this guide to popular font sizing to give you an idea of where to start with fonts facelift.

5. Is Your Font Color Reader-Friendly?

Revamping your site with the correct set of fonts and making the size ideal for reader isn’t the only thing to be done.

Nope, it’s also about finding the right color. If you haven’t experimented with this Material Design Palette yet, take a moment to do so now. You’ll see that regardless of which branding colors you select, the primary and secondary font color are always black or a shade of grey.

6. How about accessibility?

Web developers know all about how to make websites accessible. However, if you’re really looking to give your typography a universal-friendliness in this next iteration, pay closer attention to factors that may affect those who are visually impaired or color blind.

Start by running your website through Color Oracle. This tool will simulate how your website appears to those who are color blind.

You never know who may come to your website, so it’s important to consider these factors now while you’re taking the time to give your typography a facelift.

Step 2: Learn Typography Best Practice

Font choice is a personal decision, much like everything else in web design. So while I cannot tell you which fonts to use, I still think it’s important to lay out the best practices to follow while doing your research, testing, and implementation of new ones.

Here are the basic rules to follow:

• Match your brand: Select a font that follows the design rules you’ve already established for your brand.
• Keep it simple: Use no more than two or three typefaces across your website. That being said, it’s okay to use a font face that’s a little out of the ordinary, just make sure it’s easy to read.
• Maintain consistency: Use consistent font styling throughout the site. In other words, all headings should use the same font, size, color, and style. The same goes for all body text, navigational text, hyperlinked text, and any other types of text you use on the site.
• Create contrast: While consistency across font type matters, there should be a contract between headings and basic body text. You can do this by pairing a sans serif font with a serif or a cursive font with a handwritten one. Just be sure the contrast is striking, though not to the point of being off-putting.
• Check the color: As noted earlier, black or shades of dark gray work best for readability. There’s also the background color to take into consideration as well, so it’s important to pair colors accordingly (i.e. light text on a dark background and dark text on a light background).
• USE ALL CAPS SPARINGLY: All caps text can be very difficult to read. Either that or it may give off the wrong vibe. So, if you feel you have to use it, do so sparingly.
• Establish hierarchy: Just because the general rule is to use a font size of at least 16 points, that doesn’t mean all your site’s typefaces need to stick to that minimum limit. Headers, subheaders, and body text should be sized to establish a clear hierarchy in terms of what’s most important.
• Don’t forget about spacing: Once you’ve implemented the new typography on your site, you’ll want to optimize its spacing. If there are issues with lines spaced too closely with one another, fix the leading. If there are issues with readability within a line of text, you’ll need to adjust the kerning and maybe even the tracking. Ideally, each line of text should stretch no more than 15 words.
• A/B test before making a commitment: While you might be ecstatic about your new font choice, other people might not feel the same way. Do yourself a favor and make sure to A/B test your new font choice before fully committing to it. Your website (and business) will thank you for it later.

I hope these few fonts facelift tips and tricks will help you out in revamping your site to increase more visitors.
Leave your precious comments below if you are facing any challenges or if you want to add value to this blog post by sharing your experiences.

And yes don’t forget to read How To Use Social SEO To Increase Website Ranking and,

How To Increase Your Facebook Page Post Reach.

If you are web design pro, Top 10 Web Design Trends is for you.