1
00:00:00,590 --> 00:00:01,940
Hello and welcome back.

2
00:00:02,240 --> 00:00:03,920
We're going to be talking about typography.

3
00:00:05,670 --> 00:00:12,210
Just like your whole entire design system, not just like your foundation now, this typography like

4
00:00:12,210 --> 00:00:15,810
makes up a lot of your components, a lot of your actual designs.

5
00:00:16,110 --> 00:00:22,590
And I don't think designers put enough thought and care into how they distinguish variations between

6
00:00:22,620 --> 00:00:24,420
typography and how they use it.

7
00:00:24,900 --> 00:00:31,350
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

8
00:00:31,350 --> 00:00:32,010
tight skill.

9
00:00:32,730 --> 00:00:37,530
As you can see, we're moving 12 to 20 to twenty four, thirty to thirty six forty.

10
00:00:38,130 --> 00:00:42,990
So four pixels is what we're basing a lot of this off of.

11
00:00:46,440 --> 00:00:51,600
So that's the line my phone size is 12 pixels, 16 pixels, twenty eight, twenty eight, thirty two

12
00:00:51,600 --> 00:00:52,200
and forty.

13
00:00:53,100 --> 00:00:57,000
And I think that creates enough variation just for headings.

14
00:00:57,030 --> 00:01:04,440
I created six, kind of like your standard set and we may not use all of this, but I've created it

15
00:01:04,470 --> 00:01:06,510
to give us enough variance maybe in the future.

16
00:01:08,120 --> 00:01:14,870
So as you can tell, like I have the style name here, and these are local typography styles.

17
00:01:16,510 --> 00:01:22,690
And what I've done is I've broken it out just so it's easier for other people to come into this design

18
00:01:22,690 --> 00:01:24,910
system and just understand it.

19
00:01:25,240 --> 00:01:28,120
And in the beginning I mention like what is a design system?

20
00:01:28,240 --> 00:01:32,830
Design system isn't necessarily just providing styles, but also providing so many different things

21
00:01:32,830 --> 00:01:37,770
like context, more deeper understanding of these styles of a developer want to come in.

22
00:01:37,780 --> 00:01:43,520
They would be able to easily understand that, OK, the way is assembled, wait, the line is set to

23
00:01:43,540 --> 00:01:50,140
40 pixels and the font size is set to 40 pixels and they can easily, like, implement that into a component

24
00:01:50,140 --> 00:01:52,550
within your digital design system.

25
00:01:53,110 --> 00:01:58,570
So keep in mind that, you know, this isn't just a language for designers.

26
00:01:58,570 --> 00:02:01,900
A design system is for your team, for your product.

27
00:02:02,050 --> 00:02:04,480
Everyone is using it in one aspect.

28
00:02:04,900 --> 00:02:10,180
And you may have variants of different things like for marketing and marketing may not be the exact

29
00:02:10,180 --> 00:02:16,480
same as how you have treatments within user interface, like in terms of applications and products.

30
00:02:16,900 --> 00:02:20,010
So you can distinguish that within your design system.

31
00:02:20,020 --> 00:02:23,440
You can create different design systems, you can create different categories.

32
00:02:23,440 --> 00:02:26,770
You can have just a design system just for your marketing website.

33
00:02:26,770 --> 00:02:30,890
You can have a design system for just your product and so on.

34
00:02:31,390 --> 00:02:38,230
So I've done this in a way where a developer could easily come in here and understand, OK, this is

35
00:02:38,230 --> 00:02:48,730
my H1 and these are all the different parts of my H1 that I can actually create into a component and

36
00:02:48,730 --> 00:02:50,810
reuse through just code.

37
00:02:51,310 --> 00:02:56,440
You also got the code section over here that will tell you all the different types of styles.

38
00:02:56,440 --> 00:03:02,640
So you have my font style, my font weight, we have my font size and so on.

39
00:03:03,190 --> 00:03:10,510
So that is how I've broken out headings and having is very straightforward or you just have like a pretty

40
00:03:10,510 --> 00:03:15,410
standard scale moving from large to smaller and or vice versa.

41
00:03:16,090 --> 00:03:21,340
Now for text, I've decided to use the category called text just to kind of encompass different things

42
00:03:21,340 --> 00:03:22,450
like body copy.

43
00:03:22,720 --> 00:03:24,550
So I have different variants of that.

44
00:03:25,550 --> 00:03:26,410
Let's go over here.

45
00:03:26,410 --> 00:03:31,600
So I have like a body large, I have a regular, I have a small and of an alternate small if I need

46
00:03:31,600 --> 00:03:31,840
it.

47
00:03:33,460 --> 00:03:38,590
These are kind of your standard body copy styles we have like our font size.

48
00:03:38,590 --> 00:03:44,050
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

49
00:03:44,050 --> 00:03:47,980
using like 14 pixels, 13 pixels, 12 pixels, 11 pixels.

50
00:03:48,280 --> 00:03:51,580
I have definitely a method to all this madness.

51
00:03:51,580 --> 00:03:53,620
I mean, I'm using 16 pixels for my body.

52
00:03:53,860 --> 00:03:57,220
I feel like you're going any smaller than 16 pixels on a mobile screen.

53
00:03:57,370 --> 00:04:00,430
You're going to have some small issues with readability.

54
00:04:00,580 --> 00:04:03,460
I think that's fine with copy that isn't so important.

55
00:04:03,460 --> 00:04:09,070
But when you're trying to display things like product names or more important information, stick to

56
00:04:09,070 --> 00:04:10,690
16 pixels and above.

57
00:04:11,470 --> 00:04:13,420
That's what I have for my body copy.

58
00:04:14,050 --> 00:04:16,980
We don't have a lot of body copy within this application.

59
00:04:16,990 --> 00:04:18,820
I'll show you where we kind of use them.

60
00:04:19,870 --> 00:04:26,380
I have labels, so I have a label style, which is just your top pixel with a typical line height and

61
00:04:26,380 --> 00:04:28,240
it's just a simple label over here.

62
00:04:28,900 --> 00:04:30,370
And I have a hint.

63
00:04:31,570 --> 00:04:33,730
I've given myself a ten pixel hint.

64
00:04:34,120 --> 00:04:39,970
This is just in case I need to incorporate something that's even smaller, maybe like a very small hint,

65
00:04:40,120 --> 00:04:41,620
maybe some fine text.

66
00:04:41,800 --> 00:04:44,530
But I've given myself that option and we can change that in the future.

67
00:04:44,950 --> 00:04:48,070
So this is how I've gone ahead and created my styles.

68
00:04:48,070 --> 00:04:49,420
You see me do this in the past.

69
00:04:49,420 --> 00:04:57,160
It's in the tech section over here and I need to hint with the ten pixel font size and right beside

70
00:04:57,160 --> 00:04:58,990
it is sixteen pixel line height.

71
00:05:00,190 --> 00:05:05,140
And just like that, we have a textile that we can apply, if I wanted to say go ahead and apply something

72
00:05:05,140 --> 00:05:08,690
different very easily, you can apply something different.

73
00:05:10,780 --> 00:05:13,710
So textiles are super important.

74
00:05:14,110 --> 00:05:18,370
And then in my last section, I have a pretty important section called InterAction's.

75
00:05:18,850 --> 00:05:24,220
And here we handle different things where users are going to interact with our text elements, links,

76
00:05:25,000 --> 00:05:26,220
maybe strikethrough.

77
00:05:26,800 --> 00:05:32,470
I have created a strikethrough style just because we have prices and if we want to display something

78
00:05:32,470 --> 00:05:35,190
like a sale, then we have a strike through.

79
00:05:35,470 --> 00:05:38,710
This isn't necessarily something that somebody can interact with.

80
00:05:38,710 --> 00:05:46,150
But I thought it placed well within here because it is very much in relation to our PILT text.

81
00:05:46,150 --> 00:05:52,480
We have a text over here as well, and that is more so for, you know, a little pill containers that

82
00:05:52,480 --> 00:05:58,260
could be Pilchuck boxes or they could be just ways to show like little 20 percent off on the card.

83
00:05:58,630 --> 00:06:01,150
So I've created, like, even text variants for that.

84
00:06:01,900 --> 00:06:05,830
And really there isn't much of variance between some of these things.

85
00:06:05,830 --> 00:06:10,570
Like, you'll see this is an all capped version, and that just makes it much more easier for me to

86
00:06:10,570 --> 00:06:14,470
apply something without having to worry about, like capitalization.

87
00:06:14,500 --> 00:06:21,880
This will just automatically do it for me, save for things like strikethrough or underlines for links.

88
00:06:22,750 --> 00:06:27,400
And you'll see like in my variants as well, if there isn't much difference between my regular version

89
00:06:27,400 --> 00:06:28,840
here and my Ultranet version.

90
00:06:29,200 --> 00:06:31,680
But it's just enough makes your life easier.

91
00:06:31,690 --> 00:06:34,750
So create those variants if you need them, even create them.

92
00:06:34,750 --> 00:06:37,600
If you think you may need them, they may come in handy.

93
00:06:37,930 --> 00:06:44,440
But this is how I've set up my typography system within this larger design system.

94
00:06:44,440 --> 00:06:49,840
And I'll show you in our next videos how we kind of go in and use these different types of elements.