 Okey, jadi hari ini saya akan bercakap tentang typografi responsif dan mari kita lihat jika saya dapat meletakkan kain. Okey, jadi jangan risau tentang ini. Jadi apabila anda mahu melakukan typografi responsif, Anda harus mengubah pangkat pangkat pangkat pada pangkat mobil dan di desktop dan pada pangkat apa-apa. Dan apa yang saya telah lakukan dalam masa itu adalah sesuatu seperti itu. Jadi ia banyak kerja jika anda perlu melakukan untuk H2, H3, H4, H5P dan segalanya. Jadi ia sangat masalah. Dan apabila saya memulai typografi responsif, ia lebih banyak. Okey, saya mahu belajar lebih banyak tentang pangkat pangkat pangkat. Tetapi selepas itu, saya belajar bahawa ada banyak pangkat pangkat pangkat yang mengharapkan bagaimana pangkat pangkat pangkat. Dan orang-orang sangat mengharapkan pangkat pangkat pangkat untuk melakukan typografi dan kemudian mereka menghubungkan segalanya yang mereka tahu tentang pangkat pangkat pada web. Dan ia membuat pangkat pangkat lebih susah. Jadi saya cuba mencari cara untuk membuat pangkat pangkat pangkat mudah dan pangkat pangkat mudah. Jadi basically my aim was to find a way to, you can change anything, it's like a configuration. And then that automatically helps you switch off font sizes for different devices. So that was the approach that I went in. But if you want to think about the design side of things, we have to start with the purpose of typography, which basically if you take a look at this, this is my handwriting. It's like you have to look at... The purpose of typography is to help make text easy to read. So this text isn't very easy to read, especially from pretty far away. It's quite thin. You can't really see the word, the letter forms easily. But text on a web isn't that much better if you put it on a default font size. Wait, is this the default font size for some reason? It's really scaled down because I'm using review.js. It shouldn't be that size. But take it with a pinch of salt. It kind of look like... It's not helping. Zooming in isn't helping. It's kind of something like that, which is something that is readable. So if you want to think about something that is readable, then you have to look at 3 different properties. That's the font size, the ledding. Also in CSS, we say line height and the width of the text. So the measure is what they call it. So of the 3 things, I would say you have to determine the font size first. Let's take a look at... This is such a bad example because of the screen resolution. Can I change the screen resolution? Please work. This isn't helping very much for some reason. It used to be better. Okay, never mind. But generally speaking, if you set a font size of 16 pixels and then you try to look at it from far, it's going to be too small, especially if you're on a bigger screen. Because the further you go, the further your screen goes, the smaller the text reaps. So you really want to have an idea. You really want to determine what is an ideal range between the two small range and the two big range. So the further your screen goes, the smaller the font size looks. So generally speaking, the bigger the screen, the further the distance. So if you read on a mobile, it's going to be much nearer. So you want a smaller font size. If you read on that screen, it's going to be much further away. So you want a bigger font size. That's how generally what it means. The second factor you want to take a look at when it comes to determining your font size is your typeface that you use. Because each typeface is slightly different. Garamon and facet, they look similar. But facet is slightly bigger than garamon because of the X height. Then the third thing is that, different people have different ranges of ideals because if you think about it, I wear specs most of the time but I don't have a short-sightedness. So I think it's fine to read something slightly smaller. But if someone else has worse eyesight than me, he might want to read something as bigger, otherwise it's too straining on the eyes. If someone has perfect eyesight like set, then he doesn't mind looking at tiny font sizes, I believe. So it's like you have to talk to people and then get people to look at your website before you find that sweet spot. But it's like a trainable skill so over time you kind of find that sweet spot by yourself. So to determine a font size let's say we set it about, I think this is about 20 pixels if I'm not wrong. Generally speaking, 16 pixels is too small if you're on a laptop and above. 16 pixels is a good size for the mobile like you're reading a book. That's why browser set 16 pixels as a default. Then the next thing I will do is to determine the measure. So if you take a look at this right now you're trying to read from the left to the right you probably find yourself turning your head as you move around as you try to read. If you do that, then it's too long. Or if you read halfway and then you get lost somewhere in the middle of a line because what we generally do is we really know this is a paragraph tag we want to remember where the start point is so we can get back to it easily. But if the text goes too long we just lose the concentration. So what we do is that we will shorten it but this is too short because if you read 3 or 4 words and you get broken up you'll find it a little bit frustrating. So if you try the best way to do text and that will tell you whether if you find any discomfort then you know that this is too long or too short or too big or too small. A good size will probably be around the range of like 45 to 75 characters or if you count the number of words it's about 12 words, 10 words around that range. So if the number of words is 12 to 10 you kind of have a good range then it's a good measure The last one is to determine the ledding. And this is a ledding for 1.2 which is the default but when we work with ledding we don't just want to look at one paragraph because ledding is really what determines what people call the typographic colour of the whole page. So if you have a ledding that's too small it feels as if you're reading it as a lot of text, as a lot of overwhelm. So what you can do is to increase the ok, forget it, I'm not going to do that you can increase the ledding bit by bit until you find a ledding that's good enough and when you try to work with ledding you have to look at multiple paragraphs of text and then you try to read it through. So if you find that the moment you increase your ledding to a point where the space between the lines are distracting you know that is the point where it's too big. That's how it goes. Ledding is a space between the lines it's usually what we call what we put as line height. I'm sorry I'm a little bit rusty with this presentation but basically if you oh shit Line height it's really cool So if you take a look at this like if I try increasing the ledding the line height, like a line height of lesser than 1 is definitely a no go. 1.2 is generally too tight for most tight faces unless you use a tight face that has a very small x height I can't think of any examples right now but maybe future I will come to mind If you use like Helvetica probably a range of 1.3 to 1.4 is generally ideal some people go up to 1.5 or 1.6 if you on some websites but generally if you go to 1.7 1.8 is too big because if you start reading this right now you already start to get distracted by the spaces in between the lines as supposed to trying to read the text and in typography what we really want to do is for people to read the text without getting distracted so that's the basics of type setting and that's what makes good typography so if you take a look at it probably between 1.4 1.3 is a good range to work with yep so between 1.3 to 1.6 is a good range but ledding is slightly more complicated but because it is also affected by the font size that we use do I have an example here no, I don't have it but if the font size is bigger you will want lesser ledding because font size big will have ledding is multiple font size so the ledding will be even bigger and there will leave large gaps in between the words you want to balance the words and amount of space so you don't get distracted as much as possible even though they say in design white space it's important but you can't have space that distracts people for what you're trying to do if you talk about measure the longer your measure the more ledding you want because if you have a longer measure you want to have some way to guide people to the next line without letting them like I just finished reading the first line and then that kind of thing so you want to add some ledding to make sure that people read properly so that's how it goes so generally speaking for font size on a laptop I found a good size between 1920px on a mobile it's about 16 if you go up to thunderbolt display which is about 2560 the good size is around 22-24 if you go up to tv it's slightly bigger that's not a big change if you notice like 16-19 to 21-22-24 and that's really the furthest you go we don't really go that far and if you want to set a good measure it's always between 45-75 you can use the M unit although M is supposed to be the size of the letter M but it's generally accepted that half of M is approximately equal to one corrector so if you divide 45-75 by half you get about 22.5 to 37.5M so if you set a measure around that range that's fine generally I set 30-35 and see how it goes there used to be like a little metal piece that the character was carved into that would be put into the press or the stamp and then put down and you could like line them up and put them together and this is how the text was written like in reverse if you will and the height of one of those little metal clips that had a character carved on it was 1M so it has nothing to do with the width of the M it's like one of the wrong definitions of it where it came up for whatever reason so it's the height of this little metal piece okay can you add in Wikipedia so like when we talk about the next thing oh right that's like getting the basics to good typography the first thing you need to do is readable type I'm skipping the choosing of type faces here because that's like the second portion after you get the basics of the readable type next is I'll talk about modular scale and vertical rhythm modular scale is how you will choose is something you can use to choose the font size of your header element because if you ask a designer how will you choose that header size you probably get I just tweak it until it looks right and that's not really helpful but if you think about it everybody starts with some rules and if you ask a typographer like what rules do they use they'll use a traditional typography scale and that's called the diatonic scale or something like that so if you just google the diatonic scale you'll see that it's the one you see in word documents and pages if you click the type button I don't have a scale with me right now but let's see ok, forget it but after a while you can't really use the diatonic scale on the web because it isn't based on the font size that you chose in the first place the diatonic scale works in print because generally people already use those sizes as the base if you went through the procedure that we talked about earlier then you end up in a range that maybe 22 pixels is like the font size and then you don't find that 22 pixels in any scale out there so then the next thing Tim Brown came up with was this modular scale where you use your base font size as the base number and then you create a scale by multiplying a specific ratio like the ratio can be any number generally people say to use a musical scale as a number because musical scale ties into harmony and all that kind of stuff so you can actually use any number you can use 1.78 if you want to if you prefer so using the modular scale at first if you just calculate from the ModularScale.com calculator it's quite a big challenge because you have to write pixels to a very specific thing a very specific number which doesn't really make sense and there's no way to change it after a while it's like 50.517 pixels and then what happens if you want to go up one it's kind of hard but let's take it we will come back to it when I talk about the responsive part of it but generally this is how you use ModularScale and the next one is VerticalRhythm VerticalRhythm is generally what we say you want to have a good rhythm across the page so it feels as if you're flowing with the page as you read it so the general idea is to set the vertical white space and the line height to a multiple of 24 pixels 24 pixels is my line height in this case so what it means is that you use your line height and you use a multiple of that line height and you spread it across your whole website so it's repeated so if you use VerticalRhythm you kind of look something like that line height is 24 pixels which means the leading of all your text is 24 pixels then the leading of your H1 should be a multiple of that and then your margin should be a multiple of that some people, when we talk about VerticalRhythm they like to use this thing called a baseline grid which basically is what people do in print they draw lines and then they try to make text sit on the line that's what a baseline grid is for but on the web you'll find that the baseline grid doesn't work because instead of sitting on the line itself text sits in between the lines and for larger text with larger line height between the lines of the lines there are libraries out there that tries to help you remove this obstacle by making sure text sit on the line but you use a lot of padding and margins to work around that I'm sure this is going a little bit like here and there because it's been a while since I last did this and I learned a lot of new things ever since my last talk and this is generally what it looks like on the web if you use a baseline grid so then the challenge then is with using modulus, some people have this problem with using modulus scale and VerticalRhythm together because it feels like well it's not really that helpful and there are some conflicts because let's say the font size is 50 pixels which is 4x1.33 ratio then if you use VerticalRhythm, you kind of want to have the line height of h1 be slightly bigger than the font size and you want it to be a multiple of 24 pixels so the smallest multiple is like 72 which is 24x3 then you get something like that which is too big of a gap between the two lines then if you say 3 is too big, let's try 2 don't you get something that is too tiny just like when people work with me VerticalRhythm, some of them have this connotation that you have to make this fit perfectly but what we can do is that we can come to a compromise and we use a multiple in between 2 and 3 which is 2.5 then you get something that looks much much better because the the letting between the two lines of text is comfortable even getting the letting for the header text like the skills to getting the letting for the header text is derived from the skills of getting the letting for the body text so really what is the right size, what is the right measure, what is the right letting generally you don't care so much about measure when it comes to the header text but you want to make sure it reads properly that's what is still important but the reason what we can use 2.5 is because if we talk about VerticalRhythm per se we are not actually saying this is a rule we must follow, we must use 24 pixels every one on your site, it becomes boring 24 pixels everywhere it's because there is this thing called the principle of repetition in design and when we are using VerticalRhythm we are actually using this principle without even knowing we are using the principle so if you think about it if you are using the letting as 24 pixels you are actually reading 24 pixels all around and 24 pixels because you are repeating the letting you repeat it so many times and it forms like a that pattern forms into our brain so it becomes harmonising per se because you already found a pattern, you found a flow and then you'll flow with it that is why VerticalRhythm works and not really following the baseline so if you look at it this way the header can be 72 pixels away if you set a bigger margin so between text blocks you can set 72 pixels 100 and whatever as long as it's a multiple or a half multiple or a quarter multiple of 24 pixels if you want to so that's how it goes if you want to read more about the principle of repetition i have these 2 articles you can read more about it really a lot of like debunking on why people are following that as opposed to why people are following the baseline grid as opposed to really using the principles behind but what i really want to do today is to go into the responses typography practices the first one is to change font size when screen move changes the second one is to use relative units which i will explain why i don't use pixels the third one the third one is model scale responsive model scale and the final one is vertical rhythm so changing font size when the screen changes i basically started off with it so you can't set you can't set like 24 pixels on the mobile otherwise it will be too big then if you think about it you want to write media queries for that which means it's a font size of 16 pixels then 20 pixels and then 20 pixels and so on and so forth then if you add line height then you add it in between depending on how big your text is you might want to change the line height if you change the line height it means you want to change the vertical rhythm across your entire page so just imagine how much margins and padding you are going to change that's the kind of thing but if we talk about sizing headers so if you take a look at it 0.517 is 4 x 1.63 and x 16 pixels but the font size at 56.83 pixels is actually the same ratio but multiplied with 18 pixels so if you use pixels you can't carry out you have to write many media queries just to make sure your font sizes match but if you use ram or m then you can just write one time so that's why i use i use relative units that's really my base argument of why we should use relative units it's not so much about all the other things it just makes coding much easier to understand and easier to tweak well there are relative units like m, ram and relative unit that is really very hot with the people doing CSS as the viewport width unit and the plus to that is that you don't have to write media queries like the ones in the html and then you let everything scale accordingly so if that term is called fluid typography you can google it and then you will be able to find it i'm not going to talk about that understanding about what is viewport units and how you use it and how to calculate that sizing and all that stuff it's another deep topic sorry yeah vw if you go to i think medium you use vertical width don't go to the font sizes so if you're on medium then you change the width of your browser the font changes probably it's not on a fixed measure so if you go to this website this fluid typography is discovered by this guy called Mike Mu Mellon if you go to his website madebymike.com.au i think he uses this viewport units and this so you can check it out and see what happens so n is what is n you guys know n so i'm just going to skip this anyone doesn't know what n is n vs n that's what i wrote people have this detail but if you use n but definitely what i say is if you need that width font size then you use width if you need to scale a point and a good example was what Chris mentioned earlier and that's like the button element if you want a large button you just pump up the font size and the padding will take care of it so if you use n but if you use ramp then it will change the padding accordingly which is troublesome and on a coldest perspective we don't want to do that so that's why then yeah it's a better article but generally speaking you can't set one font size and then hope and pray that this is fine because let's say if you use a golden ratio 1.628 you'll find that the header size of the mobile will lose a point that you can't even recognize so even this is too big because and i'm using a ratio 4.25 to my top so there are instances where you want to tone names now even if you are using model scale and that means you have to create more meter queries and more meter queries and more meter queries if you can do it so we can't run away from it if you want to use n we can't run away from it if you use uport typography anyway because we have to create more and more it's like madness if you think about it every single time you want to just change that one font size you have to go and take out the meter query so what i did is i wrote this which is my own personal fix for typography it's like a configuration you just configure the different font maps for the typography and then it outputs all your meter queries for you as you need it too also the fix why my designer doesn't use model scale because if you output ramps and want to start and calculate the ratios for you nicely so if you set a breakpoints map then you set a typy map the breakpoints map is basically a map of breakpoints of meter queries that you want to create so it uses a mean with methodology then in the typy map we always start with a naughty meaning no breakpoints then the font size without breakpoints and the line height if you want to set it if you want to inherit the line height then you forget for a second parameter which is called input typy base typy base will create the font size and line height for the base which came out earlier which will use percentages the reason we use percentages is really legacy stuff and you can use M as now i think see is that custom properties please this is SAS right i haven't gotten into custom properties yet so you should give a talk on that yes then all the other font maps are pretty much the same as the typy map this means that it's going to be 1.777M at a large breakpoint is 2.369 so instead of going into the media queries and then changing everything along the way you're just going to change that typography map and then it propagates throughout all the different media queries and the pro tip is there's this thing called the modular scale library where you can use to output the 1.777, 2.369 and all that other stuff so you just have to set the ratios you want and you call MS1 MS1 meaning the first step or font size ratio to power of 1 if you want it to be the second step third step and so on and so forth man this talk is so bush now that i think about it i should have updated this so long ago but basically instead of writing multiple-multiple media queries the code becomes something like that where you use multiple maps and then it creates that media queries for you automatically then for vertical rhythm the problem with vertical rhythm right now is that if you change the line height then you need to change that vertical rhythm of your entire site and it doesn't really work because in SES you can't do that the only way you can do it i think it's in CSS variables which you can do it right now custom properties in CSS variables i kind of discovered that you can't do it because if you don't use CSS variables you have to change the margin and change every single thing under the sun just to make sure it follows the vertical rhythm but a potential solution is really like CSS variables where you set the baseline is that what you're looking for and yeah basically you can set line height will be the variable of that baseline which is the variable from 1.4 to 1.5 so if you calculate it this way then you're using the browser to help calculate all your to calculate all the vertical rhythm which is sweet but we can't do it in age so this is actual CSS this is CSS browser support is actually it's a standard, it's a spec and it's gonna be eventually in every browser so it's gonna be really good i checked it you only can do it in not just windows it's just they don't need to serve why can't you do it in SAS variables well the thing about doing this is that when the media queries change how can i put this if you think about it i'm just going to write code on the spot i just give you a really good answer but when you have native variables then you can use javascript to change values which is pretty awesome whereas when it's in SAS you can't touch it so it's like when you write let's say if i'm looking for a right logic you want a right logic on hands usually if i change freedom if we are one we will be like one freedom but if you use css css now at a media query my base variable is 1.5 and 1.4 but the thing is we can't tell where this media query is above 1,000 pages and then set it to a function and return it unless you want to write multiple truth statements which means multiple mixes to create the same language css so it's almost like going back to the old popular stage and inclusive so as much as possible it's actually much better to use css variables as opposed to this one that's what i think so don't change your base lines at different breakpoints unless you are okay with supporting css variables and that's it quick one let's start we're looking for somebody to do a talk on css variables for an example now you all know that it exists like a nice challenge if you want to learn something new my question which is really a comment most of what you've shown this year is great for articles and bodies of text but not so relevant and functional you are a designer if you still want to be there that's what i do most of reliving is cultural stuff and when you introduce this stuff you drive people crazy it doesn't really work there are still a lot of things but it's not i think it has to do with things but you have to look at different ways if you think about functional stuff if you want to start css by looking at text that's a meaning to be shown on a daily basis like what's the first sentence and you want to think about how a person wants doesn't change one sentence just like if you want to say the same thing but the other sentence you can't use it that kind of sentence it was touch touch sorry, it was touch touch that's the sentence for variable sorry it's an official sentence it's just really touch touch it's a touch touch it's a multiple it's a new it's just like the dash touch is the spec to define a variable in css so if you want to have a reusable property meaning you can define a color like dash dash base color like you can define any text and then say it's red and you use dash dash base color and when you css it will apply that value it's variables coming to css that's what it is and that's how it looks like so here you define dash dash base line to be 1.4 but if you use it you need to define like you reference it with bar and then the value of 1.4 is being put into the line and you need a variable dash on your bar and you can find another variable and then you can call we are getting that variable on Css you can call any other question i'm just asking if you're going to adult this and baby or如果 you're going to seven adults it's good thank you very much i'll