Hey, this is Mike from the website 101 podcast. We don't have a new episode this week, but we're going to tide you over with a great one from season four. This features Oliver Schurendorfer talking about the fundamentals of typography.

Hope you enjoy it. We'll be back very soon with some new episodes. Hello and welcome. It's the website 101 podcast. I am Mike Mela. He's Sean Smith. Hey, Sean. How you doing? That's me. I'm doing great.

It's Friday afternoon. Yeah. Yeah. And this is exciting. I always say how great a show is going to be. Don't I? Every single episode. But they are actually going to do it. I think it's going to be the best one ever.

This is going to be the really good one. Anyway, it really is. Today we have a guest. He reached out to us through the podcast and suggested that he might have something interesting to share with our listeners and heck yeah, he does.

He is Oliver Schurndorfer from Austria and he's a UI designer and typographer. We're going to talk about typography mostly today I think. So as I said, he's in Austria and the cool thing in his bio that I loved here is he once

changed banks because they rebranded and he didn't like their logo type which. is the most badass thing I think I've ever heard. Anyway, Oliver helps people. Sorry, go ahead. Oliver is definitely committed to his opinions.

Yeah, right? I think that's good. So Oliver helps people to improve their websites through pimp typography. Man, that's hard to say. Pimp typography, he says. He runs the YouTube channel PimpmyType,

which is at pimpmytype.com. You can get to it through there. And a newsletter with a weekly font recommendations in there for web and app design. Oliver, welcome to the show. Hey Sean, hey Mike, I'm so glad to be here.

Thanks for inviting me on your show. Awesome. We're really excited to have you and have you help other people pimp their type. Yeah, that's true. Yeah. Everything's pimped up to this podcast. So let's just jump right into this.

I know a lot of our listeners are kind of, you know, do it yourself folks or, you know, they don't have a dedicated web team or whatever. Let's just start with some definitions. What exactly are fonts?

What is typography? How would you sort of describe that? concisely, I guess. Yeah, so basically the definition from this is type is Autopography is setting text with prefabricated letters. I guess this is some kind of definition to it and

Basically, we're all typographers everybody who's typing anything into their computer is a typographer Anybody who's sending a text message even is a typographer since we're making decisions Even they are when we're using emoji or we're using the return or whatever

so everybody is basically a typographer and fonts are basically the files that you use to set this text and typefaces are actually the visual representation of this font. There's a nice, you can distinguish between fonts and typefaces,

but let's not go there. That's senseless details. Yeah, you can get into like font families and all kinds of stuff like that, right? There's fonts and there's font families. Yeah. But let's say font and typefaces all the same for this podcast,

not splitting hairs here. Fair enough. So fonts come in a number of different kinds and And the two big differentiators are serif and sans serif fonts. And there's other ones like handwritten and things like that.

But what is the difference between a serif and a sans serif font and when would one be better than the other? Yeah, the thing is from the naming, it's pretty weird that one has the name that it's not

the other. And serif means without serifs and serifs, yeah, with serifs basically. And yeah, what are serifs? Pretty familiar serif typeface might be times or times in Roman. I guess everybody knows that from Microsoft Word or something.

But times serif typefaces tend to be more the classic kind of typefaces. They have these tiny little strokes at the end of the stems of the letters. And this also means that they come from a more, let's say, calligraphic or tradition

when it was more done with a broad pen. And you basically imitated this calligraphy through the metal type and so on. And this is basically what we are used to read mostly in books or long reading formats

in classical books said. And they are since when they did came up about 600 years or. About 1400 50 it came up with with typography and Sensory is called sensor if since it's more modern. It's the

Like area low helvetica or open sense. This is a sensor if typeface them and They tend to be seen more module modern not so traditional like the other ones Georgia would be an example as well if you're familiar with this all system fonts or

No to serif in nowadays in Google fonts words Or PT serif or whatever is a set if again, but they basically the sensorif typeface are more considered more modern, maybe also more replaceable, they are pretty ubiquitous on the internet and also mostly used for user interface

design, we're seeing them on our phones, this might be then Roboto which is also very popular, as you might know, or maybe also other ones. Yeah. Yeah. So when would I want to choose a serif or over a sensorif on the web? Because you just said that a sensor seems to be more

common or popular. Is that because it's more modern and new or because it's more readable? Yeah, this is a hot issue or a hot, rather hot topic. Since there were wars over this, people died for serifs.

No. The thing is that it's basically not about the serifs, it's more or less about the letter shapes and how distinguishable they are. If you have a very two-metrical sense serif, and maybe in like where the A is just a circle

with a vertical line on the right side, the lower case A, and the G is also a circle with a longer line than a band at the right side. So it's very geometrical. And if you compare it maybe to a serif typeface

where it's a so-called two-story A, where you have a small bowl on the lower part and then you have a... The little hook on the top, yeah. Yeah, yes, the hook on the top, that's a good... metaphor. Yeah, this is a bit more distinguishable. And basically the same goes for a low case

G or something. And there's one test or one practical test you can do. It's the IL-1-A-G test. I call it IL-1-A-G test. Nice to just remember this. It's the upper case I, the lower case L and the number one and then lower case A, lower case G. And if these letters

are distinct. So this means can you differentiate the shape of an upper case I, lower case L and the number one. If it's not just a vertical line, for example in GilSense, I guess you know this type is as well, in GilSense it's all a vertical line with different heights.

And if you type the word illustration or Illinois or something, it's a bit weird because the least the lower case L should have a serif. So as you said before, a tiny hook or something. at the end. Maybe the uppercase I might have serifs as well. But the thing here is to make the

letter shapes more distinct and easier, they create a more distinct word image then. And we don't read letter by letter, we read the whole image of the word, and this will make it easier. And maybe sensorif typefaces were also more popular in the earlier days of the weapon on computers, since

this place weren't that far, they couldn't render that well. But in nowadays, Regina displays and so on, we don't have to concern about these things anymore on our phones, no way. So you can go for the thing that better fits your theme. Right, right. Yeah, I, that example you gave a second go where,

you know, what is it, the IL that test, I have literally looked at some type before, whether it was, I don't know, a password or something I needed to know, and I've had to copy the letter and then paste it somewhere else and change the font

so that I can find out whether it's an I or an L, because sometimes- It's a terrible experience. Yeah, I mean, obviously not with a word like, Illustrate or something where I get it's obvious, but in some cases where it's just random letters,

sometimes I'm like, is that a one or an L? I remember that happening before. Yeah, sure, we are familiar with these shapes and with these words, which also means that it won't be illegible. There's a difference between legibility and readability.

Readability means, is it pleasant and easy to read? And legibility means, can I get the, what kind of number of figure this is or whatever? And especially in passwords or also user interfaces where it might be critical to find out if this is a zero

or if it's an O. Or no, yeah, right. That's another one. There you have to go for a more distinct typeface. Maybe there are also the mono space typefaces are made that way for computer programmers

as you guys, of course, know. Sure. Yeah, and so that you can differentiate an O from a zero. Right. Cool. Cool. For listeners who don't know, a mono space font is every character takes up the same

number or the same amount of horizontal space on your text editor. So an L or a zero, which is really fat, or a W, which is really fat, all take up the same space and they're used by programmers a lot.

It's just so much better. Yeah. Yeah. It's great for editing text. Yes, exactly. Right. Like when you need the things to line up, the second line needs to line up with the line above it in a certain way.

It's hard to describe. you're looking at a document, but in programming it can be very important to have that feature. Absolutely. Okay, so I have a question for you. We talked about legibility and good fonts or what, things like that.

Comic Sans is universally ridiculed. For listeners who don't know, if you talk to a designer and you show them a Comic Sans font, maybe from your kid's school poster or whatever, they're going to shake their

head, maybe cringin' cry. Comic Sans is universally ridiculed. Why is that? It makes it a bad font other than it being... incredibly popular and contrastly or sorry conversely Helvetica is equally

popular but it's not disparaged what makes it a better font or is it a better font maybe maybe you're a big fan of Comic Sans we don't know yet I'm a big let's say I like Comic Sans more than Helvetica oh wow can he be a designer

how can he be on the show get out here now stopping recording No, the thing is, so the thing here is there is no bad typeface, there's a badly used typeface. So, okay, if you're the application or if where you apply your typeface doesn't fit the content,

then it's a bad type, it's a bad choice. Basically, the thing with type and letters is it's never neutral and it's the like, it's the cloth your words wear, it sets the stage, it sets the vibe, it sets the whole atmosphere for your project.

It's something that you feel before you read it and this, it has tremendous impact, it's very subtle but it's very powerful. So this is the reason why knowing about typography is very helpful and to be memorized and so on but back to your question

Comic Sans was designed for speak bubbles in I guess it was Windows 95 or something right and This was its purpose because before that they would have put I don't know it was some kind of Bob It was called a character like Clippy or something who gave you tips or something and they really had

Planned to put in times in Roman in there and it just would have looked awful and often weird in this circumstance Yes, this would have been a bad typeface for this situation But then they never realized this project there might be so caveat here. This might all be wrong. I didn't fact check this

but just out of my top of my head. But then they didn't go with that project. But they still had the font. So they used the fonts, the typeface, on and installed it on Windows 5.95. And from there on, it was a default system font.

And people like to use the name also. Because it's in speech bubbles. That is so cool. Yeah, that's the reason for it. And the good thing about Comic Sense, it's pretty distinct. It got open shapes, the strokes are rather thick.

But it's still inappropriate in a lot of situations. I'm currently renovating or we're doing something with our house and our garden and adding a terrace down and so on. And I got a proposal that spelled out Comic Sense.

Oh, no. I couldn't take it seriously. Sorry. Sorry. It might be the wrong application there. That's great. But I would have had the same reaction to be fair. If I had seen in a professional document like that.

Yeah. If it's kindergarten, if it's something, let's say, when I was back in high school and I had a teacher and her assignments, she gave us the assignments in comic sense. And she was more or less the cool one. It didn't seem so serious anymore. Like the other ones who did in an area or whatever.

And this was nice back then. It didn't make the, yeah, let's say the tests more fun. It didn't seem to be so intimidating. And this is how typography works on a subconscious level, I guess. And yeah, so this is about comic sense, but back to Helvetica and I'd like to spell it or I'd rather spell it with...

too else, so all the way from hell. So what is it about Helvetica that you don't like? And in the same vein, did you watch the movie about the Helvetica font? Of course it did. Of course it did. I think it was from 2012 or no, I'm not sure about that.

But there was a great conference type of Berlin, which is sadly now gone since mono-type, bought everything and ruined everything. Monopoly is mono-type. Okay, let me rant about mono-type later. They own my fonts and everything basically.

And yeah, they bought a font job and font job. This was more or less a marketing conference for... and let's not go into that road, down that road. But whatever, monotype has Helvetica. So they sell it. And the Helvetica again, not a bad typeface, basically. But the thing

is it's more or less designed for display sizes, for larger sizes. The characters are rather close. This means if you take a look at the lower case, the apertures, this is the space that opens up to the outside of the letter. These apertures are rather close.

So if you use it in smaller sizes, it's... It's getting harder to read also the spacing the tracking is harder to accomplish an even typographic color and the thing is it's so popular but it's from the 60s

It brings the 60s wipe with it every logo design from the 60s was done in HeliVatica at some point of time and It's so not distinct. It's so like everyone else. It's yeah a lot of designers like it and

This is maybe because of it's yeah, they might say it's neutral. It's Yeah, but type is never neutral. It's a thing. Even if you use it. Yeah, it's never. Yeah, this is a quote by Jason Pimenter. And he was also a typographer and does a lot with

Web typography. Great talks can only recommend him. But it's never neutral. It makes a difference if I write something in Helvetica or if I write something as you said in Comic Sans. So people really see it and feel it. And I wouldn't go for Helvetica since it was so popular and

that was this dark age. I'm not sure if you remember it. It was 2014. when we had the, it was like the sky was turning black and my heart started hurting. When I opened up the computer and so, when you laugh, I have to laugh, it's okay.

It was a, I remember being a big, Helvetica seemed to be big with Mac users. I'm a Mac user now. That's the thing. And I vividly remember just every Apple thing had, or everyone who wanted to look like Apple

would use Helvetica. Yeah, I love that Oliver has such strong convictions about fonts. It's great. Just like Helvetica with two L's. And... Um... Related to Helvetica. Now, this is something that I heard, but I don't know as a fact. Helvetica

and Ariel are, but I was told a red somewhere, 95% identical. Why would you choose Ariel over Helvetica or the opposite? Yeah, that's a good one. Yes, they are. They basically are. The thing was, I think it was, they are also not sure from the top of my head, but I think it was a

licensing thing. Microsoft assigned some type designers to do Ariel to make it better for, I think it was for printing out on, it was 89. 1989 or something like that for printing on the on printers to use them on printers

I have to check this again, but they basically fixed some issues with Helvetica Where it was much more closed and the strokes became a bit more even and all this stuff But the purpose behind this was that it should use up the same space

So if you set things from Helvetica to aerial you don't have a reflow when you change the typeface So this was done by intention and there are so many let's say redesigns of Helvetica You're always so yeah

It's a very popular genre of typefaces which are called neo-grotesques They are basically rooted in the 50s and they were cool back then no no And also imitating typefaces that came from the 1890s.

Accidents, Cortesk was the original Helvetica, as you can say. They copied it from back then. But yeah, 1890, they used it to make some advertising because back in Austria or in Germany or anywhere in Switzerland,

they used Blackletter for body text and Frakture text in German. And yeah, but it doesn't work for big advertisement. And when it came up with the printing press and you had more advertisement, you needed a typeface.

could work on this kind of technology. And in this kind of sizes, so they invented Accidents Cortesque, which basically means advertisement. Grotesque is, it was so grotesque to see these simple shapes.

So they called it grotesque. Yeah. Is that where it came from? I was wondering why they called it. It seems like it's supposed to be beautiful font. And it's like, you're calling it grotesque. What's the deal there?

That's really interesting. I want to jump back to where you said the area was made for printing. It doesn't matter who you want. And to make it clearer than Helvetica in the 80s, that's when we had dot matrix printers

and there was not a lot of definition when you printed stuff. So to open up the spaces makes a lot of sense based on what you said. Yeah, and also for screen representation, which wasn't that far. I'm not sure.

I don't remember. I'm born 86, so I was four years old. And I didn't have a strong opinion on aeroplane. Did you get that? Well, now I feel old. Thank you. But I got your Star Trek next generation opener in one of the recent episodes.

Yeah, that was an interesting one. And it was an interesting one. It was an interesting one. Good. That's good. He worked very hard on that intro. Yeah, it was perfect. Speaking of actually speaking of TVs and movies and TV shows and everything

what's your thoughts on the movie Avatar and how they used papyrus font in their title did you did you notice that I mean assume you noticed it did you watch the movie did you boycott the movie what how did that go yeah I think I turned blind

for two hours I'm not sure I didn't see the movie it was in 3d but I only could say suffering and pain so something didn't miss anything it's a horrible movie yeah that's right you didn't miss much you know and something I don't

understand why it's so popular honestly yeah I don't understand anybody who likes that movie it is just horrible like you like it great but I wanted to leave in from the theater when I saw it but I couldn't because I was in the

center row in the center of the row and I just didn't want to disturb everybody so I took a nap there was that balance and all of her had already left because as soon as they saw the titles in papyrus he was like I'm done

there wasn't so much the problem though the bigger problem were the subtitles from this weird language they used there they subtitled it and this was set in papyrus and this is the thing papyrus is a so-called display typeface which means

it's in display sizes 24 or 25 pixels and above so it's just it's a typeface for a heading or a title or whatever but it's not a typeface for some captions captions have to be clear and easy to read of course people could somehow read

this stuff I guess it wouldn't yeah they wouldn't have missed it if they wouldn't have read it so whatever but yeah this was so inappropriate it was so in the in the program nice but it kind of fit the movie so maybe that was

the only thing yeah that's possible hi hope you're enjoying this episode we're always looking for topic suggestions so if there's anything you'd like us to discuss on the show please let us know we're also looking for guests if you

have a guest that you think would be great for our podcast please let us know if there's a guest that you would love to come back let us know you can do that by visiting website 101podcast.com slash contact

This is a great segue into our next question that we got lined up. Some fonts are better for headings or titles, and you touched on that by saying display fonts. Some are better for body copy, and others are able to be used everywhere.

So they could be body copy or titles or headings. How does one know which is which? How does a font affect the tone of your copy? Maybe that should be the follow-up question. Sorry. Yeah. You can follow up later if you want.

No, sure. The thing is... There are basically three different kinds of text. As you already said, the one is body text or long reading text. And the other one might be then display text for headings,

titles, something that's large on a poster. But if we talk on digital typography here on the web, it's a title for a page, maybe from a logo type or something. So this would be then a display typeface.

And then you have functional text. Functional text is anything else. No. Functional text is things that are inside your navigation in a user interface component, maybe something that comes up in an alert or an info bubble.

So this would be then the functional text. It should work in tiny sizes, like in the tab bar of iOS, this 12 points or something. So this is really small and it still should be legible and perform there

So these are the three different kinds of texts and how to find out What texts to use or what to look for is basically a good body text as already said has distinct letter shapes If they create a distinct word open sense I despise open sense for its popularity, but it's a good typeface

It's a good typeface. There's nothing wrong with open sense specifically Because hold on hold on Oliver. Yeah, there's nothing wrong with open sense, but on your YouTube channel You have a video Where's the title of it?

Stop using open sense He did say he doesn't like it because it's overused so that would that could be a valid reason to start Okay, but I just seems a little bit incongruous I'm gonna I'm gonna ask you so I'm gonna ask about because a lot of the

Things that really bother you about fonts when you say them. I'm kind of going like oh, yeah I kind of do that a little bit on my site or I remember doing that on a site I designed a while ago and I'm like geez what am I doing here?

So I can't wait till we get into the Which are the questions coming up here? How do actual web people go about? Selecting fonts and all that kind of thing so don't worry about the open sense and all that stuff

I'm gonna be getting into that shortly though Sure. Yeah. So, yeah, I'm just clickbaity. Yeah. It's not using help. No. But the thing is, it's a good typeface, but it's overused. And there are two things. A good typeface does for you or a great typography or typography

on a website does for you. The one thing is, it's functional, which means you can read the stuff easily for the purpose you made it. So you can communicate the message you crafted. Of course, your message comes first. As you already said in previous episodes, content

always comes first. You have to have a good message. You have to know who you're speaking to. But you can achieve so much more if you give it the shape it deserves. And if you choose open sense, like everybody.

else. Everybody. You're just, you're not distinct. It's like you're having the same voice as anyone. If you're choosing Roboto, you're Android. Cool. If you're cool with that, it's okay. It's not bad.

But if you choose open sands, you're like Mr. Smith from the Matrix rather than Neil, because all the agents look the same. True. Yeah. You're like Ikea. Ikea also uses open sands. Oh yeah, that's right. Yeah. So, and they have their reasons for it. So, it's not a bad type

is. It performs well, but it's the same like everybody's else. just make yourself unique and if this is the shape of your voice, of your written voice, then make your voice distinct. So I forgot the question.

Well, that's that thing that you answered. We were talking about headings and body copy and what kind of tone that they convey and that kind of thing. So that's pretty, you covered it pretty well. But so getting it deeper into this and you mentioned earlier that you might have a display font,

you might have a body copy font and then I think you mentioned like a micro type font or something. Function it takes. Yeah. Right, right. Function it takes. So how many fonts do you think are appropriate to be used on one website? Like how many fonts if I'm making a website should I

consider using? Yeah, if we go back, let's say fonts again. So if it's a typeface or a typeface, a type family, because it might come in different styles, italic, bold, light, extra bold, whatever,

extended, condensed. So there are different styles also for one typeface, or set, this is basically the name then for like, aerial bold and aerial narrow are the same typeface, but different font files and different.

styles within the just to get the words right. But the thing is, let me jump back to this question. When is it a display typeface? If you think, wow, this looks very themy, very cool, very Western-y, slap serif, whatever, saloon,

or something like this, yeah? If you think, hey, this conveys a cool atmosphere. This is a very nice typeface. This looks awesome. Look at this G. Oh, that's awesome. Then it draws too much attention to much attention

to itself. It should not. It should be understated for your body text. And if you think, oh, these are special. characters, they look cool, don't use them on your body text, use them for your headings.

So I will find your boring body text delicious to look at, of course. But everybody else won't. So they just will see text and content. But for your headings, as you said, how many typefaces should you choose, you could go

from basically start with one, do you really need another one? So this is the first question. Maybe you can do it with different styles. Maybe you'll use a lightweight for the headings and the regular weight for the body text and

maybe a medium for your functional tiny text because then the strokes are a bit thicker and it's easier to read them on the small sizes. So this is one approach. Just go for one typeface. But then it might be a rather understated combo on synths.

it shouldn't distract you when you have me. It more or less depends on your application. If you have a long reading format website, then you should think about it. If you really have very short copy only,

you could go for something that's a bit more interesting, maybe. So, like, yeah. So, and then, second situation would be that you use something, rather, let's just say boring, air quotes here, rather boring for your body text,

and something more themy or interesting for your headings, like you did shown on your website, where you used in your headset. Yes, I did it. Look at this. I judged you. I'm opening my website now.

Yeah. So you continue. Go ahead. Yeah, sure. But as Sean did on his website, but he's using here on the caffeine creations website for his headings, a typeface that very handwritten style. So and for the body text uses pop-ins, which is a more geometric sensor.

It's not the best one for a long reading text. Since, as you can see, the letter shapes are pretty geometric. And this means for very, very long copy, it might be tiring to read. But it's okay for the amount of text you used it on on your website.

And this is always a more or less safe combination. If you mix typefaces, there's a question I regularly get and there's some content coming up on my YouTube channel about this, how to pair fonts. Go for something that's very different.

Then you can't go wrong. Really something very different for your headings and then for your body text, something else. So then it works out. I did that, but it's quote safe. Yeah. That's not interesting.

Safe. Well, no, it's basically the thing is with your headings, web development partner you say here on the first heading. It basically conveys an atmosphere. It's more this, oh, I'm approachable since it's handwritten style.

That's what I wanted to go for, actually. That's good, yeah. There's a bit of friction since you have these polygons moving in the background and they are not that organic like the other things. The text of Poppins is very rounded.

The caffeine creations, the logo, the square is rounded, your patterns are round. And then these polygons, okay, they are dots, but they are create this kind of yeah this this There's some kind more edgy. Yeah, but okay. Let's go. Let's stick with it and

So this is something that you could maybe then improve as a background maybe yeah nice Yeah, I that's a interesting feedback. I really like that all over and That polygon moving in the background. It's a little bit dated now in my opinion

But when I first did it it was really cool and kind of cutting edge and if I was to redo now I probably wouldn't do it. I'm just yeah too lazy to to update the site and for listeners all over his feedback is really helpful for me because I

Designed this site myself and I am not a designer. I took a web a course Design Academy And it's designed for developers. So this is where I picked up some design aesthetic It took me forever to design my site, but I did it and it's great man. The feedback is awesome. Let's get back on topic

Enough about me You don't know what I Have time yes we can we won't So so I have a question here you mentioned briefly a second ago You have some YouTube content coming up about this and I can't wait to see it and

But me too, we can briefly just talk about it If Someone were to be making you know a website and they're deciding which fonts what what should they be? Thinking when they're combining when they're deciding which two or three fonts or which found family to choose

Like any tips that you have about how to choose fonts for a website Yeah, sure. The first thing is you should think about your project, basically. And I have three questions that guide you through this process and there's already content on that and I'm sure you

will have a link to this show notes. We will. Yes, definitely. And basically ask yourself the question, what is the key application for my typeface? Is it an app or is it a long reading format or is it more a marketing website or something? Just some examples here. And if you go for a long

reading format, then you might choose your body text first because then this will be the primary typeface used. If it's an app, you might think about a functional text. And if it's something that's more of a marketing website with very little text, you might more think about the display text.

And my website, think about the display font more. And it's more important. Yeah, yeah, actually. That's true. So then this is the first question. What is the key application? And you can find out what font to look for,

where to start, out from. Because you need a base. You need to make one decision and then move to the next and not make everything available. This is just horrible. You have to decide. And second step is, what's your key audience?

And this is also a question I always ask when I do a typographic review for people. What are the key audience? Who do they want to reach and what are their values? So basically to find out what kind of needs they have

and what values are important for them and where it meets with your values and how you want to be perceived, basically. So I did a design for the one association of the blind here in Austria. And yeah, these are very special needs there, of course.

And you're not blind and can see. It's not either zero or one. So there are a lot of shades in between. And so this is a very specific need here. And this took more thinking here, of course. And then you have, but not only that.

So the last question, then there would be, if you can make up your mind about the application and the key audience, then you can think about the limitations you have. What budget do you want to spend on a typeface?

Maybe, basically, looking for licensing. Also, this is a huge part. If you do it for an app, they might be a bit higher than prices. So you start with three to 400 euros for $1 or whatever. Money for a typeface.

And for one font file, depending on the usage also. So what budget do you have? End If you have a small project you can always find a budget for this. It starts from things like maybe you can go under

100 bucks for for some distinct typography. So I really want to encourage people also to look for smaller founders who do quality work also have a site where I recommend free and quality Foundries where I summarize them all and the weekly newsletter as you already said where I send out one week a free suggestion

And one week a paid one so So people can really useful newsletter I should sign up. Yeah, I know I'm gonna sign up for that right away So now Speaking of that so Google fonts. I'm sure everyone listening is the first thing that comes that are headed

I go to Google fonts. That's what I often do to pick my fonts and I often end up with open sound or, you know, railway or something like that. I mean, what are your thoughts on things like Google Fonts,

Typekit, those really popular, you know, I guess they're not foundries, but you know, font resources, bad idea, good idea? Yeah, font marketplaces. Basically, Google Fonts did a great job making web fonts approachable for the masses.

Since it's not so long that we have web fonts, I think it's about 10 or 11 years, 2010 was the view for web fonts, I guess. Or I remember. So this is basically something good because they made it easy and achievable

at Obi fonts, which was Typekit before that. And yeah, this is the good thing. The bad thing is... If something is free like Google fonts and popular it's everywhere and it's not unique anymore. So this is the

Downstands So this is the downside, but basically these platforms The problem with Adobe fonts this is something that bothers me a lot because before that it was typekit typekit was great Now GDPR is a big thing here in Europe and it's not that safe anymore to use

To use Adobe fonts since it's used through a JavaScript or at import And you're transferring data to somewhere else and you could theoretically find out if somebody visits is coming from this direction

or a third party will find out. So with all this cookie content, horror, it's yeah, it's got words basically to use it. Also Google fonts, but you can self host Google fonts as well. So you're talking about Google fonts here.

I typically set up self hosting for Google fonts for my clients. Yes. And so what you're referring to just for our listeners who don't know Oliver is GDPR is this rule that you have over there in the Europe, I suppose.

Yeah, just Europe. European Union. Yeah, Union. Where it's a. you need to get explicit permission from the visitor of a website to collect their information and share it or whatever, even if it's the most basic thing that happens on a website.

You need to click that, you know, cookies, cookies are okay. If you ever see those buttons, you know, you have to click okay to accept cookies, all the rest of it. And you're saying that if you embed a font, which is often how you get a Google font

or something on your website, even if you're using WordPress, sometimes they just have a plugin that you choose your font on Google and it just pulls it in. And you're saying that might be in conflict with that with that law because you're technically

pulling something from another site and you didn't get permission. It never says, you know, do you consent to allowing us to show you this font from another site? They don't say anything like that.

So you might be in conflict that way, right? Yeah, that's the thing. And now with Adobe font, something else also got worse. I really treasure their service and I like the fonts. They let you select as a designer for creating stuff. So this is great

I like this but before that typekit was more or less a way to host fonts for others and now with Adobe fonts they kind of changed this to Targeted more towards designers and not towards let's say website owners because you cannot as a designer web developer

Whatever if you have a creative cloud account You cannot use your creative cloud account on their website. This is against their licensing Before that it was possible when it was typekit, but now it's not anymore

So you have to find a shady way of signing up for the lowest budget Adobe subscription that your client then can use Adobe fonts and then it's too cumbersome to explain them It feels it feels weird. So this is I'm sad about this because it's a kind of a drawback for more distinct typographies

Instead a very nice catalog on there So but on the other hand it encourages you to go to the foundry directly and licensing your typefaces there and just try them out via your creative cloud subscription on your computer there

Right. Yeah, I've gone through some of the the foundries that you've mentioned on your your site and you know your YouTube videos and whatnot and it's I I mean I've been designing websites for years and years and I've had no idea there were so many pretty good quality free or very affordable

Foundries where you can download really great Typography fonts like I had no idea and I'm glad I learned that because I'm gonna start doing it now and get away from open sands finally You're an open sense survivor then a little bit Oliver is successfully educated us

I'll tell you what though Oliver. I don't know if you have a thought on this because what I find Often happens as I go into Google fonts so far. It's been Google Google fonts mostly And I try to tell myself, okay, I'm gonna try to pick something unique that I haven't done before,

and I ignore the names of the fonts, and I just kind of start typing, you know, demo text or whatever. And I always end up going, like, scrolling through and then going, oh, this one looks really cool, and then I check out what font it is,

and it turns out it's, you know, merry weather or whatever, something I've used half a dozen times. And I find myself constantly, or open sets, and I'm constantly going back to the fonts that I'm comfortable with.

I mean, do you have any tips about, for designers, I guess, about how you can sort of break out of that? you know that tendency. That's a great question Mike. Yeah how I do it basically I force myself to do something new every time. Yeah if you see Mary weather just you're not

using Mary weather pal just find something else. Yeah that's the thing you can go just go change that there's a lot of crap on Google phones I have to say this honestly yeah there are a lot of good typefaces and a lot of crap too so just read if you sort it by popularity

start from the bottom. Right I did see that tip that's a good idea I'm gonna try that. Right least popular fonts first. Yeah. Pick some of those yeah. And and and if you know about what to look for just take a look at some of the videos and explain if you know what to look for and you

you have this background knowledge then you can make an educated decision about this so you won't go by popularity popularity what does this say to people who are not familiar with typography popular means good I can't make a mistake I guess most people will choose to save

option there and it's also fine. So we have a few more questions lined up, but I want to skip them because Oliver also contributed to our shared Google document and he's got this five common web typography

mistakes and how to avoid them. So I'd like to go through this, especially since we've already gone about 45 minutes in and we don't want to make this too too long. So let's start with number one Oliver.

That is not caring about typography. Can you elaborate on that? Yeah, it's basically something what I already said before. Type is the clothes that your words wear. So it's your appearance, it's the appearance of your brand, it's making you distinct.

Since if you don't care about typography and you think it's not important, these are some Most people think typefaces just fall from the sky or they magically manifested on your hard drive somehow and nobody designed this. So most people

think about this this way. But it's subtle but powerful and if you make a good typographic choice that fits your brand, that fits your message, fits your voice, think about a responsive web design on a phone. What remains except

colors and images, layout isn't the big deal anymore on your phone. Most people will access your site on or many people will access your site on a phone depending on the audience again. But and then what remains is the text and is the

typography. So if you don't care about it and if you don't think about it, it's a chance you didn't use to amplify your voice and to make yourself unique and recognizable basically. I have a follow-up question to that. Can you think of a

well-known international company that... either has obviously care about their typography and chosen a great font or the opposite one that has just doesn't care and Their font is like generic and boring

Yeah, for these things typography I'd go for Dropbox. Maybe you all remember this when they did a redesign I'm not sure if you're using Dropbox, but yeah Dropbox made a design change I think it was 2019 or 2018 or something like this and they went for a very extended wide

typeface, which was pretty unfamiliar for user interfaces since it took a lot of space. But they're using a narrow version on phones and other breakpoints, so they thought about that. But it's just something, it was a whole different dropbox from that point on.

Before that people thought, yeah, it should sync my files, I don't care about it, get out of my way. When will I see it anyway? But from that point on it got more distinct, the app also got more attention, and it's

something that you remember. So they could invest in their brand, this is my one example. Another example might be MailChimp. MailChimp also invested in some bold typography, a serif type for the headings. This is and also very, very unique,

maybe weird illustrations that are completely different from the things we were used before. So this is also something that you then will remember. And because of the kind of... I didn't catch the name of the company that you were just talking about.

MailChimp. MailChimp. Oh, MailChimp. Oh, yeah. MailChimp is... I love their site. And I can say I do remember noticing the font. Maybe the fact that I noticed the font is bad. Although I consider myself a designer, so I'm so...

when we're supposed to notice this stuff. But I remember noticing it and liking their latest font. So I can understand that, yeah. Okay. So number two on common mistakes, inappropriate font choice.

So let's learn how we could make an inappropriate font choice. And this would be, I guess, sort of going back to the issue you said earlier about using Comic Sans in a doctor's office instead of in a kindergarten or something.

I guess that would be an example, right? Exactly. Or maybe some display typeface, they're not to get also from the same typeface. They are display typefaces or display styles. I'm not sure if, for example, do...

PT, PT Sans and PT Serif, I think they have a display style. PT Serif, I think. I'm not sure. I'm not sure. I'm familiar with the font, but I don't know about their display style. But it's also a pretty popular one where it can be a bit more delicate. The serifs can

be thinner, proportions can be a bit narrower, the spacing can be a bit tighter for the larger sizes. So this also might be the same typeface, but visually, but for larger sizes, which would be thinner, this place. And if you use this one, a very light text for your body

text, this would be inappropriate. So a very light text is for display sizes. So this is an inappropriate font choice. And so we kind of touched on a lot of these already, but we'll go over them a little bit more. Number three, too many different typographic styles. I mean any

any more tips you have for people about trying to avoid that problem? Yeah, I'd really go for, as I said, the three questions, what's your key application? What's your key audience and what limitations are there? Figure this stuff

out. Also with the budget, do you have any brand requirements? Maybe you have and I have this so many. times when I do an app or a user interface design where the brand style guides they are from the 2000s or early 2010s. And this is just then horrible because it doesn't fit

nowadays expectations visual expectations of a typeface or something. And then people still have to use this stated typeface for their new fancy app or web app or whatever. Then you can make one decision and say, okay, let's use this typeface for the display sizes.

So maybe for the for the headings and for the larger text for the titles, then check. And for something else, you find something that fits to that. So this would be then one way to use this and not using so many different typographic styles is basically like with everything you

design. Try to use as little as possible and as much as necessary. Yeah. So if something is the same, use the same style and not. something else or maybe you can make it the same. It's the same with hierarchies. I

did a report designed. There are situations where design can rescue bad content or most situations good design can't rescue bad content and if you had seven levels deep of headings nobody can save your soul there. So you're back

into hell, Vedica. Yes, you're back there. That's good, that's good. Okay, so number four is about font sizes and you say specifically setting text too small is a mistake. Can you elaborate on that as well?

Yeah, sure. This is a very common mistake. It's setting text. You should set text according to the distance from yourself to the medium you're consuming, which means if you're looking at the desktop screen, 27 inch, 24 inch, whatever, it's further away from your body than your

phone or a laptop computer, which is closer. So we can assume that the larger the resolution, the larger the type should be to make it the same visual appearance. You can basically take a book and just compare it if it's the same size from the distance when you read a book

and you take a look at a giant screen or a big screen. So and one good idea would be going from 16 pixels, which is the default, basically. So it's a six-inch pixel or 1M is the default and don't go below that. There was a trend we all I guess you remember

it when designers Truitt design stuff by making it unreadably small and... Yep. We've even talked about that on the show several times. Actually recently in the season I don't remember which episode but we did specifically talk about

small type, especially in footers. Especially in the footers. Yeah, I heard that one. Yeah, yeah. That's true. And making it unreal. The problem there might be it's not the size but also the legibility if the type

is open, the leg is distinct and the strokes are thick enough, whatever. But the thing is if you set text for body or if you set body text, make it at least 16 pixels on... let's say even on a phone, maybe slightly smaller, slightly 15.

It's not always about the pixel size, it always depends on the type of this as well. And on desktop computers, you could go up to 2024, maybe 24 even for your body text, which might be shocking, but it's more pleasant to read and that's the thing.

It's if the purpose of this content is to be read, then make it readable. Yeah, I love that tip you said about, hold a book in front of you, roughly this distance of your screen, and make sure that your screen copy is the same size text

as what's in the book, because they already know what they're doing sort of thing. That's a great tip. Yeah, you should hold it basically the distance you would have it in your hands while reading and not the...

Yeah, yeah, yeah, yeah. And then make sure that, yeah, exactly. All right, got it. You want to go next one Sean? Oh, you go ahead. Okay. So your final tip here in the top five common web topography mistakes and how to avoid them

is too little line height. Now is line height synonymous with letting? Just a quick question there. So letting as I understand it, letting is it comes from the tradition that back when they had actual printing presses, they had like a bar of lead between the rows of letters

and they could sort of use a small, a thicker or thinner one. So that became something called letting and now we often call it line height, the distance between one line and the. next line. Is that roughly correct? Yeah, basically it is, you can split hairs there,

but let's not. Okay, fair enough. Yeah. Yeah. Yes. For nowadays typography, it's not that important. It's just a distance. Let's see the distance between the lines line, a distance between the lines. And there's also

another word that's familiar from typography terminology that's measure, which is the length of your line. And your line height depends on the measure, on the length of the line. So the distance between the lines depends on the length of the lines.

And let's say you have a full layout on a desktop computer, on a desktop screen where your lines can get longer. You should aim towards 60 to 80 characters as an ideal line length. This is something we're familiar with reading in books and so on.

This is just familiar. Don't open up Wikipedia. on your desk. Yeah, I know you're getting out there. Yeah, it will be 200 characters per line or something. And you will lose the line and it's not your fault.

It's Wikipedia's fault. Yeah, the thing basically is that you should go for, let's say, this 60 to 80 characters in German. We have very long words, so we might be closer to 80 characters in English.

You might be closer to 60 characters. You want to create an even typographic color, which means that you don't have too many bumps on the right side if the text is left-line, which it should be in English and German.

for long reading text. And now about the line height. The longer your line, the larger your line height should be because the space your eye has to travel at the end of the first line to the second line is longer basically

and the narrower your line, the smaller your line can be because then it might be a bit tedious to swipe all the way since the narrow lines might be immobile than yeah. You could be a bit more compact and just as an idea

what kind of ratio would there be good, start from 1.5 it mostly works in. in most cases, it's always depending on typeface again, because typefaces are not, the metrics are not the same, they just are not.

So you always have to decide for this. Gilles-Hans always look smaller in the same size like Helvetica or something. And so you should set the line height to about 1.5 on a longer line, 1.7, full layout with maybe,

and on a smaller, an error measure, maybe 1.4 or something. But one extra tip there also might be that if you have a heading, a title, something that's big, reduce the line height there. I often see very, yeah, the default,

I think the browser default is 1.35, not sure. But something like this and... It always kind of falls apart on a mobile layout because you have so much space between the lines in the heading. A heading can be more compact, but a body text should have a bit more space to breathe.

Okay, this is a good solid advice. So Oliver, you gave us a number of links to share, which will all add these all into the show notes. So his newsletter, his YouTube channel, specifically an article and video about stop using open

sands, which we've kind of a running joke this episode, but we will definitely share that. And then you have something called a free typographic review. And this is a form that visitors can fill out and...

Share their website and contact information with you and then they will, you will review their typography on their website or app or whatever it is. I think this is a great idea. I was wondering if you would like to review the website 101 podcast typography.

Of course, did you submit it through the form? That's right. We didn't fill the form out yet. We can do it separately. You kind of touched on it a little bit when you mentioned my font choice on my company site, Caffeine Creations.

If you want to work your podcast player to visit the website. Yeah, any sort of quick tips you can give us about the font choices that we have on this site. And I'm not a professional designer, but I did the design and typography choices myself.

It's okay to be brutally honest. If I suck, let me know. As I said before the show, I'm always kind in my words and brutally my intentions. Anyway, that's the Austrian way, I guess. So this is the...

Yeah, Kristoff Altoy. The website we're talking about is website101podcast.com for our listeners who don't know our website right now, I guess we say everything else. Alright, all of you, let's hear what do you have to say about

our website. Sure. So basically I always use a nice tool on Firefox extension on my website to make sure what kind of type is the use on the site just for a quick check that's font's ninja. I find this is very easy, but you can also

go with the development tools and what you're basically using is Josephine for your headings, for display sizes and for your body text on my machine, it's Helvetica because... Yeah, we already know what's coming up.

Yeah, the thing here is about the combination of these two. It's a bit delicate. The problem here is... So Josephine, it's a nice display type. So the first question basically here would be Sean and Mike, who's your audience, yeah? And what values

do they have? So what should your site stand for? What is it? Yeah, how would you describe that, Sean? I mean, maybe... Okay, so when I initially came up with a podcast idea like three years ago now, it was to target

small business owners with a website who maybe do it yourselfers, but on the cusp of working with a web developer, so to give solid advice that they could use themselves or help them to find a web developer.

Before you go further, you said Helvetica, but the font is supposed to be Jose Finn for headings and railway for the body. Okay. Yeah, but it isn't. So that could be a maybe that's a font embedding issue or something because it does look like

Railway on mine as well, but I have Railway on my machine. So, you know, it could be that because that makes web developer fail. Hey, man, that's why we do this show to learn stuff. It's all good. Absolutely.

All right, back to the review about the combination. So yeah, if it's so you did not intend to use here, Helvetica obviously, but it shows the fall back here. So since a I guess it's not loaded. Yeah, we can look into this later then.

But for Josephine, Josefine, whatever is brown, yeah. Says, yeah, it's a very themy kind of typeface. It looks a bit more, yeah, a decoish or something like this, more elegant. So it's a nice typeface for a heading or something.

Now, I'm not sure what kind of typeface you intended for your website 101 podcast title on the top left side. Because as I said, it's displayed here in a vertical on my machine. It's Josefine. Okay, so yeah, but it's not, is it?

It's supposed to be it's just text. It's not an actual logo. Yeah, yeah, that on mine It's not it's I don't even know what font it is. It's a system phone. Yeah. Yeah, yeah Okay, oh my god. It's it is a it is a system font as well. Oh my god. That's terrible

Work developer fail. I got some work to do this weekend Yeah, but this is Free advice from a professional typographer. This is this is This is gold. I think it's very... Yeah, which makes it very replaceable and yeah, it feels like drafty and unfinished to me.

This is the reason why because it's a form, it's a form. Got it. Yeah, okay. Oh, God! Oh, God! Oh, it's a strong person! It's all good. It's all good. And it's a safe space here. It's your podcast.

I will not edit this out. I actually wanted to do this live and unscripted so that users could see how you... what mistakes I made and how you recommend to improve it. So keep going. Yeah, everybody does.

It makes mistakes. It's great. So, and then continuing here. Yeah, now only can judge what I see, as I said, season one, season two, season three, the tabs on the top navigation or sub-navigation, whatever you have there.

They are also in Helvetica light and this is a rather hard to read since it's pretty small. And yeah, I wouldn't go for that. If you have railway, use the medium wage or... Now I'm not sure I have to try out the combination of railway and Josephine Sands because I think they are too

similar. Two sand serif typefaces you're mixing and one is a slightly different since it's more from the construction. It's more I guess it's more new art decorations and things and the other one and the railway might be a bit more closer to a vertical something but they are not really different and this is the thing if they're not really different

use the same use Josephine maybe also for the don't use it for the politics don't. Because yeah, it's too interesting for that. It's really it is too interesting. And if you take a look at the small text, like on the the recent episode season four episodes one click here,

and the numbers, the figures, how long this episode, the duration of the episode, the shows, it's hard to read in small sizes. So because the X height, which is the relation of the lower case letters to the upper case letters, this is the so-called X height, it's a rather small X height.

And this means if you scale this text down, you have to always use it larger than and this doesn't work out so well. And also there's a bit of a problem with the hierarchy's when I take a look, this is more basic graphic design here. On the click here on the episodes you have this really

large listen now button works out quite well for the for the season for the featured episode that goes full width. This works quite well there. But it's too big for the other episodes. Oh interesting.

It's more like a conflict between the heading of the other episodes and the button and the button wins always. I totally see that now. I will reduce the buttons. Outside of the most recent episode, I'll reduce those probably about two-thirds.

Yes, yes, you can make them much, much smaller. And the thing, I just look at list now, list now, list now, list now. And not at the episodes, which differentiates it more or less. It actually wouldn't be necessary to make it that prominent anyway.

It could be a text link even since the title is the thing that differentiates it. And if you really want to go into the weeds, like the icons could have the same strokes, a stroke with like the text of the small clock you display there and the notepad.

But yeah, so... Oh, yeah, I should you mean, yeah, yeah, yeah. This is now nitty-gritty details. I love this nitty-gritty details. And maybe one last... I see that. I see that now. I tell that I am not a designer because I didn't notice this when I built it myself.

Yeah, you can use Josephine for the headings. I would use another typeface for the body text, or then for, and also for this, this would be then functional text, season four and so on. And there's always a great tip with,

if you have something in uppercase letters, or uppercase only, space it out a bit, because it always creates, yes, a letter spacing it is. It always creates tension there. And the thing is uppercase letters

are meant to be set next to lowercase letters. They are designed this way to have as little space after them as possible to make a compact word and Then if you if you combine them with uppercase letters you get weird

Spacing in between there like for example When you have an a it creates a hole in there because it's a triangle of course yeah, you have an L you also get a lot of space in there and And Josephine is rather white too. So I'd go for spacing it out or not writing it in uppercase letters

So this are the two sides and I made also a video about this where I step into a shower You can see me stepping I will add a link to that in the show notes and I will watch that when I find the time to

Revise all of these great suggestions. Yeah, yeah, Oliver's videos are Awesome, they're so entertaining. Some of them are really hilarious. Everyone should definitely check them out. We'll link to them.

So all over this, the final review here where you reviewed the website podcast site, Gold, even though it illustrates my mistakes as a developer in not getting the right font to show up. You still evaluated my font choices, gave me some things to consider and revise.

This is the kind of advice that any professional developer, but specifically Oliver, can help you with your website. Yeah, it's great to hear too that you're clearly very passionate about the work you do.

We've been joking about what fonts never to use and whatever, but it's nice to see people that really, really care about. uh... the work that they do uh... and you know everyone who's doing a website should value that kind of input

yeah and somebody who's as passionate as all of it is is going to put that passion into any sort of work that you hired him to do so should we should be wrap this up now i think this would be a great time to wrap it up all over

where can our listeners find you on the web twitter your website you to whatever sure yum i'm basically the easiest way to reach out to me and rent about a horrible type of face or some uh... that i thought if you did keep the up at night and you have to

share it with someone who shows some empathy for this life-changing events when you see a bad lot of Just reach out via Twitter. I'm Glufe there. It's Glif with an E at the end, the German word for Glif, GLYPHE.

And you can also, of course, subscribe to my YouTube channel. You'll find it under pimpmitype.com. It will redirect you to the channel. And you can always find more information on the blog on my website where you...

It's taking shots.net. It's a horrible German word. And as everybody else, I'm guilty, as charged of not doing it proper website. I'm judging everybody else. Yeah. But I'm much more enthusiastic about putting out content, which I think is much more important

as you guys do. The typography sure is important, but it's much more important to make new episodes. So yeah, kudos for you guys that you really, really keep on going for four episodes. So I appreciate it.

Yeah. Oliver, thank you so much for coming out and helping me to pimp out my typography on the website 101 podcast, which I will be doing over the next week or two. I'm excited. And yeah, hit me up and tell me if you did it and then I'll take an outlook.

I will definitely do that. Thank you so much. The website 101 podcast is hosted by me, Sean Smith. You can find me on LinkedIn. My username is caffeine creations or on Twitter where my username is caffeine creation.

You can also see my name is Mike Melon. You can reach me online at belechwater.ca and also on Twitter and LinkedIn where my username is Mike Melon. I'm ELA.