I’m very font of you. What your website’s fonts say about you
Have you ever seen a lawyer’s personal website written in comic sans?
Or maybe an artist’s personal portfolio displayed with the expressionless font of a computer?
The font you choose for your website says a lot about you and that is because the font is a website’s voice. Text, and the subtle way it is displayed is your medium of communication between you and your visitors. It is the most salient and foundational building block to your user experience. A website without a font is a website that has nothing to say.
In picking a font for your website you’ll want a crystal clear idea of what your website is about. A lawyer would probably prefer a font that speaks authoritatively and an artist might want something more expressive or more unique. This article will help you understand your website’s voice and pick a font that is right for you.
Before even looking at all of the fonts available, the very first step must be clarity. What is your website about? What is the purpose of your website? The clearer your vision, the more succinct the font will be with it. During this part of the process, it helps to discuss your vision with someone else, ideally someone with experience in design, to assist you in establishing an aesthetic to your website.
Once you have a defined vision you can then start to think about typography.
San Serif and Serif.
Though the language of fonts is one of subtlety, nearly all fonts can be placed into one of two categories, either serif or sans serif. A serif is a flourish placed at the ends of each line of a line of a letter. For example, the curved flourishes of American Typewriter present a particularly good example of a serif text. Each line ends with a slight curve, or certain letters have extra dashes for seemingly no functional reason outside of style. In contrast to the world’s most famous font, Arial, a font so decidedly without (or sans) serifs that it is considered the most readable font ever produced. What do these fonts say? Put them side-by-side and their personalities emerge.
You can see that the world’s most popular fonts stand on their own because they have their own style. What makes up a font’s style begins with serif or san serif and gets developed further through the art of typesetting. Typography comes with its own dictionary of terms all of which come together with a single letter in a font – this is why it is best to seek the help of a specialist when designing your website.
*A sample of a style guide
Of course, you will need a primary font, one that speaks volumes about your business, but you have probably never seen a website designed in entirely one font. To make a professional website you will need to diversify with a secondary font and these two fonts need to compliment each other. Below, are examples of sites with fonts that compliment each other.
*Notice the difference between the banner text and the text for the menus and icons. A subtle distinction but one that communicates professionalism but at the same time accessibility, two themes that were important to this client and their product.
*Notice the intense stylization of Provocateur Media’s provocative logo and then the slightly, but only slightly more reserved style of the rest of the text on the site. The font gives a voice to the site and makes it stand out in a way that embraces the company’s vision.
“The Beauty of type lies in its utility; prettiness without readability serves neither author nor reader.” –James Felici
The difficulty that picking the right fonts presents is finding the balance between form and function. Helvetica is the most popular font in the world because it is highly readable and has a hint of personality as well. It’s readable like Arial but not as exuberant as Bodoni. Typographers throughout history have wrestled with this problem. Paul Renner, for example, dedicated his career to designing the perfect font, Futura, both beautiful and readable and somehow, optimistic. However, Renner’s commitment to type wasn’t enough as the font has been altered 15 times since (its most recent evolutions: Futura Classic and Futura Next). This problem presents itself in other ways as well.
Another thing to consider in is safety. That’s right, fonts can be dangerous, and no, I don’t mean branding your site with Comic Sans. Some of the more audacious and unique fonts available on the web are not web safe. This means that while they may be available to your operating system with a specific browser, they are not available across all browsers and operating systems. To take the risk and design your site with an unsafe font could result in a completely different, and potentially bad, looking website. Generally there are 26 web safe fonts guaranteed to work on all platforms and operating systems, however, thanks to Google fonts, this number as increased exponentially.
In this way, designating a selection of fonts for your website is more of an art than a science. Professional designers are experienced with what works in font design and monitor its ever-quickening evolution. Finding what will work comes down to experience meeting vision. For this reason we offer a free mockup as a way of coming together with our experience to give your vision a voice.