What is Typography?

Predominantly discussed in design, typography refers to the styling of words for use in print, display, or general distribution. Typography is integral to creating legible, digestible, and overall appealing communication in graphic and UI design. No matter the medium, solid typography establishes a visual hierarchy that influences the tone and overall graphic balance. This isn’t to say that typography is more important than the actual graphic design, more so that bad typography can make good design look substandard.

Whether you’ve heard the term before or are just now seeing it for the first time, typography is something that anyone should be familiar with. Many assume it just means playing with font, color, and text size. While typography includes these elements, many more moving parts and pieces make typography the art form it is.

Typography is crucial to understand, if even just at a fundamental level.

Elements of Typography

With typography heavily influencing how people perceive your messaging, it is a crucial component to understand within your brand and brand messaging. In light of that, here are the main elements that will help you avoid stunting your brand.

Typefaces and Fonts

These are what quite literally drive the idea of typography, though they’re often confused or treated as synonymous. To keep everything straight, it’s best to think of them as families. Typefaces are the entire family of fonts; fonts are the family members. For example, the term ‘Arial’ is the typeface (font family), but terms like ‘Regular’ and ‘Bold’ refer to the actual fonts (the fonts in the font family).

Point Size

In typography, point size is simply a unit of measurement. Most primarily associate point size solely with the size of the font. While this is true, point size is also used for measuring leading, tracking, line length, and more.

To give an idea of the scale of point size, 1 inch is the equivalent of 72 points. Because of this, the typography of both print and web designs can be tweaked ever so slightly to nail down the perfect layout.

Line Length

When it comes to readability, the amount of information displayed in a given space is imperative. Line length controls the length of the text on a single line running between a page’s margins. Having too short of a line length will awkwardly squish all of the information into a claustrophobic space, and having too long of a line length will disperse the content so far apart that it’s both ugly and a chore to read.

Leading (Line Spacing)

This is the secret bread and butter that elevates your typography. Leading is the vertical space between the individual lines of text, both above and below. It’s important because it directly affects the actual design and the overall readability of the content. The readability of the font at hand should first influence the leading, the design second, and then finally be tweaked based on visual judgment.

Tracking (Letter Spacing)

Tracking is the adjustment of the space between letters in text. Tweaking the tracking allows you to hone in on the readability of content or drastically squeeze/extend the spacing for different dramatic effects. In more advanced cases, tracking can change subtle details in the text to improve small but important layout issues. Widows, orphans, and hyphenations are all elements that can be improved by adjusting the tracking on individual words or lines.

Kerning (Spacing Between Pairs of Characters)

Diving deeper into fine-tuning, kerning is the adjustment of the spacing between individual characters in text. This differs from tracking in that it does not adjust the space equally between the letters or words in a text. Instead, kerning adjusts the spacing relative to what appears to be off.

Take this string of letters “AVT” for example. At first glance, the ‘A’ and ‘V’ feel farther apart than the ‘V’ and ‘T’. This is where kerning comes into play. Depending on the font, these gaps will either be bigger or smaller; kerning takes that into account and adjusts the spacing to facilitate visual appeal and readability.

Accessibility and Optimal Line Length for Different Devices

In typography, accessibility doesn't just apply to the visually impaired; it's about creating a universally pleasant reading experience for all audiences across all devices. This inclusivity is especially relevant in today's digital age, where content is consumed on various screens with varying dimensions. Understanding and implementing optimal line length is key to achieving such accessibility.

Optimal line length is the number of characters per line (CPL) that enhances readability and comprehension. Research suggests an ideal line length ranges from 50 to 75 CPL for text in a single-column layout. This range strikes a balance, preventing eye strain from short, choppy lines and loss of reading place in overly long lines. However, the optimal CPL can vary based on the context, including the device used for reading.

Desktop and Laptop Displays

For larger screens, such as desktops and laptops, maintaining a line length of around 60 to 75 CPL is beneficial. This ensures that the text is not stretched too wide, which can make tracking from the end of one line to the beginning of the next difficult. A shorter line length can be considered to maintain readability in multi-column layouts.

Tablets and Mobile Devices

The shift to smaller screens requires a reevaluation of line length. On tablets, aiming for the lower end of the ideal range (around 50 to 60 CPL) can enhance readability without forcing too much horizontal scrolling. For mobile devices, this becomes even more critical. Given the limited screen width, line lengths, around 30 to 40 CPL, may need to be shorter to accommodate comfortable reading without compromising accessibility.

Adjusting for Accessibility

Enhancing typography for accessibility involves more than just adjusting line lengths. It's crucial to consider other elements, such as font size, contrast, and spacing. Responsive design plays a pivotal role here, dynamically adjusting typography based on the device's screen size. This ensures that whether someone is reading on a large monitor or a small smartphone, the text remains accessible and legible.

Implementing these practices is about adhering to standards and respecting your audience's diverse needs. It demonstrates a commitment to inclusivity, ensuring that your message is not only seen but also understood by everyone. As we navigate the digital landscape, let's strive to make our typographical choices thoughtful and inclusive, making every word count towards a better reading experience for all.

Don’t Underestimate Typography

Many take typography for granted. When properly understood and applied, it can immediately elevate a design by establishing the aforementioned visual hierarchy. To influence the overall tone and graphic balance of the design, the hierarchy subconsciously guides the reader to a more straightforward understanding through structured typographical choices.

Looking for more help with UI design? Alopex is here for you. Effective and clear communication through design is what we do. No matter the medium or application, our team members are experts at creating effective typographical rules to drive home any desired message. All you have to do is reach out or give us a call.