Typography Design

Typography

Background:

Typography is the art of arranging text on a page to make it legible and appealing. Decisions about the arrangement of text are just as vital to site design as color, layout, and image selection. Text has the power to greatly transform a site’s design by improving balance and visual flow, communicating meaning and textual importance, and making the visual experience engaging and enjoyable for all users.

We have a few goals for this article. First, we’ll convey best practices for selecting the typeface for site design. Second, we’ll advise on how to best utilize fonts to convey content and tone. Finally, as with all major design decisions, we review the importance of seeking regular feedback to achieve the best user experience.

Before we dive in, let’s clarify some terminology. While the term ‘font’ is colloquially used to describe all sizes and styles of a particular typeface, it actually refers to a typeface at a specific size. To describe a grouping of all sizes and styles of a specific typeface, we use the word typeface (or font family as seen in CSS).

Selecting Typefaces for Site Design

Which typefaces are appropriate for your site depends on many factors. The biggest factor in any design choice is whether a font meets users’ needs for legibility and clarity.

You need to make sure the text on your site is easy to read. The more text your site has, the more important this becomes. If you have a blog, you want to make sure the user is drawn to the title of a post first, then inwards to the content. On an advertising page, the users’ eyes should be drawn to the value statements and calls to action. Every site has its own unique needs. As long as you keep the user in mind with every decision you make, you’ll be on the right path.

Serif versus Sans-serif Typefaces

When selecting a typeface a large question you should broach first is whether you should be using a serif font or a sans-serif font. Making the decision to include or not include serifs early on can help guide your search for the right typeface.

A serif is a piece of ornamentation or flourish added to the ends of characters of a typeface. Serif fonts have a fancier feel than their sans-serif counterparts. Times New Roman is an example of a serif font family.

Serif typefaces have a strong aesthetic and their presence will greatly impact how users experience projects. The presence of serifs also make text easier to read, providing hints to the eye about what letters the user is reading and guiding the eye along each line. As a result, serifs are very often employed by reading-focussed sites, such as news sites and blogs. Sans-serif fonts have become the most prevalent for display of text on computer screens. This is because on lower-resolution digital displays, fine details like serifs may disappear or appear too large. Sans-serifs, in their streamlined design, elegantly avoid this problem.

When choosing a typeface, you want your site to be unique, so don’t feel limited by using just web-safe fonts such as Times New Roman or Helvetica. Use online font-hosting services such as Google Fonts or Adobe Typekit to discover and try out unique, attention-grabbing typefaces. You can also discover and download typefaces from sites like dafont.

Pairing Typefaces

Always consider pairing complementary typefaces since it’s rare that one typeface will be sufficient for your entire website. Using multiple typefaces supports visual hierarchy through contrast, since different fonts have different roles. Paired typefaces should be similar enough to seem like they belong on the same site, but distinct enough that they still help bring your site to life.

Font pairings are harmonious when they share at least a couple of characteristics including similar proportions, the height of lowercase letters, and the width. Meanwhile, contrast and variety of typefaces draws users through the content of your site without getting fatigued, and can help get them into a visual rhythm that makes your site easier to use and more enjoyable.

It’s important to think about your user when picking your primary font and then select your secondary font after. So if you are designing a text-heavy site, perhaps pick a legible, serif font and then find a secondary, contrasting font that pairs well with it. Some sites help pair typefaces for you. For example, if you select a typeface on Google Fonts, at the bottom of the page you will be given suggested typeface pairings. This is an incredibly useful tool when starting out and experimenting.

You can begin pairing typefaces by pairing fonts of the same family. This will help you get a feel for contrasting aesthetics and also similarity in height and letter proportions — such as being tall, thin, round, or spaced out. Once such example is pairing Source Serif Pro and Source Sans Pro.

The following resources provide in-depth advice on pairing fonts:

1. Typewolf
2. Google Font Combinations
3. Hand-picked Tales from Æsop’s Fables with Hand-picked Type from Google Fonts

Additionally, you can also choose typefaces by visiting other sites with typefaces you find striking and using browsers tools to inspect pairings.

Utilizing Fonts to Convey Content and Tone

Once you’ve selected your fonts, your next major task is to use the fonts well. The number one rule here, once again, is user experience.

Establishing a Visual Hierarchy

Establishing a visual hierarchy in your site is essential. Typography should support at least three levels of hierarchy. The primary level is for the most important content/information; this should be the most immediately visible typographic element in your design. The secondary level is to help organize your design into sections; they should direct the user’s eyes to different parts of the design and help them navigate the content more easily without standing out. Especially for text-heavy sites, the tertiary level is the meat of the design; it should be easy to read, even though the text will be most likely smaller than the first two levels. Directing the user’s eyes inwards to the core content so that they are always intrigued to find out more is a huge part of creating an engaging site.

Scaling

Scaling fonts is as important to site design, which is why it is preferable to use ems and rems whenever possible. Choosing units that are flexible helps us make changes more swiftly during the design process; ensures our fonts adapt well to different device sizes; and can ensure readability on different browsers.

Leading and Tracking

Leading and tracking are tools to help make sure your text is readable. Leading is the spacing between lines of text. Using the CSS property line-height, you can make sure your lines are not crammed together or too far apart. Give the user space to breathe while reading each line.

Tracking is the space between letters throughout a word. While many fonts should have this spacing well designed for great user experience, you may want to adjust slightly to help with the rest of the feel of your site by using the letter-spacing CSS property. Most well-made fonts will not need this adjustment though, so use sparingly if at all.

Getting Feedback

Get feedback early and often. At the end of the day, every site has its own unique needs. As long as you keep the user in mind with every decision you make, you’ll be on the right path.

A good way to test your choices is to sit down with around five friends or strangers and show them your site. This will help you get quick, productive feedback that you can begin using in your design decisions right away. Remember that design is a process of designing, testing, and incorporating feedback from users. Ultimately, user happiness and engagement is a sign of robust design choices. Feedback is essential, and will help you become a better designer.