You know the importance of live text in creating semantic markup that is browser compatible and improves search engine rankings.
The problem is that we want our designs to be enhanced by typography, so relying on web safe fonts doesn’t always cut it.
From large headlines to smaller body copy, typography has the ability to transcend pure utility and accomplish the design’s goal of communication and user interaction. Throw usability, readability, and accessibility into the mix and it’s easy to see how one can get tripped up.
Typography doesn’t have to be a limitation for the designer. Simply ask yourself the following questions to make the correct type decisions on the web.
1. Am I Limited to Web Safe Fonts?
Before we get carried away, let’s consider the technical limitations that might prohibit you from using a certain font. You don’t want to be told later that only web-safe fonts can be used when unique fonts are central to your design. You may have to meet certain size requirements, so standard issue fonts may be your only bet.
When unique fonts aren’t an option, web safe fonts are available. Web Safe fonts mean that they will be extremely common on most versions of Windows, Mac, Linux etc, so they will be viewable by more or less everyone.
If you’re not limited, plenty of font embedding services are available that are SEO-friendly, such as @font-face, SIFR, Cufon, and FLIR. Each service has its own implementation and benefits. Experiment a little and try a new font from time to time. Soak up inspiration in web design galleries and foundries to see what’s current now. If you’re not sure what a font will look like in use, visit Font in Use to get an idea of some real world application.
Fonts in Use is a helpful site for determining how specific fonts appear in real world application.
2. What Is Its Purpose?
Once you receive the text content for a website, you must establish its purpose. Who is the content written for and how much is there? This will effect the style of fonts you chose. Consider the following depending on each scenario:
If you have large amounts of text – Choose fonts that are meant to be read for long spans of time. Many times long paragraphs are set to the browser default because you can trust that text will be readable.
If you have small amounts of text – Shorter bursts of text, usually delegated to headlines and pull-quotes, can be enhanced through unique, decorative fonts. Of course, not all situations call for a novelty font. In this case refer to question three.
Newspaper style websites such as Wired.com face the challenge of accommodating a large amount of text on the homepage. As readability is important, a common trend on sites like these is to use a black text on white background color scheme. Red or blue is often used an an accent color. Additionally, the grid-based approach to the layout ensures the large amount of information is organized effectively.
Conversely, we are seeing examples of expressive typography more than ever. Popular font embedding services such as @font-face have made this achievable. In the above example, hand-drawn characters add a sense of authenticity to this restaurant which specializes in great, full-flavored food. Browse through the rest of the site and you can see the rest of the attention to detail – from custom-tailored copy to illustrated elements, all elements serve to reinforce this image of a caring and diverse place to eat.
Also consider the text hierarchy in defining the purpose of the content. Define hierarchy through the use of the type size, color, weight, case, and normal or italic styles. Where you place type also has equal importance as users will react differently according to where it’s placed on the page. For instance, the type in the heading above commands much more attention due to its relative size in relation to the headings underneath. More so, type in the sidebar is viewed as subordinate to the rest of the content.
3. Who Is Your Audience?
There’s no hard and fast rules when it comes to web typography, and you may find your target audience plays a significant role in how to present information. Different audiences have different expectations are far as the look and feel of a website, so understanding their tastes plays a large role in how they perceive your brand.
Oftentimes, you may need to work within existing brand guidelines, and this may mean some of specific typefaces can’t be used online directly. In these cases you must address the client and ask if it’s okay to deviate from these brand guidelines to enhance search engine friendliness.
The apple-inspired approach to web design has always worked successfully for the app industry. Common characteristics of this style include a san-serif typography, grid system, subtle gradients, effective use of white space, icons to explain text meaning, and a clear and user-friendly navigation. Icons and typography should work together to create a seamless design.
User experience is at the top of the list of priorities for most e-commerce websites, but that doesn’t mean the design has to be boring. Free People tapped into the culture of the demographic it serves by delivering custom typographic treatments that enhance the visual style of the site. When fonts are embedded in images, text can be used in a variety of creative ways while sacrificing search engine visibility. This sacrifice should not be taken lightly, but for an established retailer such as Urban Outfitters, this won’t effect their profitability.
With the advance in web technologies in the past few years, the perfect web-safe font isn’t out of reach. The key is to prioritize your goals for each web project; some clients may prefer retaining their brand identity while some are willing to make some sacrifices in exchange for things like search engine rankings. Whatever the situation, use good web typography to enhance the user experience of your projects.
What things do you keep in mind in regards to web typography that I might not have touched upon?