Oh fonts, you elusive little devils. Pairing fonts can be such a hurdle in designing a website, or anything, really. I recently went on Showit Live to talk all things fonts and pairing fonts. Showit offers such a great tool for building websites, and is my platform of choice for sure. You can import custom fonts for use in your website (make sure you have proper rights!), but also included inside of Showit are a lot of fonts that you can use without the hassle of converting or making sure you have proper usage rights. What I want to talk about today are some of the pairings of the included fonts in Showit to create the desired feel for your brand.
Let’s start with one of my favorite styles, a classic/elegant brand. Again, you can import other fonts in, but there are several great ones waiting there for you. I’m a huge fan of Times. It’s so classic, easy to read and you can modify it in so many ways. Here, I’ve designated that to achieve the look in the image, I’ve set the font spacing within Showit. Spacing is also called kerning, which means the space between each letter. Adding kerning to a font can not only make it easier to read, but can also give it a more luxurious feel. Here is one great font pairing for a classic, elegant brand:
Another great category for font pairings would be for a modern brand. Again, in pairing fonts, it’s always good to make sure the tones of the fonts match one another and that you’re not throwing too many styles in there, especially conflicting ones. Arial gets a bad rap all the time, but I don’t quite understand it. For body text, it’s fantastic in that it’s very readable, much like Times. Probably the biggest mistake that I see in using fonts is body text that is a font that is difficult to read. Body text is probably where you should be the least discriminatory against the font name and really go for something that people will read, that also suits the style of your brand.
Editorial is another favorite style of mine – so classic with a bit of boldness. I love to play with font sizes for something like this, and there are some great pairing options found right within Showit. You will notice that once again, I’m a fan of classic Times font for the body text. Any fonts that you can play with as far as making them bold, italic, etc. are great choices for varying things up in any design you’re working on. Sidenote: Geosans Light is not one of my favorite fonts, however, it does have its uses, and I set out specifically to use it somewhere in one of these pairings. Geosans is a font that I would not suggest using as body text, although I see it done quite often, because it is difficult to read in a large section of text.
Another favorite pairing style of mine is a whimsical style brand. This is where you can bring in those display fonts and have a lot of fun with styling. You’ll notice in this pairing though, I still stuck to my rule on the body font. I didn’t go with anything too crazy because it needs to 1. Be legible and 2. Not distract too much from the main fonts. If you go crazy with all of your fonts, it’s hard to draw attention to the points that really need it.
Now, I paired three fonts for each, but that isn’t to say that you can’t add additional fonts, but don’t go TOO crazy, and remember the number one rule: make sure they work together and aren’t sending mixed signals. Part of the reason that I paired them in threes, too, is that you can actually set styles for fonts right from within Showit – pretty cool, right? Here’s some great information on how you can set those for your style groups going forward so that when you add a new text area, the fonts are already set how you like them: http://wiki.showitfast.com/Style
What fonts are you using in your design?