How to Use Typography in UI Design in 2019 and Beyond

how to use typography in UI design

When it comes to UI design, every element in the layout matters and typography is one of the best ways to improve UI design. However, typography is considered to be the hardest part of UI design and to create an effective UI design, you need to learn the basics of typography science, but most designers and webmasters do not understand how to use typography in UI design.

As a web designer, you need to have a huge scope of the text, and not merely view it as content, but as a fundamental aspect of UI design. Statistically, web design consists of 95% typography, and you need to go beyond the typeface. To optimize your typography for UI design, you need to consider accessibility, readability, graphic balance, but the most critical aspect is usability. 

What Is Typography?

In his book, ‘The Elements of Typographic Style,’ Robert Bringhurst, a Canadian typographer defines typography as the craft of giving human language a durable visual form. More so, typography transforms language into a decorative visual element. Typography can also be defined as the science and art of appearance, font style, and structure with the aim of delivering aesthetic and easy to read text.

Typography should be at the centre of your website design whether it is for mobile apps or websites. So, for you to be successful in creating exceptional web design, you need to understand how to use typography to achieve your goal. 

how to use typography in UI design

Let’s look at how we can use typography in UI design:

  • Size Matters A lot

It is common to see that many designers incorporate text elements that vary in size for example, section headers, field labels, button copy and more. Generally, some typefaces are best suited for large sizes while others look best when used for letter forms or in small sizes.

With that said, you will need to consider the scalability of the text if you have a typeface that you want to apply to small labels and large headlines. While you will prefer a typeface that looks a certain way; consider one that is compatible with multiple sizes, and those that promote usability and readability.

  • Stark Letterforms

One of the worst things that you can do in typography is to have letters that are not differentiable in a sentence or a body of text, and this makes it difficult to pass on the message. Studies show that figures are often neglected compared to letters when deciding the attributes of the fonts of a project.

For example, uppercase I’s and lowercase L’s are easy to confuse. Another case is when a lowercase R and lowercase N; if placed together some fonts will make it look like lowercase letter M. Be wary of fonts that get this mixed up and choose fonts that pay attention to legibility, typeface, details, and letters. There is more to this tip, and you must consider the several factors such as:

  • X-Height

Statistics show that we come across lowercase letters 95% more times than we encounter uppercase letters. However, you need to keep a large difference between upper and lowercase letters to enable you achieve a clear typeface. The best thickness for a character stroke should be 18% of the height of the letter x, which is known as x-height.

  • Wide Proportion

This refers to the thickness or width of character outlines relative to its height. In most cases, a lighter typeface is clearer than characters or letters with a heavy typeface. The proportion has a correlation to counters (covered below), and it enables non-modified character shapes.  Wide letters are preferred to compressed letters since they give better letter recognition and improve the legibility of the text.

  • Counters

This is the space within the letters, d, o, b, e, and u. Typography experts believe that the larger the extent of counters in a body of text, the better a reader will be able to recognize the letters.

  • Letter Spacing

If the text is bigger, you need make the spacing smaller and relevant to the size of the text. When you couple large letters with large spacing, the typeface appears too open, and this prompts you to set the spacing manually. Manually setting the spacing is only applicable to headers in UI design.

  • Readability

This refers to the quality of the overall reading experience, and it is defined as the ease with which we can recognize headers, paragraphs, sub-headings, blocks of text, as well as understand the displayed text. You can think of it as some macro typography that makes the text attractive to encourage site visitors to read the content.

To leverage on readability as part of your typography, you need to manage the colour of the text, contrast, composition, size, among other aspects to enhance the reader’s experience. Here are points you should consider to improve the readability of your text:

  • The Serif Fight

Traditionally, serifs were thought to be more legible, and printers preferred them and would incorporate it in large block texts. Serifs enable eye flow through the body of the text, but it is not the case with text on websites and mobile. Sans-serif fonts have high readability, especially when used on simple letter forms. These are better for smartphone applications as well as website content publishing.

  • Line Height

The golden ratio in readability regarding line height is that you ought to multiply the letter size by 1.618 and the resulting figure should be the line-height to use. With time, however, you will be able to predetermine the line height according to your UI needs, since you are at the liberty of tampering with the rules whenever necessary.

  • Text Block Width

If your text block is too wide, then reading it will be too tiring for the eyes, and if it is too narrow, the reader will try to follow each line and thus hinder the reading flow. The ideal width of your text block should be between 50 and 70 characters per text line, and this will keep your readers engrossed in what you have to say. Website development company teams have software for measuring this accurately.

  • White Space

White space reduces the amount of text that your visitors will have to read at a go. This improves readability and avoids the page from appearing as congested. The white space forces the eye to notice the layout, and in turn, it gives the allure of order and finesse of the content.

how to use typography in UI design

  • Hierarchy

The hierarchy of your text determines the reading pattern, and it gives guidance to the reader on how to separate the header from the subheading and the body of text. You can use contrast, margins, text sizes, and more to accomplish the hierarchy of text. However, you need to experiment with the hierarchy to improve readability. 

  • Rhythm and Repetition

The essence of repeating any element used in UI design severally is to achieve unity of the content. You can achieve repetition using boxes, text size, colours, margins, padding, as well as text background. With repetition, your text and UI design will gain a rhythm.

  • Scenarios in View

When you are almost finalising the text that you will incorporate into your UI design, you need to look into different scenarios the text will be used. An example is an alert message. The original text needs to stand out from the text in the alert message.

  • Use the Actual Text

When you are testing how the text will behave in different scenarios, you need to use the actual text. The letters in the actual text are more important compared to placeholders, despite placeholders being useful in some cases.

  • Test the Typeface

When it comes to the testing process of your typography, you should do it on the actual platform. This means that if you are creating a smartphone application, you need to test it on a mobile platform.

Conclusion

The typography of web text makes it more than a body of content. In fact, it can be perceived as functional element that is part of the overall UI design. With the above tips on how to use typography in UI design, you will be able to optimize your text to be scalable and flexible. 

get google ranking ad

MediaOne’s team can help you get a clearer perceptive of this topic and improve your website design. Get in touch with our support team for a free and no-obligation consultation session and ore details about website development and digital marketing services in Singapore. 

 

Author Bio

Tom Koh is widely recognised as a leading SEO consultant in Asia who has worked to transform the online visibility of the leading organisations such as SingTel, Capitaland, Maybank, P&G, WWF, etc. Recently he was instrumental in consulting for a New York-based US$30B fund in an US$4Bn acquisition. Tom is a Computational Science graduate of the National University of Singapore. In his free time he performs pro-bono community work and traveling.
Google+

Leave a Reply

Your email address will not be published. Required fields are marked *

Get FREE Website & Digital Marketing Quote Today!

Go top
close-link
close-link