On the web, user interface (UI) refers to task-driven elements that guide people to perform certain actions. Whether navigating through a website, filling out a form, selecting a date on a calendar, or toggling a radio button, users will find their way around quicker and easier if the UI is clear and consistent. In contrast, cluttered and confusing UI will frustrate users and prevent them from completing their task.

Although an icon is often used in UI as a visual representation of a word, text is the most direct communication in action-based design. Typography, therefore, plays an important role in user interface. When picking a typeface for UI, I consider the following factors: legibility, modesty, and flexibility.

Legibility

The key element in a well-designed typeface for a web interface is legibility. The letterforms need to be clear and recognizable. Letters with clear distinction in their forms perform better as a UI element. For instance, in many sans serif typefaces including Helvetica, capital I and lowercase l are indistinguishable. As a result, typefaces designed specifically for screen such as Source Sans Pro is a better choice for UI because their lowercase l has a discernible tail.

Modesty

An ideal UI typeface stays out of the users’ way when they try to complete their task, whether that’s making a transaction, filling out a survey, or registering for a service. The goal of an effective UI design is to provide users a logical flow to help them make the right decisions and motivate them to take action. To speed up the flow, the type has to work with the users’ eyes rather than disrupt them. Good UI typefaces are unobtrusive: they ease the way for users, without drawing attention to themselves.

Flexibility

A well-designed UI typeface needs to be flexible. It should work well in various sizes and devices. On a small screen in particular, the type must remain legible; therefore, sans serif faces that are hinted to work at small sizes on low screen resolution are preferred for interfaces. When choosing a type for a web UI, you need to pay attention to the following details: spacious proportions (1), generous x-height (2), modest ascenders and descenders (3), even spacing (4), open apertures (5), and medium to low contrast (6).

Depending on the intention and the goal of a website, no one size or style fits all user interface design. A button to call for action may be more prominent than a button to set personal preference; the main navigation system should be hierarchically above the secondary menu; the UI elements may be smaller and narrower on the mobile than the desktop. Regardless of its context, legibility must not sacrifice. The user interface must be clear, simple, and consistent.