This is part of our ongoing “Design Tips for Clients” series. Whether you’re one of our clients or you’re looking to learn about design, we’ll give you an introduction to color, typography, industry jargon and much more.
The typefaces and fonts used on your website play a role in developing its tone. There are hundreds of typefaces available for use, so how do you pick the typefaces that are best for your website and brand?
TIP 1: PICK A MAIN TYPEFACE THAT’S VERSATILE.
For online text, it is best to use a versatile san serif typeface. San serif typefaces are typefaces without the little lines at the end of the letters or characters, such as those found on text displayed in Times New Roman or Georgia typefaces. By versatile, the typeface should have different styles, such as bold, medium, light, or thin, so that you can differentiate or emphasize different elements as needed but maintain a consistent look.
Commonly used san serif fonts include Helvetica and Helvetica Neue. Raving Software uses Montserrat as its primary font for our online copy and information graphics. Is it any better than other san serif fonts? No, but it allows us to have a little bit of different look and is a very versatile font.
TIP 2: ALL TYPEFACES SHOULD BE LEGIBLE.
You can have more than one typeface used throughout your website and branding. However, too many fonts can lead to a messy and unappealing design. One rule of thumb is to limit yourself to 2-3 different typefaces.
For example, Raving Software uses Montserrat as its primary font and Raleway as a secondary font. Both typefaces are legible on a desktop and mobile device, as well as at smaller sizes. They’re fairly similar, so why are we using two typefaces?
Often, designers will choose one font to be the main font for the body copy of a website. A second font is employed to differentiate other elements. For example, Raleway can be used for headlines or photo captions. This helps to make different elements stand out without them becoming distracting.
This doesn’t mean you can’t use “fun” fonts, such as those that resemble handwriting (called script) or other unusual fonts in your website or branding. The Raving Software logo uses Monthoers, which is thin with elaborate curls at the end of letters. This typeface would be a bad choice for body copy because it would make the content difficult to read. However, it is legible for our company name while still standing out and injects some personality into our brand.
Logos and graphics are a good place to use the more creative fonts, but they still need to be legible and work at smaller sizes so that you have a consistent look across different platforms. In addition, make sure the typeface fits with your brand. There are a lot of awesome typefaces out there, but they don’t all work every business. Be clear with your designer on your vision for the company and what you want it to be so you and your designer can find the right typefaces for your business.
TIP 3: YOUR TYPEFACES NEED TO BE AVAILABLE ON MANY DEVICES.
The fonts displayed on a website are based on the fonts available on the computer. Designers will include an element called “font families” so there are set back-up fonts for your website if the visitor’s computer doesn’t have the default font. For example, if your website uses Helvetica but a user is on a computer that doesn’t have it, Arial may be listed as a back-up font. This ensures the look of the website is as close to the default design across devices as possible.
The font family approach works well for most serif, san serif, slab serif, and monospaced typefaces. However, it doesn’t always work for script or display typefaces. One way to ensure script and display typefaces can be viewed by all website visitors is to import the font from an open service such as Google Fonts. Another way is to download the font and have it uploaded to your web server (Note: Some fonts may have to be purchased in order for you to use them.)
TIP 4: USE TOOLS TO HELP YOU PICK TYPEFACES THAT WORK TOGETHER.
You don’t have to be an expert typographer to decide which typefaces you want to use or how to implement them. Your web designer will help you decide the best course of action for you and your website. However, it is good for you, as the client, to know why some text elements may not look the same on different devices or why you may not have access to specific typeface.
In addition, make sure the chosen type fits your brand. Script typefaces like Noteworthy or Sugar Candy give a fun, relaxed, and casual tone. If you want to a script typeface that’s more elegant or sophisticated, you would use something like Apple Chancery or SignPainter.
If you are interested in learning a little more about choosing fonts, we recommend checking out this information graphic from Designmodo, Inc. It goes into a little more depth about matching typefaces and ensuring legibility.
If you want to practice matching fonts, you can visit the archetype app. This app is fairly easy to use and let’s you see how two different fonts would look when used together. You can also adjust the size and spacing of the text. If you have a set vision of your website, this tool may help you to visualize and communicate your vision to your designer.
Finally, you can discover new fonts by visiting Google Fonts. Google’s service lets you sort fonts by categories and supplies sample text so you can see how the font would look. You can also see recommendations for fonts to pair with it, and type in your text to see if you like how your content looks when displayed in a font.
Is there a design topic you want to know more about? Let us know in the comments or contact us through email.