As web design has advanced, it’s clear that most design is driven by big, powerful imagery. However, we can’t ever lose sight of the fact that typography is the lynchpin that holds effective design together. Many factors, such as font selection; appropriate Measure; typographic size hierarchy; and typographic weight hierarchy guide users through the site experience. Typography creates visual logic and directs users to the many messages that marketers need to deliver. With all the resources put into message development, understanding how they’re presented on the web is critical. Let’s look at a few typographic elements which impact the presentation of messaging on any site.

Integrating Brand Messaging with Design

As a top Cleveland brand, marketing and web design agency, we find ourselves involved in all aspects of the design process, from discovery all the way to deployment. This comprehensive approach enables our designers and content creators to work together and take all perspectives into account. Our brand messaging experts consider the medium (website, social media, print, etc), and develop messaging and copy that works for the selected application. At the same time, rather than just dropping it into a layout, our designers will examine the copy and suggest changes that will maximize message effectiveness.

Our web designers focus on using typography to draw site visitors in and direct their attention to key elements in the layout. Typography is therefore used to guide a visitors’ eyes upon their arrival. As we know, site visitors will first scan the site and choose what they should read first. It’s important for brand and navigation to be clear and easy to locate. Effective design will use typography to draw attention “calls to action” and high-level brand messaging.

Consistency

Let’s address an important aspect of typography in web design: consistency! Effective typography implements a set of guidelines used throughout the site, creating a simple hierarchy of messaging. We quickly “train” visitors to expect headlines, titles and calls to action to be presented consistently within the design. This system of typefaces, font sizes, line heights, and widths, ensures that visitors don’t have to “learn” new design and layout rules as they navigate. A successful typographic system intuitively indicates where one should start reading and how to proceed down the page. Failure to establish such a system can lead to a site looking and feeling busy. More important, system failure will result in key brand messaging being missed.

Macro- and Micro-Typography

Macro-and Micro-typography are both essential elements in developing a typographic system. Macro-typography focuses on overall structure of the type, how it is presented in the context of your site’s layout, and it’s general aesthetic in relation to the color scheme, images and other website elements.

A few important elements of Macro-Typography and Micro-Typography are:

• The Measure – The Measure is the name given to the width of a type element. Specifically, we look at the number of characters in each line of text with that specific element. Using an appropriate Measure will make a website easier to read. If the Measure is too wide, the reader may lose their place as their eyes have to scan from the end of one line, all the way to the beginning of the next. If the Measure is too narrow, the lines of text are composed of too-few words, and the copy will appear choppy.
• Leading – Leading, sometimes mistakenly called line-height, is the distance between the baselines of successive lines of text. If there’s not  enough leading, text appears very close together and is difficult to read. Use too much leading and the text will appear disconnected.
• Tracking – Sometimes confused with Kerning, Tracking is the manipulation of overall letters spacing. Although this may be something designers overlook, Tracking is a major contributor to whether text is easily readable or not. As a side note, Kerning is letter spacing between specific letters, rather than an overall setting.
• Positioning – Determining the position as well as the spacing between the various text elements should be carefully considered when moving from the wireframe stage to initial design. If you place your elements too close together, users’ attention may jump from one element to the next. Leave too much space, and your design will look splotchy.

Traditionally, we first address Macro Typography, taking care of the “larger” items in our system, then move on to Micro Typography, where we fine tune the structure.

Type Colors

Another important aspect to consider is color. Have you ever visited a website where links or other text elements were difficult to read due to the web designer’s color choices? Sometimes, web designers fail to create enough contract between the background color and that of the text, essentially drowning the text and making it invisible. Clearly, black text on a white background provides the most contrast, but there are many type color combinations that can achieve great results.

A Final Thought

In a world often focused on buzzwords and cliches, typography is often overlooked as an integral element of any touch point. Text should not simply be slapped onto a web page. Macro- and Micro -Typography elements must be considered in order for the text to support and contribute to the overall design and the effective communication of brand messaging.