The Right Bold & Italic for the Right Job

Imagine a world without italic typography. How would you style magazines, books, newspapers, TV shows, and other titles? You’d have to settle for underlines or quotes. Now imagine no bold typography. How would you establish hierarchy or design your headings? Without italic or bold, how would you create emphasis or a lot of emphasis? It’s a designer’s bad dream: a world with no bold, no italic. Not only do designers want a font with those styles, but in many cases they will also need them.

Bold and italic styles are valuable additions to a designer’s repertoire. But design is in the details. When it comes to styling bold and italic in your Cascading Style Sheets (CSS), there’s real bold and italic, and then there’s fake bold and sloped italic. You also need to use the appropriate HTML elements for the person who is reading the text, or for the reading software they might use.

Italic

The word we know as italic comes from Italikós, Greek for Italy, which is appropriate given the origins of italic typography. Italian scholar and humanist Niccolo de Niccoli produced what is considered to be the first casual, italic lettering in the 15^th century. In the 16^th century typecutter Francesco Griffo da Bologna and printer Aldus Manutius produced a book using italic typography, and they created a hit. Italics became so popular that their competitors designed pirated versions, naming them after the country of origin, Italy, giving us the term italics that we use today.

During their early development, italics were only minuscule, lowercase letters, but over time they expanded to include other characters. Most of us think of italics as an almost cursive interpretation of their regular counterparts. The Monotype Baskerville™ typeface is a good example of italics that have that handwritten quality.

But obliques, which are considered italics, are very much not cursive in appearance. They are more slanted and as a result, appear more conservative. Consider the Univers® typeface, and its 55 Oblique.

Use italics for titles of books, magazines, TV shows, and movies. Italics can also designate foreign or technical words and can be used to stylize a thought.

And italics also emphasize words or phrases within your running text, adding stress in the same way somebody speaking the word would more forcefully say it.

Bold

Bold typefaces, also called boldface, arrived in the 19^th century, long after italics became accepted. A typeface with bold weights may have incrementally heavier styles, as in the case of the Univers family that has bold (65), black (75), and extra black (85) weights.

Serifs, such as the Baskerville design, also have bold weights.

Depending on the typeface and how expansive its family, bold designs may exist for condensed, italic, oblique, and extended styles. Use bold in your layout to create differentiation between your headings, subheadings, and running text.

Bold also adds increased emphasis, more so than setting a word in just italic.

And bold makes you notice important words.

Faux Styles, Faux Pas

Faux styles are faux pas when using Web typography. It’s bad form and avoidable if you know the right way to style your Web typography with CSS. Notice the difference between the two italic examples below, with their respective CSS below each image.

i {font-style: italic;}

i {font-family: "MTBaskervilleETW01-Ital";}

The topmost Baskerville example is sloped forward and the bottom example using font-family is proper italics.

You also need to be aware of this issue when setting bold weights.

b {font-weight: bold;}

b {font-family: "MTBaskervilleETW01-Bold 1190971";}

The topmost bold example uses faux bold and the bottom example is properly created. Although these examples are set in Baskerville, if we conducted this font-weight and font-family test with a sans serif like Univers, we’d see similar results. The solution? Declare bold and italic using font-family.

We avoid faux italic and faux bold using the methods above while designing in Monotype’s Typecast™ to preview fonts, and it works exactly like we want. But only a single font-family gets declared and this would pose a problem since you need a fallback in case Baskerville does not load.

In addition to specifying a fallback or many fallbacks, if you’re writing your own CSS, you would use style-linking with @font-face, which would allow you to use font-weight and font-style to declare bold and italic for not only Web fonts such as Baskerville, but also for fallback fonts such as the web-safe Georgia® typeface.
The CSS might look something like this and would need cross-browser testing, as well as previewing in older, legacy browsers to make sure it renders properly.


@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Regular");
font-weight: normal;
font-style: normal;}

@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Italic");
font-weight: normal;
font-style: italic;}

@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Bold");
font-weight: bold;
font-style: normal;}

@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Bold Italic");
font-weight: bold;
font-style: italic;}

p {font-family:"Your Serif Font", Georgia, serif;
font-weight: normal;
font-style: normal;}
i {font-style: italic; font-weight: normal;}
b {font-weight: bold; font-style: normal;}
.b-and-i {font-weight: bold; font-style: italic;}


On the other hand, writing CSS may not be your cup of tea. If you’re using Monotype’s Web Fonts then the Fonts.com Quick Start Guide makes light of the work. When creating a new project in Fonts.com, be sure to take advantage of family grouping to control and deploy your fonts, as well as weights and styles, in a clean way that’s also standards-friendly. Family grouping also allows you to use various weights (100-900) in an easy-to-use editing environment.

Hearing & Seeing the Right Element

Web typography is not only seen, but it can also be heard thanks to screen reading software. Screen readers enable blind or visually impaired people to have text content read to them using text-to-speech. They hear emphasis placed on words as you’ve labeled them with <em> or <strong> HTML elements. Create different styles for bold <b> and strong <strong>, as well as italic <i> and emphasis <em>, and use those elements appropriately in your HTML. Each one has a different application, so do not use them interchangeably.

Emphasis and Strong: When styling text with emphasis or strong consider how the words will sound. Style your emphasis <em> elements with italic or oblique typography to designate a word or words that require the reader or reader’s software to put emphasis on the text. Use <strong> for important contents. Screen reading software relies on your use of HTML emphasis and strong elements to know what words require stress, so the person hearing the text gets the proper effect.

I did not eat the last cookie.

I did <em>not</em> eat the last cookie.

Visually, you can use uppercase for a more forceful effect.

I did NOT eat the last cookie.

I did <em>NOT</em> eat the last cookie.

Use strong <strong> for important content.

Warning! The pan will be hot.

<strong>Warning!</strong> The pan will be hot.

Italic and Bold: Like emphasis <em>, italic <i> elements also use italic or oblique styles, but reserve italic <i> for titles. You can also use italics to offset headings, subheadings, and even pull quotes. Bold <b> should be used for weight changes, such as making headings, subheadings, or running text stand out.

Type Haiku by Jason Tselentis
A book that I read
Entitled Learn About Fonts
Taught me about type


<b>Type Haiku</b> by Jason Tselentis
A book that I read
Entitled <i>Learn About Fonts</i>
Taught me about type


You can also combine bold and italic for added variety, as in the case of the poem’s title being both bold and italic.

Type Haiku by Jason Tselentis
A book that I read
Entitled Learn About Fonts
Taught me about type


<b><i>Type Haiku</i></b> by Jason Tselentis
A book that I read
Entitled <i>Learn About Fonts</i>
Taught me about type


Write HTML & CSS for the Right Job

Use bold and italic typography to add variety to a layout and to establish hierarchy. And use italic for titles. But also be aware of how people will read and hear the text, taking care to use emphasis <em> and strong <strong> elements appropriately. Finally, take comfort in knowing that a world with no bold and no italic is imaginary, a bad dream. Or is it? The only way to make absolutely certain? Say No to faux.