But again, it depends on the font, if these numbers are provided. With Raleway you can switch from the annoying default old-style numbers to lining numbers.Īnd old-style numbers aren’t bad per se – wow, that rhymes! In body text, they blend in nicely, and might be the thing you need. Depending on your font, you will have more or less options here. They are like a typographic treasure chest, many people don’t even know about! So let’s dig it up by opening the Type settings and switching to details. If you’re a subscriber to the Font Friday Newsletter, you know I looooooove OpenType features. Learn about the ideal line length and line height in relation to each other. For body text, something around 140% to 150% often will be ideal.īut there is more to line-height.For headings, between 105% and 115% will work.A percentage value for the line height will always set it relative to the font size. This way it will always be relative to the font size.

For instance, if your text size is 40 px, a good line height could be 44 px.īut what if you change the font sizes during the design process? Then you’ll have to manually adjust the line height again! Not so, if you type in a percentage value. A value that is a bit more than the font size is often appropriate.

Otherwise the headings take up too much space and visually fall apart. When it comes to larger headings, you should strive to make them more compact, especial when they spread across multiple lines. This also is a neat trick when you’re doing UI Design and that deals with a fixed size for a certain component. Now, if your content exceeds the text box, it will be cut off with an ellipsis at the end of a word. Set it max lines to your desired value.At the bottom of the basics tab, activate truncate text.Select the text box inside it, and access the type settings menu.And it is not very sustainable, because if you change the size, you’ll have to reformat the text again. Of courses, you could manually adjust the length in every instance, but this takes time. Unfortunately, the text has varying lengths, resulting in various heights. You have a fixed height layout, like some cards in a blog archive. If you hit it often enough, you will eventually end up at the deepest layers, which will be your text elements. Hitting the Enter key will select all elements that are nested inside it.Click on the desired frame/s or group/s.Now, what if you wanted to change the font for all the text on your canvas at once? And of course you did not create any styles for that (only boring people do that). If you want to pick several elements, do so by holding command + shift.ĭirectly select nested text in Figma by holding the command key.Directly click the text layer you want to select.Hold command on a Mac (or ctrl on Windows).This is how you can speed up the whole process: When you just want to select the text, it’s always super annoying 😖 to double-click your frames or groups. Use variable fonts and seamlessly adjust the weights and styles of a typeface, and apply leading trim to prevent your layout from shifting when changing to a different font. Learn how to apply relative line heights, and see new possibilities with OpenType features.

Use short cuts to select text faster, and truncate text to make your components more versatile. TL DR: Discover Figma’s advanced typographic possibilities by utilizing the type settings. Discover the possibilities of Figma’s type settings, hidden behind the three little dots in the text section. So it’s about time to share this more broadly on YouTube and in this article. When I discovered it in 2018, typographic possibilities were quite limited, but this changed a lot in recent years! People are regularly surprised when I show it in my workshops. I’m using Figma for web & app design for a long time now.

Figma best fonts