Typography is so much more than choosing a nice font for your website or app; it’s the art of using typefaces to bring your interface to life. With so much to consider when working with typography, including readability, accessibility, and hierarchy, your use of typography could mark the difference between a good interface and a great one.
What is Typography?
typography is all about using typefaces and fonts in a way that makes the copy legible, clear, and enjoyable to read. Typography involves font style, appearance, and structure, aiming to elicit certain emotions and convey specific messages to the end-user. As well as ensuring the typeface lends itself to the visual balance of the website or app, it’s the job of the UI designer to optimize the website’s accessibility by keeping the typography highly readable.
As well as bringing user interfaces to life, good typography will also:
- Build brand recognition by subliminally encouraging your users to associate the typeface featured on your site with your brand
- Influence decision making by observing how users digest and perceive the information conveyed by the text, and
- Hold the attention of the readers by being impactful and memorable.
What role does typography play in UI design?
Typography extends far beyond choosing a nice font for your website. Good, well-thought-out typography is paramount for good user experience—and overlooking its importance could be detrimental.
When users first arrive on a webpage or app, they scan the page rather than reading it. Having a clear hierarchy, and clean typefaces are essential for creating an excellent first impression with the user—and ultimately, keeping them on the page.
Once you’ve caught your users’ attention, the next challenge is about conveying information. As people are accustomed to receiving information in text form, it’s a UI designers’ responsibility to ensure the typeface helps to convey the message rather than distract from it.
Finally, typography should blend seamlessly with the other elements in the interface and act as the glue that holds it all together. It should set the overall tone of the product, working in harmony with the rest of the graphics to create an aesthetically pleasing overall visual balance.
What are the different elements of typography?
Fonts and Typefaces
Fonts refer to the weights, widths, and styles that constitute a typeface, and a typeface is a family of related fonts. The three basic kinds of typeface are serif, sans-serif, and decorative.
Keeping your typefaces consistent is the key to avoiding confusion. Sticking to the same font style will help your readers instantly understand what they’re reading, and begin to notice a pattern.
Also known as ‘negative space,’ white space is the space around text or graphics. It tends to go unnoticed by the user, but proper use of white space ensures the interface is uncluttered.
Alignment is the process of unifying and composing text, graphics, and images to ensure there is equal space, size, and distances between each element.
One of the most exciting elements of typography is color. Color has three key components: value, hue, and saturation. A good designer will know how to balance these three components to make the text both eye-catching and clearly legible, even for those with visual impairments.
Establishing hierarchy is one of the most vital principles of typography. Typographical hierarchy aims to create a clear distinction between prominent pieces of copy that should be noticed and read first, and standard text copy.
Like hierarchy, contrast helps to convey which ideas or message you want to emphasize to your readers.
How to use typography in UI design
Choosing your fonts
When it comes to choosing your fonts, there’s a lot to consider; most importantly, the brand’s personality, the product or service on offer, and the audience. With infinite different font designs on offer, each bringing its own mood and style to the table, choosing the right font should not be a quick decision.
While it’s tempting to use multiple typefaces within a single design, it can be overwhelming for the user. If you’re new to font pairing and typography, start by using fonts from the same family—or, in other words, a single typeface. As fonts from the same typeface were created to work harmoniously together, sticking to one typeface will automatically give your interface a more cohesive look.
Many typefaces still come with enough range to ensure that you have ample font variations for different purposes. For example, some typefaces include features like italics, extended, bold, and condensed options. While these do allow for more creative arrangements, playing around too much with font styles should be avoided.
Not all fonts are created equal(ly legible), and when it comes to readability, it’s always better to play it safe. While serif fonts, the go-to choice for print, are traditionally hailed as being more legible—sans-serif fonts lend themselves better for digital interfaces.
Readability refers to the quality of the overall reading experience. UI designers achieve readability by carefully managing the contrast, size, composition, and color of the type. The text on your interface should flow intuitively for your users, keeping the cognitive load at a minimum and remaining accessible for those who may have visual impairments.
In many parts of the world, users commonly read from left to right, top to bottom—so keeping your text to the left is the first step in ensuring readability. A consistent left edge also provides a place for the eye to return to after finishing each sentence, which makes reading a block of text both faster and easier. When formatting, it’s good practice to avoid having a “widow”, which is a single word on the last line of a paragraph.
White space is a key way to lessen the amount of text that readers have to absorb one go. Good use of white space will command your users’ eyes, telling them what to read—and how to read it. Use it mindfully and intentionally; skimping on white space may mean your users struggle to distinguish words that are placed too close together. On the other hand, too much white space will be confusing for the user.
Good hierarchy can be accomplished by employing the use of contrast, paddings, alternating text sizes, and margins.
Line-height, also known as leading, refers to how the text is spaced vertically in lines. While the ideal line-height depends on the size of the font itself, if you’re using a standard font size of 16, a line-height of 1.5x is widely considered to be a good starting point. You can adjust your line-height accordingly if your base font size is smaller or larger.
Letter-spacing is the spacing between each individual letter. Letter-spacing is often overlooked by designers, but it could make all the difference to your text’s readability. Some basic guidelines to consider when using letter-spacing are:
- Increase letter-spacing with uppercase text
- Decrease letter-spacing when increasing font size
- Decrease letter-spacing when increasing font weight
Line length refers to the width of a block of text. Shorter lines are favored, as they’re more comfortable to read. Based on a screen size of 1440px and a base font size of 16, the suggested line length for on-screen text is within the range of 60 to 80 characters. This range can be adjusted to 35 to 45 characters per line for mobile screens.
Scalability is the art of responsive typography. Responsive design refers to user interfaces that adapt and re-adjust depending on the screen size. Some typefaces are easily visible when passed at larger sizes, while on the other hand, typefaces with very fine letterforms or overly adorned designs may crack at smaller settings. Ensuring your typography is scalable is a vital step when incorporating typography into your user interface.
Scalable fonts, also known as outlier fonts or vector fonts, are fonts that can be enlarged or reduced without resulting in any distortion. The outline of each character is stored as a mathematical formula. Aside from offering innumerable sizes of each font, scalable fonts have an added advantage in that they make the most of an output device’s resolution. The more resolution a monitor has, the better a scalable font will look.
If your font system (a family of fonts used across your product) includes fonts intended for multi-use, from small labels to larger headlines and bulk content, opt for a typeface that is compatible with multiple sizes and promotes readability and usability in every size.
Regardless of the purpose, the type will always lead the UI. Your text will master if you set it properly, and it will fail if you set it wrong. All the UI design practices are applicable to your selected typeface.
An accomplished UI design comes with excellent typography. Thereby, a text which scores high in flexibility and scalability can rule the race of fluid encounter with your design.