In this 10-hour video course, you'll learn core skills and techniques for user interface design, from simple graphics to complex patterns and design systems.
15:26 min
Let’s get hands-on with how to create and format text in Penpot, including all the essential text editing tools and properties. Learn how to use the text tool, adjust font properties like size and weight, control spacing and alignment, and efficiently edit multiple text elements at the same time.
Licensed under CC BY.
🎹 Music: Great podcast intro by Lundstroem; Lofi Chill Hop - 20 min mix by Ketsa
📼 Video by Penpot
15:26 min
Now, let’s start off with zooming in. I think it’s very useful when you’re designing text to actually look at the text at the size it’s going to be rendered, the size that the user is going to experience it. And so I’m going to go to the zoom level here and choose reset, which will reset my canvas size to a hundred percent. So this text looks a lot bigger now, and I’m gonna scroll up to this text board over here.
Now let’s create a text box. I’m going to choose the text box tool, and I can drag out any size text box I would like. It doesn’t really matter either, you can change it later. And then a little blinking cursor comes up and I can type in my text. So my text goes here.
And now that I have this text created, in the design panel, I have these text options here to change my text. If I deselect it, you see it goes away. If I select my text, I can also do so from this layer panel here, so I can select it from the canvas but I can also select it from the layer panel.
Now let’s look at the options we have for changing the text. Now, first up, we have the font family. Now we discussed this a little before, but this has a variety of all of the Google Web fonts, as well as any fonts you have added as a custom font. So right now I have Work Sans selected, my most recent fonts are at the top of the menu. Maybe I want to choose Noto Sans and just try that out.
Next up we have the font size. So right now this is size 60 and that’s in pixels that size. Perhaps I want to make it a bit smaller and make it 30. I can either type in the size that I want or I can choose from a bunch of preset options here. So I’ve selected 30.
The next box along is for the font style and weight. So if I select this, it will show me all of the font styles and weights that are available for this font family. So there are quite a few options for Noto Sans here.
Now the weight can either be specified as a named weight, so like regular. We also have here, we don’t even have a bold in here, do we? It doesn’t use the name, no. So we have regular, and we can also have it in numbers. So 100 is a very lightweight of font or also known as Thin. A regular weight is around 400. And so you can see if we go up, the thickness starts getting thicker. 600 is a fairly average bold font weight as is 700. And then when we get up to the nine hundreds, we’re looking at very heavy or black weight fonts.
The italics, there’s usually one italic style, and so it is one particular slant and. You can also choose to combine weights and italics. So that’s where we get our lightweight 100 italic, our standard italic, and our heavyweight italic.
And you can choose to use any of these that you like. And each font will have its own weights and styles. So they might have a lot, they might have very few, they might be named slightly differently as well.
Next, let’s look at this line height option here. And for that you can’t really tell the height of the line of the text when you just look at one line. So I’m going to type a little bit more and my text has the option to go onto multiple lines. That is also known as a paragraph, if I can spell paragraph.
Now here you can see that the text is looking quite cramped. Because there’s not much space in between the lines, and this is because we have a line height of one.
If we type in a different line height, we can nudge it. So one is where the lines of the text will line up exactly, there’ll be no space between them. We can go negative. So we can go into 0.8, 0.7, and this will… select 0.7… that will make the text overlap. Whereas if we go into a positive, so above one, so I can nudge this up, we can get to have a lot more line height spacing.
I would say usually an average spacing is about 1.2 to give you a nice bit of space. Although it could be up to 1.5 depending on the font. Different fonts look good with different line heights and different quantities of text look good with different line heights too. So we’ll stick that on 1.2 for now.
Our next option here is the letter spacing. So this is the spacing between the letters. Now, usually what’s been decided as default for the font is the best rendering for that font. That’s usually the most readable spacing between the letters, but you might want to change it for one reason or another.
And again, you can go negative. So we could say… we can go positive, we can go up, and so we can make it quite spacious or we can go negative and say minus one, and then our text, we can get it more and more cramped together. You can see it remains readable, even if you go pretty narrow, but then you can go into the points where you can’t read it anymore.
Often we like to combine a positive, like a large spacing, let’s say 10, with uppercase. And that’s quite a common stylistic choice, and that’s what these options are here… is if I switch that back to one so I can actually read the text… we have the options between converting all of the text to uppercase, converting it to title case. So that is where the first letter of every word is in uppercase or all in lowercase. And this is quite an easy way to switch between these different styles so that you don’t have to type all of the text over and over again in that different style that you would like.
The next option that we have is the alignment of the text. This is probably already familiar to you. We can have left aligned, which means that the text will be aligned to the left of the box. We have center aligned, which means it will be aligned to the center of the box or right aligned, which means it will be aligned to the right of the box.
Now commonly, if you are a reader who reads left to right, then left-aligned text will usually be easier for you to read. There’s also the option here to have justified text, and what that does is it spreads the spacing inside of the text more evenly so that the text is both flushed to the left and to the right of the text box. If you look at books and magazines and newspapers, this is often how text is presented in this way.
It allows for a more aesthetically pleasing like layout when you look at the overall design of the text. And some people say it benefits readability, I’m not so sure about that. I would say that justified text is hard to get right on the web, so generally I would advise that you just go left aligned. Perhaps you might want to make some exceptions for headings and other center-aligned text.
We also have this additional set of text options here, which we can click to open them up. And this gives us an option to do some different alignments with the text. So we can currently, you see the text box is bigger than the text itself, and it is currently aligned to the top of the box. We can also choose to align it to the vertical center of the box or to the vertical end of the box.
What if we want the box to actually be the height of the text? And that’s what these options are for. So here right now we have a fixed, height and width for our text box, and that means if I keep typing, lots of text, lots of text, lots of text, and it goes outside the box, then it’s going to overlap the available space.
We could also have the choice to set our text to the… the box, to the width of the text, so that means that it is going to expand out. So that it is the full width of the text, or if we go back, we can set it to auto height, which means that the size of the box will adjust to that height of the text.
I quite like auto height as an option because it allows me to change the text and the box keeps that the correct height, whereas the width will stay fixed to whatever I want to set in the width option here.
Now I’ve just reset that text back to unstyled, so it’s not title case or uppercase or lowercase. And I am going to have a look at the rest of the options. So if I go to the options button here, we have a few more we haven’t explored yet.
Now one is underlined text, so I can apply this to the entirety of the text in the box, or I can just drag to select a small part of the text and set that to underline. So that’s really handy if you want to show links. Of course, underlining a link is probably the most conventional way to show that is interactive text versus its surrounding text, and so that’s very handy.
We also have the option here to do strikethrough. And strikethrough is probably less common. You probably are most likely to use it if you are working in a collaborative writing tool where you want to make suggestions for text to remove or something like that. You could use it decoratively, but I’d recommend against that because it makes the text harder to read.
Finally, we have the option to set text that goes from left to right or right to left. Now by default, it will be set to left to right for,your languages and alphabets that read from left to right. But if you are so working. In Arabic or another language that goes from right to left, you can choose that option and that will make the text run from right to left.
This option is handy if you want to be able to design for both, and you can easily switch between the two as well.
Now you can download this sample file from the course website if you want a quick way to play with text yourself.
Let me just show you a little cheat shortcut that I have for changing all of these text fonts at once.
So I could go through and select every single bit of text manually like that. And that’s one good way of doing it. But I have a trick for you too. Now, in the Layers panel, we have the option here to search layers. This comes up if we press this little magnifying button here. Now we can type and find layers by their name, or we can use this little filter option, and I can choose to select all of the texts. And what this does is filter all of the layers just by texts.
And so this is a really handy way of being able to select multiple texts at once. Now, I can select a layer by just clicking it like this, but if I want to select all of the layers. I can select the first layer, scroll all the way to the bottom of the layers, hold down, shift, and select the last layer. So what the shift does is multiple select, and it’s saying, I want to select all of the layers between the first selected layer and the last selected layer. So I could select the first layer, hold down, shift, and just select a few layers down, and that will just select all of the layers in between those first and last selections.
So let’s do that again: all the way to the bottom select. So now I have all of the text in my designs selected. In the font family box, you can see that it’s got this little double line here and that’s because there are multiple different fonts being used. But we want to override all of those. And I can choose any font I want that I want to test out.
Um, I’m not really sure which font to choose. Should we just pick a random one? We are gonna pick one we know is good. I always think that when I’m looking at fonts in this way. If it has multiple different families, that’s usually a sign it’s a high quality font. So let’s try Alumni Sans. And there we go. Oh, it’s quite a sci-fi, kind of a font. Quite narrow, quite boxy. Makes me think of science fiction. And so we can see how this is very condensed, very narrow font how this looks with all of the selected texts. I have to say, I probably wouldn’t use that for body text, that’s quite tricky to read. It does make quite a cool heading font.
Well, let’s try a different one. You can see that the size of the text has been preserved. Maybe I will go for something I already know… Why don’t we go for the Penpot classic, Work Sans. And I’m going to try that out. And there we go. And the layouts will automatically fit the text, and that is because I’m using flex layouts, which is something we can have a look at a little later.
So remember, if you want to try out fonts with a sampler like this for yourself, you can get it from the course website.
15:26 min
You can read more about text options, layers, zoom controls and more in the Penpot User Guide:
The demo file features the example from the video on using fonts. Download the .penpot file and import the file into Penpot to try it out for yourself.
