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 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 UI design, you need to understand how to use typography to achieve your goal. In this article, we look at how to use typography in UI design.

how to 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:


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

Wide Proportion

This point to the thickness or width of the 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 allows for non-modified character shapes.  Wide letters are preferred to compressed letters since they give better letter recognition and improve the legibility of the text.


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

Letter Spacing

The only thing that you need to consider in spacing between letters is that the bigger the text, 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.

Text is UI

The difference between skilled and ordinary designers is in their view of text; skilled designers see the text as the UI while ordinary designers will see it as another piece of content. In the modern digital sphere, your text ought to support a functional element, and this makes it equivalent to UI. This means that all aspects of your UI design ought to be compatible with the texts you type.


This point towards 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 ration 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. The website development company team 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


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 finalizing the text that you will incorporate into your UI design, you need to look into different scenarios. You will also need to know how to mould and match the text. An example is when there is an alert message. The original text needs to stand out from the text in the alert message, and this brings meaning to the fact that a great user interface is one that experiences challenges but comes out unscathed down the road.

Use the Actual Text

When you are testing how the text will behave in different scenarios, then you need to use real text. When you consider UI design, the letters in the actual text hold more significance to the UI design compared to using placeholders despite being useful in some cases.

Test the Typeface

The chances are that the part of the UI design which is confusing in the beginning,  will be easy to miss during the first UI testing. For this, involve people who are not aware that they are part of the testing process and ensure to configure it so that virtually everyone can understand it.

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, then you need to test it on a mobile platform and if it is a website, use the same platform.

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. 

MediaOne 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.

January 10, 2019

Get A Free Digital Marketing Consultation & Start Getting Sales & Leads!

Go top