How To Use Text Effectively in User-Interface Design


Text clearly plays an important role in touchscreen user-interface design. However, it quite often doesn’t receive the attention to detail that it deserves.  Many UI designers get consumed with the appearance of the buttons, sliders and other elements of their design, and they let the look of the text fall to the wayside.  One good look at any well thought out touchscreen user-interface, will reveal that just as much attention was paid to the text, as any other elements of the design.  Here I will share some of my own personal guidelines for dealing with text in touchscreen UI design.  Some of these are admittedly, based on personal opinion, but they have always served me well, and I hope you will also find them helpful.

Be Consistent

Perhaps the most important aspect of dealing with text in user-interface design, is consistency.  The text styles you decide on need to be applied consistently throughout your design, or it will be confusing to operate and look very unprofessional.  This goes for everything from font selection to size and weight.  For this reason, make sure you select styles that will work throughout your entire design, so you don’t run into any surprises later on.  Be sure to document all of your text styles and rules so you can easily check to make sure you’re being consistent as your project grows and gets more and more complex.  If the platform your designing for has the ability to define text styles that you can use over and over again, be sure to make use of this feature, as it is a great way to ensure consistency across all of your pages.

Use White Text Most of the Time

With the exception of scenarios where solid white, or very light colored backgrounds are used, white text will provide the best contrast and will generally just look better than black or dark text.  Basically, the rule is, if both black and white text show up well, go with white.  If white text doesn’t show up well enough, go with black or dark grey.  Colors other than black and white (and subtle, grey variations thereof), should only be used for special situations such as green for a “start” button or red for a “record” button.

Put Labels in the Right Place

In situations where a label goes above or below a button or icon, there are some factors to consider when determining which location for the label is best.  In general, labels tend to be more obviously associated with an element when placed below it.  However, there are some situations where placement above the element makes more sense.  For example, if the touchscreen you are designing for will be wall-mounted, or otherwise placed at the users eye-level or above, labels should go above elements to avoid the users hand blocking his view of the label when operating the panel.

Use no More Than Two Fonts

This rule is pretty widely accepted for numerous types of design, and user-interface design is no exception.  Select two fonts that go well together – you can find many great font combinations with a quick Google search – and stick with them throughout your project.  This isn’t to say that you can’t experiment with variations in font weight, width, etc; just make sure you’re consistent with any variations you use.

Differentiate Between Buttons and Labels

It’s a good idea to use a different text style for buttons than you do for standalone labels on the page.  This helps the user easily and quickly differentiate between what is a press-able area and what is not.  It also adds style and professionalism to your page layouts.  One technique that is usually quite effective, is to use a serif font for page labels and a complimentary sans-serif font for buttons.

Don’t Use Bold on Buttons

Using bold text on a button to set it apart or emphasize it, is generally a bad idea.  It usually results in the buttons with bold text just looking weird and out of place.  If you need to make a button stand out, try using variations in color and button style.  These options are more effective than using bold text, and they won’t compromise the integrity of your design.

Use Sans Serif Fonts on Buttons

This is more of a preference, but personally, I have always felt that serif fonts do not work well on buttons.  The more visually complex nature of these fonts tends to make the button look cluttered and too busy.  Sans-serif fonts are much easier to read when used on buttons in my opinion.  However, I would encourage you to experiment with both serif and sans-serif fonts on your buttons, and decide for yourself.

Watch Your Sizes

It’s important not to apply arbitrary text sizes from page to page, with no regard for consistency.  Decide on a size for each type of label in your project, and a default text size for buttons, and write them down so you don’t stray from them as the project progresses.  It’s okay to use smaller text on buttons as necessary, but for the most part, try to stick to the default size you specified.  Also define standards for special buttons like numeric keypads and d-pads, and make sure all the instances of these elements in your project conform to your standards.  Keeping the number of different text sizes in your project to a minimum, and consistently applying those sizes, will give your touchscreens a clean, polished appearance that will enhance the professionalism of your design.

Aaron Craig

Aaron Craig is a graphic designer & entrepreneur. He is the founder of NTDesigns, a UI design firm that specializes in touchscreen based interfaces, especially in the home automation industry. He is the primary author for the NTDesigns Blog, and writes periodically for other blogs and publications in the UI design and automation realms when he can. Aaron lives in Milwaukee with his family and two dogs, Napoleon and Kip.

Leave a comment  




Submit comment