Typography in Web Design: What You Need to Know

[00:00:00] Chris: This week, we are talking about why type Ocker fee is one of the most important aspects in being a good web designer and how you can get better at it. Are you ready? Let's go

Welcome to another episode of the self-made web designer, podcast. Typography and web. Often something web designers think about last, when they're working on a project, the checklist often goes something like this. Do I have good images check? Do I have a nice visual balance on my layout check? Do I have an appealing color palette?
Do I have good typography? Oh yeah. I need to think about that.

But typography often takes up more space in web design projects than any other elements. So if you want to be a good web designer, you've got to be good at typography. And this week I talk with Oliver Schondorfer.. He's an app and UI designer from Austria who's really passionate about typography and he runs an awesome YouTube channel called my type, which is a great name. Well done. Oliver

Oliver made it his mission to help folks learn how to use typography in a way that takes your web design to another level. And he's sharing his expertise with.

Today, but before we dive in, I want to encourage you to subscribe to the self-made web designer podcast. So you don't miss episodes like this and others with awesome guests like Christo from the future or Chris from CSS tricks. And. You are probably named Chris, because that seems to be a popular name on the show. I don't know why that happened, but subscribe on whatever platform you are listening or watching, and let's become best friends because that's what happens when you subscribe, you get a news best friend in your life. And it's me just in case you're wondering.

All right. Are you ready to dive in to what you need to know about typographic in web design? Oliver Sean Darfur. Okay. Let's do it. Hey Oliver. Thanks so much for being on the self-made web designer podcast. Good day.

[00:02:20] Oliver: Thank you for having me. I'm thrilled. I'm honored and I'm very, very much looking forward to light the fire for some pimp topography in the hearts and minds of the Podcast audience and YouTube.

[00:02:34] Chris: Tell us a little bit about yourself, um, where you are in the world. Cause obviously your accent is a little bit different than my accent. And, uh, and give us, give us just a brief background of who you are and what you do.

[00:02:47] Oliver: Sure. Of course. Yeah. Um, I'm from. South of Germany, small country there, maybe, you know it from flights and glorious pastors and so on.

And this is where my accent comes from and I'm a user interface, design and typographer here. And I also have a YouTube channel called pink, my type, where I want to empower people to say leverage the best of the projects with some decent and pimp typography. And yeah, that's about. The short story of this.

[00:03:20] Chris: I think typography is such an interesting subject because it's something that web designers tend to think about last, when it comes to the design components and getting good at typography, getting good at finding good places to put type it there. So, I mean, obviously. It's an area of study all its own.

You know, like you could go really in depth, into typography talking about all the different things, but, um, maybe I think we, we should be a little more general here. Talk about why it's important to consider font selections on your web design projects and the roles that typographic plays. In web design projects or in design projects.

[00:04:09] Oliver: I think you put it perfectly there because the topic might be a bit intimidating for beginners or people starting out since it's, I guess one of, or the subject in design theory with the most rules or say guidelines.
And, um, I have to go back a step here because, um, uh, and tell a bit about my story where I can. In contact with typography. And this was basically in design school. I already was a web designer, or let's say that master back then in 2002 or three or four in those days where CSS wasn't that popular even.
In this time, I, um, encounter designing in the browser and I really liked it. And after that, I decided to go to design school. Don't have formal education now, but when I was there in the first semester and yeah, like the glory of typography touched me and hit me through the embodiment of my teacher, Giovanni defacto and Italian.

Uh, and he, um, taught. About in his very calm and, uh, and charming way. What difference it makes because we set words and context in, in, in typefaces, and it's like the con the content and the shape they melt together. And to create this, this, this appearance that you cannot separate from each other. And I think this happens in typography.
Or it's the closest in typography because words the message and the shape are one basically in this situation. And when I was in design school and I was in the first semester, just started out with it and learn some basic rules. I had an epiphany, or this was very strong moment. I learned about that. You should space out all caps lines.

If you said something in all caps lines, you should space it out slightly so that the, um, the distance between the individual letters seem harmonious or something like that. And I learned that basically typography one. Oh one-on-one. And one evening I stepped into the shower and after I guess, a long day at university and I was tired.
And I grabbed a shampoo bottle and then I couldn't believe what I just saw. It just struck me the letters on the label. They were not properly spaced and I just couldn't believe it. The world fell apart for me because. How could I know that just after some weeks of education and this was obviously done by an agency and they did not, how could this be?

Because it looks so much better, more even professional when you space things out. This is just a tiny detail. This, it came to me that obviously not, everybody's so much into typography. Even the professionals are not so much into it, but they should be because we as designers have the duty or the obligation to our clients to shape their message the best way possible.

And since everything. I cannot imagine a website or an app without some texts. And the text becomes basically the physical representation of your branding on the end of your functionality. And this is why. You definitely should care about typography.

[00:07:33] Chris: Yeah. That's I mean, an inspiring story, you know, very passionate about it.

I thought you were going to say that you took the shampoo bottle and you started making a new type or graphy on the walls of your bathroom or something. So it took a different direction, but I'm, I'm, I'm glad it took the direction that it did. I think the question that, uh, probably a lot of. New web designers are thinking about when it comes to typography and, you know, I understand the passion behind it and, and looking professional, but, but why does it make that big of a deal?

You know, like as designers, I think we think, well, the imagery or the colors, or, or, you know, maybe some graphics. Those are the things that people are really attracted to when they say they see good design, but, but Y Y typography for you and, and what sets apart, good type biography from just bad type biography.

I know you mentioned the, you know, if something's in all caps, you space it a little bit, you know, but, but talk a little bit more about that once the thing is.

[00:08:37] Oliver: Especially when we talk about the design, I am doing a lot of app design, not just user interface, things. I focus more on that part, but, um, I did a lot of web design and branding stuff.

So the type becomes your visual identity, because imagine a website, if you take a look at it on your phone, you don't have. Based for layout, big photos or stuff. You still have colors. Okay. Yeah. That's, that's an integral part of it, but type is everywhere and this is something most people don't see because it's like, it's the shape of their voices.

It's the, it sets the tone. It sets the stage. If that's the feeling, just imagine if your dentist had a logo set in comics. Just imagine it, you have, you have some emotions on that and you, you, you, you cannot think about it, but you feel it immediately. You feel it and see it immediately. Even before you read it, you get this feeling, you get this feeling of why is it so childish or it doesn't fit.
And a lot of people pick on. But I have three daughters and they gave me some father's day presents and they were all setting comic sense from different from the, from, from elementary school and different kindergartens and so on, but it fits the purpose. It was the best typeface the teachers could. On word or something, it fit the purpose.

So it always depends on the application of current, of course, but you always have a strong feeling about that. And if people only invested a bit of time looking through some funds and finding out what are appropriate funds. So, and this is basically the, the one thing that, that sets bad typography from good apart and or good from better part, which is.

It's the typeface and the way you said it. Does this fit? The application is this, is this, is this something that's from, from, from the, from the theme or, or from the atmosphere it creates, but also from the functional aspect. So I I'd say there are two basic fundamentals on this. One is the font follows feeling and the other one is font follows function.
Um, Form follows feeling is I think a bit more, even more important than the second one. Yes, it has to be functional and pre-read, but first we have to open our hearts and minds to it because if we don't find it appealing or it fits the purpose of the, of the application, then we wouldn't read it anyways.

So if it was functional, great. But if you don't draw people in there. It's basically pointless.

[00:11:22] Chris: I wonder if we could take it a step back a little bit, and if you could just explain maybe kind of a brief overview of the different types of fonts that are out there. What, what types to be looking for, um, you, you mentioned comic sands, which is kind of an inside joke for most designers.

Um, I'm seeing, I'm seeing kind of turning around. We see some folks who are. Comic Sans and some brutalism web design, which I, I appreciate them kind of going against the grain. Um, but, but talk a little bit about Sarah sand, Sarah from auto space, uh, it condensed all of that stuff. And as best as you can, just using words, describe like the, the visual components of all those things.
Yeah,

[00:12:04] Oliver: sure. So, um, As a broad category, possession of typefaces, a categorization of anything is only as helpful as you can apply it to your decision-making or if it helps you make a decision. So, um, classify classification of typefaces is, is a topic on its own and it's very broad topic and it, the lines get blurry very soon just to say that in advance, but there are some broad categories, as you can say.

Of course, we can start off with the CRF type phases. These are the more traditional type phases, because we are more familiar with them. Tariffs are these little end strokes or whatever these tiny feet you see on the steams of the letters. And they come from. Some handwritten tradition, which was then put into, into metal.

And then this basically took over as, as the more traditional things. Think of times or times new Roman or basically say entire face, but think of times as, as, as an example for CRF type place, and then we have slept serif typefaces. These are the typefaces where the series of very, very strong and sturdy.

Pretty loud actually. Yeah. And you all, you also could think of, of Memphis. This would be a rather popular type face on that oral board to slap or something like this. And then we have, if this is basically the fun thing, there is. It's defined by not having standards it's by side by not having sex. Yeah.

And this is like something, for example, open sense or San Francisco or a Helvetica. These are types of, or for Tura. These are type phases that are sensitive type is they might be conceived more modern or, uh, a universal, but. Dry. It always depends on the kind of application where you want to use it. And if it fits the purpose and coming back a bit on the, on the, on the south side, this might be a bit more traditional, warmer elaborate.

And you can say that this is my institutional. If you pick it serif typeface, maybe you could say that this may be for a new venture or a new company or something. And they want to look as if they were established 50 years before that or something and be more confident. Then you might pick a serotype phase, for example, or in this lab serves are more bold and strong.

And look at me, look at me for example, and then we have various display type faces like handwritten or script, or which are more calligraphic. The handwritten have more of this kind of casual vibe where you. Somebody just writing it with their own hands. And this script type faces are more like on a wedding invitation or which, which are more flowery fish and, um, and a classical for example.

And then monospace typefaces. Of course, we see a lot when it comes to coding because it's easier to call it. Monospace imagine you was code in times, new Roman or something. It would be horrible because it wouldn't feel arrows and. And a lot of developers are drawn to monospace type is I love them a lot as well, but for reading texts, they are not that ideal for long reading texts, since every character has to have the same width.

And so the word ships get rather long and it's, you need a lot of space to set text on there and. And I think then you have one last category as most Google phones and phones and other, um, uh, foundries, a place where it can install your phones, say, and this might be then that this play type faces. It's just like everything that doesn't fit in the other categories.

But, um, yeah, so the most striking, interesting theme, any kind of, um, typefaces, like something with dripping blood or whatever, or inline Stokes in there or something like that. So that's purely used, and this is basically one take away or. Display typeface. This should be used for display text, which is text short and large text for a title for a heading for something that you rather see than read.

So, and, uh, and, and you wouldn't use, please just don't use this place. Typefaces for politics. If you, if you remember this from the,

[00:16:35] Chris: I'd love it. If we could dive in a little bit, you mentioned kind of the difference between form and function, um, and even matching the feeling of the type with the project that you're trying to have a good design representation.

So how does, how does one go about figuring out what a type feels like? And then matching that to the feeling that a brand or project or whatever is, is going for, like, is that come through just trial and error, like is the feeling that you're getting yourself, are you asking other people what they feel about the fonts?

Like how do you, how do you become a good student of type biography and matching those good types for the clients that you're working with?

[00:17:20] Oliver: Basically, and your tastes iLab, uh, evolves. Of course it's like with wine or gin in my tenure, but, uh, in the beginning it all tastes the same. It all looks the same, but, but it makes a difference of course and it's, but it's not only for the people who see it or feel it.

This is also a lot, has a lot to do with cultural reference. And, uh, it might be a bit different in the United States and might be a bit different here in Austria. And, um, I see that in the states you have more websites using CRF type phases and, um, obviously, or interestingly, and here we all, we were more drawn to censor of whatever, I think, because it's more modern or whatever.

Um, yeah. You can process on picking or how to pick a good typeface for a project. I would go this direction and say, First of all, think about the primary application for a project. Is it a long reading format, like a blog or, or, or, or, um, uh, ebook or something like this? Is this something where I have is this very text heavy, then you should look for something that, uh, for body text.

So body texts should be your main focus, uh, or if it's an, a user interface, then you should look for something. For a good functional text or is it something where it's basically just more imagery and setting this tone and short paragraphs of texts, more marketing material stuff, then it might be just okay.

To use some display text on that. So just think about the primary application first and then. Yeah. What kind of audience is visiting these websites? What expectations do they have from the, from this company and or from this product or project? So I'm always thinking about for whom you are making this.

And then the third part would be what kind of feeling at misfill you would want to convey. And as I already said, Classification, you would say service more classical and sincerity is more modern just to say this bro, a broad overview. Um, but you always will have to apply it in your design and see how it looks and feels.

And you kind of have to develop a taste for it. You, I wrote a, an extensive post on that and also made a video on that, on my channel. So you could check this out if you want some. Yeah, examples. And, uh, but I hope this is a broad overview of this part.

[00:19:53] Chris: So I wonder if you could just maybe give, cause there's a lot of folks going, okay, like I'm sold.
I need to focus on type a little bit more. Where, where do they find resources for, you know, different fonts that they can use? Do you need to spend $300 to buy a font family every single time you want. Add some font flavor to a project that you're doing, or what are your go-to things that you use as a UI designer with type biography?,

[00:20:21] Oliver: I signed up to a lot of newsletters on time and I have one newsletter myself where I send out. Friday, it's fond Friday and, uh, type type, uh, face a font recommendation. Uh, every second week. It's a free one every second week. It's a paid one. So you have the option to have good quality free phones.

You don't have to always pay for a great typeface. There are a lot of really good typefaces out there. The problem with the really good ones or some good ones are that they are chronically overused. And I have also had a video out there it's called stopped using open sense. And there's not a reason why open science open stance.

Isn't a bad typeface. It's nothing wrong with open sense specifically. It's a good typist. But it's the second, most popular typeface and Google fonts. And if you will use this typeface, you're going to look like everybody else. If you're not unique and you want to go into this. Yeah. Why not? Yeah. Just make your message the same as everybody's Estonia.

Okay. That's fine. Yeah. Just the same as everybody else. But yeah. So, um, but investing in a typeface and there are also cheap options options there, or, or options for smaller sites, um, It's investing in your unique perspective in your identity. And you can start with, let's say $30 for time. Oh, it's okay. So yeah.

And so one place I'd go for pate phones, for example, would be future phones. YouTube ones is a great site where you can, um, support types, phases that are in progress. And, uh, you basically once, if you, if you, um, contribute early, you pay less. And if you contribute later, you'll pay more basically. And they are more focused on the.

Display type faces this more wonky and fun and, uh, and larger and very cool and crazy type faces. They are not so focused on tech-savvy stuff. Uh, this is one resource and there's also the fresh fonts newsletter I would recommend. And also I love typography. So it was a Foundry. Now they say, or a marketplace where they said, um, typefaces, and they also have a great newsletter where you can find new inspiration for typefaces.

[00:22:39] Chris: Oliver, thank you so much for coming on the show and. And Sharon, your type, all graphy wisdom. It's been, it's been awesome to get to know you. Hey, if somebody is trying to find you, uh, I know you mentioned a pimp, my type on YouTube, but where else might somebody go to connect with you online?

[00:22:55] Oliver: I'm on Twitter and I'm Glype there it's Glyphe with an E at the end.

Jumblatt for cliff. And you can rant about typography there. You just mentioned me. If you have pain in your heart and see something terrible, I'm going to suffer with you together. Yeah, that's suffering, I guess.

[00:23:11] Chris: Well, thank you so much and we will have you on again, and we'll talk more in depth about type biography and how to use it as a web designer, but really appreciate you being on

[00:23:22] Oliver: Thanks a lot.

And yeah, it was an honor and a pleasure and see you.

[00:23:26] Chris: I love it when people are really passionate about what they do. And you can tell that Oliver is passionate about typography, and he's got some really good insight about how to become better. As a web designer by focusing on typography. So check out the links that he mentioned in the show notes.

And at the end of the day, if you want to get better at typography, you've just got to practice it. Remember no one is born a good designer, it takes work and it takes effort. If you feel like you've got a long way to go to get better at what you do as a web designer, be encouraged my friends, most of us feel that way.

And the only way to get better is to get to work. All right. That's it for this episode, join us next week. When we've got another episode dropping Wednesday night at midnight, it's going to be a lot of fun until then keep going for it. And don't forget if you don’t quit you win.