What exactly is a Typography component in React?

Question

I'm working with the Material-UI component library, and see the <Typography> component used often. I've read the docs and here is the definition:

Use typography to present your design and content as clearly and efficiently as possible

I'm not sure why this just doesn't resonate with me but it doesn't and seems vague. I went on to read more of the docs, and I see it used in conjunction with elements like the following:

<Typography variant="h4" gutterBottom>
  h4. Heading
</Typography>

Why not just use the following instead:

<h4>h4. Heading</h4>

I'm obviously missing the main use case and concept here and that's why I need some help in understand what exactly I use this for, so I'm not just copying and pasting components where I don't really understand their use. What is the use case for this component and why do I use it?

Answer 1

Like most React component libraries with a common UI/UX design language, Material-UI abstracts away many of the textual elements into a common component - Typography. There are probably more reasons why this is done, but two of the larger ones that I'm aware of are:

• all text will automatically follow Material Design rules (see all sections starting with Basic under the System section)
• since all text inherits from a common theme system, changing your base theme will affect all Typography components uniformly allowing you to maintain a common design language whereas using an h4 tag on its own will not

You can go to the Material Design website for more specifics on their design language. There, you can also read up on their rules for typography.