Typography for Websites
Written by: Conrad Davenport
October 6, 2015
When studying design principles, for both web and print, there are some common elements that are discussed first before getting too deep into how design works best. These topics often include color, composition, the use of white space, and typography. Typography is one of the most underrated parts of web design and can often be the difference between a site looking dated and modern, and is a reflection of the quality of the design.
A Wider Selection of Fonts
One of the biggest advances of the last decade in the web industry that often goes unnoticed by the average user is web fonts. No longer are web designers restricted to the standard fonts that come with Operating Systems such as Times New Roman, Arial, Georgia, and Verdana. Thousands of fonts are now safe to include on websites affording designers greater flexibility with their designs and the ability to better mimic the stylings and typographic treatments that have always been seen in print compositions.
Fonts Communicate Emotion
Whether you realize it or not, the font that you use in your branding and on your website communicates emotion to the person reading it. A serif font (a font with “feet” at the end of letters) often communicates emotions such as: established, reliable, respectable, and traditional. This is true because serif fonts were the “original” font choice. When you look at ancient documents and calligraphic examples, you will typically see fonts with serifs. A sans-serif (translated as without serif) fonts are often used to communicate emotions/tones such as modern, clean, and stable. There are obviously exceptions to the rules but this is typically the norm. In addition to serif and sans-serif fonts there are also display and script fonts that are typically reserved for headlines and larger font sizes to insure readability. Finding the right combination of fonts (but not too many) is crucial to communicating the correct tone/emotions to your clients.
What About Mobile?
Almost every aspect of web design requires this question to be asked as mobile changes how we do business and our design/development process on almost a daily basis. This is especially true with font selections. As we talked about above, it’s essential to reserve display/script fonts for your headlines because these items become more and more difficult to read as you reduce the size of the screen. Even serif fonts can prove difficult to read at smaller sizes because of the extra bulkiness of the letters due to the serifs. This makes sans-serif fonts ideal for smaller body copy that is to be read on smaller devices.
A Case Study
A great example of this is the newly revised Google logo. For the last 17 years Google has relied on a serif font for it’s logo, even when it was revised and cleaned up in 2013. As Google has moved more into the world of mobile and needed to insert their logo on smaller and smaller devices, they came to terms with the fact that their logo needed to be perfectly readable, legible, and rendered on devices ranging in size from a 2.5 inch Google smartwatch all the way up to a 50 inch TV screen. Just last month (September 2015), Google launched their new logo looking into the future. This revised logo moved to a sans-serif font that trimmed off some of the bulk and excess (serifs) to provide a clean and clear experience on device screens of all sizes.
We work hard to determine the best font selections based on your needs, your existing brand, and to provide your clients with the best user experience possible. If you would like to learn more about our process and how we can help your company, please give us a call at (410)848-4737 or contact us online today.