Practicing the Basics of Web Typography

Typography is an art form rarely covered in the spotlight. Web designers too often indulge into page graphics and CSS effects. Ironically page text is what carries the information you’re trying to spread, thus should hold much higher importance to your visitors. I find the problem isn’t with a lack of interest but a lack of knowledge on the subject.

When discussing typography there are many aspects concerning such a topic. Aside from font families you’re dealing with serif/sans-serif typefaces, weight, kerning, leading, and similar ideas. This article is meant to slowly introduce designers into the wacky world of digital type.

Base Term Definitions

Let’s discuss a few key terms which should clear up some confusion right away. The first important set of keywords defines font and typeface. A font is described as a specific set of characters which make up one font face. This could be Arial, Tahoma, Times New Roman, Georgia, and the many others we encounter.

Similarly a typeface defines a family of font styles. The key word here is font styles which separate many different fonts into groups, or families. These typefaces could include sans-serif, serif, script, monospaced, and others. You may also categorize typefaces by styles such as bold text, italicized text, etc.

The most important consideration building your site out is styles of fonts to use. There aren’t as many which can be shared via the Internet since there is such a variation between installed fonts in Windows and Mac environments. Thankfully Google Web Fonts offers a very elegant solution to this problem which many web designers have adopted.

Some of the more obscure terms include weight and kerning. These can all be manipulated through CSS properties applied to paragraphs, headings, or other text elements. The weight of your font can be adjusted and displays a “heavier” bolding of each letter. Kerning is a technique used through the letter-spacing property to add or remove extra space between letter symbols.

Breaking the Norm

It’s entirely rational to discuss the need for new fonts on the web. For the past decade many pages have become stale and ripe with repetition. The same Arial and Geneva font stacks can become old using them on every project. And although you can still manipulate colors and special effects, often times paragraph font will be much more readable in black/dark grey Arial type.

Where many of us wish to customize our text starts with page headings. From the many possible effects granted with CSS there are countless opportunities for personalization. These include such packages as Google’s Web Fonts which will also expand your library of possible font families to choose from.

For branding purposes it’s generally a good idea to match headings with your site theme. These may include a color scheme, underlines, background icons, or in-text graphics. Ultimately the decision is yours and there are plenty of resources to help you work out typographic combinations.

Rally ‘Round the Family

Between the many font families available to Windows and Mac users these just don’t seem to cut the cake with logo design. Working in Adobe Photoshop or Illustrator requires much more precision and creativity. The base font families are okay, but this seems like a lacking in the imagination to seclude yourself into this set.

Although there are many free font directories online, you can spend hours wasting away browsing archives for just the right choice. Check out our collection of sleek fonts to get some ideas flowing.

Keep in mind not all typefaces will fit within the mood of your website. For example calligraphy has been popular with fancy venues showcasing the handwritten style. Also high class corporations and restaurants will use these fancy styles. On the contrary If you’re building an arcade or gaming website you may steer towards larger, more vaulting type faces to leave a big impression on your visitors.

Distinguishing Page Dynamics

It’s important to use typography as a liner map of your page design. Paragraph text should mold into block formation with easy-to-skim alignments. Similarly if your visitors are skimming for hyperlinks ensure these will stand out and be easily clickable.

If you’d like to find other advice on hyperlink design I recommend our modern typography tips article. Hyperlinks are vital not only in paragraphs but also in your heading, sidebar, and list content sewn throughout your pages. Since you’ll generally be working within the same font family the distinguishing factors would include background colors or rounded corners within hyperlink text.

Reading Moods

Each font family will bring about differing moods within your readers. If you are not very connected with the Internet it is simple to overlook these feelings. However just because you tend to pass up recognition does not make them any less “real” in the grander scheme

For example serif font choices in your paragraphs denote a feeling of professionalism and reputable information. This is often seen in mainstream media resources such as The New York Times. For smaller blogs you may enjoy large paragraph text with a greater line-height so readers may skim and clip out portions of your blog posts.

Font combinations can be very difficult. They provide a typical balance which isn’t often construed in today’s modern web atmosphere. In this brief article outline Jennifer Moline mentions a few techniques for working with differing font families in your webpages without botching the entire design. It’s a delicate process but with enough practice not too difficult in project work.

Conclusion

Above we’ve gone into a collection of ideas to work with font families. Building fonts for Photoshop designs vary greatly compared to web-based applications. This explains why so many webmasters find it difficult to customize their typography.

The resources shared above should be a huge jumping off point for newbies in the field. I highly recommend messing around with Google’s Font database if you haven’t already. There is a lot of information and content available if you know where to look. And Google is just one of these service providers.

Digital writing is a deep topic and requires a very dedicated study. I haven’t touched upon everything here, so please do share your ideas and suggestions in the comments below. On the same note if you have links to helpful typographic resources the design community would prosper greatly.