Although images and video are in high demand text is still central to the user experience. UI designers virtually always need text to make a cohesive presentation of information. 

While each situation calls for a unique strategy, there are some rules underriding how text is presented in a design. More people might be reading text on a screen than a page these days, but typography is no less important than it is for print media. 

Read on to find out everything you need to know about typography and the principles UI designers use to organize text. Whether you’re thinking about a career change or you just want to be more familiar with one aspect of UI, this guide is a great place to start.

Typography 101

The organization of written words to make them more readable predates the printing press. People still designed things like seals, stamps, and signs by hand. Although UI designers and other creatives concerned with typography have their pick of digital tools to help them these days, they still rely on some basic principles that began to take shape long ago.

While UI designers and graphic designers are concerned with how information and action buttons appear and present themselves on a page, they aren’t normally the ones responsible for making the fonts they use. Popular fonts like Helvetica, Futura, and Arial are built by creatives called font designers.

Here are a few key typography terms that will help you understand our 10 typography rules.

• Serif

The additional flourishes on the ends of letters in fonts like Times New Roman are called serifs. More traditional fonts tend to have more exaggerated serifs while modern ones have none at all. Helvetica is perhaps the most famous san serif font, which means it has no adornments at the end of its letters. 

• Display Font

The display font is used for larger text like headlines or titles. We’ll explain the way UI designers use various text sixes a bit later in the article and touch on how you can select fonts for display versus the main body of the text. 

• Hierarchy

In a typographic context, the way text is organized to emphasize what’s most important is referred to as hierarchy. Emphasis can be accomplished in various ways including size, font, bolding, underlining, and strikethrough. You can also organize the space between words and letters to direct the reader’s eye.

• Kerning

Kerning is the amount of space between letter pairs. Some characters need specific kerning to make sure they appear as legibly as possible on the finished page. 

• Tracking

The space between all the characters in a given amount of text is called tracking. Kerning is a smaller-scale version of tracking. 

• Leading

Leading is another word for line spacing. Most people are already familiar with this from word processing programs that allow the user to easily double-space their lines.

• Alignment

Another well-known function available in word processing software is the ability to adjust how the paragraphs are adjusted in relation to the margins, or the edges of the printable area on a page. 

Text can be left-aligned, center-aligned, or right-aligned. It can be flush with the right or left margins. If it’s justified, that means it’s flush on both sides. However, it can also be ragged, which is when it’s allowed to end wherever it naturally would. You could call text flush-left ragged-right if the left side is even and the right side is not.

• Ascenders & Descenders

The parts of letters that shoot up, like the top of a lower-case ‘h,’ for example, are called ascenders. Similarly, the lower parts of letters like ‘j’ and ‘y’ are called descenders. 

Typography uses a measurement called x-height (literally the size of a lower-case ‘x’) to determine whether a letter has ascenders and descenders. It will if it has segments above or below the x-height, respectively. 

Capital letters typically extend past the x-height but there is another normalizing measure called cap height that limits how big they can be in relation to the other characters in a font. 

UI designers and other creatives involved with typography have other terms for individual parts of characters and their arrangement on the page, but this basic vocabulary should be plenty for understanding the 10 typography rules in the next section.

10 Typography Rules for UI Design

1. Build A Specific Hierarchy

No matter what project creatives are working on, some information will be prioritized. It could be an attention-grabbing slogan or the notification of an important public announcement – in any case, the reader’s eye should be drawn somewhere when they view the text. 

This is accomplished in various ways by skilled UI designers. First, you can use text size to draw attention to important text. Even if the largest text is in the center of the page rather than at the top, people tend naturally to view it first. 

Still, you can build a hierarchy by placing need-to-know information at the top and making a path toward further information throughout the rest of the space. UI hierarchy includes several visual elements in addition to the text and typography shares some of them, such as color, alignment, proximity, and repetition. Learning to use all of these in balance is the art of good user interface design. 

2. Readability Is Crucial

Users are accessing information across many channels and multiple devices. Making all the content they want to see available and easily readable is a responsibility shared by both UX and UI designers. 

For instance, UX considers adaptive versus responsive design to make sure the same content will adjust no matter what screen size people use to view it. UI will be more concerned with buttons and the arrangement of elements on the screen to make sure that things won’t be overly crowded or totally illegible on smaller screens.

When it comes to the text, kerning, leading, and tracking are vital for readability. You also need to consider the types of fonts that have a notoriously bad reputation and add clutter. Jokerman and Papyrus are two of the most infamous. 

3. Choose A Standout Font

Even if UI designers know not to use one of the infamously messy ‘handwriting’ fonts, they might default to a sans-serif like Helvetica and opt for a minimalist approach on occasions that aren’t well-suited for it. It’s not that a clean Helvetica layout isn’t appealing and easy to read, but in some cases that won’t work as well. Plus, if every project has that same font and organization, nothing would stand out.

Any font can become a standout font when used correctly. Think of it like marketing creatives think of branding: almost anything goes as long as it helps build a positive brand. Ui designers who can craft a great visual hierarchy that’s easy to read and pleasant to look at will be making the chosen font their own. 

Think of big brands that use handwritten fonts and others that use a modern sans-serif. Coca-cola uses the traditional script version to invoke its long history while using a cleaner serif font (on Coke cans, for instance) to show that it is still with the times. Other brands like Apple opt only for the sans-serif because they’re trying to create a perpetually modern technology brand.

4. 1 Or 2 Fonts Maximum

It’s easy for text-heavy layouts or screens with lots of visual elements to look busy. One of the best ways to make sure that happens is to use too many fonts. 

Too many fonts will make it appear as if the UI designer couldn’t decide or it could convey the lack of a cohesive branding strategy. Either way, it’s a net negative for the brand. 

Like many elements of user experience and interface design, text is working best when it’s invisible. People might not even realize what a clean, readable font has been chosen or the intuitive way it’s arranged on a page if the whole thing is just easy to read. 

Using more than two fonts destroys the cohesiveness of a visual organization and makes it extremely difficult to communicate a clear hierarchy between the various visual elements. That’s why many fonts have wide, regular, and condensed versions. Use these alongside strategic bolding, underlining, or italicizing to highlight information rather than switching to a totally new font.

5. Play With Space & Orientation

The user experience is greatly improved when text uses space economically. Imagine a reader of a news article who has to constantly zoom in or scroll side to side to read an article versus one who only has to scroll vertically as they continue reading. It’s clear who has the better user experience out of the two. 

Orientation is a favorite tool for designers of posters and book covers. It can really help highlight singular words that are emblematic of the message. But beware that any word that doesn’t run left to right is immediately recognizable. Most of the time it needs to be a familiar word for it to work.

If you were making a poster or window design for a restaurant, you wouldn’t want a complex word that people would have to crane their neck to read to run top to bottom. The brand name would probably just be ignored if it was sideways and difficult to read, but if you put words like ‘restaurant,’ ‘sale,’ or ‘24 hours’ in a vertical orientation then people will be able to read it almost without thinking because those words are more common in that context. 

6. Establish Type Scale Guidelines

For maximum consistency, you have to have guidelines about how big your text will be depending on where it is. Headlines, titles, and showcased quotes are usually larger fonts, called H1, H2, or H3 in descending order of header sizes. Body text is smaller and buttons might be larger or the same size as that body text. 

You might also include bolding or italicizing within these guidelines. The most important thing is that you have the rules established so readers can locate themselves within the text and retrieve information later if they want to. 

7. Economize Your Text

Regardless of whether you play with its orientation, your text should be concise and written with phrases readers are already familiar with if you want to get your point across as quickly and efficiently as possible. Even if you’re working with lots of content, the language should be easy to read and organized so that the reader’s eye moves through it naturally. 

A study from 1968 found that legibility was the main cause of visual fatigue in readers of print media. That’s highly useful information for people involved in creating a strong user experience because it means it’s not the sheer amount of text people encounter but how easy it is to read. 

People are faced with tons of text these days. From advertisements to phone messages to social media posts, it’s clear that sparing amounts of direct and effective text is better than loads of meticulously detailed verbose text. 

8. Signpost Buttons With Clarity

Branding language appeals to viewers because it’s typically informal. One potential danger of that is signposting – providing directions along user pathways – is less clear. 

On most apps and websites, some kind of call to action is the main point of a page. A clickable button might subscribe a user, take them to another page with more information, or enable them to make a purchase. Not only should the language on these buttons be explicitly clear about what they do, but the letters need to be equally clear. 

Coloring is also important. Greying out a button that still works is unethical design. Buttons that charge users or complete a subscription should typically be bright green or red to show their significance on the page. 

The text on these buttons needs to be clear as well. If you’re using the to signpost, which you should be, then they should be a sans-serif font even if the rest of the page is in a script or a serif. There’s a reason municipalities don’t make road signs in a handwritten script – they’re easier to read. 

9. Limit Line Length & Increase Paragraph Breaks

This is a rule for UI designers contending with lots of text on a single page. Making that text more digestible is as easy as limiting line length to about 80 characters and using paragraphs frequently so the reader doesn’t feel as if they’re slogging through an endless or tedious amount of information. 

Use emphasized text to direct attention among these paragraphs and lines. As a side note, a scroll bar that shows how far the reader has progressed through lots of text helps improve their user experience while a status bar that shows slow progress will make them less likely to read to the end. Short paragraphs and reasonable line lengths will help you find the happy medium and keep people reading. 

10. Color & Contrast For Difference & Actions

Most UI designers already play with color and contrast to show when actions have been completed. Colors changing throughout text or buttons changing color help improve the user experience by showing people where they are and what they’ve already completed on a page. 

Even widely used fonts like Helvetica can stand out with the right color and contrast adjustments. Make sure they stand out against what other companies’ designs are doing as well as against the other elements of the design they’re in so people can position themselves well and get the information you want them to have.

Merge this UI styling with the right spacing and layout and you’ll have a winning product that people enjoy using.

Conclusion:

Typography only gains importance as we’re confronted with more and more text each day. Video and images are a critical part of a visual layout, but the text in headlines, bodies, and on buttons has to look appealing and convey information about the user’s journey. 

Follow the 10 rules in this typography guide to help make sure you can craft a winning user experience interface or understand how successful ones work. No matter what technological changes might come, text will still be a critical part of how we communicate. Making that text readable and well-organized is paramount for a great visual design.