An em element with control for typographic attributes.
Generally, em tags will go inside p tags and inherit whatever typographical attributes that paragraph has. But because ems are not limited to being inside paragraphs, this elements also allows you to control typographic attributes.
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".
An em element with control for typographic attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| weight | enum: black, extrabold, bold, semibold, medium, normal, light, extralight, thin | No default value | The font weight. |
| size | enum: 4xl, 3xl, 2xl, xl, lg, md, sm, xs | No default value | The font size. |
| align | enum: left, center, or right | No default value | The text alignment. |
| tracking | enum: tighter, tight, normal, wide, wider, or widest | size-dependent | The letter spacing. |
The tracking's default value depends on the size prop and is controlled through CSS variables: check out the styling section.
<P> This <Em>is</Em> emphasized.</P>Here's the <Em /> component in action.
This is emphasized.
/* ### Typography ### */@layer components { /* Em */ .em { @apply italic; }}The typographic styling is actually pretty simple once you wrap your head around it. For an explanation check out the Fluid Typography Sizing and Scales article.