March 28, 2024

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.

Share

Jake is a creative writer and UI designer by trade. You can follow him on twitter @jakerocheleau or learn more at his personal website JakeRocheleau.com.

9 Comments

  1. Richard Taylor Reply

    Jake – great article, apart from the definitions of fonts and typefaces which are not just confusing but fundamentally incorrect.

    To quote: “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.”

    Er… No! These are NOT fonts. They are typefaces. ‘Arial Bold Italic 9pt’ would be a font in its historic definition (pre-computer era). ‘Arial Bold Italic’ or ‘Arial Regular’ are fonts in the modern, electronic-age definition. But ‘Arial’ is a typeface.

    Sorry to be a pain… but when educating we really should get fundamental facts correct.

    1. Laura Reply

      Thank you! I noticed that, but as I’m not an expert on typography I started to worry that I’d been confused about these terms for years!

  2. Sam Reply

    Gotta agree with Richard. Great article, but you got your font/typeface definitions flipped around. 11pt Avenir 55 Roman is the FONT, Avenir is the TYPEFACE.

  3. Denim Geek Reply

    Great post Jake, informative and clearly explained, a good typeface is very important to ones website, in hindsight I would not have chose Georgia.

  4. Martijn V Reply

    Jake, sorry to be another pain, but I can’t believe you wrote this April this year (2011).

    Last year, or earlier, all large font foundries and many small ones have embraced the webfont standards. This makes installed fonts on Mac or Windows machines entirely irrelevant.

    It’s too much to get into in a reaction but check these out:
    http://www.fontspring.com/
    http://typekit.com/
    http://www.typotheque.com/webfonts
    http://new.myfonts.com/info/webfonts/
    http://www.fontshop.com/fontlist/n/web_fontfonts/
    http://webfonts.fonts.com

Leave a Reply

Your email address will not be published. Required fields are marked *