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.
22:41 min
Laura walks through how she would complete the assignment. She covers creating a typographic hierarchy for a fashion magazine, including selecting appropriate fonts, establishing the visual hierarchy and using Penpot typographies for consistent styles.
Licensed under CC BY.
🎹 Music: Great podcast intro by Lundstroem; Lofi Chill Hop - 20 min mix by Ketsa
📼 Video by Penpot
22:41 min
So now we’re going to have a look at how I would do the assignment for the magazine typography. So I’ve opened up the assignment project and there’s just one board in here with the article itself. And if I have a look at the layers, I’ve got navigation, a titles, some spaces for imagery, different parts of the article, a pull quote, which is a quote that has been pulled out of the main text, the end of the article, and some footer navigation at the bottom.
And again, all of this typography, if I go to the assets and look at these typographies that I made earlier, these are all currently Comic Neue. And so it’s this kind of comic book style font. There’s a little bit of hierarchy applied to the sizes and the boldness of the text, but we don’t have to stick with that. Yeah, it has an interesting look and feel.
Now, I am going to first of all, think about what I want for the look and feel of my magazine. I can rename it if I want. I am bad at naming things, but I’m going to rename this. I think I wanna go with a fashion magazine. I’m kind of inspired by looking at the fashion and the newspaper, magazine stylings, the kind of more classical text, kind of maybe a bit vintage, a little bit more traditional. So I am going to call my magazine very originally, The Fashion. I know there wouldn’t really be a magazine called that, but it just evokes the feeling that I want for this example here.
And now I can start thinking about what fonts I want to use for these. So if I jump into Google Fonts now, currently looking at the fonts from Type Together, not sure whether I’ll go with those.
Just resetting Google Fonts to the beginning, the opening screen. So I want a serif font, so let me select all serif fonts and just start having a little browse for something that might have a look and feel that I might like. Now, PT Serif, that’s an interesting idea. So a good thing about PT Serif is it has a lot of styles.
If I think about the content in my typography, if I jump back into it. There’s quite a high likelihood that in amongst this text, there’ll be links, there’ll be emphasized text, whether that’s in italics or in bold. So I really want a body font at least, that supports all of those different styles. So PT Serif could be a good option for that. It’s quite clear and readable. It’s not very decorative. But it has quite a nice style. It’s got a slightly traditional feel, although. Maybe some of the shapes are quite modern. It’s got large x-height, which is the height of these lowercase letters here, which makes it very readable. I like that it has the feeling of stiff and sincere. I’m not sure those two aren’t different, but anyway… So let’s give PT Serif a go.
Now, bear in mind I’m using Google Web fonts for my typography examples here, and that is because if I chose to buy a font, which I would often do in my projects, I wouldn’t be able to share it with you. So if I want to be able to share the project with you according to the licenses in fonts that you pay for, I’d probably have to buy a very expensive license. So I’ve chosen here to use free and open fonts, which means I can share it with you and everyone else, and you can open the file up and play with it yourself as well. And so that’s why I’m using Google Web fonts.
So PT Serif, right? I’m not gonna start with the title of the magazine because really the most important content, the content I want to be most readable, is this paragraph text. And I also need to bear in mind that people will be reading it at a hundred percent, which is easier to see if I hide the UI using backslash. So I get an idea of how readable this text is. So while it looked quite small when I was zoomed out, now I’m zoomed in. It looks much bigger.
Okay, so paragraph text. Now let’s type in PT Serif. Oh, interesting that there’s a caption font available as well that might be interesting to look into. So, PT Serif, now that’s giving me a kind of a modern but traditional feel. It’s kind of got sharpness to it and a bit of chunkiness that feels modern. The x-height is nice and big, but it’s got those kind of old style serifs to it, so I quite like that. It’s quite readable at 18 pixels. It is actually almost bordering on the quite big. Maybe I’ll bump it down to size 17. I also think it’s kind of looking quite cramped in the line height, the spacing between the lines and not between the spacing between the paragraphs ‘cause that’s a little bigger.
One good way to distinguish whether a typography is a good density, like the line heights and the rhythm is easy for reading… so actually squint at your design. So squint at my design. And does it look like there’s loads of gaps between the lines of the text or does it look like there’s not much space and it’s kind of dark blocks?
It does look quite hard to read. I think the descenders, the bit of the letters that goes below the line that the text is sitting on, and the ascenders, the bit that goes above. The, top of the lowercase letters. These are kind of close to meeting in the middle, and so you might wanna just give a little bit more space to help it breathe and so that you don’t trip up between how close together those letters are.
So I’m going to make my line high at 1.3, 1.4. 1.4 feels too big. I think 1.3 feels all right. So let’s settle with that for our paragraph text for now. What do we think of the weight? It’s quite chunky for a regular weight font. Actually look at what our options are. We’ve only got options for regular italic 700, which is a bold weight and 700 italic. So, well, that makes a decision for us, doesn’t it?
Now, let’s try for the pull quote text. So if I open up this typography and I go again to PT Serif. And maybe this time I try with the italic and see how that looks. Now that’s pretty cool. It’s, it looks quite classy. It feels very familiar. The shapes of the letters are very similar to this, but they are just more slanty, the size now.
A pull quote is pulled out to catch your eye. So we don’t really want it to be the same size as the paragraph text, and it’s almost feels like it’s following on from the paragraph text here. We really want it to be more noticeable, so I’m going to bump up the size of that text a bit. Let’s go. 23, maybe 24.
I’m trying not to think too much about how many lines the text is filling up because this is just Lorem Ipsum and it could feel like the whole space, it could feel very little of the space depending on the quote. So I’ve got to think in terms of a system rather than this specific text. Like I want to be able to throw any kind of text in here and for it to work.
I think the line height. Hmm, it’s hard to tell. Let me play with it to see. And that’s definitely too tight. That’s probably still too tight. That’s a little, I think that’s about right. Yeah. 1.3 is too roomy, so I’m gonna keep it at 1.2. Generally, the larger the text, the smaller the line height needs to be in order to be readable. So I’m gonna stick with that for my pull quote for now. Now I know I’ve only got a few more weights to play with, so I’m really looking at sizes.
Let’s look at the titles because we want the… we want to look at the hierarchy, and we want to start with what’s the most important and the most eye-catching elements of the text down to the least important.
Now, we’ve gone from paragraph text, but it’s important that that’s very readable. But now let’s start with our headline. The title is kind of a different thing on its own because that could be a very dramatic, very decorative font. Because it’s the site title, it’s gonna be the same on every single page, and so we can be quite quirky with that, whereas the headings and the headlines, we want those to be very readable.
I’m going to, let’s try out a bold weight of PT Serif and see how that works. The fewer fonts that we have, the faster the page is probably going to load. And it also means that we know that it’s going to work with the other fonts on the page if it’s the same font, just in a different style. So headline and PT Serif, let’s edit that. I quite like that big. It looks good. Big, she says, realizing she needs to zoom in to really test that fact. It is actually a nice 24 to what would, what was this again? 17. Yeah, it’s quite a nice proportion there. I like that. So let’s see how it is a bit heavier as well. Now that’s it suddenly feels a bit more cramped and crowded, doesn’t it though?
I do like the size and the weight. So maybe what I’m going to do is increase the letter spacing that suddenly feels a bit more roomy, doesn’t it? It’s a little easier to read, 0.2 is too much, but 0.1. That’s quite nice, isn’t it? It makes it easier to read. It feels like a scaled up version of this paragraph text.
Okay. I’m going to, I think 1.2 is fine for the line height. I’m kind of looking at how this p and this d are interacting here. They’re not getting too close together. We don’t want those descenders and ascenders to clash, so let’s try that for now. But I’m going to compare it to the subheading.
Now the subheading is not as important as that heading, so it needs to stand out more than the paragraph text, but less than the headline text. So let’s see if we can find that happy middle ground. Now we’re going subheading. Now of course, you may end up with multiple levels of headings where you have to really think about like how many different middle grounds you can find. I’m going to PT Serif. And if I make that 700, now that is smaller than this, but it is because of the bold weight.
It’s standing out nicely against this level of text. Is it big enough? I… I think that’s too big. That’s okay. But it’s maybe too small. I think that’s the right size as well. And I’m not sure I need to change the less spacing on this. No, I actually think it’s better when it feels more like a reflection of the paragraph text underneath. So we are going to stick with that.
Next, we have to think about our little bits of meta micro text here, this kind of additional information. And I’m kind of inspired by, do you remember when we were looking at the New York Times website? And actually also the Elle magazine site, where they were using a sans serif font, combined with the serif fonts, for that more meta information. I like that as a concept. I think that it’s a way of like telegraphing or showing, these are the utilitarian parts of the text. These are the, this is the text that does something or tells you extra information. And I happen to know that there is a PT Sans font as well. So maybe, let’s see how that works.
Now I could try it out on this pa… on this navigation text up here, but it’s quite far away from the other text. Whereas these dates and this byline here, they are much closer this other text. So it give us an instant look at how that font will interact. So let me select the date. I don’t actually need to select this text in order to change this typography.
I’m just doing that to make it clear to you what I’m highlighting, and I am going to choose from the list PT Sans. Oooh there’s some more options for PT Sans. PT Sans Narrow as well. Bear that in mind. Okay. PT Sans. Oh, that is quite a narrow font. Anyway. Okay. It doesn’t feel quite as related as I thought it was going to.
What about the italic? No, the bold, no, they don’t actually feel as close or as similar as I thought they would. Maybe it’s because it’s bigger. Yeah, smaller sizes. It’s starting to feel a bit more similar to this other text, so maybe I’ll stick with it. It looks a little bit more spaced, so I’m just going to take the spacing down a touch as well.
This is less important information, so I’m going to make it quite small at 16 point. 16. I probably wouldn’t go much smaller than 16. I think that the text can get too small to read at that point and we’ll reset that to 100% so we can check that out. Yeah, see 16 is quite big still. And 1.2 is fine. Okay, now let’s try the same for the byline.
Now I could just go through and copy all of these different numbers into the byline. Then there is actually a faster way of doing this. First of all, I’m going to right click on this byline and delete it. Then I’m going to go to the byline text, apply the date typography to it. But of course, that’s not a date and I want to make sure that everything is labeled in my file correctly. Like “properly organized file” was part of the technical requirements, and I want to make it easy for anyone else I’m working with to know that these could be different in the future. The date and the byline, it’s good documentation as well. So I’m going to break the connection between this typography, this text, and the date typography.
And then I’m just going to add a new typography and I’m going to rename it by pressing those little dots there, and I’m going to call this byline. So now I’ve just saved an identical typography, but with a new name for the byline. Now I do like this being quite similar, but I think I want to give a little bit more importance to the byline compared to the date.
So I am gonna see if I can have a heavier weight I can work with. Yeah, I think that works well. I quite like the rhythm of having darker. Then lighter, then darker. Although the opposite could also work quite well, couldn’t it? Yeah, maybe we’ll try that. Okay. I’m gonna reset this to regular and I’m also going to take off the negative letter spacing’ cause in that name it was becoming a bit harder to read than it was with numbers. And I’m going to go to my date, this date, and I’m going to make that one the bold one instead. And now these letters are looking a little bit crowded, so I’m going to remove the letter spacing. Ah, yeah. Now that looks better.
I really like the rhythm of that. We go bold and bold and like regular weight and then regular weight. But we have serif and serif and in the middle sans and sans. I think that works for me. Yeah. So now I’ve got an idea of I like this sans serif PT Sans as this utilitarian text. So I’m going to do the same for these navigation links up here.
I’m gonna do that same trick as I did before. I’m going to delete the typography. I’m going to duplicate the byline one. I need to do that from the… oop applied it by accident. So I’ve applied the byline type here. I’m going to break it. I’m going to add a new one. I’m going to rename that navigation.
So looking at the naming of things, I’ve actually called this footer link, not just footer. And this is a navigation link. So I’m actually gonna call it navigation link, even more descriptive. Great. And I’m going to select these other two typographies. And you know what? I’m gonna open up the Typographies palettes and I’m going to choose the navigation link from there. Yeah, that looks good. I quite like that. And I’m gonna do the same style for the footer links. So selecting all of those individually, in order to select these. By the way, I’m holding down the command key while I’m pointing at this very specific area of layer, because that enables me to target the layer inside it. So I’m not just selecting this footer area. If I hold down command, I can select all of these individual little objects. So I’m selecting one of these and then I’m also holding down the shift key in order to let me multi-select multiple once of those. So there’s a bit of a speedy trick there, and I’m going to make all of these use the navigation link style, but then I’m going to break that navigation link style, and you see I haven’t got a button there to add the typography. It’s because I’ve got too many selected. If I select just one object, one text object, then I can create a new typography and I’m going to call that footer link. You see now I’ve got two footer links.
Let’s make sure I just apply the correct footer link typography to the other links. That would be this one, PT Sans, and then I’ll right click and delete the Comic Neue version. Now we’re nearly done. I have… if I reset and hide the UI with the back slash key. I like how this looks. I mean, this underline is a little bit chunky and a bit close to the text, but it’s not something I’m going to worry too much about right now. And yeah, I quite like the feel of this typography. It’s quite traditional feeling.
Maybe in my magazine title, I’m going to try to evoke a bit more of a modern feel, a bit more modernity. So how might I do that? And. Maybe I’m going to use the fonts that I’ve already got as well. Okay, so let’s look at this magazine title.
Now, I think I like the traditional field, but I want to do something a lot more modern. I could look at some of the fonts we were looking at earlier. I remember that we mentioned PT Sans Narrow. Maybe that’s a good option. Hmm. I’m not sure about how that looks. Something a bit, I wanna say nineties about it. I can’t quite put my finger on why I don’t like that. Maybe I make it in uppercase.
Maybe it needs a bit more space or a bit more weight. No, let’s try space. Let’s give it a lot of letter spacing. Yeah, see that’s quite dramatic, isn’t it? Need a bit more weight. Yeah, I think that’s a bit bolder. But maybe even more letter spacing. Now we’ve dropped onto multiple lines now I’d still want to keep it on one line.
I think now that’s a problem because of the layout. I know I said try not to avoid changing the layout. I’m just going to, I think at the moment this text isn’t filling all of the title cell space that it could. We’ll look at a lot more into grid layouts later, so I’m just going to make that fill the width. There we go. That’s a bit better. And now I can be a bit bolder in the size of the text. Now I know that this title isn’t going to change. I might need to think about how this design would work on different screen sizes. So maybe. I’ll look into some codes that could help me resize the text according to the width of the available space.
But for now, I’m just going to go dramatic and see how it works. I think a hundred, that’s nice and big, isn’t it? Oh, how does it look if it’s actually at a hundred percent as well? Yeah. See that’s got some impact, hasn’t it? I might even increase the letter spacing even more. So it’s almost like there’s a gap, a letters-width gap in between each letter. 30 too much. It doesn’t fit in the space. Uh, 27.
Yeah, it’s kind of retro. I think I like it and it has a nice contrast from the rest of the text. I mean, PT Sans Narrow is still another typeface, so it will still mean more of a weight, but actually given that it is just these few were like letters of text, we could probably even make this just into a graphic, an SVG graphic, and that would load quicker than any of the typography would.
So that’s how I would complete this assignment.
22:41 min
Find the demo file for the assignment in the previous video’s Assignment section.
You can read more about text, typographies, measurement guides, and more in the Penpot User Guide:
