 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. Yeah, first. Yeah. Good job. I don't want to stand. What? I don't want to stand. I'll stand, right? Because I don't have the time to do proper selects, you know. Because she's from Nami, last name. Thanks. Hahaha. 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, it's Robin William's book on design for non-designers. So this was one of the books where I started reading when I started learning design theories. It will say that no one can try. Hmm? Yeah. I'm sorry. Well, you have to know I just took a keynote thing and then Jen reached out to me. I didn't know I was going to answer. And then it, it looks okay here. Yeah, great. 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, big, great, great stuff. But it actually relates a lot to typography and the anal microspaces are locked. So what I'm going to do today is to go through the four principles, then, to 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 first of all, 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 model scale. So basically, typos are all with one-sided colour, 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 familiarised with that circle and you think of the better. But at the same time, if 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. Modular scale, vertical rhythm, fun sizes, and typefaces. So modular scale, if you're unfamiliar with them, I'm just throwing terms up there. So it's just like a typography scale and each variation and size is a problem. Because you're blocking the word. Okay. So yeah, we have a solution. No idea why. But 320x240? No idea. You want to adjust it? I think it's fine. I hope. My mum would love this presentation. I can read the words on the screen. So the screen for modular scale, if you take a look at this and this and this it's just a ratio of 1.5. So, oh why don't you come? Sorry? There's an option for that too. You can choose some ratio here. But basically what modular scale is, is that this number, the relationship between these two numbers is that one is 1.5 times the other. And then we teach and we teach. So that repetition brings into the modular scale and that's how. If you use modular 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. So like the node size. Yeah, but there's a lot of things you can think about. You can use a panel of ratios. You can choose the line and play around with the repetition anyway. So the main focus here, oh my... Oh, where's my slides? Just kidding. I forgot I did it in a keynote and I hit the contrast here. Okay, anyway, for vertical rhythm it's just basically you're 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. And you don't introduce 27 font sizes in your website. And probably the best example would be to max use 2 type cases. Because the more type cases you have, you just break that repetition. So this is how repetition is used in calibration. And next contrast. So there are three main ways to contrast. You can contrast the color, size and shape. So the first way is to contrast the color with size or with shape. The basic idea is that when you're using contrasts, 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. And you can use multiple methods to add contrasts. So like this, if you change the color, if you change the shape, it's even more contrasting. You can see there's much faster than you see in the circle. The first way is to better control designers. You can control designers with high-phase cloning. It's better if you put it somewhere off-center, and it takes a bit more than a cast, then it'll be more annoying. Yeah, best way to control designers. Yeah, just make it a little to the left by one pixel. Okay, I think I had that. Can you see it? There's more space. Does contrast apply to slides as well? Yeah, but I'm just too lazy for this slide. Don't know why I did it quickly. So anyway, for contrasting typography, there are three main things that we want to look out for. The first one is, I mean, where we use it, I mean, the first one is monitor scale, because if you insert a large number of ratios between each step in a 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 typefaces, if you want to pair typefaces together, make sure they contrast each other, like a sensory and a serenity, and not too sensory. So this is kind of how you use type contrast in typography. These are just examples. I'm sure they are much more than I can think of right now. 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 nearly aligned. On the right, it's 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? You feel better with this one, because it's more what you need. And we kind of need order in our language. It depends. If you are a business assistant, you see it the problem now. I think some websites need a little bit more. 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. It works well 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 troll you. So alignment also affects contrast, like this is the one I showed you earlier. Depends on the troll. You're so mad. I think for non-class screens, I at least see that this screen is not perfect in class, which means that you need two pixels, three pixels to notice, because unhappiness of the screen already don't use 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 here? 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, center, justify thing. In general, justify to the left and don't ever justify text on the web, because justifying text on the web means two things like this. See that space in between thing, so it's harder to read. Now, for this, 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 reader experience as much. Why does it not disrupt the reader experience? Unfortunately, it doesn't disrupt if it's... 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. But 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 realized 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 can't be the other one. They were 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. If there are good algorithms, they also change the current use language. 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. Yeah, with 20 characters wide. But you can get away with the justification. I've read a paper on how human-binding 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 a bit more processing. So you still have to read it. This is when the difference is present before. If the line is long enough, then you will have very minuscule differences between words, between lines, and you will not perceive them. Maybe you make sense, but I think you will raise another point about the ideal line length, and then you'll realize 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 concerned about justification on the web, you don't want to use it for longer line lengths because of the way we read. But if you are concerned about space or if you are concerned about how that 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 shotgun 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 life hacks are handled. I don't want to go into that because it's another bit compilation article. The last one, proximity. So 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, it's so nice. Yeah. This is a balanced answer, especially with this one. What day is this? We'll be later. Yeah, too late. Oh, I'm scared of the SF. Roll eyes. Okay. So you can see the first two orange circles are closer than the two blue circles. That's for sure. 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 space in between, then you kind of know that the square is on one side and the triangle is 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 some people try to put these two 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 that's white space to the bottom. And with this, the H2 feels more like it's part of that second paragraph and onwards, which is what content dividers are there for. So a double of the white space of proximity is a list. So the white space between lists 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 where it's just on both sides. Yeah, I don't know whether it's properly stretched if necessary. Especially if you wrap the images next to the text. This jacked border will be unpleasant. Bethna, the jagged border will be unpleasant so you want to think about how you put that image. So float-pride 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 frame. The thing is, I feel what we haven't got to at least right now but things may change in the future is that, like I mentioned the algorithms, there is a specification for high-finition. 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 that won't be there for you not to use justification because it has improved a lot so I think things are changing you're not sure but I think things are improving. It's just that one other question with web justification is that there are so many languages that we are writing with for most justification libraries they are out there they only justify English. Latin text. But then you mentioned Latin text. Just English. If the line is long enough I mean if the line is long enough you probably don't need that justification in the first place. You need it because you still have a jacked edge but you will not see the difference in your relationship. Why do not words on a screen on a website that you would say are enough words to make this people's justification? It's a block of text that you don't enter a meeting with. Yeah. I don't know. It's a long text. It's always different. Every time we talk about what the average person can use under the average you're looking at the least viable consumer that you want to have. I'm talking about the visual effect or the effective effect. Some of the people can use it. So it's properly justified. It is a different effect and it is used in advertisement because you have to pay tax. So I don't discard it. Can you tell me about the top point? If you have time to get your friends, it's very complicated. Like the underweb, it's not. It's like most of the justification is in print. Okay, so this is my new segment also because I'm hiding CSS in print.