There exists a documentary film that was released in 2007, simply titled; Helvetica. Now, don't go and grab the popcorn and cue up Netflix just yet. Although the documentary explores the origins of the creation, design, and global influence of the oh so popular Helvetica font (hipsters may now unite!) it is not exactly a riveting film. Quite boring at times as there are loooong sequences simply showing Helvectica being used on street signs. Still, after watching this film, you can't help but think about the impact typography has on our everyday life. Case in point: As I write this, iOS 7 was just released, and its controverial Andriod-like flatter icons, design, and font choice have brought good and bad reviews, and its affects have been felt in every coffee shop, hipster bar and bicycle shop from New York to Portland.
I could go into the history of typography and how wonderful and pixel perfect Gill Sans is, but I will leave that to much more qualified individuals. Checkout our friends over at I Love Typography for a more in-depth history.
Instead, we are here to talk about typography in website design. So how important is typography in website design? Simply put, it maybe the single most important design element of your site. Yes, breathtaking images capture our attention, but the real substance of a site is in the text. It has taken me most of my web design career to realize this simple truth. What good is a site if it doesn't properly convey a clear, concise and flowing message? What you have to say is only going to be recieved well by How you say it. Think about it...anytime you have ever had an arguement with the opposite sex and you say something in a ill-received tone (even if it was the right message), you are probably sleeping on the couch.
So here it is, a few simple observations and guidelines for typography in website design that we follow here at Haptic Design.
We encourage our clients to know the difference between the types of fonts, and choose wisely.
The two main types are serif and sans-serif fonts. A serif is a small line attached to the end of a stroke in a letter. So a serif font (an example is Times New Romans) has the lines and a sans-serif font (like Helvetica) is without those lines. These two classifications are not the only ones, there are sub classes and variations, handwritten typfaces, etc, but for the most part these two are the big ones. Using a serif font typically conveys a tranditional feel where as a sans-serif font gives off a more modern, and clean feel. We often use them in conjuntion with each other, but knowing where and how to use them is important in design.
What fonts you can use in web and what fonts you can't.
You can never, ever, ever use Comic Sans (sorry Stan Lee). Although true, what I am talking about is the actual functionality and legality of a font usage for web. Web fonts were limited to a dozen or so fonts in the beginning due to platform and browser cross-compatibility. But now with technology advancing, services like Google fonts and @fontface have made hundreds and soon to be thousands of fonts available for web use. As for legality, make sure the font is public domain, free for use, or you have purchased a license for the distributor to use the font. For our web designs, we primarly stick with Google fonts.
Padding, padding, padding, padding, padding and more padding.
This has become an ongoing mission in our office to make sure we have the correct and appropriate amount of spacing (padding) around the text areas in our designs. It frames in the text content and allows it to be easier on the eyes, differentiates from the rest of the design, and just looks better aesthetically. Other factors such as kerning and line height or equally as important in establishing a balance between readability and the overall desired look.
Size does matter (don't worry, I'm not going to make a short joke here, afterall I'm only 5'6").
In web typography, its essential to establish varied sizes of fonts for your headings. We recommend and work with our clients to establish between 3 to 5 headings with varied sizes and weights to set off the text content correctly. With the sizing, its desired to have enough of a difference between the heading sizes to contrast against eachother. Now, most of our clients use our Content Management System (CMS) EasyEdit, so we provide these in a simple dropdown menu of styles so when editing their content, they have options. But remember, consistencey is key. How you format the styles one page should carry out to the other pages.
Using typography as a design element.
Ever evolving in web design, using typography as a design element and not just as content gives a custom and unique look to each project and web environment. There are countless examples of great sites who do this, and do it well. Checkout Smashing Magazine's article that showcases some amazing work. You also may have seen the influx of inforgraphic posters that showcase this type of typography as well. I find that in our web designs, we try and match this to the client's needs. Sometimes it is a simple and subtle element, and other times, we go big and bold. It really depends on the project, but do not overlook this great best practice of design.
These are a few of the major guidelines, but there are more. If you are interested in learning, give us a call or comment below and well be happy to talk it over and see what is best for your web presence. Oh, and always remember, USING ALL CAPS IS A GREAT WAY TO GET SOMEONE'S ATTENTION AND LET THEM KNOW YOU ARE IMPORTANT OR MAD OR SCREAMING AT THEM.