On UI typography

The main principle of typography in User Interface design governs how text in UI elements is mainly functional (as opposed to communicative): UI text serves to explain the purpose of navigation elements, and guides interaction.

Texts in buttons are essentially labels, and labels have specific legibility requirements: the strokes need to be uniform and thick, the character width should preferably be rather narrow (to be more economical in terms of space), and the X-height should be tall, to make the text larger, since type size is by far the most critical requirement for legibility in UI design. This is important given that UI elements need to function in many different sizes, which is especially true in responsive design, where pages size up and down dynamically. Also, serifs tend to create kerning issues, which means characters need to be separated and spaced more liberally, so as to not have characters bump up against each other and create confusion about individual character shapes. That means that serif fonts are inherently less suitable for UI elements.

As for UI typography as it relates to branding, human computer interaction is a universal field – it is not tied to a specific corporate identity. What we recognize as a clickable element, such as a button, and therefore understand how to interact with, is different from what a brand and a CID dictates in terms of recognizability, and the principles of visual persuasion associated with branding. If you think about it, corporations typically don’t have custom designed door handles in their offices, and that is because handles are functional – they are more important to allow people to open doors than they are to establish a corporate identity. The same thing goes for UI elements.

Ultimately, this comes down to how we need our clients to trust that we keep their best interests in mind, while leveraging best practices and maximizing the benefits of our professional experience. The best person to make the distinction between branded elements and functional elements is probably always going to be a designer.


This article explains the issue very well: http://typecast.com/blog/type-on-screen-5-faces-for-ui-design. As you’ll notice, all the recommended typefaces are sans-serifs, for reasons explained above.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s