Emphasis is the exaggeration of words. In text, emphasis is expressed by contrasting the text face with bold or italic faces. The human eye can easily spot differences in color — the brightness within a text block — when using bold or italic type, the variation in weight and style indicate a hierarchy of information.
Levels of emphasis are indicated by changing the color of text. Italics do not have much affect on color and therefore provide light emphasis. With light emphasis, words do not stand out as much from the text or interrupt the flow of reading. Light emphasis is used for marking passages that have a different context, such as words from foreign languages and book titles. Bold, on the other hand, makes text darker; the emphasized text strongly stands out. Bold is best used to highlight keywords and important information for easy scanning of text. For example, printed dictionaries often use bold for keywords and names of entries.
Text is typically set regular or roman — there are exceptions such as reversed text. Heavier or lighter weights are typically used for display purposes — headings and subheading are often set in bold like they are on this website. Emphasis is different than hierarchy; within running text we want to keep the flow of reading. Italics are much more commonly used for emphasis because they are less obtrusive.
Italics are used for many reasons other than emphasis: book titles, names of art, musical works, films, plays, television shows, ships, aircraft, terms, definitions within a sentence, referenced letters, species, and foreign words and phrases to name a few.
Do not over emphasize. If everything is emphasized nothing is emphasized.
Use italic for light emphasis and bold for strong emphasis.
Small capitals can also provide emphasis and are commonly used as visual cue on the first line of a paragraph or chapter with or instead of a drop cap.
Another option for emphasis, are all caps. All caps can help distinguish headings and headlines — but should not be used within running text.
Bold and italics are designed to contrast regular or Roman text. This contrast provides emphasis on short words or phrases but should not be used for long stretches of text as the contrast will interrupt the flow of reading.
Please emphasize this line of text. It is important.
Please emphasize this line of text. It is important.
Avoid using italics for emphasis if using a sans-serif typeface. Unlike its serif counterpart, the italic font in a sans-serif typeface has a much more gentle slant that contrasts the regular text less — providing little to no emphasis just a distraction.
Please emphasize this line of text. It is important.
Please emphasize this line of text. It is important.
You can use bold or semibold for emphasis. This site uses a semibold to ensure counters stay open at text sizes and better keep the flow of reading.
Avoid using weights heavier than bold such as black or ultra. These heavier weights are intended for display type and don’t perform well at text sizes.
Avoid using light or thin text for emphasis; a lighter weight essentially de-emphasizes text. This site uses this technique to de-emphasize HTML tags and code within running text.
Type on the Web is marked up in HTML. We set bold and italic using the <b> and <i> tags, but emphasis is expressed using the <strong> and <em> tags. Both <b> and <i> refer to visual styles, in other words, when you want the text to look bold or italic. However, if you wanted your text to both look bold and have emphasis you would use the <strong> tag.
There is no visual difference but there is a semantic one. Blind people, who access a website through text-to-speech programs, can not see the <b> or <i> tag, the text-to-speech program will not do anything differently. But if you use the <strong> tag, the text-to-speech program will speak the text with emphasis to convey that the text is important, or in the case of italics, pronounced differently.
Do not use underlining for emphasis in running text; it is too distracting. In print underlining is used for secondary emphasis, marks added by the reader. On the Web or in interactive documents, underlining is reserved for hyperlinks.
Hypertext is text that links to other text. Hypertext is different from HyperMedia — hyperlinks outside of the text — such as graphics or the user interface. We give hyperlinks visual hierarchy through emphasis but rather than using bold or italics, we underline the hypertext and set it in a different color to make it distinguishable from the non interactive text. Hypertext allows a reader to navigate information in a nonlinear fashion and therefore has the potential to interrupt reading and the author's intent. As we have alrady discussed, on the Web, readers skim and scan text looking for something specific; to aid the foraging process, follow the rules:
Ensure hyperlinks stand out.
Avoid long hyperlinks, short ones are easier to scan.
Avoid needless repetition.
Only link words that represent options.
Consider finding the planet Jupiter in the following examples.
Both examples ensure the link stands out by changing the color and reinforce interactivity by underlining it and providing feedback on hover. However, by applying emphasis on the entire line of text, we are forcing the reader to read line-by-line. Additionally, repeating the words planet and dwarf planet bury the important words your readers are scanning for. By only linking words that represent options, the second example, which combines emphasis and visual hierarchy, aids the scanning of text.