Transcripts
1. Intro: Hi, I'm Kristine, a UX UI designer. In this class, you learn everything about how topography works online. So to make sure you become a pro, will dive into the following. We'll talk about what our typefaces font, what's the difference, and where to actually find them? Who will set up a timescale from scratch. And I'll show you how to get those sizes right. I will show you why we use RAM and not pixels when defining our font sizes. We will talk about weight, line-height, and whitespace the little details that just make all the difference. Make sure you get the contrast right. Of course, we're going to talk about responsive typography. This is where the magic happens. You can create your own timescale alongside that, you can reuse for all of your future projects and save yourself a lot of time. This is a course by real learning dots IN.
2. Welcome: Typography in UI design, there's probably no topic InDesign surrounded with greater designed snobbery, then typography don't get intimidated. This is not about getting a PhD thesis, about getting a few basic rules, right, to make sure your typography looks great online. And I'm going to show you. The important thing to know is that rather than reading every single word online people to Scanner text. So what is this text about? Yeah, That was enough. So what is that text about? It's exactly the same. But as you can see, it looks very differently because it has a working hierarchy with many elements such as type, style, size, color, weight, position, and spacing to create this hierarchy. And we're going to look at all of them in more detail. We're going to talk about typefaces and fonts and what's actually the difference? Serif, sans serif and so-called superfamilies. We're going to talk about where we find typefaces to use. How many we need for a good UI design. We're going to set up a type scale, and I'm going to show you different ways you can do that. I'm going to tell you why we use RAM and of pixels when defining sizes for programming, we're going to talk about weight, line-height, and line length, as well as whitespace. We're going to talk about contrast, very important topic when it comes to accessibility. And of course, we're going to talk about responsive typography to make sure your text looks great on all screen sizes. So let's get started.
3. Course Material: You may want to work alongside me, so I prepared some files for you to download in the course you're taking simply navigate to project and resources. And there you'll find all the information and the link we can download the material or you can navigate to my profile. Well, you'll also find a direct link to the download page. And this page you'll find a variety of downloads. You can simply pick the cause that you're currently taking and then just click Download. And it will automatically download the file for you. To open a Figma file to download it, It's important that you have a Figma account. Inside your account, navigate to new, impress Import. You can then choose a file that you would like to open. It might take a moment as they're quite large, but once you imported them, they will be on your account and you do not need to repeat this process. I am working with Google fonts for most of my designs. So if you're working with the Figma app, then you don't need to do anything. All Google fonts are preloaded automatically. If you want to work with Figma in the browser, then you just need to search the font that it's showing you as missing. For example, Poppins, I use a lot. And then you can directly download this font installed on your computer and you're ready to go. Or resources are free for existing students and you do not need to enter any additional information. You can, of course, also download any of the other files in case you're interested. So under general are always add Anything that I think might be useful. So there is, for example, a Bootstrap template and then a list with links for inspiration books and blocks that are really great for UX UI design. This list of downloads is steadily growing, so make sure you come back and have a look from time to time.
4. Typefaces & Fonts: Typeface and font. So what is a typeface? A typeface is a design set of characters such as letters, numbers, and punctuation. Some popular ones you might know our Helvetica, Arial or Times New Roman. I am using a typeface called Poppins. In this presentation. Typefaces usually include variations of those characters, so they come in thin. It's tallying, regular, semi bold, bold, and so on. Now a font is a particular weight, style, size, and effect of a typeface. Each of these variations is called a font. So a typeface has many fonts, but a PharmD only belongs to one typeface. Typefaces are also called font-family, sometimes more so in UI because font-family is what you would use in CSS. A lot of the time you'll also hear people just calling everything a font. Technically, that is not right, but it's just how it's used when working. So as long as you know the difference, that is fine.
5. Serif, Sans Serif & Superfamilies: Serif, sans serif, and superfamilies. So there are many categories of typefaces, but the one you should really be aware of is the Serif and Sans Serif. Identifying difference between them is pretty simple. Serif fonts have that extra little stroke, that decorative element at the end of the letter. San serif fonts are usually associated with a more modern look, or they are better on smaller spaces or quick information. For example, a lever below. And I can also on road signs, for example, you will always find sans serif. Serif fonts, on the other hand, are usually associated with something more institutional, more experience. So you can play with that in your design. Most newspapers, for example, use a serif font. In print design, serifs are often used in books as they're more legible on a very small-scale. But that's not really the case in UI design. So you don't need to worry about that because you never going to use font gut small. You don't have to use one or the other. You could also mix them on your page. You could, for example, have your headline and a serif and you text in the center of all the other way around. As you can see, they will need a little bit of tweaking to work harmoniously because the same size and different typefaces doesn't always result in the same physical size and spacing. So you'll need to work on that solution to this would be to use a superfamily. So what does super family does is basically you have something like, for example, the source family. And then within that family, you have different typefaces. So you have the source serif Pro and the Source Sans Pro. So they're designed to have really great harmony together and they work out at the same design principles. And even though you're using serif and sans serif will always work perfectly together. Superfamilies also come in more variations. For example, if you take the new Anita family, there you have a rounded version and a sense version. So generally if you want to mix typefaces, I recommend that you have a look into superfamilies.
6. Where to Find Fonts: Where to find typefaces. Now there are three places where you could get your typefaces from. If you work for a large corporation, they might have their own custom typeface that they will make available to you, like Airbnb cereal, for example, a very beautiful typeface. Now it is important to know that even though you have that typeface installed on your computer, you'll only be allowed to use it with that specific company. The second option is buying a license to a typeface. There many pages such as microphones or font shop where you can buy amazing typefaces. Let me show you. So here we are in my fonts. By the way, you can use any other font shop online as well. I'm just showing you this one so you get an idea. On the left-hand side here you can filter if you're looking for something specific by quite like this section because I see some examples. So let's jump into this one. And then you can see more working examples up here, which is really great. So you get an idea of everything you can do. And then here you see the different weights. You can buy them separately, but it usually makes sensed by the family pack. If you clicking on buying options, you will see different options. So you of course, you have to choose the one that you're planning to work with. So if you're planning on making a website, then you choose a web font. You will then get all information from the company you buy the fund with about how to use it and how to install it. So the third option would be using a free font. There are some installed on all computers already like Arial there, okay, as a fallback font. But you might notice there's not quite enough for your UI design. So great place to go for free typefaces is Google Fonts. It's popular, it has great choices and it's super easy to use. Just be aware that whenever you're getting something for you online, it usually comes attached with them. Data exchange. That's also the case here. It's very minor and nothing tragic, but you should still make your client aware of it that you're wanting to add a Google link on that website. That's the same for Google Maps by the way, let's have a look into how Google fonts work. So here we are in Google fonts, you can search a specific type phase or just filter. We're going to jump into this one here. Open stance, very nice typeface, by the way, highly recommend it. At the top you always find the download button. It says download family, the font-family, that's what we call it in CSS, is exactly the same as a typeface, is. You will get everything that you see here installed on your computer. Now, the programmer will later to pick the ones that you're actually using to keep it small. And then here you can see it gets, it generates an automatic link or different import options. So it's really, really easy to implement. By the way, if you are using Figma and using the Figma app, it's important that you use the Figma app and not work in the browser. Or Google fonts are already pre-installed, so you don't even need to download the font family here. You can just jump in and get going in case you're overwhelmed with all the choice here, some of my favorite ones to play around with.
7. How Many Typefaces: How many typefaces should you use? So how many typefaces could or should you have in your design? It's generally recommended to have no more than two. You might have a very dominant so-called display typeface that is part of your branding and that you will probably use in your main headlines only. That will be something like a handwriting or something very specific that is not really readable or be overwhelming and small text. So you would then add for your body texts just a very readable sans serif or serif typeface as well. Unless you're really confident with typography or heavy given branding to follow, then I would stay safe, stay away from those fancy typefaces. You don't really need them for a solid design. If you still want to mix typefaces, then a great idea is using a superfamily. As superfamily allows you to make something like a serif or sans-serif or rounded version, but they're all part of the same family and work really well together. However, unless you're using a display typeface or mixed categories like Serif and Sans Serif, you'll probably end up with two quite similar type faces. And then it's much better to just use one. I personally recommend to start and stick to one typeface whenever possible. To be honest, I rarely used to. You will still use font variations of that typeface in size, weight, and color to create your dynamic. And that's usually enough. So to sum up, start building your hierarchy with one typeface. If you feel that you want to mix like serif, sans serif or rounded, then it's no problem. You can use two typefaces. Also, if you want to use a very prominent display typeface, or if you're already given something like this with your branding, that is also totally fine.
8. Setting Up a Typescale: The type scale. To start to type scale, you set up your base font size, does is your most common text and your base font size is always equal to one RAM. In most browsers, this size is predefined a 16 pixels. Now if you wish, you could of course, change that base font size. So you could make it depending on your typeface, something like 14 or around 18. And that would then always still equal one RAM, whatever you set it to. I have to say, I personally like leaving it at 16. First of all, it's most browsers default. And secondly, is really nicely dividable by four and by eight. Whatever grid spacing system I use, it fits in perfectly. So once we define our base text size of one RAM, in my case, 16 pixels, we can then move on and add some more. So I'm going to add some headlines. Headlines are defined as 1, 2, 3, and you can of course extend that to full 56 as much as you need. This is the text that we use in HTML. You can call them something else in your style sheet, but it's probably easiest to just keep them at their name. The important thing is also to note that you can only have one H1 per page, but you could have many H2, H3, and so on. In addition to the body text, I will add a link here, for example. But you might need another one, such as a quote, or you might have two different polypeptide that's totally up to you design and what you need. So this might be actually the minimum that you would need, but your type scale might also look like something like this. So you might have to add more buttoned captioned funds for icon tags and so on. Even though you can grow your type scale to your needs, try to keep it as simple as possible, otherwise it can get quite messy. I tried to keep my range between five and a maximum of 15, but definitely rather on the low side, the less, the better. When defining the size of your font in your style sheet. Always used RAM. Ram refers to your base size. So your base iss is equal to one RAM and everything else is a multiple of that. Now this is important for programming and it's important that you've documented like this. However, when you're working in your design, you will still be thinking and working in pixels. So what I like doing is adding the pixels next to it. In addition to the size, you note down what weight each font has. Also, you define a line height for each fund might be the same for everything. Or in my case, I needed to tweak it a little bit for larger fonts and smaller fonts. You might also need to add some spacing. Spacing is usually needed if you, for example, having a button, as you can see in my example, with capital letters and quite small. And then you might to add some letter spacing. And the important thing to note is that these styles are setup mobile-first. Mobile first is the industry standard. And what it means is that we start programming from the smallest screen and work our way up. So most of the time you do the same with your design. So as we work our way in the design, we might notice that we need to adjust our typography for larger screen sizes. There's different ways in which this can be done. Sometimes you might have a whole new set of typography for each breakpoint. Or in this case, I just adjusted the headlines so I'm leaving all the rest is the same size, but make my headlines larger to keep the look. There's also a fluid typography approach that you could use. Now we're going to look at this in more detail when we talk about responsive topography because it's quite an intense topic.
9. Why REM and Not PX: Units use RAM. Why you should be using Graham and non pixels. Let's first have a look what happens with pixels and also what happens in the browser in general with text. Even if you don't define any size at all, the browser will have a so-called rude size. So this is a predefined size. Most of the time it's 16 pixels. So that means that all copy text will be displayed in 16 pixels. And then the browser will interpret like h1, H2, and H3, a little larger than that like in relation to those 16 pixel space size. So let's say, work great with the 16 pixels. We also want 16 pixels and we're just going to put it in pixels and define it like this. And then we want to define, for example, our H2 in 24 pixels. So you might have finished your design and all of these scientists are so-called fixed or hard-coded sizes. So it's the size that you cannot change. You might think, that's great. I want my design to look exactly the way I intended it. However, does root size this HTML root size up here is something that the user can touch and change. And this is really important for people that had difficulties reading smaller text. So there might be users that wanted to change this and something larger. And in this case, your design is still fixed at the sizes you chose. Because the user has no access to those. So without even meaning to, you created a barrier and your desires not accessible to everyone anymore. Now if we're designing in RAM, disk looks very different. Nano root size is always equal to one RAM no matter what size you define it. So if you set your copy text to one RAM and define the root size at 16, then that's it. If you were set it to 1.5, then it will be 24 because you're calculating 16 pixels times 1, 0.5. So what happens here is that the browser basically checks the root size and end, just multiplies it by the value you gave it. So you can see that you get exactly the same result as what's pixels to this also, why you can keep on designing with pixels. Just need to define it and RAM. And now we're getting to the important part, because now if the user changes the size, the root size of the browser, for example, the 20 pixels, then everything adjusts automatically. The great thing is it doesn't only become accessible, but it also keeps the hierarchy that you chose because it always is a multiple of the root size. By the way, you might also come across EM or M. Now m and RAM is not the same, and I'll show you why. So to start off with, that works exactly the same. The root size is equal to one m, whatever I set it to. So if I am having my copy text defined as 1.5 m, I'm using 1.5 just to show you the effect better, that would be 24, exactly the same as RAM. Now the difference is that m always looks at the parent container. So if I am adding a container in here and within that container, I am defining an H2, for example, at 1.5 as well, that we'll refer back to its parent container and calculate the size. So it also scales with the basic root size in mind, but it will always look back at to the next highest container. That sounds already be confusing to you. Yeah, exactly. That's why I personally prefer using RAM from an accessibility point of view, you could also use m. So let's recap. Pixel is an absolute and fixed value. Ram depends on the route size and m depends on the parent element. So you can still think design and no Geodesign down in pixels. I do lead to all the time because it's just a much more familiar measurement. However, when it gets to coding and documenting your design in your typography style sheet. Always use RAM measurement as well.
10. Different Scaling Systems for Your Typescale: Scaling systems. Now you could assign the sizes of your typography completely randomly. And let's be honest, that would also work. However, you might want to have something a little more systematic. So I'm going to show you two approaches. One is the 8 spacing system and the other one is the ratio approach. So I like to keep things simple and as I am using the a point spacing system for everything else, I'm just going to apply it to my typography as well. So I am having a base size of one gram equals 16 pixels. And to that I'm just adding eight. So my H3, for example, will be 24. And I can scale that up to my H2 and so on. However, I'm giving myself the freedom to also jump one of those. So for example, from H2 to H1, I'm just adding 16 or with remember, those systems are there to help you and not to restrict you. In the end, as always, I am noting down those sizes in the pixels that I am working for design and in RAM, which is really important for the programming. Another approach is to scale with a ratio. If you interface moves transition, this is a great approach. So basically all you do is you take your base size and then multiply it with a ratio. You gradually work your way up and grown exponentially. The ratio you use is totally up to you. In this example, I am using the so-called Golden Ratio. But there's great online tools that you can play around with, so you don't need to do all of that work by hand. Let me show you. So I like using type minor scale.com or you can just Google type scale ratio and you'll find many online tools that do the same and just pick one that you like. So here I have my base size at 16, so this is one RAM and from here on, everything will scale. Then I have here different scales, like preset scales. And I can really like tryout and like play with it. What's going to look good? What I like about this one Is it comes with Google Fonts, so I can really see it in the font that I'm using if I am using a Google font obviously. And it also gives you SES as preset. So you can just copy and paste that. You can play with it on CodePen. And I really like this section here, which is like it shows me actually how my headlines look together with my body texts. And in case you're using two typefaces, you could also change your body text to another typeface and get a really realistic view also with color and weights and line height, which is great. Now whatever approach you use is really up to you and a development team. So just make sure to talk to them and see if they have a preference. What I like doing is actually use the best of both worlds. So I set up a scale and then they tweak my scale a little bit so that it ends up being a multiple of eight. And are also adjust my line-height to be a multiple of four. So then I get a really nice rhythm I can work with in my design. Just a little tip on the side.
11. Font Weight: Font-weight. Weight is also an important element of the font to create hierarchy. One in your design software there will be called bold, extra bold and regular. In CSS, this will be translated into a number. So 400, for example, corresponds to regular and 700 is bold. In your headlines, you can play with those weights is quite common to make them more bold. And, but you can also just go for a light font and make it larger and just see what happens. Just play with it. And in your body texts either advisee to stick to regular and some parts you might have them a little bolder to send house. I tried to stay away from very light fonts in your body texts because it makes it hard to read. And all typefaces strictly use one hundred and nine hundred. You might also find something like this, and that is totally depends on your typeface. It's also important to note that just because a typeface comes with a lot of different ways, it doesn't mean that you should use all of those weights. And let me show you why. So I jumped into Google Fonts here. This is the same for all type Vedas. By the way, I'm just using this, but pick the first type face and I'm gonna add 100, and I'm going to add a regular one with 400. So here on the right you can see that if I'm adding those, it's going to load them separately. So they're not huge and it's not a huge problem to have a few, but you just have to be aware that it is a separate loading process. So if you're just using the semi bold on that one little element, you might as well get rid of it. It's also much cleaner in your design if you just have a set number of font weights or font versions that you're using and to keep it all clean and simple. Now there is no rule about how many you can use on weights are usually use around two to three. And that's actually enough to create a really good hierarchy. And then you might have something like Italy egg or some other version for a quote. But a maximum of five, you shouldn't have more than that.
12. Demystifying Line Height: Line-height. If you're coming from graphic design, you probably learned that the font sits on the so-called baseline. However, this is not the case in UI design. Here, the position of the font is determined by the so called line-height. The line-height determines to box in which to fondness centered vertically. That is made up of the font size itself. And the so-called lending, which is distributed equally above and below. Let's look at an example. Let's say my font size is 20 pixels, and I want my line-height to be 1.5. That is, by the way, the same as if I would say a 150%. That would equals 30 pixels. So that will mean that the box my fonts, it's within, is 30 pixels high. If I had two lines, the box will be 60 pixels. Now that is setup of the 20 pixels plus another 10 pixels, which are equally distributed, five on top and five on the bottom. Now you might be tempted to write it like something like that, but don't do that. Reason being is that the ten pixels is the letting and not the line-height, 30 pixels. So you're a 150% of your font size. That is the line-height. So we don't want to hard code that. We want that to be something relative. If we would change the font slightly, it would adjust beautifully. Also, in this way, we can use a line-height on other fonts as well. So we can use it, for example, for a body tags or we can use it for slightly larger headline and then just adjusted it really necessary. By the way, if you don't define a line height, then you get some default line-height called line-height normal. That is around 1.2 depends a bit on your typeface. Now what that means is if you have a font size of 20 pixels, then it's 120% of that. So you'll get a total box of 24 pixels height. It is quite okay and you can get away with it. But usually it's better to just define an add a little more line-height, especially with body text. The higher you go, the more spacing you'll get between the lines. Sometimes like with a very short headline, you might be tempted to say July night to one and get rid of all the additional spacing around it. Now don't do that. The reason being is, again, that UI design with nothing static. So that means just because it looks nice on the screen you're designing add. It's not what everyone else is kinda see. People might, for example, use an automatic translator in the language they're translating it to. The world might be longer and it might be pushed into a second line. Or they might change the root size because they have difficulties freedom, which would also put it into a second line. Or at some point someone might simply change that headline and then everything will just not look right anymore. So hand of line-height one. Depending on your typeface, I recommend to use a line height between 1.31.8. If you're unsure, just use something like 1.5 in the middle. You should, of course, at your line-height to your typography style sheet. Now what I like doing is noting down the pixel size because this is for me for designing. And then I'll also add the relative ratio. So I also can see them in combination. In this way. I can also see if I could use the same ratio for all of my fonts, which is obviously really great. Sometimes this is however, not want to work and then it's also totally fine to just adapt it. In Figma, by the way, per default, you have something called Auto. This is the same as line-height normal. When you click on it, you can see what that will mean in pixels. You can of course, also just type your pixels in here. Or what's even greater is you can just multiply it with your factor and then it calculated automatically for you. This would by the way, be the same as if you just put a 150 percent, which also works in Figma. You will see that the box height at the top will change accordingly.
13. White Space Super Power: Whitespace. Now you might have set up your timescale. Wait in line. Hi perfectly, but it's still missing something. And that something is usually the whitespace. By adding white space, you give the space to breathe and do perceive properly. There's no fixed rules on how you have to add it or where. But we'll look at some general principles you can use. So I'm using the 8 spacing system to keep things consistent wherever possible. So everything again as a multiple of eight. So for example, between my age three and my copy text, I have 16. And then for smaller distances, eight. However, I'm aligned myself some exceptions whenever I need them. For example, in the button I might need for, and that is okay with me. But I still try to stick to my rhythm of eight. You can also make a difference between micro spacing and so-called macro spacing. So between the spacing of your components, for example, and the spacing between components. So the larger whitespaces, for me, that again is a multiple of eight. The more you're designing, the more you'll get a feel about where you need to add some whitespace. Whitespace definitely is not lost spaced. It's helping you with your layout. It's really a secret weapon. Also remember, the closest things are together, the more the perceived as one. So really, really used that whitespace in your layout. It makes all the difference.
14. Optimal Line Length: Line length. In UI design, in large screens, you don't want to have the text flowing across the whole width because it's going to be simply too long and quite difficult to read. The ideal length is said to be between 50 and 70 characters. Note that he will talk about characters and not physical size. So that can be quite different for different typefaces. You should never have more than 90 characters per line because then it gets really quite impossible to read it. Now you don't need to go and count characters. But you can see that if you lose LIGO with that rule, it already going to be much more pleasant and much easier to read. Also, always make sure that you let your typography flow the way it was designed and intended to be. Don't use the so-called justify. What Justify does is that it forces your typography to fit in the box. Now sometimes that might look great if you're designing with it. But remember, your design is not the end result. The browser is not static. And once the screen is moving and resizing, you're going to create quite ugly gaps. So don't do that. It's going to be really hard to read or we let topography do what it was designed to do and flow naturally.
15. Contrast in Typography: Contrast. The WCAG does so-called Web Content Accessibility Guidelines give you a really clear rule about how your contrast needs to be. By the way, this is not a nice to have. Does this actually a legal obligation to WCAG measures contrast in a difference of brightness. So that ranges from one to one, which would literally be white on white, and 21 on one, which would be black on white. So really, really high contrast. Does WCAG works with a rating system whereby a double a is what you acquire to deliver at least. Contrast for typography here is 4.5 to one. For larger fonts, three-to-one. Now, lambda is defined loosely that could start from 18 pixels or something smaller that is bold and depending on your typeface. So to be honest, I would stick to 4.5 for all of them. The triple a is an optimal solution. So wherever you can, you should aim for that. And here by the contrast is seven to one, or for larger, 4.5 to one. Let's look at an example. I have a light gray background and I want to add my typography in my red branding. That will give me a contrast of two to one. And that's too low because I want to aim for at least 4.5. Now on the other hand, if I use the same background, but I am adding a dark gray topography, that will give me a contrast of 12 to 1. So here I am even in the optimal of triple a. Now this of course also depends on your font size and your font weight, because small and light and large and bold is obviously not the same. The best way to check that is to use a contrast checker. You can either use a plugin. So directly in your design software, you can see whether this font is using enough contrast on the background, or you can use an online checker. So these contrast checkers work or pretty much the same if you're using a plug-in or whatever website you use, I'm using web aim, but again, you can use any other as well. So what you do is do you have your foreground color and your background color or the other way around. And then you just added and it will give you the ratio, that is the ratio that I noted down. And you will see directly if it passes or fails. For example, if I now alters the color, you can see that it starts parsing. So you could also adjust your colors once you're creating them.
16. Responsive Typography Intro: Responsive typography. So we have this amazing type scale night away distribution and perfect set line-height. And then it hits us by surprise. Oh dear, screens have different scientists. So what can we do to meet our typography responsive? So there are three ways you could do this. The first one I'm going to call this single scalar approach, which means that you're just going to scale, for example, a large headlines for different screen sizes and leave the rest is same. The second one I'm going to call the root change, which means that you're going to change the root size for different screen sizes. And the third one is a fluid approach. Here we're going to look at having a truly fluid typography. Let's look at this in more detail.
17. Responsive Typography: Single Scale Approach: The single scale approach. So here I have my simple typography scale. I have my base size at 16, and then I just went up in steps of eight. You might have used a ratio or just assigned sizes randomly, whatever works for you. Now that means that right now, our design and code is set up at something called mobile first. So what that means is that currently all the sizes we set off from mobile to large desktop the same. So what I can do now is I can set break points. So I can say from 768 for example, which is round about where tablets, Dad, I want my H1 to be larger. You can of course, add as many as you need. You usually need at least two for small and the largest size. And you can go to up to five. But I would say five is really the absolute maximum. I would try to aim for around three. That usually gives you a nice result. So as you can see, I only note down the ones that I really need the others just say blank. That means they just stay exactly the same for mobile to desktop. And 16 is fine as a body texts on all sizes. Sometimes I might need more headlines to adapt. And I can also adjust things like the line-height here and there. But in this way you can really keep it to a minimum and keep life simple. So this is how I use my scale in my Figma file. Here you can see that this side is just textboxes, so there's you really need to update by hand. But then here the preview text is why I created my textiles accordingly. Let me show you how I do this. If we take the H1, for example here you can see I have all three styles. So in my age one, you can see that I have the base. Then I have wonderful screen owl and wanted to full-screen m. Now if I would look into my body size, for example, here I have two different body types. So if I look into primary, you can see that I just have one base size. So I see that there is nothing for screen l, nothing full-screen m. So I know the base IS goes across all screens. Another thing I do is down here I have some preset screens. So I have a setup for base size m and size L. And I set them up that they I can, that they can move them and I can see what happens to the text. So in here I can see that if I change my text size, if it's still looks good, you can of course, set up like the homepage of your design like this completely. I am just using some random texts so you can always check text sizes. So how I use this? Let's say I want to adjust disk text here. Then I am going on hair, I am changing the size. Let's say I want this to be really big, so 100. And then I would also need to adjust the line height by hand. So my line height is 1.25, so 125%, I can simply add here. And then you can see whether you would like that look or not. So this is a really, really a handy way of testing your typography scale.
18. Responsive Typography: Scaling the Root Size: Rui Change Approach. Now this is a great approach if you're using a scale anyways. So in my example, I used a perfect fifth. Now instead of changing the single fonts, I leave everything as it is and just changed a root size. So I just say from breakpoint X onwards the root size changes, for example, from 16 to 18. So as you can see, even the RAM stay exactly the same across all different breakpoints. Only the pixels change relatively because I am changing the root size. So this is a very clean approach across all different breakpoints. The downside is that this can be a little messy in your design file because you'd really have to set up all of them. Have in your code it's going to be really clean and keep all the proportions perfectly. Now this is what my type scale would look like using ratios in Figma. So here on the left again, this is all like noted down by hand when you are just did. And here where I really have my preview is where set my styles. I'm using the perfect fifth ratio. So that means that every time I am growing the fond, I am multiplying by 1.5, but you can use any other ratio that you want to use. Also, I set him my base size starting at 16, then I use 18 and then 20. Again, that is also totally up to you. So I really said an own style for each breakpoint. By the way, these breakpoints that I am setting is just what I'm using. If you have other breakpoints that is absolutely no problem. You might also have like a few more or even less, although 3 is really good number to work with. So what that looks like here you see my text styles. You can see that, for example, this row of H1, I noted it down. I have my base size, then I have my screen L and my screen m. So for each of them, I will have dose three versions to then pick from. So it is a little tedious setup, all of these styles, but you will be rewarded because as you can see, once we have our preview here, it looks really great to get a really consistent look. And yeah, it's definitely really great technique to use even though the little more work for your design. You can, of course, if you are just like if you change a base size, you would need to readjust all of them, but you can then automatically see it down here new examples. By the way, you don't need to do this by hand. You can use an online type scale creator like type minor scale.com or anything similar. There are many out there.
19. Responsive Typography: Truly Fluid Approach: Now to make your typography really fluid or liquid, as we also say, we need to use a so-called viewport width unit. Let me show you how that works. So viewport width basically measures the width of your browser. So for example, let's say the browser is 1, 0, 0, 0, 0 wide. And don't worry about resolution heads who are going to be converted in the background. So that would mean that if I set my text to one viewport width, it equals ten pixels. That is because it would take 1% of the total width. Now if I have an H2, for example, at 1.5 viewport width, that will equal 15 because it would take 1.5% of the total width. Now you might have guessed it. The great thing about it is as the viewport width changes, so changes the size of my text with it. Now you might be tempted to use percentage right away. When you start that does look the same. But once you carry on and you have like containers within containers, you start having the problem that it takes the parent element as a reference and not the browser width. So viewport width gives you this nice, really fluid typography. But it also comes with a bit of a problem. Namely that the topography gets too small at some points and too large, and there is one little hack that you can add. So what you can do in CSS, you could say always use one RAM and then add no 0.7 viewport width wherever you are. In addition to that, you could still also fix a minimum width and a maximum width by just using your general breakpoints. Now as you can see, this is not really a style that you can set up in your design program. So this is more, if you can work really closely with the programmer, it can even set up your own CSS and play around with it. Now if you're up for the challenge and wanting to use fluid typography, I just want to give you this little extra trick that will really help you. If you go to this article on CSS tricks, which I'm going to add link for you. Then you find a really great technique where they worked it out all for you. So you can pass this on to your programmer or set it up yourself if you're upward. And then what you do is you later just use this little snippet here. So if that sounds a little confusing, don't worry. All it does is you set the scale of change. So the viewport width change, then a minimum size, a maximum size, and the fall back. Because even though you put with works pretty much on almost all modern browsers, there's still a few that might have problems with always good to have a fallback. And that's all, that's all you need. All the rest is done with the mixin in the background. The only downside this has is that the original mixin is all set of pixels. So that causes some accessibility issues. If you're good with CSS, it would be a good idea to change those to Ram for your own project. So this is a really great way to create fluid topography. It does need a little bit of CSS and testing and trying. So I generally use it more on smaller websites like a personal portfolio or a one-pager. And you also don't have to use it on all the text. You can also just use it on the main headline so that that scales beautifully enters. Leave your copy text as it is to have more control.
20. Responsive Typography: Summary: So to sum up, these are the three approaches you could use to make your typography responsive. The first one is the single scale, whereby you just take single fonts and scale them to your needs. This is going to be the easiest to handle in your design file, but it's probably not going to give you the exactly same look across all screen sizes. Their second one is the root change, whereby you just changed the root size for each breakpoint. This gives you a new scale for each breakpoint, but keeps your CSS super, super simple. However, it's going to be quite a bit of work setting this up in your design file. This is how ever gone to keep your design looking almost the same breakpoints. So a really, really clean solution. The last one is a truly fluid approach with viewport width. This is going to give you a really fluid, nice topography. However, it's quite advanced and you need to do a little bit of CSS or work really closely with your development team, which is a good idea anyways, does give you really great look. However, it comes with some accessibility issues, plus it can get a little bit out of control. So I would recommend using this approach just for a small, quite static website where you can really control all elements. However, any of those three approaches will help you to get your design shining across all screen sizes.
21. Thank You: Well done for finishing this course. Feel free to reach out to us at moon learning dot io, we're always interested in hearing your feedback. You would also do as a great favor if you could just take a minute and leave a review right here. If you enjoyed this course and also make sure that you have a look at our additional courses. At Moody Learning dot. We cover all subjects from the very foundations of UX UI design through to Figma and even some code basics. Make sure you visit our website at Moody Learning dot IO, where you can also sign up to our newsletter.
Christine Vallaure, UI/UX DESIGN, FIGMA + CODE
