UI Typography Fundamentals *FULL 2024 UPDATE*

1. Intro Typography Fundamentals: Welcome to this comprehensive course on UI Typography Fundamentals. Typography is a key element in design, breathing life into your work and guiding your audience. During this 1 hour course, I'd like to give you an overview on a more technical side of setting up and working with typography on the web. We'll start with the basics like where to find typefaces, how many you need for a good UI setup, and why superfamilies are so fantastic. I'll show you how to create a solid hierarchy by setting up a type scale in different ways in which you could do that. We'll learn how to name textiles effectively and showing we do not interfere with code setup and search engine optimization. And I'll demonstrate why it's so important to use RM units over pixels as soon as your design comes alive in code. We'll learn about font weight and variable fonts, and I'll explain how line height works in CSS and what that means for your typography setup. We'll also explore the importance of color contrast and how to check and document it. And most importantly, we'll have a closer look at how to deal with typography across different screen sizes. This includes examining setups with break points as well as a more modern approach for fluid typography using CSS clamp. While the focus is on the theoretical aspect, bridging the gap between design and code, we'll also take a peek into practical implementation using tools like Figma. From basic text setup, two more advanced techniques like using styles, variables and modes. Whether you're a beginner or an experienced designer, this causes tailored to help you refine your typography skills and technical setup. This is a course by MonarO A. 2. Overview: There's probably no topic in design surrounded by greater designs to operate than typography. Don't get intimidated. This is not about getting a PhD. It's about grasping a few basic rules to ensure your typography looks great online. And I'm going to show you. The important thing is to understand that rather than reading every single word online, people tend to scan text. So what is this text about? Yep, that was enough. And what is this text about? It's exactly the same, but as you can see, it looks very different because it has a working hierarchy. We have many elements such as size, weight, color, position, and spacing to create this hierarchy, and we're going to look at all of them in more detail. It's also very important for me to show you a little bit how this works in code to better translate and communicate our setup between design and development. So during this course, we're going to talk about typefaces and fonts and what the difference actually is. Serif, and the so called superfamilies. We're going to discuss where to find type faces to use and how many we need for good I design. We're going to set up a type scale together, and I'm going to show you different ways you can do that. I'm going to explain you why we use RM for code and pixels when defining sizes for programming. I'll have a word on naming and why it's so important to get it right. We're going to talk about weight, line height, and line length, as well as white space. And we're going to discuss contrast, a very important topic when it comes to accessibility. And very important and we're going to dive into responsive typography to ensure your text looks great across all screen sizes. Hereby, we'll consider traditional setup with breakpoints, as well as a more modern approach using CSS clamp and discussing when it makes sense to use what? While this course focuses on theoretical aspects, along the way, we'll also take a peek into practical implementation using tools like Figma from basic text setting to more advanced techniques like using styles, variables, and modes, as well as how to align with responsive design settings. And of course, plenty of tips and tricks, as well as some real life examples along the way. 3. Typeface & Fonts: Typeface and font. What is a typeface? It is a set of design characters, including letters, numbers, and punctuation. In this presentation, I'm using a typeface called Poppins. A type phase includes variations like extra bold, bold, regular, condense, and so on. A font, on the other hand, is a specific style and size of a type phase. So while type phase refers to the design of the characters, font refers to one particular style and size of that design. For example, Poppins bold 16 point, this is a font. Even though the correct term is typeface, many people use fond to mean both. It's a common mixup, but it's no big deal as long as you understand the difference in your everyday work. 4. Serif, sans serif & superfamilies: Serif, San Serif, and superfamilies. There are many categories of typefaces, but the ones you should really be aware of are Serif and San Serif, as they are fundamental to understanding typographys role in readability and design aesthetics. Identifying the difference between them is pretty straightforward. Serapons include an extra stroke or decorative element at the end of the letter, which can enhance readability in print material by leading the eye along these lines. Classic examples include times New Roman and Garamond. Understanding when and why to use each type can significantly impact the effectiveness of your design. Whether you're aiming for a traditional look with serapons or more contemporary feel with a San Seraph. Let's understand this a little better. San SRF typefaces characterized by their clean and modern appearance are a popular choice for digital displays and online content. Notable examples include Helvetica and Inter. These fonts convey quick by size information effectively, making them ideal for smaller spaces, such as labels under icons or digital interfaces in general. They offer a good readability across various screen sizes and resolutions. Sp type faces with their decorative elements on letter ends, offer a more traditional and sophisticated look. This classic style is ideal for creating an atmosphere of trust and authority, also in digital content. They can also help to add a touch of elegance and formality to websites and apps, especially in settings like online magazines, academic platforms, and professional services. While serapons are often associated with print, they can also be used in digital design. Their detailed seraps can help to guide the eye along the lines of text, making them suitable for longer reads on higher resolution screens where readability is enhanced. You could also incorporate both era and San sera fonts in your design, alternating between headline body text, or perhaps choose a Serafond for a standout quote. However, achieving a harmonious design requires careful tweaking. Font sizes, for instance, may display differently between the two styles. What works for one may not suit the other. If you're considering mixing seraph or San sera fonts, I recommend using what's known as a superfamily. As the term suggests a superfamily is a collection of type faces designed to complement each other harmoniously, despite one being seraph and the other San serp. These superfamilies often include additional variations, such as rounded, condensed or slap versions. Thanks to the shared DNA, such as the same base, size, proportions, and spacing, you can easily mix them without losing the general harmony of your design. 5. Where to find fonts: Where to find fs. There are three places where you could get your typefaces from. If you work for large corporation, they might have their own custom typeface that they will make available for you. For example, AB and B has cereal, really beautiful typeface. Now, it's important to know that even though you have the typeface installed on your computer, you'll only be allowed to use it with that specific company. The second option is buying a license. There are many pages such as MyFons or fun shop where you can browse and find amazing typefaces. Let me show you. Here we are in my fonts, and you can browser fonts, by category, by best sellers, and so on. I'm just going to go for category and say we're looking for a Sansa font. Then we have more filters here on the left, so really handy. We can see different fonts down here and we get a really nice preview. Let's just go for this one. I really like these examples that they give us so you can get a good idea of how you can design with it. Now, down here, you get the info about the font different weights, and you can also see whether you want a family pack or individual styles. Usually makes sense to go for the family pack, and you get the technical specifications and very important, the licensing. This is something you would really need to look at with your client to make sure that what you're buying, you have the right to use it and you're aware of the cost. You can then simply go click on by once you decide it, and then you can choose for what you're planning to use this font. And then, for example, we want one desktop version to design with, and we want to embed this in a website, and then you can see here that this is calculated per views. You would need to install this on your machine in order to access it UI design software like IGMA. The third option will be using a free font. There are some pre installed on your computer already like Aerial. They're okay as a fallback font, but you might notice that it's not quite enough for your UI design. Great place to go for free type faces is Google fonts. It's really popular has great choices, and it's super easy to use. Just be aware that whenever you're getting something free online, it usually comes attached with some data exchange. That's also the case here. It's a very minor, absolutely nothing tragic, but you should still make your client aware of it if you want to use a Google font. That's the same for Google Maps, by the way. Let's have a look at how Google font works. Most important as there are plenty, if you click on filters, then you can fill to the different fonts. So let's just say we just want the Sanserf or also if you're looking for specific language support, then this is really handy. Now let's click on the first one up here. Actually, I'm taking Open Sans I quite like this one. Then you can get a preview. You can also type in the text that you want to. If we click on GFont Then we get some more info. If you want to know more, then click on Design, and this will be relevant for you. We also get all the info development would need. They probably go on to get embed code, and then here's all the technical information. They literally just need to know which one you want to use. By the way, if you're working in Figma, then you don't need to do anything. You don't even need to download the font as everything is already pre installed in Figma as long as you're using Google Fonts. 6. How many typefaces: How many type faces should you use? So how many type faces should or could 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 the branding that only uses your main headlines like handwriting or something very special, that's not really readable and would be overwhelming for small text. For all other texts, you would then add another typeface that is very readable and simple to use. Unless you're really confident with typography or have a given branding to follow, then I would recommend to rather stay away from those fancy display fonts. You don't really need them for a solid design. If you want to however, mixed type faces like Saraf San Saraf rounded, and so on, then I would recommend that you look into using a superfamily as they work really well together. So that would be another reason why you might have two type faces. However, unless you're using a display typeface or mixing categories like Serif and San Serif, you will probably end up with two very similar type faces, and then it's much better to just use one. I personally recommend to start and stick to just one typeface whenever possible. To be honest, I rarely use more, and you can still add this variation by using different size, weight, and color to create your hierarchy. And that's usually more than enough. So to sum up, unless you're branding asks for a prominent display type face, or you want to mix styles like Serif and San Serif, where I would recommend looking into superfamilies, stick to one typeface. 7. The typescale: Creating a type scale means organizing text sizes in a consistent way, which is key to creating hierarchy. It's like giving each text its own importance level, making everything easier to understand and visually appealing. When setting up a type scale, we typically begin by setting up a base font size, which usually lines with our body text size, since it's the most frequent one used. A popular option is 16 pixels, which also equals one RM, the default size browsers use. You can, of course, change the size if you like, but it's often best to stick around this base size of 16 pixels or one ram. You can, of course, go bigger. This makes for easier reading. Personally, I like sticking to it because it also fits really well with my general system of multiples of four and eight, which I use across all of my design for aligning and spacing. So once we have our body text set, we can then set up our scale around it. There's no one way to set this up. But for a minimum, I would add some headlines. Button links and maybe a caption. And you can of course adjust this further to your needs. For instance, you could have more than one version for your body text. This could be varying in size. Or, in my example, I use emphasized and some regular styles. Additionally, you might need to add some italic formating for quotations or divide headlines into display and normal categories. Display headlines would be a large attention grabbing opener while normal headlines would blend more seamlessly into text flow. So this really heavily depends on what your design needs. But even though you can grow your type scale as much as you need, I would always recommend keeping it as simple and condensed as possible. In a star sheet, we also provide general information. For example, de font family that we're going to be using, in my case, Poppins, We want to give some information about the size and note that while in many UI software, we still use pixels to define this. In CSS, we use RAM. So I personally prefer providing both measurements for clarity. One RM corresponds to 16 pixels, so it's quite easy to calculate this from your pixel values. Additionally, we want to communicate the weight. Again, I like giving the name that I use in my UI software as well as the CSS number. And we also add information about the line height and spacing. I was a bit lazy here, and in my example, I just added some spacing for my button. And then finally, we also include a preview of our text. Usually, when establishing our type scale, we start with the smaller screen size. If necessary, we can add breakpoints and specify how our fond adapts across different sizes. There are different approaches to this. Some more modern ones don't even need breakpoints anymore, but I'll discuss this in a separate video. So this overview of how our typography works across our product in different sizes is really what we're looking for. Now, you can start off your design by creating a type scale, but you might also want to start designing freely, and then once you feel comfortable about your design taking the right direction, you might want to organize this a little bit into a type scale. And you can absolutely do this. So how I go about is that I really loosely set up my design. And then once I feel that I want to bring this into a more organized way, I pick out the different area. So I just randomly grab different headlines and body texts, and I align it. I can also see which ones are similar, so I combine them into one size, and I can now create a hierarchy. Once I have the hierarchy, and I see what styles I need, I give them some naming, bring them an order, and I can from here, take it and transform this into the type scale I need. You can approach in whatever way works best for you. 8. Different scaling systems: Different ways of scaling. You can choose a size for your typography scale completely randomly if you like, honestly, that would work just fine. But in your design, it's usually best to have some system and consistency. I'll show you two popular approaches, a fixed scale using the eight point scaling system and a modular scale using a ratio. I like to keep things simple in my design by using a multiple of four or eight for all my sizes, including typography. I usually stick to multiples of eight, like 16, 24, and 32 for my font sizes. I'm not too strict about it, so if I need to mix it up for look and feel I'm after, I just make a bigger jump, but I still keep consistency. This also makes it quite easy to set the line I to a multiple of four, which creates a nice vertical rhythm in the design. It doesn't have to be four and eight, but you'll notice that those numbers work like a charm. Another approach is scaling with a ratio. This maintains the proportional relationship really well. You still start with your base size, and then you multiply upwards using your chosen ratio growing exponentially. You can play with different ratios to adjust the growth. Popular ratios are made to third, perfect, fifth and goal and ratio, but there are plenty more to choose from. There are great online tools that can help you set this up, so you don't need to work this out by hand. Let me show you. There are a lot of different options, and I'm going to use type scale com for my example. On the website, leave the body text untouched, but right below in the dropdown, you can choose different ratios and play with them. You can also choose a different font as long as it's a Google font, play with the weight and so on. On the right hand side, you can see a demo of what page would look like. You can also change this into a mobile view. This is really nice because you get a good idea if the hierarchy is what you're after. You can choose between RM and pixels, and you can simply select this information and translate it to your design as well as to your code. If you're going for the pro version, then you would also get the code snippets here. It's not like one approach is better than the other. You could even mix this and use the best of both worlds. Find a scale you like and then adjust the numbers to the nearest multiple of eight. The world is your oyster. So the important part is that you have a clear hierarchy. Remember, a system is there to help you not to restrict you. 9. Why rem and not px: What is RAM and why does it matter? RAM is a CSS unit that measures font size relative to the root element of the web page. Usually the HTML tag. The root font size is basically the default font size of a web page. This is normally set to 16 pixels. It's like the starting point of all other font sizes on the page. So everything else is calculated from this size. We can of course alter these sizes for our design, but even if we don't define anything, the browser already comes with his inbuilt hierarchy. It's easy to convert between ram and pixels since one RM equals 16 pixels. So 1.5 RM would be 25 pixels and so on. However, users can adjust the size. In Chrome, for instance, users can go to the settings menu, choose appearance, and customize the size of the font. This is crucial for people with reading difficulties. We can't know if they use this preference or Zoom, but it's essential to respect these preferences in case they're set. Imagine you define all font sizes in pixels. For simplicity, let's say H one heading is 48 pixels, and your paragraph text, P is 16 pixels. Now, by using pixels as a font size, this acts like a fixed value and will override the browser settings. It's like they disconnect from the root font size. For example, if a user adjusted the root font size 16-24 in our example, the displayed font will still stay at 16. This creates a usability barrier because the content doesn't adapt to the user's preference. But if we use RM instead, then this is a different story. Let's take the headline. In my default setting, which most people will use, three RAM is three times 60 so 48, and we get the same result as with pixels before. However, the user that changed one RM to 24 pixels now has the headline displayed in a larger size of 72. The great thing is that this will keep our hierarchy intact as the different sizes still relate to each other just as before. You might also encounter EM units or units. The difference between RAM and EM units is that RM calculates size relative to the root fond size, while units calculate the size relative to their nearest parent elements fond size. For instance, if the root font size is 16, one RM equals 16, no matter where it's used. Units can compound when nested inside multiple elements with different fond sizes and inherit from the parent. However, EM just as RAM respects the user's presets, enabling flexible and responsive designs based on the user's preferred setting. Both units have their own strength and weaknesses, depending on how they're used. Skilled front and developers handle their combination effectively, which is typically not a concern for designers at all. While designers generally don't need to consider even RAM, some like myself included, like to include it in our type scale to acknowledge developers use of different units. And it's really good in order to avoid misunderstandings, like, but the designer gave me hard coated values. So this way, we make it really clear that we use pixels in UI design because this is how it's set up, but we still want to respect any user presets. Okay. 10. Font weight and variable fonts: Font weight. Amongst others, weight is also an important element of your font to create hierarchy. While in most UI design software, you will find a word for the weight. So something like normal bold or medium. In CSS, this is represented by a number. 400, for example, is usually normal or regular and 700 bold. You can use these weights to your liking. But most commonly, headlines are displayed in something a little more bold to stand out and your copy text around something like regular with sometimes a few bold highlights. The only thing you should really think about is not going too light on your copy text to make sure it stays readable. So it's a good idea to stay around normal or regular for those. And by the way, not all typefaces are strictly set up 100-900. You might also get something like this. It really depends on the typeface. And another important thing is just because you have all these different weights, it doesn't mean you have to use all of them. Let me show you why. So here I am in Google Fonts, and I can now choose just any font that I like. Let's just take this one here. If I click on it, then I can see the different weights that come with this specific font, and I can click on G font. Now let's have a look what that actually means. Let's have a look at the embedded code we would get. So here you can see that currently. This includes all the different weights. And what I can do now is click on change styles. I can now switch all of them off, and you'll see per default, it's just going to leave the regular on, and I can now just choose the ones that I'm actually using in my design. And of course, I could always add more if I needed them later on. Now, if you have a design where you want to use a lot of different weights, and this is like the core of your design, then it is also fine and absolutely possible. What I recommend is that, have a look, for example, at Google fonts in the filters and go for something called a variable font. So variable font is a type of font that allows for the adjustment of weight width, and other attributes via a single font file. So just as with any type phase, this is not always the same for all of them. For example, let's click here on Open Sans and we can see this has three axes. If we have a look, then it just looks like before, we have our different weights. But now let's click on G font, and let's look at the embedded code that we're getting. If we click on here, then you can see, we have the weight, we have the width, and we have here Italic. So this is the three axes that we can change. The one interested is the weight. So if we click on one value, then we have just as we have before, we click on 300 400 or so on, and this is represented over here. But what we can also do is have the full axis. So now you can see this is like all bakes in, and we're not loading all these different styles, and this is just inside of this one font. And note how it says 300 to 800 when talking about our weight axes. That means you don't have to set this to 300 400 and any given values. You can freely choose on these axes and you could choose something like 415, and you can really, really fine tune it. Keeping in mind that not all browsers will render this exactly the same. The benefits of this is a reduced file size compared to having multiple static fonts, create the flexibility and designing with the ability to really fine tune, and you have an improved performance on web pages because you're decreasing the loading times. 11. Demystifying line height: Understanding line height. When transitioning from graphic design to web design, you'll encounter the crucial concept of line height. This is a CSS property key to determining the total height of a line of text. You can think of it as a box. It's actually called a line box that sends a text more or less vertically. The line height is made up of the font size itself, as well as extra space that is added above and below. This space is called leading. And the half at the top and bottom is called, you might have guessed it half leading. This space is very important to ensuring that text is both visually appealing and easy to read, as well as contributing to an overall accessibility anesthetic. Let's look at an example to understand as better. The font size of my example is 24 pixels, and I want a line height of 1.5. So that means we calculate 24 times 1.5, and that equals 36. So the height of the box holding our text is 36. Line height can be expressed in unitless values like a multiplicator, just as we used it in the example, a percentage value or a pixel value. While in your eye software, you might still be using pixel values, get in the habit of thinking of line height as a multiplicator, and not as a fixed value. Percentage works just fine, but most commonly, you'll probably see unitless notations in CSS. The line height you'll select greatly depends on the type phase, font size, and its application. However, you'll likely discover that the sweet spot exists within a range of 1.25 to 1.75, offering you ample flexibility for your designs. If this is all very new to you, then just start off with a solid 1.5 for your designs. This is really a safe bed to get you started. As your confidence deepens, you'll surely start to find line heights, increasing it for smaller text to enhance readability and reducing it for headlines to achieve a perfect balance. Remember, the ideal line height heavily depends on your chosen typeface, so it's about experimenting and finding what works best. In designs featuring only a single line of text, you might feel tempted to set your line hight two one. However, except in rare cases, I would advise against this approach. The browse is not static, so a change of viewpoard might move the text into a second line. Pages might be translated and suddenly the text is much longer, and also content does change over time. So I recommend always sticking to the specific line height that was set for the style that you're using. Line height is an important design decision, so make sure to incorporate it to your typography scale and sidelight. A little side note, you probably expect line height one or 100% to be the fonts exact visual height. Something like this and half letting top and bottom. This might be the case for some, and it is the visuals I use for my explanations. However, if you dive into the nitty gritty details, you will find slight variations. In a nutshell, a font design within a specific frame, known as the n square, which serves as a sort of canvas for the font designer. The font metrics, including aspects like the height of an ascender, that's the tall parts like an m, and the length of decenters something like a G, can vary significantly within the square, depending on the typeface design. At 100% line height, the text may or may not touch the edges of the box. The line height is added to the entire square, not the perceived visual height, which can result in what appears to be uneven visual spacing, even though the leading is technically balanced. This isn't usually a major issue, but can affect text alignment, especially in UI elements like buttons appearing slightly off center. A manual adjustment is often the solution, and CSS updates like text box trim are planned, but not yet implemented, even though you might already find them in some UI tools. So it's good to understand this detail, but there's nothing crucial to stress over. In most cases, you're going to notice that just working with the given line hide works perfectly fine. When using different fonts together, choosing ones from the same superfamily can help to maintain the consistency in metrics. 12. A word on naming: When looking at type scales, you might often come across this naming convention of H one, H two, H three, and so on. Now, these names are derived from HTML naming tags. And I want to encourage you to avoid this kind of naming in your UI design setup and opt for a more semantic approach. Let me explain you why. When building a website correctly using heading and other HGML tags is essential. These tags act as the framework that organizes content, regardless of how they're styled with CSS. For example, a prominent H one in a hero section might have a completely different size and style from the main title, which is also an H one in a terms and condition page. This is not only important for search engine optimization, but correct headline tags are also crucial for users who rely on screen readers to understand the content structure. It's important to separate HTML text from visual designs like styles. While they work together, each serves its distinct purpose in creating an effective user experience. And by the way, in web design, we use HTML text with CSS for styling, but not everything works that way. In IOS app development, for example, there's no CSS and no search engine optimization to worry about. Instead, we use something called dynamic type, which is just text size based on users preferences. Developers can begin with presets from the documentation and customize them if needed. Unlike HTML text with dynamic type, you could also build your type scale on this, but always make sure to discuss with development first. So it's really useful to understand where these different naming conventions are coming from and what they're made for. If we come back to our web app project, then a semantic approach will probably be your best bet. There's not one right way of doing this, but as long as it's descriptive and allows values to be changed, it will work just fine. A common way to detach hierarchy from texts, like using numbers 1-6 is to adapt the T shirt size approach. So we're using S, M L, and so on, which can also be expanded. Some people prefer a more descriptive approach like tiny, regular or huge. I have to admit this approach also comes with its own challenges as there's no space in between those sizes. So it's difficult to tweak things later on. You might be tempted using headlines ten, 20, 30, like we do with colors, which allows us for in betweens like a size of 25. But this can easily be confused with pixels in this case, so I personally would not recommend using this. To add more structure, you can create levels by using terms like body, titles, headlines, and display headlines. So this is really good if you have a really large system. You might also have several options such as different weights for a font. Again, it's important to stay descriptive so that values can easily be changed. Instead of naming it regular bold or 700 or 500, opt for something like emphasized or strong. Naming is difficult and naming is important. So I generally recommend to discuss naming as early as possible with development to avoid misunderstanding and to use possibilities of alignment. 13. !!! PLEASE WATCH !!! New Figma UI in beta: Heads Figma has updated its user interface, and you might see a new design instead of the old one. This update is currently closed beta, so not everyone has access yet. I will update the arts and reflect the new interface once it's available to everyone. The changes are mostly visual. All the features and tools are still there, just in slightly different places or with a new L. For example, the top tool bar has moved down. The left side panel, on the other hand, has remained mostly unchanged. You can now change the name of your file here. You can still see all your pages, layers, and assets. On the right hand side, you'll notice some changes when you click into a design, but all the features are still available. If you're a beginner and find the new interface confusing, you can click on the question mark at the right bottom and temporarily switch back to the old UI. This is no influence on your design. This way you can follow along with the videos of the course using the old UI much easier until you're ready to transition to the new one. FIMA is gradually rolling out this update. If you don't have access yet, you can also request it from FIMA, but there's no guarantee, some of you might just have to be a little patient. Your team admin may also have to enable the update for you, so make sure you check this as well. Figma frequently updates the software, so expect changes and be prepared to adapt. Features may move around like this library button here has been at every possible place in the last few years. But don't worry, nothing will ever get lost, and you'll get used to be using FIMA in a much more flexible way. It has a really great focus on usability. So it's not about learning something by heart, but understanding the software as a whole. 14. Typography in Figma: Let's understand how to handle text in Figma. Let's have a quick look at the Figma text menu. If you select any text lay in Figma, then on the right hand side in the properties panel, you can see the text settings. Here we can choose a type phase. We can choose the weight. We can alter the size. And we can also choose a line height. This is usually set in pixels. You can use this box to calculate. So if I want 1.5, I would calculate 16 times 1.5. But what I like doing is setting this actually in percentage. And this way, if I were to change the size, then I would keep the same line height. Little tip, Figma also supports variable fonts. Now, the font I'm using, which is Poppins is not a variable font. So if I use this drop down here for the weight, then I only get the presets. However, if I were to change it into a variable fonts, let's say open sans. And I use the same drop down. Then, for example, for my weights, I can find a variable font axes here, and I can now set the weight using the axes. You can also alter the letter spacing and the paragraph spacing. This would be the distance between our paragraphs if we have texts like this. Here you can set how you want your text to be sitting in the box. I would recommend to always go for auto height. That means that your text box is automatically going to respect your height or your line height, and therefore, it's going to create a box around it. You can align the text, and you can also choose from which direction you want the text to grow. For example, if I set it to line to top, and now I'm having more text added, then it would add to text like this. Anything else you're looking for, simply click on the three little dots. Here you find extra setting like text decoration, case, vertical trim, list styles, paragraph spacing. We already have that in the main menu here. If you want to have the little dots when text is cut off, then you find that right here. In this case, you'll notice that your box jumps back to a fixed size. Now, once we set up this headline and the text to our liking, we want to save it as something called a style to reuse it in our design. So let's have a look on how that works. So, here is a very simplified example of a type scale. You can see, I want to set up a display font, title, body, caption, and a button. And I want to use this on my design in general, as well as on a component. So my instance here should inherit this style. So setting up a style is pretty straightforward. Simply select the text. And then in the properties panel on your right hand side, you see the styles icon. Click on it, click on plus, and I can now name it. I'm going to call this one display one. And I'm going to do the same for all the others. I'm going to speed this process up a little bit for you. And of course, your type scale might look completely different. This is really just a simplified example. If I want to see an overview of my styles, I can click on the gray Canvas area, and then in the right hand side, I can see all of them. Here I could also alter them. So if I wanted to change anything about the name or any of the attributes, I can do that here. We now want to apply our styles to our design. Important if you're working with components, always apply the style to the component, not the instance. As you can see here, I apply the style of caption to caption, and then here I select my title, from the drop down, I can now choose the style I created for the title. If we click in the instance, then you can see that this was automatically inherited. For loose text like this, we can apply it directly in our design. And for example, let's say that this had another size, so let's say this was much smaller. Then as soon as we apply our style, this would obviously take the correct size and correct all line height and everything that is saved within the style. If you want to change or detach a style, simply hover over the style and you see a little detached symbol. If you click on that, it's detached and you can choose any other style. You can use styles just like this. This would actually be enough. But since April 2024, we can also add variables if we want to. So we still have our styles, but inside our styles, these little building blocks, they could be variables or not. So we have something like a typeface, weight, size, line height, spacing, and so on. And we can leave them like this and work with them. It's absolutely fine. But as soon as you start moving into a more scalable system, you might want to add variables. 15. Figma variables for typography: In Figma, we can also set of variables, and they work pretty similar to CSS variables. Let's first understand what a CSS variable is. So here we have an example in CSS, and you can see that the link color is defined as a variable. Then we have a class called primary link, where we add more information like the font size, the form family, and so on. And you can see that here we're reusing our CSS variable as part of that class. We could also set up the entire style with building blocks or variables if we wanted to. The benefit is that if I want to change something, let's say the default size of the text, then I would only need to change this in the variable, and anywhere across my entire design where I use this variable, this would automatically update. Let's have a look at Figma. So in my setup here, I have a very simplified type scale, and you can see that all of this is already turned into styles. If we click on the cameras background, you can see an overview of the styles, and those styles are used across our components as well as any loose text inside of our design. Now, that just works great on its own, so you can absolutely use it like this. But as soon as you want to scale this a little more and work within a design system, then you might want to add variables. So I went ahead and I created a collection, click on your cameras area, and then go to local variables. And here I have several collections, and one of them is called brand Typography. Can name it whatever. Insider already created some variables. You can see that I created text size variables. This is a size variable, and I have 16, 24, 32, and 40, and I created some variables for my weight. Here I'm using a string. I have a string and then I simply type in the word of the weight that I want here. My case regular or bold. I'm also going to add a font family. I click on the plus button and I select a string again for a font family. I'm going to call it font family, and I am using Poppins, I simply going to type Poppins. Now, if I want these nice little categories, remember, we can simply group, right click and then new group with selection, and I'm going to call this font family. So if I click on all variables, you can see that I can see all the seven variables I currently have in the collection, and I can, of course, add some all to them or if I need to delete any. Let me just move the font family up here. You can organize this to your liking. If you hover over any variable, you can click on edit variable, and you can now add more information and also set the scoping. That means it's only going to show up in this specific field. Now, I'm recording this right after the release of variables for text sties. We don't have scoping for this yet, but it should be released and you should find it around this menu. There is one called text content. That's something else. That would mean it would take the actual value. Replace your text for 16. That's not what we want. So let's be patient and wait for the scoping update. A little tip, hold down shift, and command, and you can scope several variables at once. Okay, great. So how we're going to get these variables into our style. What we need to do is we need to jump back to our style, and then go on edit. And then here, you can choose any variable. So for example, if I choose my type phase, I can now go on here, and I can see my font family called Poppins. And now this is turned into a variable. And I can do exactly the same for all the others. So for example, here, I go on apply variable, and now I'm going to find my typography, and then let's have a look over here. This one we want to be bold, so I'm going to choose this one, and we're going to do the same with our size. Let's choose the correct size for this one. Now, in height, I currently leave hard coded as 150% here because I like having this in percentages or something like 1.5, which is what we would see in CSS. But Figma doesn't currently support this in variables. It only supports pixel values as I'm recording this just when it came out. So for sure, if you're watching this video a little later on, you can also add line height and have a look if percentage or unit less values like 1.5 is already working. You can use pixels. I'm just personally not a big fan of it. But in general, you can set up variables for all the different fields as soon as you see the variable sign. Now, you could add this to your existing styles. But what about if you're just creating styles? This would work just the same. Let's pull out some text and detach it, and now it's not a style yet. So you can see I can already work with my variables on any text, so I can set up all of this and then save it as a style later on. So you're really flexible in your workflow. And of course, if I will click on local variables and I would change anything about any of these variables, then this would be reflected across all of my design. So in this example, this seems really minor because it's a very simplified example. But in a larger system, this is going to be a huge help. Just imagine that you're changing the font family, you would have to go through all of your textiles and designs. Like this, you only have to change it up here, and then it's going to be reflected in all of your different styles. Also, if you're changing a size, let's say you have a base size of 16, and you need to increase this. Then you're going to have used this font size S across different textiles, maybe a light version, a more bolder version, and so on. This is going to be really handy as soon as you started working in a larger system. 16. White space is your superpower: White space, your secret superpower. Now, you might have set up your type scale weight and line height perfectly, but it's still missing something. And that something is usually white space. By adding white space, you give your design space to breathe and to be perceived properly. There are no fixed rules on how to edit or where. But we'll look at some general principles you can use. So I like using my eight point scaling system to keep things consistent. So everything is a multiple of eight. For example, between my headline and my copy text, I have 16. And then for smaller distances, I use eight, and I can even go down to four. I will use that in smaller elements like a button. And again, this system is there to help me not to restrict me. So of course, I can have an outline of one pixel or similar. It's really a general guideline to create a rhythm. You can also make a difference between microspacing and microspacing. So between the spacing within your components, for example, and the spacing around them. Again, this larger white space like between sections, I use a multiple of eight. The more you're designing, the more you're going to get the feel of where you need to add some white space. So white space definitely is not lost space. It's helping you with your layout. It's really a secret weapon. Also remember, the closer things are together, the more they're perceived as one. So really, really uses white space in your layout. It makes all the difference. Good idea is also always to have a look how others do it. So here's an example of the UBA design system, and you can see they use increments of four, and then they have some general spacing blocks, and they use them across everything, like from setting up grids to icon sizes, and also any distances within their design. In design systems, you'll see that spacing is usually set up as tokens. Here's an example from the wires design system, and you can see that they have their general token. Size four eight and so on, which corresponds again to a multiple of four and eight. Then we can see down here that what they do is they then feed those tokens into a more semantic setup. So they go into much more detail. So for example, between between chips, and they use these base sizes, but then define them much clearer. 17. Optimal line length: In length. On larger screens, you don't want to have the text flowing across the whole width because it's simply going to be too long and quite difficult to read. The ideal line length is said to be 50-70 characters. Notice that here we talk about characters and not physical size. So that can be quite different for different type faces. You should never have more than 90 characters per line because then it really gets quite impossible to read. Now, you don't need to go and count characters, but you can see if you loosely go with that rule, it already is going to be much more pleasant and much easier to read. Also, also make sure that you let your typography flow the way it was designed and intended to be. Don't use a so called justify. What justify does is that it forces your typography to fit inside a 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 get quite ugly gaps. So don't do that. It's going to be really hard to read. Always let the typography do what it was designed to do and flow naturally. 18. Colour and contrast in typography: Typography color and contrast. Contrast is a key aspect addressed by the web content accessibility guidelines or short WCAG. They're providing clear rules on the required contrast levels. And it's important to note that this is not merely a recommendation. It's a legal obligation. The WCAG measures contrast in terms of brightness difference, and that ranges from light, so one to one, that will be white on white and 21 to one, that will be black and white, so indicating a high contrast. And this operates on a rating system. So a double A compliance is the minimum contrast you need. For typography, this ratio is set at 4.5 to one for larger fonts and three to one for smaller ones with large being quite losely defined, starting from around 18 pixels or smaller funds that are bold depending on the type fase. As this is a little unclear, I would always try to go for at least a 4.5 to one for all fonds used. Ideally, you would even be going for a triple A. So therefore, you'll be aiming for a seven to one for standard funds and for larger fonts, 4.5 to one. So let's look at an example. Here, I have a light gray background, and I use a red typography. The result for the contrast ratio in this case is two to one, which falls below the recommended 4.5 to one threshold. On the other hand, if I'm using this dark gray typography on the same background, I'm getting a contrast ratio of 12 to one. So that means I'm even meeting triple A standards. It's also important to consider font weight and size as smaller and lighter fonts require higher contrast compared to larger and bolder fonts. To make sure you're getting the contrast right, I would advise you to always use a contrast checker. You can either search for a contrast checker plug in in your UI software or you can use an online tool like web aim. So these contrast checkers work pretty much the same whether using a plug in or an external tool. Basically, what you do is you take your foreground color and your background color or the other way around, and then you just add it and you're going to be given a ratio. Now, this is the ratio that you're going to note down and compare to the needed ratio. Generally, the contrast checkers already show you whether it passes or fails. For example, if I now alter my color, I can see how it starts passing. This could be the text or the background color. I generally recommend having an overview of all your colors and keeping text colors separate from the general brand colors, even though you might use the same values. This way, you can check your text color against any other color and establish clear rules about which colors can and cannot be combined. Besides the standard text, also make sure to consider system colors like alerts and confirmations. And it's also a good idea to define a clear interaction color. This would be your highlight color for buttons, links, so anything that's clickable. 19. Responsive typography with breakpoints: Creating responsive typography with breakpoints. So what are breakpoints? They are specific points or rather thresholds or changes occur. This way, websites can adjust their layout and styles to fit different screen sizes. To create breakpoints in CSS, we use something called a media query. The media query rule is a way to apply certain styles to webpage only if specific conditions are met. In this case, the condition is a minimum width of 768 pixels. Anything inside the curly brackets will only be applied when the viewport has a size of 768 or more. Let's have a look at this in CSS. So you can see here I have a headline and some copy text as well as two images. In our HTML, this is an H one, the headline, the copy text is P, and then here we have our images with the image tag. Now in the CSS, you can see that I set the text to have the size of one RM, then a little larger for the headline, and I set the images to occupy the entire available space. So these are my base styles. Now as I scroll down, you can see that I added immediate query. As I hit 400, let's just make this larger down here. You can see the size, so you can see as I hit 400, then this changes in layout. What happens here is that everything inside the brackets become active. I have a new background color, the H one is larger, and the images change the occupation of space. If I go even larger, you can see the second media query hitting. So you can see down here. Again, I added a background color, so this becomes visible, and I also change the H one to become even larger. So breakpoints are usually the go to technique when it comes to adjusting typography to different screen sizes. In theory, we could set breakpoints for each text individually. However, in most cases, you'll likely have a predefined set of breakpoints for your typography scale. This means that when the viewpoart reaches a certain size, the text layout adjusts accordingly. These breakpoints could be provided by a framework like bootstrap, or you can choose them more freely, particularly when adopting a modern CSS layout approach. They might already be in place for other areas of your design like changing the overall layout. So a lot of the time, it makes sense using the same breakpoints. Be sure to consult the documentation or style guide for specific numerical values if you're starting in a new team. And if you're in charge of setting up from scratch, then make sure to talk to your development team first to know what they need and recommend. So once we know our individual breakpoints, the next step is to expand our scale to cover all sizes. There are different approaches to handling this. Let's explore the first approach, which would be making individual adjustments. Typically, we start by setting up our type scale from the smallest size. When we hit a breakpoint, we can check if any changes are needed. Often, a body text with a size of 16 works fine across all sizes, but main headlines might need a tweaking. You can, of course, also adjust your entire scale to each breakpoint up to you. Our second option is to expand using our modular system, so scaling with ratios. We can keep our ram values consistent, but we just adjust what one ram would equal at each breakpoint. For instance, on our small screen, one ram might equal 16 pixels, then 18 pixels for our medium and 20 pixels for our large screen. And then we just keep our general system because we're multiplying the base size with a chosen ratio. So all other sizes adjust automatically. So while 1.5 ram usually is 24 pixels on my medium screen, 1.5 ram becomes 27, as it is now 18 times 1.5. And for large, we calculate 20 times 1.5, so it's 30 pixels. It's important to set this up without fixed pixels in code to ensure support for user presets. Don't worry. There are various ways to accomplish this. Nothing too complicated. But worth mentioning this, as in design, we will be dealing with a new set of pixel values independent from each other. While in code, this will stay as relative units. Setting up breakpoints for typography is usually a good solution within a structured design system. It's easy to scale, ads organization, and it's really easy to communicate across teams. 20. Fluid typography with CSS clamp(): Fluid topography with CLAMP. To understand fluid topography in CLAMP, we first need to learn about viewport units. There are a few of them, but the one we're interested in is the viewport width written as VW. I Magister width of the viewport, whereby one VW is 1% of the viewport width. Let's look at an example. Let's say our viewport is 1,000 pixel widths, and our text size is set to two viewport width. So this is 2% of 1,000, hence 20 pixel. Now, as a viewport width changes, let's say we resize the browser to 500 pixel width, then our two viewport width would now result in a text size of ten pixel. So this way, we can create fluid typography. However, we have the problem that at some point, the text will be too small to read or too large for our design. This is where CSS CLM comes in handy. It's not the only way to deal with this, but I quite like it as it's using native CSS. With CLAMP, we can set a minimum and a maximum value for our text, as well as a rate of growth between those two thresholds. So in my example, the text is at least 1.5 RM, which is the same as 32 pixels, and no larger than three RM, which will be 48 pixels. In between it scales with a scaling rate of 5% of the current viewport width. This way, our text dynamically adapts to varying viewpoart sizes. Note how this is independent from breakpoints. It would simply kick in as soon as 5% of the viewpoard width is larger than a minimum size. Now, clamp might seem like the solution to all of your hopes and dreams, and it's fantastic. However, it's really an area where designers and developers need to sit down together and work in the browser to get those details right. It's not going to happen in your design file. It also comes with some accessibility considerations, as well as technical fallbacks implement. So, generally speaking, if you're working on a creative one off project with a lot of customization and attention to detail, this might make a lot of sense. However, if you're working on a design system, it might be a bit of an overkill, and you might want to stick to just standard break points. And by the way, you could still use clamp, let's say, for a flashy hero section within a more rigid system. Besides the viewport width, I also want to point out one new development, container queries. Without delving too deep into container queries, it's worth noting that while media queries focus on the viewport, container queries allow us to target the size of the parent container and adapt accordingly. Also container queries have their own units similar to viewport units, but they're linked to the parent container instead. So we can still use clamp, but instead of using viewport width for scaling, we now use the container query width. This means that our tech size adjust according to the available space, which is pretty exciting. If there's no container, it just falls back to viewport width, by the way. However, implementing this needs a skilled front end developer with attention to detail, plus for sure, some more extra time and budget. So it's not to go to for easy scalable design systems. But it's still valuable for designers to know, and it may become quite relevant in the future. 21. Responsive typography in Figma with styles: Dealing with responsive typography in Figma. There are currently two ways to do this. We can either set up a style for each breakpoint, or we can automate this by using styles variables and modes. To follow along, please visit figma.com Farsh Moon Learning, and here you can find the two different type scales with the different setups that I'm going to show you. Let's first look at the traditional approach of setting up individual styles per breakpoint. So how I go about is that I first set up all my styles for my default. So here you can see I have my different styles names, and then I created some text, and I turned this text into a style. So if we have a look at the overall setup of our styles, you can see I have a folder for each style, so headline X L, and then you can see inside I have one style for base. So this would be this one here. Then one for M, this would be this one here, and L. You could also create this the other way around and have one folder per screen size and then inside the different styles. That's up to you. So if we have a look, we also have three styles for L. So you can see this is our headline L. And then in headline M, we keep the same size from default to size M and then only change at L. So you can see I only created the one where the change happens. Otherwise, we would use our base. So this is also the reason I call this base and not size S or something like that. You can only create the style when you need it, or you can just set up default styles here as well. So let's say in our body default, we could also create the base size M and L, and even if they're the same, just have them set to the same. Sometimes that makes sense because as you're building, if you later decide to change your text size, then everything is already set up. So really worth a salt. And it would basically work the same for our setup with the ratio. And here you can see I really need a style for every breakpoint. So if we have a look at this setup, then it's the same folders, and you can see that really for every style, I need three styles in Figma for each breakpoint. You don't need to work all of this out by yourself. Just go to typescie.com and then change from RM to pixels. And in this case, you would change the body size. This would give you the values for 18, and then in my example for 20, and then you can just copy the pixel values here. Then if you want to use them, you just have a screen per breakpoint, and you can see that what I did here is unlike using min and max values, so you can see this will lock them when resizing to the min and max value. You do need an auto layout frame for this to work. And then I apply the style to the correct breakpoint. So here you can see, I have my headline base applied. So my X L, but the base style, and then here I have the same the X L, but the M size, and then on the last screen, the L. We are also using the X L but diversion for the L screen. So you might have more break points and then it gets quite cluttered. So I usually have this sort of setup somewhere tucked away in a different page, like a playground page, where I can try out different sizes, and then I simply show my mobile and my desktop size for the overall design setup. One thing I want to point out with this approach, what's quite tricky is that if you have components, which hopefully you have your whole design set up with, then you would probably need to set up a component per breakpoint. So you can see here that here I have my base, and then here I have my size M and then here my size L. Now, we could also overwrite this so you could go inside of the component and overwrite this. But this gets really messy and it's a potential source of error. This is really a downside for this setup. 22. Automating Figma typography with variables and modes: Adding variables and modes to styles to automate text size change across different screen sizes. So I want to show you another way to deal with this, and this is automating the size with styles, variables, and modes. So we start with the same basic setup. We set up our default sizes, and we create styles for them. So here you can see that this is set up also as our headline X L. So you can see here that I have the same styles, but I only have one styles. So also didn't create any subfolders. And if you have a look, then these are all the same style, but they have different sizes. So how this works is if we open our local variables, I have a typography collection, and let's first look at default. This is all the default values. You can see 16, 16, 16, and so on. Then our headlines are larger. I can also add my font family, I can also add weight, spacing. I'm just keeping this focused on the text size for now. Then I created two more modes, one for size M and one for size L. You can create modes by clicking on the plus button, but you need to have a pro plan or above figma to do so. And then I change the values here. This is again, set up in pixels, and I can set up new values for my M mode, and my size L mode. Now, what I did in my overview is that these are all little frames, and then you find over here as soon as you have an element that has a mode that Figma gives you the little mode switch and you can see I changed this one here to, and now I'm getting the sizes for, and over here, I'm getting the sizes for L. And it automatically swaps this text size as given in the modes. If I jump back to default, you can see that I'm getting the small sizes again. And so in my design, I only set up my base, and then you can see here that everything still uses the same style. But I changed the mode of the parent frame, so you can see here from size M. If I go back to default and everything would go to the smallest size. And this way, I also just need one component because this is just using the general style. But as this component is set to auto, everything that you put onto the parent frame needs to keep its auto setting, and it would therefore inherit the style set by the parent frame. Here you can see that even though this has a size, if we go to deaf mode, we can see the text size here we have it is at 30, and if we go back and compare this, then we can see that 30 is the size for headline in our screen L. So this is really a great way of dealing with this. However, you need to be aware that you need everyone to be on a pro plan or above to deal with this. It also needs some good figma knowledge, and is also a little more complicated once your design system is growing, so you need to pull in different libraries and alter a lot of different stuff. 23. 21 real life examples: There are plenty of different ways and approaches that you could use to set up and document how to deal with elements such as spacing components and typography. It's always a good idea to look around for inspiration. However, keep in mind that it really depends on what kind of project you are aiming for, your team, and your budget. So it's really about getting ideas and picking what's right for your specific project. Two of my favorite design systems for inspiration is the Uber design system called base. This really offers a comprehensive guide to their philosophy and implementation. So you can really click around and see how they do things. Another one I really like is is dot design. It's not as detailed as the UBA design system. It's more a broad idea of how they deal with their design, but it still has really nice examples to look at. However, I generally recommend two places where you can find lots of inspiration. The first one is the zero height showcase. In case you don't know zero height, it's a great software platform that facilitates the documentation process between design and development teams. Here you can find a good overview of different companies that build an open design system with zero height, and you can just click through them and get ideas and compare. Another place I really like is storybook. It's more developer focus, but you also find a showcase section here, so you can run through these examples as well, and it might also be a nice idea to run through them with your development team to look at different ideas. Just as with zero height, you can browse them and you can also find the different areas like typography spacing, components and so on. But you can understand them from a more developer focus point of view. Okay. 24. 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.