When it comes to designing your stunning website, there’s a lot to pay attention to. Between writing your content, choosing the pixel-perfect background image, and making sure you’ve connected your social media channels – some basic elements may fall by the wayside. And if there’s one thing that you don’t want to overlook, it’s your website’s fonts.
Typography literally has a lot to say, as it can evoke more than just words. If you’re not an experienced designer, the problem you might be facing is understanding the typeface that will fit your brand and voice the best. Worry not, as we’ve come up with this handy guide to help you choose the best fonts for your website:
Make sure your fonts match your brand’s tone
When it comes to your fonts, web safe or not, you want to make sure it matches your brand’s identity. PSA! Trends are exactly that: trends. Just because Fashion Week saw a unicorn going down the runway doesn’t mean you’ll adorn yourself with a horn for the season. The same goes for your online presence. You don’t have to follow trends if they prove to serve against what you’re trying to go for. If it just doesn’t match your style or brand, it wasn’t meant to be. So, 2018 might be described as the year of “bold” design, but your main concern is to be memorable and true to your values as a brand. Always remember what Coco Chanel used to say: “Fashion fades, only style remains the same.”
📷
Rank your fonts by importance
Like the saying goes: “three’s a crowd.” As an important rule of thumb, remember that you should never use more than three fonts on your website. Moreover, each of these fonts should carry different levels of importance. When choosing a color palette, the process usually consists of finding a primary color, secondary color, and an accent color. You can essentially use the same pattern with your typography:
Your primary font is the most visible one, and should be used on the headers of your website. A suggestion: it would be wise that it matches the style of your logo if there’s text in it. In general, this is the font type that should be the most identifiable with your brand, even if it’s not the most used on your site.
Your secondary font will largely consist of your ‘meaty’ textual content. This includes paragraphs, descriptions, blog articles, etc. While the primary font can be catchy and original, your main goal for the secondary font is legibility. Don’t expect potential clients to inquire into your products/services if their retinas are burning after just 20 seconds of reading.
Finally, the accent font is the one that you’ll use for a very specific purpose. When it comes to websites, this is usually dedicated to calls to action. In order to attract the eyes (and clicks) of your visitors, you’ll want to choose a typeface that stands out from the rest of your pages.
If you need some help mixing and matching fonts for your Wix website, here are our designers favorite power couples (primary and secondary fonts):
📷
Learn the basics of font classification
You probably know the difference between Gothic, Roman and Grotesque fonts. But there’s a lot more to say about font types. This website, for example, will teach you a lot about the theory of typography. Yet, when you start, you should focus on the most important classification: the serif, sans serif and script fonts. Here’s a quick summary of each type, and when to use them:
Serif fonts have largely been utilized with print (books, newspapers, etc.). A ‘serif’ is a small line attached to the end of a stroke in a letter or symbol. For fonts, the ‘serif’ line can be embellished in different ways to give it it’s own unique look. Serif fonts are considered to be more classical and elegant, and will talk to older audiences.
Sans serif fonts are just that: fonts without serif lines attached. These are better suited for computer screens and smartphones. This is the reason why you’ll primarily find the use of a sans serif font on most websites. Unsurprisingly, they are the dearest to the heart of the younger generations.
Script fonts are modeled after 17th century handwriting styles. Like most font types, script has its own subsets, broken into formal and casual variants. For example, cursive is a form of casual script. If you’re really trying to get some attention with your text, a script will certainly help you attain it. However, it’s best to keep this style limited to titles, as reading script as paragraph text would most likely present a challenge to your readers. Closer to serif than sans serif, use script in your website design sparingly and with intent.
📷
Master the art of mixing fonts
Hundreds of gorgeous fonts are waiting for you in the Wix Editor, for free. And if you have a different one in mind (that you created yourself, or bought from a designer), that’s not a problem! You can easily upload your own font to the Editor in a few clicks. Now that you know where to find your fonts and where to place them, let’s talk a bit about how to mix them. The first thing you should do is get some extra help from FontPair. Like the name suggests, it will show you font combinations so you can make sure that you’ve chosen the best pair for your brand and website.
Afraid of messing things up? A helpful tip is to keep it in the (font) family. A font family is a group of related typefaces which vary in weight, orientation, width, etc., but not design. For example, Roboto is a font family, which includes the ‘normal’ Roboto font, Roboto Condensed and Roboto Slab. All three fonts have their own styles, but are cut from the same digital cloth. A sure way to maintain consistency, while offering variation, is to choose different fonts within the same family for your primary, secondary and accent.
📷
Know the weight (and size) of your words
When it comes to fonts (at least), size does matter. Once you’ve chosen your type scheme, you’ll need to decide on a size for large titles, for subtitles, and for paragraph text. For example, these are the ranges that we recommend for the Wix Editor fonts – but they can be a good guideline for any website:
Titles: 30-70
Subtitles: 22-30
Paragraph: 16-20
On top of the size, many other factors will impact the visual ‘weight’ of a font, such as emphasizing with bold, italic, or underlining. However, excessive use of these styles may steer you off your style track. Remember that font styles is almost like using a whole new font in your website, so don’t go overboard.
Type with the trends in mind
Since you’ve mastered the fundamental basics of choosing your fonts, it’s time to get a little creative. Design-wise, 2018 will be a very creative year, so expect to see daring layouts and color palettes all around the web. This is also a trend you can apply to your fonts, choosing exotic typefaces. In addition to “going bold,” something you’ll begin to see more is the pairing of serif and sans serif. What was previously a design “no-no” is now welcomed – so if it feels right for your brand, go for it.
The headings and subheadings of your website will be the best place to apply your funky fonts. An interesting fact: according to some neuromarketing studies, adding a more complicated font can slow your readers down. This gives them more time to absorb your message. However, we don’t suggest you go too crazy, as your audience shouldn’t have to struggle to get information from your pages. Usability always comes first.
Feeling creative and ready to boost your online presence? Create a stunning website with INTELLIGENT today!
*Source https://www.wix.com/blog/
Comments