Italics

As explained in Design for Developers

Italic text is text rendered with slanted letterforms to indicate emphasis or a stylistic treatment.

Italics use slanted letterforms to emphasize words or give text a different voice. True italics often add script-like design details, while oblique styles mainly slant the regular characters. section 8.1.3

Choose the markup according to what the styling communicates:

• Use <em> when italics add emphasis. section 8.1.3
• Use <i> when italics mark an alternate mood or voice, or distinguish idiomatic, technical, or taxonomical text. section 8.1.3
• Use a generic HTML element with a CSS class and font-style: italic when the treatment is purely decorative. section 8.1.3

A practical choice

In “Read the instructions carefully,” use <em> for the emphasized word. In a technical term or an expression written in another voice, use <i>. For a visual accent with no semantic meaning, apply a CSS class instead. section 8.1.3

Figure 8.10 Italics aren’t just slanted; they have design elements added that make the slant feel more cursive and natural.

Compare true italics with ordinary slanting: italic letterforms introduce design changes that make the text feel more cursive and natural. section 8.1.3

How Design for Developers covers it

How deep it goes

Distinguishes italic from oblique styles and specifies semantic HTML choices, but stops short of detailed CSS implementation.

Examples

Compares true italics with oblique fonts and demonstrates emphasis, alternate voice, specialized text, and decorative styling.

What it assumes

Assumes basic HTML and CSS familiarity while distinguishing semantic emphasis from decorative presentation.

What you can do after

Apply italics accessibly by matching HTML semantics or CSS styling to the intended meaning.

How it connects

Connects italics with typography, emphasis, accessibility, semantics, HTML, CSS, typeface mood, and readability.

liveBookmanning.com

Read Design for Developers on liveBook Get the book at manning.com

Related concepts

• font stylekind of · A font style is a stylistic variant of a typeface distinguished by properties such as weight, width, slant, or spacing.
• oblique facecontrasts with · An oblique face is a typographic style produced by mechanically slanting the upright forms of a typeface.
• em elementproduced by · The em element is an HTML element that semantically marks text for emphasis or stress, conventionally rendered in italics by browsers.
• markup languageconfigured by · A markup language is a formal language that annotates content to specify its structure, presentation, meaning, or processing.

This explainer was generated by Manning's knowledge graph from the text of Design for Developers. The section links point to the parts of the book it draws on.