Treating Text As An Integral Element of UI Design

More often, when designing for UI, the primary focus tends to be on site navigation, layout and imagery. Even with talk of importance placed on user experience and quality content, text – particularly body copy – gets ignored until later in the game and dropped in as an afterthought.

When you really look at the elements of an interface, the majority of what drives the design is type. Both the layout and font choice are critical aspects that will determine the success or failure of a site. When all the layers of image and color are peeled back, the reality is that the majority of UI is text. Ensuring that this driving design element is handled properly through placement, context and hierarchy are key.

Font Choice

The fonts chosen for site content should be given as much effort as those selected for a logo. Just as a logo can set the tone for the vision of a brand, headline and body copy can dictate the users’ emotion and set a kind of visual narrator for the content. Type will become a primary component of the user experience on a site or application, so it’s important to view the entire context to deliver the right formula. While it’s important to focus on the overall design of the site, and how the typographic elements intermix with their visual counterparts – it’s critical to remember that the purpose of the content is to help the user solve a problem and accomplish a goal oriented task.

Layout

A site that is readable will move way ahead in engagement than those that employ non-readable and highly non-fluent fonts in unappealing sizes. Body copy is the most important aspect of readability – a logo or title, seen in a larger font is less important for usability than that of the longer, body copy material. When choosing font size, the general rule is a 10-12px range as the norm, with a recommended 14-16px for optimal readability. Ensuring a font is big enough to draw the users attention but not making it so large that it becomes clunky, making other visual elements look too small – it’s all about balance and context. The average website contains a great deal of content within its pages, so there’s rarely an instance where just one typeface will suffice – both from a design and usability perspective. A general rule to follow is the application of one font for headlines and one for body copy, this is in addition to the fonts used in a logo or branding assets.

The Mobile Aspect

With respect to mobility, whether using responsive design or not, there is no questioning the importance of an optimized mobile experience. With many using mobile devices over desktops on the rise, users are ingesting information on their devices at a rate that seemingly multiplies on a daily basis. To keep a users attention, the type must be considered so as to keep the users attention with easy to read copy.

Testing

Even when using web-safe fonts, conduct a series of A/B testing rounds to ensure a font (or fonts) make an impact on conversion rates. Testing appearance across multiple browsers and platforms will ensure all users see a consistent original design and confirm whether a text font and size are optimal.

The main key here is designing for context and consistency with the right font for the brand vision and sizing to match. Taking into consideration the importance of type and font in influencing users – the right implementation of this sometimes overlooked design aspect is paramount to a better user experience and appealing interface design.