 Boleh berjumpa? Boleh berjumpa? Boleh sesiapa dengar? Semua orang dengar saya. Saya rasa saya perlu berjumpa dulu. Untuk menjelaskannya. Boleh dengar saya? Ya. Sebab sian ini tidak ada di sini hari ini, saya akan mengambil masa sendiri dan bercakap tentang perkara. Sebenarnya, saya akan bercakap tentang blog post yang saya menulis. Semuanya saya tahu tentang responsif typografi. Saya akan mulakan dengan perkara superbasis yang saya tahu dalam masa lalu. Jadi, dalam masa lalu, apabila kita membuat responsif terlalu kecil atau terlalu kecil? Lebih? Lebih? Okey. Jadi, dalam masa lalu, apabila saya membuat responsif typografi, apa yang saya akan lakukan adalah seperti itu. Dan semua h1, h2, h3, h4, h5, h8, p segalanya. Dan anda boleh mengingatkan jika anda mendapat h1, h1, ini akan menjadi sangat, sangat masalah. Jadi, saya belajar banyak tentang typografi selepas saya bermula selepas saya bermula membeli pakaian. Dan kemudian, perkara seperti, perkara penuh, perkara typografi dan sebagainya, dan pertanyaan itu akan menjadi bagaimana anda membuat semua konseps dan kemudian memperkenalkan keadaan anda sendiri. Jadi, perkara ini adalah tentang perkara ini. Jadi, perkara pertama adalah memperkenalkan pakaian dan pakaian semasa pakaian anda memperkenalkan. Apa ini bermaksud anda mempunyai pakaian di sini. Sebenarnya, apabila anda mempunyai pakaian, saya mempunyai pakaian dengan pakaian di sini. Jadi, apabila anda mempunyai pakaian di sini, tetapi pada pakaian di deskripsi, anda dapat melihat bahawa saya sudah begitu jauh dari pakaian. Jadi, perkara basikal adalah pakaian yang sama pada pakaian anda akan menjadi lebih kecil daripada pakaian yang sama pada pakaian kerana ia lebih jauh. Jadi, pakaian 18 di sini akan mempunyai pakaian yang baik, tetapi pakaian 18 di sini akan menjadi teruk. Dan pakaian 18 dari pakaian anda akan menjadi teruk. Jadi, apa yang bermakna adalah, anda mungkin perlu memperbaiki sesuatu seperti itu. Anda perlu mengubah pakaian semasa anda memperbaiki. Saya akan memperbaiki dan mengubah dan di sini. Jadi, apabila anda memperbaiki pakaian pakaian, pakaian pakaian seperti itu. Bolehkah anda melihat perbezaan? Atau ia terlalu kecil? Mereka seperti itu. Ada sesuatu seperti itu. Jadi, itu adalah keadaan pertama. Itu adalah keadaan pertama yang saya belajar. Kemudian anda mungkin juga mahu mengubah pakaian yang berlainan sebagai pakaian yang berlainan kerana pakaian ini mungkin terlalu kecil jadi anda perlu memperbaiki pakaian yang berlainan untuk keadaan ini. Untuk contoh. Dan tentu, anda akan menjadi pakaian yang berlainan untuk mengubah ke keadaan yang lebih besar. Kemudian pakaian kedua segera memperbaiki keadaan yang berlainan kerana anda akan menggunakan pakaian modul yang berlainan untuk pakaian yang berlainan. Pakaian modul yang berlainan jika anda tidak familiar dengan ia adalah perkara ini. Itu adalah pakaian yang berlainan. Jadi, saya ada pakaian yang berlainan 16 pixel. Kemudian anda dapat melihat bahawa ini adalah pakaian saya di sini. Kemudian pakaian yang berlainan akan menjadi masalah 1.5x pakaian yang berlainan. 1.5x pakaian yang berlainan dan sebagainya. Jadi, pakaian modul yang berlainan memutuskan anda memperbaiki pakaian yang berlainan. Jadi, ada kecuali kegeran yang memperbaiki untuk pakaian yang berlainan jika anda berlainan. Pada masalah yang berlainan modul yang berlainan, You start off with a simple implementation like this, if you are using pixels, 16 pixels with 50, 37, 28. But as you go, if you combine this one with the one that we have before, then it starts to get a bit ugly because when you change the pixels, you have to start adding new pixel sizes. So, the next part then is to use relative units. Because with relative units, we don't have to write as many of these media breakpoints over here. So all of this can be reduced to just one. So relative units are like EM and REM units, like EM and REM. Most people, there's still a big debate going on about EMs and REMs, so I'm not going to talk about this today. What I'm more focused on is how do you get the modular scale for your typography working well. So then it becomes something similar to this, right? Like you have the media queries in your base HTML, then you can just set H1, H2, H3 to be a specific EM size. Then it cascades properly. So let's say if I copy this, I'm just going to be lazy, copy and paste. So it already reflows without us having to play around with it a lot. So that's one good thing about adding the media query to the HTML element as opposed to adding it to the H1, 2, 3, 4, 5, 6 elements. So it keeps all your sizing relative to one place, and when it changes, everything else changes. Of course, we also don't want to, sometimes we don't want to put the font size as pixels because it messes around with the user's browser setting and stuff like that. So we might want to put 100% instead. Like 16 pixels is 100% by default. But if they change their browser with, it might not be 16 pixels anymore. So it will be 100% default to whatever pixels they have set. It's just a better practice as opposed to using pixels. So I'm just going to change it. Okay, so it's going to be about the same thing. Ya, this is just like my demo there. So notice that sometimes the font sizes might become too big. Like the top CSS might be a bit too big sometimes or depending on your design. Then you might want to tone it down one scale. Since you're using modular scales, right? So if you're going to tone it down one scale, we have to find out what's the previous rents. So if you're going to turn H1 down to H2, then we have to start writing code like this. At a certain media breakpoint, you're going to change the font size down to the H2 one, which is this one. Then if this happens in your design, then it doesn't really help to put the media query back in the HTML because there's a game you're writing media queries everywhere you go. So because of this problem that I had, I came up with this library called Type-E. You can find in my GitHub as wwwk-type-e. So I wrote this up a few and put it up a few weeks ago. How you use Type-E is generally is, whoa, my thing is getting stuck. Okay. Autonatab is stuck, damn it. Oh, my keyboard hung. Oh, shit. Technical difficulties, my keyboard has hung. Yeah, I'm just going to plug this out for a while. I haven't did this during time. Okay. So how you use this Type-E library is that you have to start with a sess map. So this is all sess. If you're not using sess, I'm sorry you can't use this library unless you want to write it and port it over to less or stylus or whatever. It's up to you. How you use it is that you have a null map and you begin with a Type-E map. So null will be without the breakpoints. So this will be 16 pixels. You can also set the line height optionally if you want to, like 1.5, like this. Then the next one will be for every other breakpoint that you have, you can add it to as a map. What Type-E does is you'll look for a breakpoints map and then you'll find that number for you. So like say something like that. So at 600 pixels, we're going to change it to 24 pixels for example. Then what you do from this point is that HTML include Type-E base. So let me just refresh this and then what? Then I will write something. Let me see. Maybe I should present with Copen doesn't have this. Oh, okay, okay, okay. Error on my part. So like, then you can see just with this 16 pixels and 24 pixels it's going to break at 600 pixels and then it's just going to change the breakpoint without having you write so much. If you look at the CSS code there's a little bit of a boilerplate here because I'm using my own stuff. But if you look at it, you'll see that right here. So just with setting the base pixels at 16 you'll get a font size of 100 pixels because 100 is 16. And then at a medium of 24 pixels it will automatically calculate for you the minimum width and then reset your font size for you. So this is like the basic part working on the body copy. Then the next thing comes in we have h1, h2, h3, h4, h5, h6 so h1. h1 map can be something like that. I think previously we had font size of let's say h5em 2ems and then medium is 3.5em for example. What you have to do to call this is h1 include type E then you pass in the h1 map. Did I have any problems again? So this would just change automatically again. If you look at the code, the h1 it's also pretty similar. Font size 2em and font size 3.5em. Like what I mentioned one thing I realized when coding is that when you have different fonts the line height and line spacing of your your heading elements will definitely change a lot. Different fonts requires different line spacing. So it's very common that your h1 spacing shouldn't be 1.5 for example. So then you can use the same format as the type E1 switch it to 1.2 for example. It just changes to a longer screen. If I don't have 1.2 here it's going to be this spacing is probably going to be too big. As you go up or down the size you might want to change the spacing a little bit to make it more readable or maybe even 1. So doing this usually on a normal CSS file it's going to take ages if you have a lot of font sizes to play around with. So this is one way to make it easier to do. So you can apply it to h2 and h3 for example. So this is the next one is to apply vertical ridim. So that's a separate practice by itself. To start off maybe we can talk about what is vertical ridim first. Vertical ridim is the space between your text and elements. So if you take a look at this paragraph the space between this paragraph and this paragraph the inner parts refers to the vertical spacing. So what vertical ridim hopes to achieve if you apply vertical ridim is that your spacing should be relative to the line height of your body copy. So as you read through the whole thing it's not too bad it doesn't fly away and the spacing isn't awkward so the users can read properly. So let me just do a margin zero reset first. This is kind of how it looks like without margins. I also have this. Okay this is all margin reset quote. So as you can see the margins isn't like very well done up over here so far. What vertical ridim say is that let's say for H1 you might want a vertical ridim of let's say 1.5. So because our base size is 1.5 of 24 pixels so maybe 3x 3x might be a bit too much so it gives you a rough indication of what a good ridim is and maybe a paragraph bottom of 24 pixels or in the H2 margin top of 48 pixels as well so it looks it starts to flow nicer like this is 2x of this so it flows properly and then H3 margin top of 48 pixels 24 pixels and maybe a margin bottom of 12 pixels for example. So this is kind of like how it all goes around then you can see that this is definitely a H2 element it has more hierarchy it has more spacing compared to the next one which is probably a H3 one so it gives a very good typographical flow towards the text content on your side and that's all about bodega ridims and then as you can see the code starts to get a bit messy we have a lot of margin bottom margin top and then we have a lot of various pixels litter around if you're going to convert it into Ems it's going to be like a shit mess because if you use H1 if you try doing 2 Ems it will be like oh my god 48 pixels no, not 2 Ems 48 pixels 16 x 1.5 x 2 so that's going to be 3 Ems i think maybe i got my calculations off so the thing is you have to start calculating the bodega ridims which is a shit load of work so what i did is that inside typi, i added this VR which is bodega ridim multiplier so you can say this is 1 ridim this is 2 ridim, this is 3 ridim and so on and so forth so instead of 48 VR2 oh i think i got the calculations wrongly but you get the point then maybe if 2 is too big then maybe 1 or 0.5 for example so you still have that ridim you still have the ability to work around with ridims easily without having to do too much calculations so this is what typi is used for is also to help you apply bodega ridims then there's this big debate about em and ram that i'm not going to go into finally the last practice i have is to keep the text measures between 45 and 75 characters this is one of the things that you don't see a lot out there on the internet and that's why when you read stuff you have to go like turn your head when you read and it gets a little bit irritating so this one is actually really really easy you just have to remember 1 character is approximately 0.5 ems so then your text measure meaning the width of your text must be between 22.5 and 37.5 ems if you go with something like p max with 30 ems you probably not go very far off it's kind of something like that so if you start reading this lauram if you start reading this lauram text it's not going to like go too far off the screen and then it starts getting difficult to read and things like that so this is just one thing to keep note of then if you want to play around with with 30 ems is just like okay a random number one way you can make it better is to use the verlegal rhythm so your top and your side verlegal rhythms are like similar i have no idea what the actual number is so we can just hit and you all hit numbers in there and see what happens but you can have a better look if you look at so here 27 ems that kind of looks actually quite good if you scroll down it kind of flows quite well then there's another method to do the side to side measure and that's to use the the modular scale so modular scale will be you have to start using this calculation so over here pick one nice number and probably i don't know there's sess mixing that let's you use that thing as well it's called modular scale so ems you can do ems 6 or ems ems whatever number that you want so it will give the rhythm to the side so this one jumps a bit too much sometimes alright nothing around here 18 is about 26 26 ems or 19 which is about 31 and it's kind of good to read still it's not too far away it's still a good practice to read on here so one way i used it in my old in my new side design is outshed where's my new side design just let me run this quickly okay so this is the same pose that you see as this one alright so the measures if you take a look at this code block you see that it juts out slightly well compared to the rest this is about 30 something ems this is used this is done with the model scale so i got the width from the model scale i think it was about 19 ems this was 21 ems so there's a way to make the width flow nicely with the vertical text as well so it gets easier to read so this is like i think 3 times then this is 1 times or something like that but generally you can you can see how it all ties in together if you want to make a side that is very type oriented i think that's all okay yeah, any questions yeah, any questions well the problem with passing margin top and bottom into type P is that you can't know whether you're doing margin top, margin bottom or margin left, right, up down center so the challenge with using is that the type P mix in only works with fonts so like font sizes and line heights so that mix in is used mainly for that it does it's job well the read ems part well some people may choose to use that some people may not choose to use that so that's like a separate module within type P plus you don't know how many margin tops or bottoms do you want to give so it starts to get a bit wonky so you can't do margin padding bottom, border and all that stuff at the same time so that that thing alone is used to calculate just the width just the amount that you need any questions or is this too dense too tight related okay let's move on okay