A technique for bringing attention to an area of text or image.

Highlighting is an effective technique for bringing attention to elements of a design. If applied improperly, however, highlighting can be ineffective, and actually reduce performance in these areas. The following guidelines address the benefits and liabilities of common highlighting techniques.1


Highlight no more than 10 percent of the visible design; highlighting effects are diluted as the percentage increases. Use a small number of highlighting tech-niques applied consistently throughout the design.

Bold, Italics, and Underlining

Use bold, italics, and underlining for titles, labels, captions, and short word sequences when the elements need to be subtly differentiated. Bolding is generally preferred over other techniques as it adds minimal noise to the design and clearly highlights target elements. Italics add minimal noise to a design, but are less detectable and legible. Underlining adds considerable noise and compromises legibility, and should be used sparingly if at all.2


Uppercase text in short word sequences is easily scanned, and thus can be advantageous when applied to labels and keywords within a busy display. Avoid using different fonts as a highlighting technique. A detectable difference between fonts is difficult to achieve without also disrupting the aesthetics of the typography.


Color is a potentially effective highlighting technique, but should be used sparingly and only in concert with other highlighting techniques. Highlight using a few desaturated colors that are clearly distinct from one another.


Inversing elements works well with text, but may not work as well with icons or shapes. It is effective at attracting attention, but adds considerable noise to the design and therefore should be used sparingly.


Blinking—flashing an element between two states—is a powerful technique for attracting attention. Blinking should be used only to indicate highly critical information that requires an immediate response, such as an emergency status light. It is important to be able to turn off the blinking once it is acknowledged, as it compromises legibility, and distracts from other tasks.

See also Color, Legibility, and Readability.






Notice: Trying to access array offset on value of type bool in /home/crtivo5/4i.design/wp-content/plugins/advanced-custom-fields-pro/includes/api/api-template.php on line 499

By Desigeers, For Designers ✍️

The 4i.Design Meant to serve the vaiarity of designers and problem solvers around the world, this make us in a need for more and more content to be added on daily baises.

Take a step & support others by contributing and sharing helpful content as well.

Share Something

Trending 🔥

Few topics are on fire!

centered,lean,Thinking,sprint,design sprint,Design thinking,SIT,design,lean ux,design sprint foundations,centered design,methodology,ui,interaction