All language subtitles for 11. Styling - Themes (Typography)

In our last lecture we got our first look at the material UI theming system and how we can use the palette

to manage our colors.

Now I want to take a look at the other part of the theme that is built for styling and that is for the

styling of text using the typography component the typography component manages the styling for text

in the same way that the palette manages the styling for our color system.

It gives you lots of presets for different kinds of text that may appear on your page and then obviously

allows you to customize each property as you need so let's start by going and taking a look at what

those default provided options are so here in the material UI documentation under customization and

then at the bottom default theme we can see the default theme object the material UI provides to us

last time we took a look at the palette but this time we're more interested in the typography object

here you can find and changed the default for the font across your application.

You can see here that the font family is set to the default of rubato and then falls back depending

on whether or not the user's browser has the specified font underneath the font family is the font size

and this is where you can change the base font size for the application.

Although the way the material UI actually handles fonts with the typography component is a little different.

So you set the font size there but then under each of these variants you can see here the H1 H2 H3.

These are called the typography variants and you can access them with the variant prop they I'll show

you in a minute.

And here they use a font size based on RIM and that is a responsive unit.

They actually is based on this font size that you set here.

So as you said a central font size with this number.

They then generate proportional responsive font sizes for each variant.

This helps the consistency and the look of your application across all device sizes under the font size.

You can see that they also specify the font weight for multiple versions of the font which are again

specified in customizable for each variant so let's go over to the code editor and give it a trial for

ourselves.

So you can just see how this actually works in action here we are in the project directory and I mean

the header component under the UI folder and at the top here I'm just going to start by importing the

typography component that's Thai pornography.

From Adam material UI such core slash Thai pornography all right.

And then we're going to come down and inside of our toolbar where we have our title which right now

if you have it running you'll remember is just our basic little default font right there.

And so if we come back and we instead we wrap our little title with a typography component so we'll

move this inside of their

and then we need to go and set like I said the variant variant within a prop on the typography component.

Actually that's like this.

So just inside of quotes and now we specify whichever one of those variants from the default theme.

So if you don't remember those are right here.

So all of these we have H1 H2 H3.

Let's actually come over and under the styles actually no under the component API.

If we scroll all the way down to typography here at the bottom Okay actually it was under components

and then at the bottom typography under data display.

And here it actually gives us an example of what all of these look like.

So you can see the H one and then it gets progressively smaller and then your two options for subtitle

one.

The second one bolder your body one and then a smaller body to button text.

Very small caption text and your overlying text.

So those are all of the different variants that we have available to us.

So what's come back and let's just try in each three variant for our title.

So if we go ahead and save this and make sure that your development server is still running and come

over to the browser and you can see here they are text now when from that small on styled version to

now this nice it has the robot's font as well as the specified font weight for h three which is here

on the default theme c h three font way of four hundred so you can see that here.

But what if we want to change that and I now want him saying Make that a font way of 300.

Well we can go in and go back to our theme here and in the theme J.S. outside of the palace objects

we're going to give it a another property.

And that is the typography property and that is going to be an object.

And here we can set our customizations for any of the variants.

So I'll go ahead and put the h three and then open that up and inside of here I can change that font

weight to 300.

So if you go back and see just to remember this is what it looks like right now.

And then once we save we flip back and bam you can see that that updated to the thinner text because

we are customizing our typography variant here in the theme another property that we have to control

the styling of the text with our typography component is the color prop.

This can be said to either of the theme options between primary which if we it here we'll go over and

see the text disappeared because it's now the same color as our primary colored app bar.

But then if we go back and we change our color now to secondary and we save and go flip over you could

see our secondary color and we actually have another option exposed to us as well which is the error

which we can see gives us that red.

Let's go ahead and undo that though.

So we'll just leave with our regular normal color but what if you don't want to actually change the

h three for all of them but you just want to specify changes for your age three right here.

Well we can do that using the inline styling system that we will get into in the next video.