We may now concentrate on why we had this fun little exercise. Typography is an ancient discipline about how the arrangement of letters and words has an effect on usability, readability, and appeal. Reading a block of text written in different font styles must have been fun, for now, but imagine chunks of text on a website trying to give a uniform message but frequently switching fonts. People are accustomed to interpreting majority of the information in text form and it is the job of the designers to make this process as easy and productive as possible.
Consequently, visual presentation and readability of copy in digital products have become important factors in determining user experience. Illegible fonts can lead to problems in navigation or worse, abandonment of the website. Even the most basic knowledge of typography can help in comprehending the peculiarities of font visual treatment and its influence on users’ perception. When it comes to brand recognition, typography plays a huge role. The colour, font and text make the brand stand out, in the eyes of the consumer.
To create typography that stands out but at the same time complements your design, you need to be familiar with its anatomy. Here are a few terminologies that will help you understand better the art that is typography (It may very well be called a science).
KERNING
Kerning is the practice of adjusting the space between two type characters. Words tend to get indecipherable if placed too closely together, leaving the reader with discomfort. The goal here is to make the spacing look natural. If some letters have wider spacing and others narrower, the reader might feel awkward while reading without actually understanding the problem. As the letters get bigger the space between the letters become more obvious. This calls for some fine tuning on the part of the designer. Kerning can very well turn a mediocre design into a brilliant one.
LEADING
Pronounced as LED-ing, leading or ‘line-height’ is as the name suggests the height between two lines of text. These lines in typography are called baselines. Baselines, like the ones you find in your notebooks, are the lines that you write on and in digital typography the lines that you type on. The way leading is used in a block of text can affect its readability. There is a fine line between type being too close together and too far apart. Excessive implementation of either one of them can be tough on a reader’s eyes. Leading is all about changing the density of type. The key is to understand the message one intends to convey through type and matching the leading accordingly.
TRACKING
Tracking involves adjusting the spacing throughout the entire word. Once you’ve determined the right spacing between each letter, tracking can be used, with great moderation, to alter the spacing equally between every letter all at once. This principle is used to fill a space that’s larger or smaller than presently suits the type’s parameters or to make a single word seem airy and notable.
ALIGNMENT
Alignment is the process of placing and justifying text. Designers at this point intend to transform randomly placed pieces of text into one unified composition. To ensure good alignment, designers use the most high-tech tool, the human eye. While other factors may need mathematical precision, this very aspect is concerned with visual consistency. The way you align and arrange your text on your site can have a huge impact on how readable your content is, as well as on the mood the type sets for your readers.
WHITE SPACE
Too many elements like images, colours and shapes on a webpage can make your site look more like an infomercial and cause your readers to leave because of unease. White space, also known as negative space, is the region amid elements in a design composition. Readers aren’t able to figure out the huge role of the space, but designers pay a lot of attention to it. White space is an important element in typography as it aids in making text legible and the given space balanced.
TYPOGRAPHIC HIERARCHY
Like any other design element, typography must include a proper structure. Typographic hierarchy is a system that organizes copy content for users’ perception via modifications and the combination of typefaces and fonts. It is aimed at creating a contrast between the most prominent copy on the webpage and the secondary information. This contrast can be implemented by adjusting elements of typography like the typefaces, fonts, size, colours and also the alignment.
Typographic hierarchy is used to arrange copy in the order of their importance. The basic concepts of copywriting such as headlines, sub-headers, body copy, CTAs are taken into consideration. These copy elements create distinctive levels of design: primary, secondary, and tertiary.
The primary level of copy content includes the biggest type akin to headlines. It attempts to draw user’s attention to the product. The secondary level consists of copy elements that are meant to be easily scanned. Those are sub-headers and captions which allow users to quickly skim through the content. And the tertiary level includes body text and the allied information. The typography layers assist users to learn copy content gradually without effort and get acquainted with the digital product.
Making the right typography choices can give your website or app a sense of precision, crispness, and polish. Poor typography choices, on the other hand, are distracting and tend to evoke unwanted attention. Familiarizing oneself with the terminology surrounding typography and better understanding some of the foundational principles outlined here will help equip anyone to apply it suitably.
