Block 1

 Let’s have a look at how we handle text in Penpot. The text tool is right here in the middle of the toolbar at the top of our canvas space. If we hit that text tool, we can then draw out a box in which we can type our text. We can drag it to any size that we’d like. So I’m just going to type two words, two.

Editing text

If I want to then edit that text, if I’ve clicked away from that text box, I can select the text box and hit enter to help me edit the text.

You don’t have to draw out a box for your text. You can also hit the text tool and just click anywhere onto the canvas and then type out your two words into that space, and the text box will expand to fit the available space.

You can have as much text as you like in a text box, but if there is natural vertical spacing in your text, so for example, you start another paragraph, you see we have some space here in between the two lines. I would say that’s a good point of which to actually take the second part of the text and put it into its own text area. I just copied and pasted that in there. And what this will do is give you more control over the spacing between the paragraphs and the positioning of the text. You can position it separately if you need to.

Text box sizing

Now let’s look at how we size these text boxes and what the difference is between this big box here and these boxes here.

In the design panel, if you go to the Text section, you can see we have three options here, and one of these options will always be enabled if you’ve drawn out your text box. It will be one of these fixed height and width because you have, by drawing out, you’ve decided that the width of the box. I’ve drawn out, it’s about 201, or it’s exactly 201, and the height of that box is 88. Let me just move that out the way. Now if you have more text than fits in the box, so if I copy and paste this over and over again, you’ll see that the text overflows the box.

Clip overflowing text

If you want to hide or cut off overflowing text, there is a trick to this. You can select the text box. And then you can wrap text in another board. So if I select it, I can say selection to board. And so that creates another board surrounding my text. I’m just going to call that overflow. And then here in the design panel, we have an option that clips the content of the board. Now what clipping does. Is it essentially says anything outside of the board is clipped and you can’t see it. And so if I hit that, you can see I create that sort of cutoff text effect.

Auto height and auto width text

If we go select this text here, this is actually set to auto width. That’s because the size of the text box is fitted to the length of the text content. Now, this isn’t great for long paragraphs of text. If I select this paragraph and set it to auto width, it really goes all the way over there, it overlaps the size of the canvas. I’m just going to undo that. But it’s very useful for things like labels and other short bits of text. And later we’ll look at how you can get more out of auto width with responsive layouts.

And auto height will set the width of the text to the current width of the text box, but it will set its height to fit this text content. So if I apply auto height, this button here to this paragraph, you can see that it goes to fit the size of the text in the container. What you have to bear in mind is that on the web text will flow to fit its container and users might have changed the default text size in their browser or their platform. Like do you have a zoom in or out of a page so you can read the text better? In fact, I’m doing this right now in this screen capture that I’m doing for this video, I’ve actually zoomed my browser to 125% to make it easier for you to see and read the UI. And you’re probably also designing for multiple devices and environments simultaneously, so it’s very difficult to design text that fits or aligns to a specific height or width.

It doesn’t really make sense to make text fill the exact width of the page or container, like imagine if I made this paragraph text really, really big. Not that big, but if I made it as big as I could to resize it using proportional scaling, if I tried to make it fit exactly the width of the canvas like that. Now, you don’t really want to do that unless you’re designing a poster or something like that will be printed. There are ways to make text change size automatically to fit the space using code, but think about why would you want to do this? Think about how it prioritizes a visual image and a visual styling over the user being able to take control of the size of the text themselves.

As UI designers, we often have to find a balance between our creative vision and usability. And by the way, usability should always win. And if a user can’t use your design, it’s ultimately unsuccessful. And we’ll discuss this a little more later.

Styling inline text

Now, let’s have a quick look at changing the style of the text inside of the text box. So if I change a little bit of text, say like this, we call this inline. That’s text inside of the lines of the text, whereas this whole quantity of text we call the block, that’s just a bit of terminology for you there. And often you’ll want to change a word or a phrase inside a block of text. This could be for a link, so maybe you’re using an underline style, or maybe you are changing the weight of the text to add some sort of emphasis, so maybe you’re making the text bold. And you can also change the text color for the selected text. We can do that a little bit later, but that’s all you need to do is select the area of text that you want to change the styling of, and then you can choose the options that you want to change inside of the design panel here.