When should bold, italics, and colour be used to draw attention in a sentence?

Question

Following is my signature on some other fora:

Interested in Drawing, Painting, and Crafts?
Please Commit to the Arts and Crafts Stackoverflow proposal!

I cannot show it here but the words "Drawing, Painting, and Crafts" besides being bold and italics, also have font colour green.

How to decide when to use bold, italics, and colour to draw attention in a sentence?

Answer 1

Highlighting is more relative than absolute

Non-designers often don't realize that the style of highlighting is much less important than the relationship between the highlights and non-highlights.

There are all kinds of approaches to creating highlights. One might use font-color, background-color, size, font variation (e.g. italics, underlining) and weight (e.g. "boldness") to create a highlight:

But, what matters more than the specific highlight approach is the relationship between that highlight and the surrounding text:

• How frequently the highlight(s) appear
• How much contrast there is between the highlight and the surrounding text (the greater the difference in font size/weight/color/etc the more prominent the highlight.

Generally, highlighting should similarly to the same way lighting is used in a home, office or a museum:

• In some physical areas (e.g. museum) you will want to highlight specific items, so it makes sense to spotlight the item and darken the surrounding area. This is an example of a prominent, high-contast highlight.

• In other environments (e.g. a workspace) where the user needs to perceive and interact with the entire space without unnecessary distraction, you want to use even lighting to illuminate everything equally and neutrally.

These common-sense principles can be similarly applied to determining the frequency, distribution and prominence of highlighting in text. Some texts (e.g. a novel) don't use highlighting because it can distract the user from the journey/flow of the text. Other texts (e.g. business papers) can use highlighting effectively to spotlight key concepts for busy/distracted/speed readers.

Here is a simple example that shows that the highlight relationship is more important that the particular highlighting style.

In the first example, the highlighted text is colored, bold, italicized and background-colored, but since the rest of the text is also styled similarly, the highlights don't particularly stand out.

In the second example, the highlighted text has only ONE variation: it's size. There is no other coloring, weighting, etc. But since the surrounding text is plain and the frequency of highlights is low, the highlights stand out much more clearly and legibly.

Answer 2

First and foremost; highlighting text should be used sparsely. Otherwise it gets to be noise making it hard for the user to get what you’re trying to communicate. Christian Holst who wrote the article Scannability: How to Highlight Text on the Web says 10% highlighting is the maximum, but I think that’s pushing the limit. Here “less is more” applies.

Highlight can be done in three different ways:

• Changing the style (bold, italic, underline)
• Changing the font type
• Changing the color

All three methods make different effect on the user, and some uses two or three methods at once which I would recommend not to. Stick to one highlighting method to make it easier for the user to understand what is important and what isn’t. If you use color, bold and italic the user may wonder what it means rather than continue to read. Why is it blue if it isn’t a link? Does the green text have something to do with the environment? Is red meant to warn me for something? If you can – I recommend to avoid colors altogether for highlighting and use an offset color (blue) for links only.

That leaves you with two options: style and font type. Font type changing can be fun and look interesting, but should be avoided inline. It’s perfectly OK to use a different font type on headings, but inline it only adds to the users’ cognitive load.

So we’re left with one choice for inline highlighting: style. Bold text makes it very clear that this is important. Italic is more subtle and can be used to calmly make the user aware of that this text is slightly different. It may come from a different source, such as a quote from someone or a callout.

Remember to highlight keywords rather than entire blocks of text. We want the user to focus on what’s important, and keep the highlighting away from destroying our content. One final rule of advice: the more highlight you add in, the less the highlighted it gets.

Answer 3

Use bold and italics to emphasize and colour to embody a feeling. When deciding when to use bold-italics-colour I tend to wield following guidelines:

Emphasis, general:

• limit the use of bold and italics to the strict minimum as the added attention demand raises the cognitive load. If everything is emphasized, nothing is emphasized.
• Bold or italics. Always think of them as mutually exclusive.
• Remember bold or italics were designed to contrast with regular roman text, therefore they're somewhat harder to read.

For Serif fonts use italics for gentle emphasis, bold for heavier emphasis.

For sans-serif fonts, skip italic. Sans serif italic fonts have a slant. Look. Ew.

Moreover

• For­eign words used in Eng­lish are some­times ital­i­cized, some­times not, de­pend­ing on how com­mon they are. (bête noire and Weltan­schau­ung, but not crois­sant or résumé)
• Char­ac­ters ad­ja­cent to the out­side edges of the em­pha­sized text—like punc­tu­a­tion, paren­the­ses, brack­ets, and braces—do not get the em­phatic formatting.
• Some fonts have both a bold style and a semi­bold style. You can use ei­ther for em­pha­sis. Bold has greater con­trast but semi­bold is a lit­tle eas­ier to read. Choose wisely.

Colour, general

• Less color is more ef­fec­tive. Again, if everything is emphasized, nothing is emphasized.
• Color re­mains the id­iomatic way to de­note click­a­bil­ity on the web. So feel free to use color (with or with­out un­der­lin­ing) in your sentence for hy­per­links.
• Protip: mak­e body text on screen dark gray rather than black. Screens have more se­vere con­trast than pa­per, and thus are more tir­ing to read at full con­trast. This is be­cause screens pro­duce color by emit­ting light di­rectly, whereas pa­per pro­duces color by ab­sorb­ing and re­flect­ing am­bi­ent light.

Moreover

• The hu­man eye can more eas­ily dis­tin­guish light col­ors than dark. This is why a paint store will have 50 shades of white and only two shades of black. So if you’re us­ing light col­ors, make gen­tle ad­just­ments; dark col­ors need big­ger adjustments.
• Red has been the fa­vored sec­ond color in ty­pog­ra­phy for hun­dreds of years. To get the most vi­brant-look­ing red, use an old printer’s trick—make it slightly orange.
• Gradients can be used well—or poorly. In the phys­i­cal world, most of the color we see is es­sen­tially a gra­di­ent, be­cause any di­rec­tional light cre­ates a change in bright­ness. So with type, a back­ground gra­di­ent that gen­tly changes bright­ness can give a nat­u­ral­is­tic sense of light and dimensionality.

Read more about colour and typography.

Answer 4

Here is how I use:

• Bold: use for sudden contrast, when the emphasis shouldn't be fleeting and need to refer later, or when the emotion is pushed to extreme
• Italic: use when the word naturally emerge and dissipate into the flow
• Underline: sentence breakdown, because it can differentiate a segment with multiple words, and multiple segment close together
• Quote: wording choice, which can be a new term just being coined, or a sarcasm