Font Selection Guide for Web Designers, What You Need to Remember

Often when designing your website, it can be time-consuming to perfect every detail, especially seemingly small details that make a huge difference in the result. One such detail is the font in which you present your text. Today I’ll explain to you how to choose the pixel-perfect fonts for your web design project – the right way.

Readability

First things first, readability. Your website is no use to anyone if they can’t read it well. It’s important to realize that a lot of people will be visiting your site on a daily basis, people with eyesight problems and reading disabilities such as dyslexia. For this reason, refrain from using loopy, italicized or tightly compacted fonts that can be difficult to read.

It’s much better to use bold, clear letters, even if you’ve been itching to use that beautiful swirly font for your website since you were ten years old. If you do go for a thin and more elegant type of font, make sure the letters are bigger and legible.

The Font Loading Time Factor

Think about the amount of loading time your font will take. People visiting your website don’t want to sit around waiting for your favorite font to load.

With your website project, it’s a good idea to choose no more than three typefaces and to test each of their speeds. Once you’ve tested them, select the styles you plan to use on your website, then the languages, and keep things to the minimum to speed up loading time.

The Font Loading Time Factor

If you’re wondering what’s the difference between a font and a typeface then, let me explain it to you. They are not synonyms. A typeface is simply the design you choose for your text. The font is the result that is defined by size and style.

It is suggested that the recommended amount of typefaces for one website is no more than three – one for the headings, one for your text body and one for navigation. More than that and your reader will become distracted and won’t know where to look. However, if you’re a minimalist, one typeface will do the job just fine.

Serif or Sans Serif?

Credit: Wikipedia Commons

Now, a crucial decision must be made that is Serif or Sans Serif? For a website, Sans Serif is the better option. It’s often used for websites and PowerPoint presentations. The best way to describe the impact these fonts will have on your text is to say that Serif creates a more artistic and welcoming look, but Sans Serif brings a clean and polished, modern appearance to your website, so choose which you need in according to the type of information your website provides.

Color

Credits: Stack Overflow

The next step is to think about how your text will look on your website in your chosen font. Contrast is important – make sure the font color contrasts perfectly with your background, making sure that it stands out enough but doesn’t make your readers head dizzy.

The perfect example of what not to do is the color blue, on a dark background it can simply disappear, yet on a background in color such as red, it will hurt the eyes of anyone attempting to read the text on your website. Also, colors like blue are used to point out to a reader a link, so having any other parts of your text in blue can be mildly confusing.

Personally I prefer the general way that is white background with black text. You can check my recent project Logo Orbit for your reference. I suggest avoiding neon colors or ravishing shades of red or yellow as well as the text may be impossible to read.

Compatibility Consideration

One of the problems faced by those designing their websites for desktop and mobile is typeface to modern interface compatibility. You’ll need to spend an indefinite amount of time selecting the correct typeface that will work without problems on both your desktop and mobile website. It is because browsers are forever changing and updating, making it hard to find compatible fonts.

Thinking About the Tone and Message

When choosing the perfect font, it’s essential to envision your website and the image and feel you are trying to portray with it. Your font must mirror what your words are attempting to show your reader. What are the qualities you are trying to describe? How do you want your reader to feel? Think of the answer to these questions before selecting a font.

An inappropriate font will bring a feeling of something being out of whack in your website and will divert your reader from the matter at hand. Once you’ve got at least a vague idea of what you want your website to portray, then start searching for fonts which match the idea of what you would like in your head.

If your website is meant to be serious, a playful font wouldn’t fit the same way as a blocky font in a text meant to portray elegance wouldn’t work particularly well. Also, don’t use more than three fonts on your website or it may become confusing for those reading, it confuses the eyes.

Speaking of confusing the eyes, don’t space the letters too far apart or too close together. Lines of text should be not much more than 65 words long, readers like to scan text, and they can’t do so if the lines are incredibly long, so they may give up and go elsewhere to find the information they require.

Conclusion

Although these are the guidelines that I’d suggest to stick with. You are free to choose your way of creating your website, and you may use vastly different fonts and more than three typefaces if that floats your boat and if it works.

In conclusion, even though there are no clear rules on which font you should use to create your website, you must be careful when choosing the fonts for your website. You must not rely on personal preference and must choose the font that represents the ideas that you’re trying to show your readers. Remember not to overcrowd and to pay attention to contrast. Good luck!

Daniel Shane is a seasoned corporate branding professional. He started his career as a web designer and later progressed to become a branding expert. His twitter handle is @danielshane96

Leave a Reply

How To Infographics Money Making OFFBEAT Online Marketing Resources Reviews SEO Social Media Tips & Tricks Web Hosting WordPress
MyThemeShop’s Viral Theme Review
Do not See Order a Card Option in Your Payoneer Account?
Font Selection Guide for Web Designers, What You Need to Remember