How to pick the best font for your site

How to pick the best font for your site

There’s no way to quantify all of the font options available for website designers. Almost every day a new typeface shows up in my inbox or Twitter feed. But not every one of these typefaces – no matter how beautiful – is right for designing a website.

When it comes to selecting the perfect font, you have think about a variety of things including compatibility, load time and design purpose. Today, we have seven tips to help you select and use the best web font for your design project.

  1. Start with the Fundamentals

Working with web fonts is just like any other typography project. It starts with the fundamentals.

Serif vs. sans serif: There are other type categories but in terms of web design, almost every project is based in one of these options. (And sans serif typefaces are the dominant choice.)

Kerning, tracking and leading: The amount of space surrounding text can be just as important as the typeface. Kerning is the space between letter pairs; while tracking is the space between group dos characters. Leading is the amount of space between lines of text (aka line height).

Readability: When working with text for the web the number of characters per line can be important. Think about the size of the screen where text will appear and design it to be easy to read.

Hyphenation: Just don’t do it. Hyphens make a mess of text on screen.

Alignment and justification: Most applicable to large blocks of text but think about how text will align on the screen – left, right or center – and whether blocks of text will have ragged edges or be fully justified.

Number of typefaces: As with any project, no more than three typefaces … unless you have a really good reason.

Remember contrast: It does not matter what typeface you select if there is not enough contrast between text and the background for it to be readable. Elements that contribute to contrast include size, stroke weight, color and space.

  1. Consider Compatibility

One of the things that makes web typography difficult is that browsers are always changing and getting updates. You’ll want to select a typeface that is compatible with modern web interfaces used on both desktop and mobile devices.

Sounds easy, right? It may take testing across multiple devices to find something that works seamlessly.

You will have even more luck if you stick to a type family that is design for the web or by using an options from Google Fonts or the @font-face rule.

  1. Be Considerate of Tone and Message

Start with the type. Sometimes font selection comes almost as an afterthought; things will come together easier if you determine type options first. Then think about how the text will play in with other design elements such as color and images.

Choosing a typeface can put your brain into visual overload with all of the available choices. It’s easier to navigate through all the font clutter if you have an idea of what you are looking for from the start.

It is vital to ensure that the typeface you select matches the tone and messaging of the project you are working on. Here are some questions to help you map it out:

Is the project formal or casual?

Should text be bold or lighter?

Is the typeface for large text or small?

How will it pair with color or images?

Does the mood of lettering match the words being read?

  1. Think about Load Times

If a font does not load quickly, look for another option. Users have no patience for slow websites. No matter how awesome the typeface, it needs to load at near-lightning speed to be effective.

When selecting a typeface test it for speed. (Most type services will help you with this, including Google.) Then think about other ways to keep load times to a minimum.

Use a limited number of typefaces.

For each typeface, select only the styles you plan to use.

Choose only the languages you will use for a specific font.

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *