Web vs. Print: Fonts
Often when a client comes to visit with ArrowQuick about a web development project, they bring ideas of what they would like to see their site look like. Sometimes, the client is caught in the print paradigm. That is, it is difficult not to apply print concepts to the web. Common demands we might get are: “I need my pages to display Garamond font.”, “We use Pantone 386 and Pantone 23 for our logo colors. Make sure that our colors on the web site are the same.”, “Our logo banner across the top of our page needs to be 8.5 inches across.” While all these are often important to the customer on their printed collateral, it is impossible to make all of these work on a web page. In the following series I will address the differences in web versus print and give some viable solutions that will allow your pages to hold true to your brand while not destroying the user experience when they visit your site. I will cover fonts, colors and size issues that occur in web site development and solutions that will work for you.
Fonts
Fonts on the web are much different than fonts in printed materials. Let’s look at fonts in printed materials first. There are thousands of font options that can be used to create your printed materials. There are fonts for logos, fonts for large amounts of text, even symbolic dingbat fonts for display. These fonts are typically used in design software to make your printed document look the way you want. When these documents are sent to the printer the font is interpreted and printed on to the paper. If the printer is of any quality, the documents will look the same each iteration of the document. This is a great thing when trying to establish a brand and look that is recognizable to your customers.
The web, however, works much differently. First, we must understand that fonts displayed in a web browser are pulled from the system fonts. Typically these fonts are Times New Roman for serif fonts and Arial for san serif fonts. Most systems come with these fonts so pages can easily access this font and allow the user to view the web page using these fonts. The problem arises when the web page designer sets the default font to be non-standard. This is typically set by setting the CSS body style to be a certain font type. For example, a client may wish to make all text on the page be Garamond. The designer will set the style sheet to body {font-family: Garamond;}. This is completely valid CSS and will work. However, if the viewer doesn’t have the Garamond font installed on their computer the browser will default back to Times New Roman or Arial. Now, you could ask the user to change their browser options to use Garamond as their default font. But, that degrades the user experience. It means extra steps to view your page the way you want them to.
So, it is important to remember that when it comes to fonts, the user can control how they view your page through the browser options. Users can only view the font dictated by the style sheet if that font resides on their system. You can see that it becomes difficult to dictate how your web page’s fonts are viewed in any given browser.
When it comes to fonts, the best solution is keep it simple. Let’s face it: It is more important that the user read your content and act, then it is the user be tickled pink that you used their favorite font, let say Comic Sans, to display your content.
So What is the Solution
When you are working with your designer, be sure to keep the fonts to basic fonts. We suggest “Times New Roman”, “Georgia” and “Helvetica” among others when using a serif font. If you are needing a sans serif font we suggest “Arial” or “Verdana”. If you happen to be a new business or in the middle of rebranding, it would be a good idea to consider incorporating one of these fonts into your corporate style guide.
If you must use a special font, request that your designer incorporate that into your style sheet. But, understand that not everyone, and in a few cases just about no one, will see your page as you expect them to.
Either way, find a web designer that understands this concept and the whole process will be a pleasant one for you and your users.
A Closing Word of Caution
Before we close this discussion, this must be said. The one thing you cannot do is make your special font available for download so that the user can install it and enjoy viewing your site as you intended. Unless the font is a free and open license font, there are copyright restrictions and the user must purchase the font from the font creator in order to install it on their system.
Next entry — Part II: Color.
March 2nd, 2008 at 3:30 pm
Fonts are a huge issue in many industries - web and print. Nice job.