Block 1

 Typography is just a way to describe how you style and organize text in a layout. And a layout is a space or area in which you design. It includes the font choice for each text in the layout, the line height, line length, size, and weight. It also includes the relationship or the hierarchy between the different texts.

The typographic anatomy of a user interface

Let’s look at the anatomy of a user interface. We have a page title, and you can have other types of title. Just a heading or a title, which is brief text that appears before other content. We have a subheading or a subtitle, always it’s just one word and it appears below another title.

There’s body text, which is text on the page that you can read, and it doesn’t have any other function. It could be a few words, a sentence, paragraphs of text even. And if the text runs onto multiple lines, that’s when we call it a paragraph.

We have links, and this is text that when you click it or tap it or otherwise press it, it will take you to another page.

Which is a little bit different from a button that is text that when you click on it or you tap on it or you otherwise press it, it will trigger an action. It doesn’t have to contain text, like the search button, and the search button triggers the searching action.

We have call outs, which is additional informational text that is visually separated and emphasized. Sometimes it’s called a call to action or a CTA if it’s encouraging users to a particular action, like following a link or pressing a button.

We have lists, which are collections of related items displayed in columns or rows. And then we have navigation, which is a type of list of links to other pages that usually appears at the top of every page.

We have badges, which are fragments of text that are used to describe something else. They’re usually very small like this.

And we have banners, which are lines of text that stand out from other text. Often they’re visually separated from the rest of the layout.

We have captions which are text describing or providing additional context to an image. And labels, which is text describing what a user should enter into a form input. There’s also placeholder text, which shows an example of what the user should enter into that form input.

Now, don’t really worry too much about learning all these terms right away. I just wanted to give you some examples. Over time, you’ll pick them up and I’m sure I will be repeating them over and over again during this course.

Typography

As most user interfaces rely on text, typography is more than a pretty font choice. There’s a lot of text just even in this login form. At all points in our design, we have to consider the usability of the text.

Back at when we looked at choosing fonts, we covered readability, being able to read the text is vital. But how the user knows where to find the information they’re looking for is the usability of your typography. Which text is interactive? Is it a link? Is it a button? Is it navigation? How the user knows what is a site name versus what’s a page name. This is all the usability of your typography and how the user knows what is important to read and what is meta information and the usability of your typography. And also how the user knows where they should read first when they open the page. That’s the usability of your typography.

Typographic hierarchy

Hierarchy establishes the order of importance on the page. So let’s look at the order of importance in this login page, as it’s really simple, but it conveys a lot.

So what is your eye drawn to? First, it might be the large, bold title text, or perhaps it’s the login button that draws your eye because of its bold use of color. We’ll look into color later as it also plays a role in the hierarchy of the overall design. Do you notice that regardless of which your eye settles on first, both are giving you the same message about this page? You use it to log in.

Next up, there’s a couple of types of text that are vying for your attention at a glance, the bold dark text of the input labels that stand out against the input boxes. That’s two of the three actions you need to complete the actions of this page so it makes sense for them to stand out. And the links too. These all provide other options for this page. For example, signing up instead of logging in, fixing a forgotten password or resending confirmation instructions.

Side note: notice all the link text is readable and makes sense out of context, this is worth thinking about for later. After that, we have the bold purple checkbox and it’s label that’s in slightly bold, but not quite as dark text. This is a secondary action, so you need it to be visible, but it’s not as important as the rest of the form.

Finally, we have the supporting text. This is all the smallest, lightest gray text. If you didn’t read it, you probably wouldn’t miss out, but it’s there for extra help and information. So take a few seconds to think about the typographic hierarchy of this login form.

Is there anything you would change? Well, then you’re starting to think like a designer.

Recreating the typography

Let’s recreate the typography from this login form in Penpot. I’ve desaturated the screenshot’s colors, so all the text and backgrounds are shades of gray, and this allows us to focus on the text, and the light or dark in the text, rather than the colors themselves.

You can download this file from the resources section if you want to work alongside me. Or try it in your own time.

Let’s work in order of importance. So let’s start off with the title now. First we’re going to create a text box and type log into your account and let’s change the typography of this from the design panel here.

And so I happen to know the font that’s being used here is DM Sans, so I’m going to choose DM Sans and I think size… it’s probably about 24 pixels perhaps? And the weight is slightly bolder, so I’m going to go for a 600 font weight and a line height of one just to make it neat and tidy.

If you want to match a font size to an existing font size, one of the tricks I use is to just overlay it over the text, and then you can see, and I can see that it’s not quite as big.

And also there’s clearly more letter spacing inside of the other text, I think, but let’s make it bigger first. Ah, actually it’s the other way around… the letter spacing is a little tighter, so I’m going to make the letter spacing minus not 0.54, five, thereabouts. I think that’s close enough. And so we have our title. I’m just going to position it by dragging for now.

Saving typographies as reusable assets in Penpot

And so now we want to save this typography in Penpot. You can save your text styles as reusable typographies, so you can apply the same text styles over and over again without having to enter the different options every time. So to save the typography, you use this plus icon that is alongside the text section in the design panel.

And this will immediately save your text as a typography that you can find under the assets panel inside of Typographies. It’s right there. And you can also find it in the typography panel down the bottom here, so if you select that, there we go, we can see our typography down there.

Now you can give your typography a more descriptive name. By default, it’s going to be named after the font family and the weight of the font you’ve chosen, but you probably want to give it a more useful and meaningful name. So you can rename your typography from the assets panel by right clicking and choosing rename like that, or from the design panel here by using the typography options, this little triple dot menu.

And that opens up the whole of the typography for editing. And I’m going to call this title, and then I just select the little check mark there to save my changes. Now you can see it’s also updated in the typography panel and in the assets panel as well.

And if you want to reuse that typography on more text, you can select your existing text, like this bit I added earlier, and choose the typography either from the typography palette or from the assets panel. There you go. You can see it looks exactly the same. I’ll just delete that for now.

Let’s move on to the login button text next. I’m not gonna do the whole button. I’m just going to do the text. I’m going to be less cautious about matching the exact sizes, now I just want to get an idea of the hierarchy.

So I’m creating some new text here, and this is automatically using the previous typography that I used, and I can keep some of the aspects of this typography, but I can change it if I’d like by pressing this little connection icon and disconnecting it.

And so this means that you’ll have all of those text styles that were applied to the previous typography, but I can now make some changes. So this is lighter text, I’d say. I’d say that’s maybe 500. I’ll have a look when we make it smaller, it’s easier to compare the weights. It’s definitely smaller. So if I nudge that down in size, I would say it’s probably about 20. Yeah. And yeah, 500 weight looks about right. And I’ll take the letter spacing out because the smaller the text gets, the more room the letters need to be able to be readable. And I will keep that at line height of one too. And so that’s my button text and say, that looks pretty good. So I’m going to add that as a new typography and going to open the menu and rename this as button. I could call it button text, but personally I find that naming a typography with the word text in it is a bit redundant because it’s a typography, so of course it’s applied to text. So I’m just going to call it button.

And let’s next look at these labels here. Now, these are pretty similar to this text. I’d say they’re just a little bolder, so I’m just going to use the Command D shortcut to duplicate that. And that is called email, and I reckon it’s actually ever so slightly smaller than the other text. So again, I’m going to disconnect that. I’m gonna bump the size down a couple, and I’m going to add a new typography and I’ll call that label.

And I want to duplicate that. So command D, duplicate the text. And this one is for password, and then we want the typographies. If we’re going in order of hierarchy, the links next. These, I think, are probably pretty similar to if we’re not thinking about color, they’re pretty similar. They may be actually a little bit bigger than the label size.

So this is forgot password, and let’s break that. If there are different typographies that are identical, you might still want to create another typography that is identical but has a unique name. Because that helps you know which style you want to apply to that text in the future; it doesn’t really make much sense to apply a label style to a link text. So even if it’s exactly the same, although I am going to make it touch smaller, I’ll still create a new typography and I’m going to call this link and one for the right up the top as well.

Here we have this sign up for free text and down the bottom, oh, command D to duplicate. No, I dunno why my shortcuts aren’t working. I’ll copy and paste instead: Command C, command V. And this is resend instructions. I dunno if you’ve noticed, but in grayscale, the distinction between the link text and the body text is quite hard to tell the difference. And this is why we often use underlines underneath our links.

And finally we’ll do the supporting text. So let’s start with the body text. So that’s the subtle instruction right at the top, uh, not a member. I always find it quicker to duplicate existing text boxes rather than create more. I think that’s partly because I can do it all from the keyboard without having to use the mouse. And this text is at the same size as the link text, but it isn’t as heavy a weight. It’s a lighter weight. So I’ll disconnect that and set it to a regular weight. And I think the spacing looks just about right.

So I’ll create another typography there, and I’m going to call this body and that body text is reused at the bottom as well. I’ve just realized I forgot to do this checkbox, so we’ll do that in a minute too.

So haven’t received confirmation instructions. So that looks right there. Now we’ll do this. I think the checkbox text is pretty similar to the link text, but it’s maybe slightly lighter in weight, so I will duplicate that. In fact it should be, is it the same as the label text? Because the text alongside a checkbox is also a label. So maybe it makes sense to just use the same as the label text. Yeah, that looks about right. That’s consistency, isn’t it? And although I need to make it the correct text.

And finally our placeholder text here, which is actually bigger than the other text because that’s the text that the user will end up entering into this space, and so you want it to be big so the user can read what they’re inputting. So I’m just gonna duplicate the label text, type the placeholder, and let’s disconnect that from the previous typography and. It’s probably, yeah, about 20 or 21, maybe 20. And, but it’s regular text size. It’s… you can tell how different it looks in black versus in gray.

That really does make a difference, but we’re just gonna keep it all in black for now. And so I think that’s about right. And so now we add that typography name, that placeholder and duplicate that. For the final placeholder text, it says password.

And now you can see we have our typographies all nicely lined up in a list in the assets panel, also accessible inside of the typographies panel. I’m using the scroll wheel to scroll through these. You can also use the arrow keys as well, and , yeah, there’s our typography. So we now have those ready to reuse across the whole of our app’s design.