Over much of the history of the Internet, typography has lacked a place of real importance in the layout of page, but the advent of web fonts, a critical addition to the CSS spec, allows web designers the chance to finally give on-page typography the treatment that it deserves. Not only does the web font format allow designers a way to up the visual appeal of sites, it also improves the quality of search engine optimization on each page. By disposing of old graphics that were created in Photoshop as a typographic workaround in the early days of the Internet, designers now have the ability to build web pages that are not only more functional, but more aesthetically pleasing. With this in mind, let’s review 5 rules that are helpful for employing web fonts on your blog.
Rule 1: No More Graphics
This rule requires an immediate qualification: if the element is typographical, then it should be deployed using a web font and not a graphic. Background components that might add layers to a design are still perfectly OK as graphic elements, but all of the on-page typography should be created using web fonts. The foremost benefit of this approach is that the text contained within typographic elements is now readily available for search bots to read. Beyond that, the browser is likely to do a better job of translating a vector format such as a web font into something elegant, rather than trying to make due with the sometimes murky appearance of rasterized graphics. The sharps edges of on-page fonts now look the way they were meant to be: sharp.
Rule 2: Use Only a Few Styles
Web fonts on pages should be limited to a handful of styles. It’s best to keep the total population of web fonts on a blog to between two and four different styles. This serves several purposes. First, it maintains a high level of readability, by allowing visitors a chance to acclimate to a specific set of fonts. Second, it allows a change of font style to convey meaning, so users understand that a specific type of header or body text might be important and should be noted. Third, it allows a blog to maintain a level of consistency within its branding.
Rule 3: Readability is Everything
Folks who use fonts on websites often feel compelled to employ highly stylized typefaces. Don’t. The goal of any blog is to provide value to the reader, and that means maintaining a level of readability that’s conducive to scanning large volumes of text quickly. If a font creates reading challenges, the odds are higher that a visitor will simply leave a website. This has far-reaching effects beyond losing a single visitor, as on-page time spent by website readers is now a critical metric that search engines rely upon while trying to determine where to send traffic. If Google knows that readers quit a site quickly, it’s less likely to direct traffic to that place. Keep a blog’s typography clean and simple, and only indulge stylized fonts when building elements such as headers and graphic elements that won’t be part of the reader’s regular visual flow.
Rule 4: Stay Stylistically Consistent
If a site has a light, artsy theme, the web fonts deployed there should not contradict that it’s core message. Deploying a font like Serpentine on a site dedicated to florid 19th Century English poetry can seem incongruent to the reader. Likewise, a hacker site will probably shy away from using script fonts in its headers. The style of the web fonts on a blog should always dovetail logically with the purpose of the site. When in doubt, opt toward using neutral and simplistic typographical choices, such as Verdana or a Roman-style font.
Rule 5: Test Functionality Constantly
A web font has to be tied to all of the HTML elements that it’s intended to stylize. Bloggers are often prone to using small snippets of HTML code without thinking about how they might break the stylesheet of a website. A blog owner should think through all of the different HTML tags that are used on a site and check that web fonts are being properly deployed for them. A page can end up looking ugly and confusing if something like an H2 element wasn’t configured properly in the stylesheet. A whole page can suddenly be interrupted by large or tiny text where a sensibly sized subheading was expected to appear.
Functionality testing on today’s blogs goes further than just checking the appearance of a site on a single screen. How a web font displays should be checked on multiple devices. A font that looks great while reading a blog on a laptop may create readability issues on a four-inch smartphone’s screen. Site owners should review a blog’s stats and test the readability level of the blog on all of the most popular devices that visitors are using. At bare minimum, readability should be checked using Windows computers, Apple iOS mobile devices and Android phones and tablets.
Conclusion
Web fonts are a great way to improve both the functionality and the visual worth of a website. They allow search engines to discover more of the text on a site, and they permit browsers to render typography more cleanly. Utilizing web fonts your blog, especially during a redesign, requires a bit of planning, but with some effort, a blog can quickly be brought up to modern standards.
Leave a Reply