 So anyway, can I start? Yes please. Yes, okay. So we'll find out that this is the first time I'm presenting with Kido. Okay, good job. I'll do the same. What? I'll say it, right? Because I don't have the time to do proper selects, you know. Because she's from Nami last year. Thanks. Anyway, what I'm going to talk about is about design principles with typography. So it's going to be quite simple from where I started. There are four principles from where I'm referring to. This is the book where it's Robin William's book on design for non-designers. So this was one of the books where I started reading, where I started learning design theory as a whole. Then no one come try it. Yeah, I'm looking forward to it. Well, you have to know I just took a keynote thing and then Jeremy started. And then it looks okay here. Okay, great. All right. So anyway, it's from that book called Design for Non-Designers. It says there are four principles in total. Repetition, contrast, alignment, and proximity. So what I'm going to think of design and these four principles, right? We usually think about design and big, great, great stuff. But it actually relates a lot to typography and the anal microspaces a lot. So what I'm going to do today is to go through the four principles. Then we'll go through the four principles and then we're going to see how it applies to typography on a slightly macro or micro level. So sometimes it's repetition. Anything I've repeated? So repetition reads familiarity. This is why there are some typography principles. If you're familiar with them, it's called vertical rhythm. And sometimes we use this method of model scale. So basically, type faces all with one-sided color, height, line, and shapes can be repeated. And they should be repeated as many times as possible to create that sense of familiarity. So just to illustrate, if we just see one circle in the middle of nowhere, you start thinking why is this circle here? What does this do? Then if you see more circles, you get more familiarized with that circle and you think of the lesser. But sometimes you see one whole jingling of circles, you think it's just a background. That's not that much. That's how familiarity works. The more you see something, the more you get familiar, the more you can focus on anything else. So repetition and typography is used in four places. Model scale, vertical rhythm, fun sizes, and typefaces. So model scale, if you're unfamiliar with it, I'm just throwing terms out there. So it's just like a typography scale. And each variation and size, I should probably... Because you're blocking the word. Okay. So... Yeah, no idea why. But 320 by 240. No idea. I think it's... I hope. My mum would love this presentation. I can read the words on the screen. So basically for model scale, if you take a look at this and this and this and this, it's just a ratio of 1.5. So... There's an option for that too. You can choose a ratio here. But basically what model scale is is that this number... The relationship between these two numbers is that 1 is 1.5 times the other. And then we teach and we teach. So that repetition brings into model scale and that's how... If you use model scale, you kind of have somewhat of a rhythmic font size, which is why it kind of looks better. You can justify that you should either use the square root of 2, because you actually look at the area. And know the size. Yeah, but that's not... There's a lot of things you can think about. Go pressure is not the only ratio. You can use a ton of ratios. You can choose the line line and play around with the repetition anyway. So the main focus here... Oh my... Oh, where's my slides? I forgot I did it in keynote. And I hit the contrast here. Okay, anyway, for vertical rhythm it's just basically you are going to repeat the white space in your website with a specific amount. So that white space is repeated. It can be half of that, it can be twice of that, so you vary their repetition. Consistent font sizes, well, we all know this is kind of one of the best practices. You set maybe h123456 and we use that h126 throughout. You can introduce 27 font sizes into your website. And probably the best example would be to max use two typefaces. Because the more typefaces you have, you just break that repetition. So this is how repetition is used in type production. And next contrast. So there are three main ways to contrast. You can contrast with color, size and shape. So the first way is to contrast with the color, with size or with shape. The basic idea is that when you're using contrast, if something is contrasting, you'll catch your attention immediately. So whenever you contrast, you want to insert huge contrasts, but not very small contrasts because it kind of gets UV out of the way. So if you take a look at this, it's a little bit odd, but this is slightly lighter than the rest. Or if it's just one slight little bit off in alignment, then it catches you very, very easily, and you can't really move on to the rest of the image. So it's just annoying. Yeah, that's the way. And you can use multiple methods to add contrast. So like this, we change the color. If we change the shape, it's even more contrasting. You can see this are much faster than you see in the circle. In the first place, it's the best way to control designers. You can show designers with type-based clothing at home. Except you better put it somewhere off-center because it takes a bit longer to cast, and it'll be more and more accessible to attention. Best way to control designers. From the circle to the left. Yeah, just make it a little to the left by one pixel. Okay, I think I had that. Can you see it? That's a cool space. Does contrast apply to slimes as well? Yeah, but I'm just too lazy for this. Don't know why I did it quickly. So anyway, for contrasting type of clothing, there are three main things that we want to look out for. The first one is, I mean, where we use it. The first one is monitor scale, because if you insert a large number of ratios between each step in the monitor scale, then you generally have that contrast immediately. So don't try to use 12 and 14 pixels, but add more variations. So for colors, you want better contrast than this. Definitely. And for tight faces, if you want to pair tight faces together, make sure they contrast each other, like a sensory and a serrated, and not too sensory. So this is kind of how you use contrast and type of clothing. These are just examples. I'm sure they are much more than I can think of right now. The third one is, the third principle is alignment. Alignment is pretty easy to explain, because if you just take a look at this image, it speaks everything about alignment. So in the lab, it's very, very neat. Alignment on the right is just messy. So notes about alignment is that alignment reinforces familiarity that is provided by repetition. Because if you take a look at this thing again, it's repeated anyway, right? But you feel better with this one, because it's more orderly. And we kind of need order in our mind. It depends. That's the same for it. If you are a business, then you see the problem now. Yeah. I think some websites need a little bit of work. Yeah, definitely, definitely. But not like that. If you, for example, would repeat the same or similar text and perfectly align it, then you confuse it. Actually, it works well in here, because it's actually in so many variables the same. It's the same amount of circles in the same color, but all the same size. And it's just one dimension is off, which is the position. Right? And in that sense, it actually works. It actually works, yes. But I'm just comparing between the two of us. You're just trolling you. I know. I shall let him throw. So alignment also affects contrast. Like this is the one I showed you earlier. That's the throw. People are getting more mad. I think for non-class screens, I at least see that this screen is not perfectly flat, which means that you need two pixels, three pixels to notice, because unhappiness of the screen already doesn't have the effect. Yes. And you probably need a smaller computer so you can have a look at my screen a little later. Can we talk about ancient Greek architecture yet? Okay. It's not because it's fast. That's right. Okay, anyway. For alignment and typography, we generally take about either vertical alignment or horizontal alignment. Vertical alignment is what we usually talk about, and that is the left-right central justify thing. In general, justify to the left and don't ever justify text on the web, because justifying text on the web leads to things like this. See that space in between things. So it's harder to read. I think to be more correct, justification makes sense only if the text is long enough. Now, justification makes sense only if it doesn't disrupt the reading experience as much. Why does it not disrupt the reading experience? Unfortunately, it doesn't disrupt if it's long enough. Okay, I'm going to interject about this. Because traditionally for traditional printing, for letterpress, I'm not sure how many people are actually familiar with the actual printing process, but how people actually set type is they would set the type by hand. So there are several types. I think linotype machines were really popular for newspapers in about probably all the way up to probably the 70s or 80s before they started moving to photo, so-called cold type. So what they would do is they would actually cast the individual letters and they would set these letters by hand and then place them to send them in for letterpress printing. And what they could do, because you could actually control the space between each letter and each word for every line, and when people tried to recreate this on the web, they actually tried to write an algorithm that would do that, but I think what they realised was that it was too expensive to compute or something. So there were two algorithms. The one that we have now that is not really very well, that's why it says don't use it, because that's the so-called lazy algorithm. There was a smarter algorithm, but I think they weighed the pros and cons in terms of performance and they canned the other one. So that's why we are left with this not-so-good justification algorithm. But I think when they came up with Justify, they did have a better algorithm, but it just didn't make it. The thing is that if lines are long enough, then you don't see the difference. You do see, because of the statistics, if there are enough words, the spaces will be inserted between words. So whatever the difference, we will not see it. The good algorithms, they also change the current life. That's the thing. If the line is long enough, it doesn't matter. And still, if it is short, then you see the detail. Yes, you do make a point. Yes, you state the columns that are only about 20 characters wide, but you can get away with the justification. I've read a paper on how a human mind interprets characters in words, and justification is more complex to wrangle than not, because even when it's solved, the change of the coding from one line to another in the spacing takes people processing. So you still have to read into this. This is when the difference is presented more. If the line is long enough, then you will have very minuscule differences between words, between lines, and you will not perceive them. Statistically, you make sense, but there's another point about the ideal line length, and then you realise that that's where we get stuck, because the ideal line length is not long enough for justification to look good, with the current algorithm that we have. Strangely speaking, if you're thinking about justification on the web, you don't want to use it for a longer line length because of the way we read, but if you are concerned about space, and if you're concerned about how the site actually looks, so justification is very good for creating a grid-like column layout, like newspaper. So for that, instead of longer line length, you actually have shorter lines, and that is actually slightly better, but we don't really want to do it on the web as well. Okay, next. So this is one thing that most people don't take off, and this is about horizontally unlining multiple columns of text, because it's just freaking hard. So if you take a look at the top one, where's my mouse? I can't even see my mouse. Okay, so anyway, like these two are not unlined, but this part is unlined, for example. And you don't really see multiple columns on the web because it's just hard to pull off, because there are tons of things you want to think about. Even if you read newspapers, they don't even make the lines unlined properly. But if it doesn't line properly, it's just a better reading experience, because it's just ordered. So it's just like that. But it's hard on the web because of the way line types are handled. I don't want to go into that because it's another big complication article. The last one, proximity. Proximity is basically the distance between two things, and it can be used to help organise things. So for example, if you take a look at these two pictures. Oh! Yeah. This is a balanced answer, especially with this. What day is this? We'll be late. Too late? Oh, I'm still at SF. Roll eyes. Okay, so like, you can see the two orange circles are closer than the two blue circles. Test watcher. So it can be used for organisation. Let's say you have this messy block of squares and triangles. You can organise them in this way, and that creates some order. But if you get some spacing between, then you kind of know that the squares are on one side and the triangles are on one side, and they are about to fight. Okay. So proximity and typography is basically just managing the white space. The clearest example of that is, you know, some people try to put a piece too, and then they put the same amount of white space to the top and bottom of that. But this example can be improved a lot. If you just tweak the white space slightly by adding more white space to the top and less white space to the bottom. And with this, the H2 feels more like it's part of that second paragraph. Which is what content dividers are there for. So, for example, the white space of proximity is a list. So the white space between the list items should be slightly smaller. And the white space between the list and the paragraph items should be equal. So it just breaks things up slightly. So it's easier to do. Yeah, we're done. Fun times. Okay. So if I can come by for justification. Yes, please. Yes. For many people, it may be an aesthetic effect whether it's justified on both sides. Yeah, and whether it's properly stretched if necessary. Especially if you wrap the images next to the text. This jacked border will be unpleasant. Definitely, the jagged border will be unpleasant. So you want to think about how you put that images. So, slow write images are not always the best. For that example. I think the tricky part is that this, whatever you mentioned was very, I won't say easy, but it was very achievable when we hand set a grid. The thing is, I feel what we haven't gone to at least right now, but things we change in the future is that, like I mentioned the algorithms, there is a specification for hyphenation. Not very well done yet, but I know that people working on the series are trying to improve this. Because basically whatever you mentioned makes sense and has proven to work in print. It's just we haven't been able to get the technology to replicate what we've been able to do in print. But I believe that will change in a few years, right? Because the spec is being worked on and as computing power and browser code gets written better, I think that is an issue that is very, very soft to work on. And we may be seeing such, like maybe a few years later, there won't be the, you know, to use justification because it has improved a lot. So I think things actually, you're not sure, but I think things are improving. It's just that one other question with what justification is that you, there are so many languages that we are writing with. For most justification libraries, they are out there. They only justify English. I think that's in text. All right. Then you mentioned... No, it's not only in text, just English. If the line is longer than that? I mean, if the line is long enough, you probably don't need that justification in the first place. Because you will still have a jacked edge. But you will not see the difference between just... Like once you have like enough words on the screen on a website that you would say or enough words to make this simple justification... It's a block of text that people don't even know the meaning of it. Yeah. So it's just that the case... It's a long text. It's always the difference. Every time we talk about, you know, what you're talking about, the person can use only an average, if you're looking at the least viable consumer that you want to have in the area. I'm talking about the visual effect or the effect of the text. So it protects properly and justifies it. It is a different impact. And it is used in advertisement to first the idea of something. Yeah. So I would not just call it utopia. Yeah. If you have time to get embarrassed at the presentation, like the underwear that's not yeah, yeah it's like most of the jersey vacation I've been in it's in print yeah, in print okay, so this is my new segment also because I'm hyping CXS to print and um