1
00:00:01,080 --> 00:00:06,300
Everyone, and welcome back, so we're going to be continuing this basics of typography portion here

2
00:00:06,540 --> 00:00:12,410
and the next type of category we have here for typefaces is displayed typefaces.

3
00:00:12,450 --> 00:00:14,790
Now, you may have heard that before.

4
00:00:14,820 --> 00:00:18,600
You may be wondering, wow, this is a typeface like how do I even use something like this?

5
00:00:19,190 --> 00:00:20,640
Let's get into that now.

6
00:00:20,660 --> 00:00:23,970
This includes typefaces like lobster or Abril.

7
00:00:25,000 --> 00:00:30,820
Now, this category is the broadest and includes the most variation, as you can see over here, the

8
00:00:30,820 --> 00:00:36,550
most consistent characteristic, though, is that they're generally unsuitable for body copy.

9
00:00:36,550 --> 00:00:43,630
And it's best we kind of keep these for things like headlines, larger text, maybe even shorter copy

10
00:00:43,630 --> 00:00:44,610
for a little brave.

11
00:00:45,430 --> 00:00:48,790
Definitely use this if you need to draw attention to something.

12
00:00:48,970 --> 00:00:50,110
So this is lobster.

13
00:00:50,140 --> 00:00:51,860
This is a really, really nice one.

14
00:00:51,970 --> 00:00:52,900
I like it a lot.

15
00:00:53,260 --> 00:00:57,460
And you can definitely see this being used and like a website or a marketing website or something like

16
00:00:57,460 --> 00:00:57,790
that.

17
00:00:58,240 --> 00:01:01,780
Same with something like maybe this one over here I can see something like this.

18
00:01:01,780 --> 00:01:03,610
This is I think this is a bridge right here.

19
00:01:03,850 --> 00:01:11,050
And one great thing about this typeface is even though it is a serif, it definitely has that contrast

20
00:01:11,050 --> 00:01:18,060
that is just like very, very pronounced here, kind of like a throwback to donee, our modern sarafa

21
00:01:18,160 --> 00:01:18,730
typeface.

22
00:01:19,990 --> 00:01:27,280
You may look at these display typefaces and think of a for Saraph, and in reality you're definitely

23
00:01:27,280 --> 00:01:27,470
right.

24
00:01:27,490 --> 00:01:32,500
Look, I mentioned before, they do have serious, but technically it would still be categorized as

25
00:01:32,500 --> 00:01:35,070
a display typeface because you wouldn't use it as body copy.

26
00:01:35,650 --> 00:01:39,720
And in this example, you may be thinking, well, how do I use it now?

27
00:01:40,270 --> 00:01:46,600
This pulled from Dribble and this is by Elsia Arafat, and they do a great job contrasting typefaces

28
00:01:46,600 --> 00:01:47,410
here on the Web.

29
00:01:47,800 --> 00:01:50,440
Let's take a look over here now.

30
00:01:50,440 --> 00:01:56,320
The display to the face here is very elegant and there is some extreme contrast between that thick and

31
00:01:56,320 --> 00:01:57,750
thin line.

32
00:01:57,760 --> 00:02:02,760
You'll notice you could try to use this as body copy, but it would be really, really hard to read.

33
00:02:02,770 --> 00:02:06,190
I guarantee that display typefaces have their use.

34
00:02:06,190 --> 00:02:07,810
And this is a great example of that.

35
00:02:08,080 --> 00:02:14,260
So you see over here used as a headline like the main hero copy for this kind of landing page.

36
00:02:14,710 --> 00:02:17,110
And you'll see over here just as a title.

37
00:02:17,530 --> 00:02:23,740
Now, I couldn't imagine using this pretty consistently to type set like all this copy.

38
00:02:24,070 --> 00:02:26,950
It would just be really hard to read, like I mentioned before.

39
00:02:27,400 --> 00:02:31,540
But this is still a great example of how you could utilize that even for the Web.

40
00:02:32,410 --> 00:02:36,160
And the last category I have is called Muno Space.

41
00:02:36,610 --> 00:02:38,800
Now, you may be thinking what is minus space?

42
00:02:38,830 --> 00:02:44,230
These kind of look like sensitive and you know, they are variants of senseor for serif types of fonts.

43
00:02:44,590 --> 00:02:51,700
Now, Raboteau mindspace is one example of a minus base typeface, and these are fixed pitch or fixed

44
00:02:51,700 --> 00:02:53,800
width or non-proportional fonts.

45
00:02:54,520 --> 00:02:56,970
Its letters and characters each occupy.

46
00:02:56,980 --> 00:03:01,510
You'll notice that over here they'll each occupy the same amount of horizontal space.

47
00:03:01,990 --> 00:03:06,640
Narrower characters simply get a bit more spacing around them to make up for that difference.

48
00:03:07,330 --> 00:03:09,670
So you'll see like a narrow character, like the end.

49
00:03:09,850 --> 00:03:11,350
But or like a T.

50
00:03:11,350 --> 00:03:16,510
I don't have a T over here, but these are pretty similar and you'll see the I of the same with right

51
00:03:16,510 --> 00:03:17,480
across horizontally.

52
00:03:18,280 --> 00:03:21,500
You'll notice that they'll all take up the same amount of space regardless of the letter.

53
00:03:21,910 --> 00:03:26,310
These are best used for areas where you want to evoke some sort of technical feeling.

54
00:03:26,710 --> 00:03:28,030
Now let's take this, for example.

55
00:03:28,690 --> 00:03:33,990
Now, this is just a simple feature within GitHub where people can collaborate over code reviews.

56
00:03:34,000 --> 00:03:37,040
So there are some code here and people are just chatting about it.

57
00:03:37,060 --> 00:03:39,070
We got some reactions to that.

58
00:03:39,730 --> 00:03:40,240
Pretty cool.

59
00:03:40,690 --> 00:03:46,960
Now, mindspace funds have widely been used for coding because of the higher importance of reading the

60
00:03:46,960 --> 00:03:48,220
individual characters.

61
00:03:48,760 --> 00:03:54,310
Mindspace typefaces are used for programming because they are widely believed to be better due to the

62
00:03:54,310 --> 00:03:57,520
common treatment of skinny letters and punctuation and alignment.

63
00:03:58,410 --> 00:04:04,520
You'll notice that right here in the code that they're reviewing, it's very, very easy to read.

64
00:04:05,250 --> 00:04:10,770
Now, if we were to compare that with something like this, when I'm trying to look at each individual

65
00:04:10,770 --> 00:04:17,280
letter where one letter left, l could mean the difference between a code that works and code that doesn't.

66
00:04:17,760 --> 00:04:23,790
It's very important that I have a very legible typeface or a mindspace typeface which would allow me

67
00:04:23,790 --> 00:04:26,580
to actually read that in a much more clear way.

68
00:04:27,060 --> 00:04:33,480
It's a very, very functional typeface and like I said, mostly used by like programmers.

69
00:04:33,480 --> 00:04:37,230
And within that kind of realm, there are definitely other use cases for it.