Hello and welcome back.
We're going to be talking about typography.
Just like your whole entire design system, not just like your foundation now, this typography like
makes up a lot of your components, a lot of your actual designs.
And I don't think designers put enough thought and care into how they distinguish variations between
typography and how they use it.
So what I've done here, I've taken a lot of time and I put a lot of effort into just creating a nice
tight skill.
As you can see, we're moving 12 to 20 to twenty four, thirty to thirty six forty.
So four pixels is what we're basing a lot of this off of.
So that's the line my phone size is 12 pixels, 16 pixels, twenty eight, twenty eight, thirty two
and forty.
And I think that creates enough variation just for headings.
I created six, kind of like your standard set and we may not use all of this, but I've created it
to give us enough variance maybe in the future.
So as you can tell, like I have the style name here, and these are local typography styles.
And what I've done is I've broken it out just so it's easier for other people to come into this design
system and just understand it.
And in the beginning I mention like what is a design system?
Design system isn't necessarily just providing styles, but also providing so many different things
like context, more deeper understanding of these styles of a developer want to come in.
They would be able to easily understand that, OK, the way is assembled, wait, the line is set to
40 pixels and the font size is set to 40 pixels and they can easily, like, implement that into a component
within your digital design system.
So keep in mind that, you know, this isn't just a language for designers.
A design system is for your team, for your product.
Everyone is using it in one aspect.
And you may have variants of different things like for marketing and marketing may not be the exact
same as how you have treatments within user interface, like in terms of applications and products.
So you can distinguish that within your design system.
You can create different design systems, you can create different categories.
You can have just a design system just for your marketing website.
You can have a design system for just your product and so on.
So I've done this in a way where a developer could easily come in here and understand, OK, this is
my H1 and these are all the different parts of my H1 that I can actually create into a component and
reuse through just code.
You also got the code section over here that will tell you all the different types of styles.
So you have my font style, my font weight, we have my font size and so on.
So that is how I've broken out headings and having is very straightforward or you just have like a pretty
standard scale moving from large to smaller and or vice versa.
Now for text, I've decided to use the category called text just to kind of encompass different things
like body copy.
So I have different variants of that.
Let's go over here.
So I have like a body large, I have a regular, I have a small and of an alternate small if I need
it.
These are kind of your standard body copy styles we have like our font size.
So you'll see that I'm using a lot of different types of font sizes and all over the place I'm not like
using like 14 pixels, 13 pixels, 12 pixels, 11 pixels.
I have definitely a method to all this madness.
I mean, I'm using 16 pixels for my body.
I feel like you're going any smaller than 16 pixels on a mobile screen.
You're going to have some small issues with readability.
I think that's fine with copy that isn't so important.
But when you're trying to display things like product names or more important information, stick to
16 pixels and above.
That's what I have for my body copy.
We don't have a lot of body copy within this application.
I'll show you where we kind of use them.
I have labels, so I have a label style, which is just your top pixel with a typical line height and
it's just a simple label over here.
And I have a hint.
I've given myself a ten pixel hint.
This is just in case I need to incorporate something that's even smaller, maybe like a very small hint,
maybe some fine text.
But I've given myself that option and we can change that in the future.
So this is how I've gone ahead and created my styles.
You see me do this in the past.
It's in the tech section over here and I need to hint with the ten pixel font size and right beside
it is sixteen pixel line height.
And just like that, we have a textile that we can apply, if I wanted to say go ahead and apply something
different very easily, you can apply something different.
So textiles are super important.
And then in my last section, I have a pretty important section called InterAction's.
And here we handle different things where users are going to interact with our text elements, links,
maybe strikethrough.
I have created a strikethrough style just because we have prices and if we want to display something
like a sale, then we have a strike through.
This isn't necessarily something that somebody can interact with.
But I thought it placed well within here because it is very much in relation to our PILT text.
We have a text over here as well, and that is more so for, you know, a little pill containers that
could be Pilchuck boxes or they could be just ways to show like little 20 percent off on the card.
So I've created, like, even text variants for that.
And really there isn't much of variance between some of these things.
Like, you'll see this is an all capped version, and that just makes it much more easier for me to
apply something without having to worry about, like capitalization.
This will just automatically do it for me, save for things like strikethrough or underlines for links.
And you'll see like in my variants as well, if there isn't much difference between my regular version
here and my Ultranet version.
But it's just enough makes your life easier.
So create those variants if you need them, even create them.
If you think you may need them, they may come in handy.
But this is how I've set up my typography system within this larger design system.
And I'll show you in our next videos how we kind of go in and use these different types of elements.