Before you use Typography, a semantic component may be more appropriate.
Typography will always wrap children in a span. You can customize the tag it renders by using the as prop from styled-components. WARNING: If using TypeScript, it will not switch types and some props may error. You can add // @ts-expect-error. See styled-components issue.
Please wrap the text you would like to make italic with an <em> or <i> tag.
The <em> tag is used to define emphasized text. The content inside is typically displayed in italic. A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic. The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc. Use the <i> element only when there is not a more appropriate semantic element.
Please wrap the text you would like to make bold with an <strong> or <b> tag, or pass the tag using the as prop. The strong tag has similar benefits to em, but calling out that this text is important opposed to emphasized. Read more from MDN.
// @ts-expect-error. See{' '} styled-components issue .10.19.0