Em

Emphasis component.

Usage

<P>
	This <Em>is</Em> emphasized.
</P>

Here's the <Em /> component in action.

This is emphasized.

Notice that <em> tags will go inside <p> tags and inherit whatever typographical attributes that paragraph has.

<i> vs <em>

Some developers may be confused by how multiple elements seemingly produce similar visual results. <em> and <i> are a common example, since they both italicize text. What's the difference? Which should you use?

By default, the visual result is the same. However, the semantic meaning is different. The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use <cite>.)

This means the right one to use depends on the situation. Neither is for purely decorative purposes, that's what CSS styling is for.

An example for <em> could be: "Just do it already!", or: "We had to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.

An example for <i> could be: "The Queen Mary sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named Queen Mary. Another example for <i> could be: "The word the is an article".

Features

• Drop-in replacement for the native <em> element.
• Opts-in to your design system's typographic styles.

Source

import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'

/**
 * An em component.
 */
const Em = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => <em ref={ref} className={cn('em', className)} {...props} />)
Em.displayName = 'Em'

export { Em }

Styling

.em {
	@apply font-sans italic;
}