[Typography] Rename Typography -> Text

[ChristopherTrimboli]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

<Typography /> is a complex word to type and I feel <Text /> is simpler and easier.
"Text" is also probably more internationally known then "Typography". Bit of a fancy word in English.
Characters of code would be reduced and manual coding we do use <Typography /> a lot when typing, would be nice to cut the word count by 60% and just use <Text />.

Examples 🌈

<Typography /> -> <Text />

Motivation 🔦

Make it easier for devs to code Material UI.

[oliviertassinari]

Related:

• Add Image component #22470 (comment)
• [discussion] Preparing v6 #30660

[mj12albert]

I think Header + Text is a good idea! CC @siriwatknp

Some benchmarks:

• Mantine – Title, Text
• React spectrum – Heading, Text
• GitHub Primer – Heading, Text

[mwskwong]

I would name it Heading instead of Header instead. Header usually has the same meaning as app bar.

[ChristopherTrimboli]

I think Heading is almost as bad as Typography, I would keep as just <Text /> with component="h5" for headings.

[arobert93]

Can we have something similar to Chakra typography (Heading & Text)?

I find the new Joy Typography update in beta.0 extremely confusing. It is not clear enough why there is only level h1 to h4, then title-[size] goes from sm to lg but body-[size] goes from xs to xl.

[zanivan]

Can we have something similar to Chakra typography (Heading & Text)?
I find the new Joy Typography update in beta.0 extremely confusing. It is not clear enough why there is only level h1 to h4, then title-[size] goes from sm to lg but body-[size] goes from xs to xl.

Hey @arobert93, thanks for the feedback! ✨
There is definitely room for improvement there—I've gone ahead and opened an issue #38290 that fits better with the discussion regarding Joy UI Typography levels, please, feel free to elaborate on what would be the best approach for this matter there.

[MonstraG]

I just wanna mention that there happens to be native <text/> element, which is an svg element.