---
title: "Rebroadcast: Pimp Your Typography"
date: 2023-04-11T05:00:00-04:00
author: Sean Smith
canonical_url: "https://website101podcast.com/episodes/season-06/episode-10/rebroadcast-pimp-your-typography/"
section: Podcast
---
<!\[CDATA\[YII-BLOCK-BODY-BEGIN\]\]>[Skip to main content](#main-content)Guest Oliver Schöndorfer
UI designer empowering developers & designers to improve their websites, and products with pimped typography.
[ ](https://twitter.com/glyphe)
Season 06 Episode 10 – Apr 11, 2023
1:14:45 [Show Notes](#show-notes)
## Rebroadcast: Pimp Your Typography
0:00
0:00
1.0x
0.75x1.0x1.25x1.5x2x
[](//dts.podtrac.com/redirect.mp3/website101podcast.com/uploads/mp3/season-06/S06-E10-Pimp-Your-Typography-rebroadcast.mp3)
Rebroadcast of a Season 4 Episode - Pimp Your Typography - Time to pimp your website typography with Oliver Schöndorfer. Learn the fundementals of typography and why it matters to your website and message.
### Show Notes
We start off by defining what Typography is. Then the various types of fonts including serif and sans-serif fonts and when to choose which to choose.
- I (uppercase I), l (lowercase l), 1, a, g test
- The difference between legibility and readability
- Comic Sans and Helvetica fonts
- Avatar and Papyrus
- Heading, body fonts, and fonts that can be used everywhere
- Oliver Judges Sean's website headings
- Tips on how to choose fonts for a website
- Web font marketplaces
- 5 common web typography mistakes and how to avoid them
- Leading and line height
- line length
- Oliver gives a review of the Website 101 Podcast website typography.
### Show Links
- [Pimp My Type YouTube Channel](https://pimpmytype.com/)
- [Oliver's Newsletter](https://pimpmytype.com/newsletter)
- [Stop Using Open Sans](https://www.youtube.com/watch?v=l1PPK7mE0zE&t=141s)
- [Design Academy](https://www.designacademy.io/)
- [Google Fonts](https://fonts.google.com/)
- [Adobe Fonts](https://fonts.adobe.com/)
- [Stop Using Open Sans](https://www.zeichenschatz.net/typography/stop-using-open-sans-why-your-font-choice-matters)
- [Free Typographic Review](https://docs.google.com/forms/d/e/1FAIpQLSe1LJWf-TqW3u3IzfCoNo7r63zmdXeRlcC_zz-YOVilCW3J2A/viewform)
- [All Caps Letter Spacing](https://www.youtube.com/watch?v=Jciowbs53eU)
- [Typographic review of Website 101 Podcast](https://pimpmytype.com/website101podcast/)
Powered Transcript Accuracy of transcript is dependant on AI technology.
**\[00:00\]** 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 Scherndorfer, 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 Mella. He's Sean Smith. Hey, Sean, how you doing?
**\[00:30\]** That's me. I'm doing great. It's Friday afternoon. Yeah. Yeah. And this is exciting. I always say, well, how great a show is going to be. Don't I? Every single episode, but they are. And he always like, this is going to be the best. 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 you know, suggested that he might have something interesting to share with our listeners. and Heck, yeah, he does. He is Oliver Scherndorfer from Austria and he's a UI designer and typographer.
**\[01:02\]** We're gonna 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, Oliver helps people. Sorry, go ahead. Oliver is definitely committed to his opinions. Yeah, right. I think that's great. So Oliver helps people to improve their websites through
**\[01:34\]** pimped typography. Man, that's hard to say, pimped typography, he says. He runs the YouTube channel, Pimp MyType, 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, yeah. We're really excited to have you and have you help other people pimp their
**\[02:05\]** 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, so 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 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 or typography is setting text with prefabricated
**\[02:38\]** 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 there 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 fonts.
**\[03:13\]** There's a nice distinguish between fonts and typefaces, but let's not go there. 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 and yeah. But yeah, let's 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 the two big differentiators are Seraph and Sans Seraph fonts and there's other ones
**\[03:46\]** like handwritten and things like that. But what is the difference between a serif and a sensor font and when would one be better than the other? Yeah the thing is from the naming it's a pretty it's pretty weird that one has the name that it's not the other. San serif means without serifs and serif is yeah with serifs basically and yeah what are the Serif's, pretty familiar, Serif typeface might be times, or times
**\[04:17\]** your own. I guess everybody knows that from Microsoft Word or something. But times is, Serif typefaces tend to be more the classic kind of typeface. 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 a 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
**\[04:50\]** used to read mostly in books or long reading formats in classical books said. They are since when does they did came up about 600 years or about 1450, it came up with typography. And San Serif is called San Serif since it's more modern. It's the like area, or Helvetica, or OpenSans. This is a San Serif typeface then. And they tend to be seen more modular.
**\[05:21\]** Modern, not so traditional like the other ones. Georgia would be an example as well if you're familiar with these old system fonts, or notosarif nowadays in Google Fonts words, or pt-serif or whatever is a serif again. But they basically the sans-serif 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 using them on our phones. This might be then Roboto, which is also
**\[05:53\]** very popular as you might know, or maybe also other ones. Yeah, so when would I want to choose a surf or over a sand surf on the web, because you just said that sand surf 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 this is a hot issue or hot rather hot topic since there were there were wars over this people died for serif. No, that it's basically not about the serifs. It's more or less about the letter shapes and how distinguishable they are.
**\[06:36\]** If you have a very geometrical sand serif, and maybe in like where the A is just a circle with a vertical line on the right side, the lower case A, or and the G is also a circle with a long line and then a band at the right side. So it's very geometrical. And if you compare it maybe to a 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're having a hog on the top, yeah, yes, the hook on the top, that's
**\[07:10\]** 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 I-L-1-A-G test, I call it the I-L-1-A-G test, nice to just remember. It's the uppercase I, the lowercase L and the number one, and then a lowercase A, lowercase G. And if these letters are distinct, so this means, can you differentiate the shape of an uppercase I, lowercase L,
**\[07:44\]** and the number one? If it's not just the vertical line, for example, in guild sense, I guess you know this type is as well. In guild sense, 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 at 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.
**\[08:15\]** 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'll read the whole image of the word, and this will make it easier. And maybe sensorive typefaces were also more popular in the earlier days of the web and on computers, since displays weren't that far, they couldn't render that well. And in our days, retina displays and so on, we don't have to concern about these things anymore on our phones, no way.
**\[08:46\]** So you can go for the thing that better fits your theme. Right, right. Yeah, that example you gave a second ago where, you know, what is it, the IEL, that test? I've 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,
**\[09:17\]** you know, illustrate or something where I get, it's obvious. But, you know, 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 mean can I get the what kind of number or figure this is or whatever? And especially in passwords or also user interfaces
**\[09:51\]** where it might be critical to find out if this is a zero or if it's an O. Oh, no, yeah, that's another one. There you have to go for a more distinct typeface. Maybe there are also this monospace 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, monospace font is every character takes up the same number
**\[10:22\]** 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, I'll 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. Like when you need the things to line up, You know, the second line needs to line up with the line above it in a certain way. It's hard to describe unless you're looking at a document.
**\[10:55\]** But in programming it, it can be very important to have that feature. Yeah. 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. And 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
**\[11:27\]** head, maybe cringe and cry. Comic sans is universally ridiculed. Why is that? What makes it a bad font other than it being incredibly popular? And contrastally, or sorry, conversely, Helvetica is equally popular, but it's not dispirged. 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
**\[11:57\]** he'll have to go oh wow can he be a designer how can he be on the show get out here now stopping recording no I'm just fighting words the thing is so the thing Here is, there is no bad typeface, there is a badly used typeface, so if your application or where you apply your typeface doesn't fit the content, then it's a bad choice.
**\[12:27\]** Basically, the thing with type and let us say, it's never neutral and it's the close your words where, 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
**\[12:57\]** was designed for speak bubbles in, I guess it was Windows 95 or something. And this was its purpose, because before that they would have put, I don't know, it was some kind of pop. It was called a character like Clippy or something, who gave you tips or something. And they really had a plan to put in times in Roman in there. Indeed, just would have looked awful and often weird in this circumstance. This is for Roman. Yes, this would have been a bad typeface for this situation.
**\[13:30\]** But then they never realized this project. there might be, so caveat here, this might all be wrong, right? In fact, check this, but just out of my top of my head, but then they didn't go with that project, and but they still had the font. So they use this, the fonts, the typeface on, and install it on Windows 595, and from there on, it was a default system font. And people like it and use the name also. Yes, yes, yes, because it was in speech bubbles.
**\[14:01\]** 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 doing 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, well, not Comic Sense. Oh no, I couldn't take it seriously, sorry. Sorry, it might be a wrong application there.
**\[14:34\]** That's great. But I would have had the same reaction to be fair. If I've seen in a professional document like that, not very hard. If it's kindergarten, if it's something, let's say, when I was back in high school and I had a teacher and there are assignments, her assignments, she gave us the assignments in ComicSense. And she was more or less the cool one. It didn't seem so serious anymore. Like the other ones who did an area or whatever. And this was nice back then. It didn't make the test more fun, but it didn't seem to be so intimidating.
**\[15:09\]** And this is how typography works on a subconscious level, I guess. And yeah, so this is about comic science, but back to Helvetica. And I'd like to spell it or I'd rather spell it with two L. 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 about the Helvetica font? Of course I did. Of course I did.
**\[15:40\]** I think it was from 2012 or no, 28. 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 monotype later. They own my fonts and everything basically Okay, and yeah, and they bought a font job and font job Did this was more or less a marketing conference for and let's not go into that road on that road But whatever monotype yeah
**\[16:12\]** Monotype has Helvetica, so they sell it and Helvetica again, not a bad typeface 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 E, 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 getting harder to read also the spacing,
**\[16:46\]** 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 vibe with it. Every logo design from the 60s was done in helevertica 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, they might say it's
**\[17:18\]** neutral, but type is never neutral, it's the thing, even if you use it, it's never, yeah, this is a quote by Jason Pimentel, who's 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.
**\[17:48\]** And I wouldn't go for Helvetica since it was so popular. And there was this dark age. I'm not sure if you remember it. It was 2014, I think. 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 as well. I remember being a big, Helvetica was seemed to be big with Mac users.
**\[18:20\]** I'm a Mac user now. That's the thing. And I vividly remember just every Apple thing had. And 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 hell, Vettica with two L's and related to hell, Vettica. Now, this is something that I heard, but I don't know as a fact.
**\[18:50\]** Hell, Vettica 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
**\[19:23\]** on, it was 89, 1989 or something like that, for printing 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 Ariel, you don't have a reflow when you change the
**\[19:55\]** 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 new grotesques. They're basically rooted in the fifties and they were cool back then, also imitating typefaces that came from the 1890s, Accidents, Cortesque, was the original Helvetica, as you can say. They copied it from back then. But, yeah, 1890, they used it to make some advertising
**\[20:29\]** because back in Austria, or in Germany, or anywhere in Switzerland, they used a black letter for body text and a fracture 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, needed a typeface that could work on this kind of technology and in this kind of size a so-and-a-day-advented accidents grotesque which basically means advertisement grotesque is it was so grotesque to see these simple shapes so they called it grotesque yeah is that
**\[21:05\]** where it came from I always wanted why they called it yeah it seems like yeah it's supposed to be beautiful font and it's like you're calling it grotesque what's a deal there that's It's really interesting. I want to jump back to where you said aerial was made for printing 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 don't remember. I'm born
**\[21:40\]** 86, so I was four years old back then and I didn't have a strong opinion on Erdogan back then. Well now I feel old, thank you. But I got your Star Trek next generation to open, in one of the recent episodes. Yeah, that was an interesting series. I was laughing so much. Good, that's good. He worked very hard on that intro. it was perfect. Speaking of, actually speaking of TVs and movies and TV shows and everything,
**\[22:12\]** what's your thoughts on the movie Avatar and how they used Papyrus font in their title? Did you did you notice that? I'm assuming you noticed it. Did you watch the movie? Did you boycott the movie? How did that go? Yeah, I think I turned blind for two hours. I'm not sure. I didn't see the movie. It wasn't 3D, but I only could say suffering and pain. So, you didn't miss anything, it's a horrible movie, but that's right, you didn't miss much, don't you? You know, and I don't understand why it's so popular.
**\[22:43\]** Honestly, I don't understand anybody who likes that movie, it's just horrible. Like, you like it, great, but I wanted to leave 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 bell. And all of her had already left, because as soon as they saw the titles in Papyrus, he was like, I'm done. I'm back. No doubt. The title wasn't so much the problem, though.
**\[23:14\]** The bigger problem were the subtitles from this weird language they used there, the subtitled. And this was set in Papyrus. And this is the thing. Papyrus is a so-called display typeface, which It means it's in this place, sizes, 24 or 25 pieces and above. So 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.
**\[23:45\]** I guess they wouldn't have missed it if they wouldn't have read it, so whatever. But yeah, this was so inappropriate. was so in the program. Nice. But it kind of fit the movie. So maybe that was the impression. Yeah, that's possible. Hi, hope you're enjoying this episode. We're always looking for topics 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 a podcast, please let us know. If there's a guest that you would love to come back, let us know. You can do that
**\[24:19\]** 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 and how does a font affect the
**\[24:49\]** tone of your copy? Or maybe that should have been a 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 title, 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.
**\[25:20\]** So this would be then 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 the function text that should work in tiny sizes, like in the tab bar of iOS, there's 12 points or something. So this is really small. And it still should be legible and perform there.
**\[25:50\]** So these are the three different kinds of text and how to find out what text to use or what to look for is basically a good body text, as I 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 OpenSans specifically because hold on, hold on all of her. Yeah. There's nothing wrong with OpenSans, but on your YouTube channel,
**\[26:21\]** you have a video where's the title of it? Stop using OpenSans. He did say, he doesn't like it because it's overused. So that could be a valid reason to start using it. Okay, but it just seems a little bit incongruous. I'm going to ask you, so I'm going to ask about, because a lot of the things that really bother you about fonts, when you say them, I'm kind of going like,
**\[26:52\]** 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 going to be getting into that shortly, don't worry about that. Sure. Yeah, so yeah, I'm just clickbaiting.
**\[27:23\]** Yeah, but the thing is, it's a good typeface, but it's overused. And there are two things you're a good type of a 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
**\[27:53\]** 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 having 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
**\[28:23\]** 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. And they have their reasons for it. It's not a bad typeface. It performs well. But it's the same like everybody else and just make yourself unique. And if this is the shape of your voice, of your written voice, then make your voice distinct.
**\[28:55\]** So I forgot the question. Well, I think that you answered it. 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 deeper into this, and you mentioned earlier that you might have a display font, might have a body copy font. And then I think you mentioned like a micro type font or something. Functional text, yeah. Right, right, function text. So how many fonts do you think are appropriate
**\[29:27\]** 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 a setter. This is basically the name then for, like,
**\[29:58\]** 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 themey, very cool, very westerny, slab serif, whatever, saloon, or something like this, yeah? If you think, hey, this conveys a cool atmosphere. This is a very nice typeface.
**\[30:29\]** This looks awesome. Look at this G. Oh, that's awesome. If 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 received text and content. But for your headings, as you said, how many
**\[30:59\]** 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. you 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, calm one since it shouldn't distract you when
**\[31:34\]** 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, 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 theme or interesting for your headings, like you
**\[32:06\]** it Sean on your website where you used yes I did let look at this I charged you I'm opening my website now yeah yeah so you continue go ahead 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 typhus that very handwritten style so And for the body text uses poppins, which is a more geometric sensor if it's not the best one for long reading text since as you can see the letter shapes are pretty
**\[32:45\]** 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. website. And this is always a more or less safe combination. If you mix type faces, this is 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 I did that, but it's, but it's quote, safe. Yeah. Not interesting. Safe.
**\[33:23\]** Well, no, it's basically the thing is with your headings web development partner you say here on the on the first heading It basically it conveys an atmosphere. It's more this. Oh, I'm approachable since this is a handwritten style That's what I wanted to go for actually. It's good. Yeah, there's a bit of friction since you have this polygons moving in the background and They are not that organic like the other things The text of poppins is very rounded, caffeine creations, the logo, the square is rounded,
**\[33:56\]** your buttons are rounded, and then these polygons, okay, there are dots, but they are create this kind of, yeah, this kind of edgey, yeah, but okay, let's go, let's dig with it. And so this is something that you could maybe then improve as a background, maybe, yeah. Nice. That's an 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
**\[34:29\]** 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 too lazy to update the site and for listening to you all Oliver's feedback is really helpful for me because I I designed this site myself, and I am not a designer. I took a web, of 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. It's great, man. The feedback
**\[35:03\]** is awesome. Let's get back on topic. And that's about me. And I don't know what I have in it, but what are you feeling? So we can come back if we have time. Yes, we can. We won't. So I have a question here. You mentioned briefly the second ago, you have some YouTube content coming up about this and I can't wait to see it. But we can briefly just talk about it. If someone were to be making a website and they're deciding which fonts, what should they be
**\[35:33\]** 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 the show notes. We will, yes, definitely. And basically ask yourself the question, what is the key application for my typeface?
**\[36:06\]** 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 use. 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. My website, think about the display font, more and more important.
**\[36:38\]** Yeah, yeah, actually, that's true, yeah. 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 the renex and not make everything available. This is just horrible, you have to decide. And second step is, what's your key audience? And what 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?
**\[37:09\]** 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 0 or 1, 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.
**\[37:46\]** 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 dollars or whatever, money for a typeface.
**\[38:18\]** And for one font file, depending on the usage also. So what budget do you have? And 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 some distinct typography. So I really want to encourage people also to look for smaller foundries who do quality work. I also have a site where I recommend free and quality foundries, where I summarize them all.
**\[38:49\]** And the weekly newsletter, as you already said, where I send out one week a free suggestion and one week a paid one. So people can also really use for news letter, I should sign up. Yeah, I know, I'm going to 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 to their head is, I go to Google Fonts, that's what I often do to pick my fonts and often end up with OpenSans or Railway or something like that.
**\[39:19\]** I mean, what are your thoughts on things like Google fonts, type kit, those really popular, you know, I guess they're not foundries, but 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 debut for web fonts, I guess, or I remember. So this is basically something good because they made it easy and achievable adobe fonts, which
**\[39:51\]** 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 downside of it. But in the sense. Yeah, stop using it. Yeah. 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.
**\[40:22\]** Typekit was great. Now GDPR is a big thing here in Europe and it's not that safe anymore to use Adobe Fonts since it's used to JavaScript or at import. You're transferring data to somewhere else and you could theoretically find out if somebody visits, coming from this direction or a third party will find out. So with all this cookie consent horror it's yeah it's got it's got words
**\[40:53\]** basically to use it. Also Google fonts but you can self-host Google fonts as well so I'm not talking about Google fonts here. I typically set up self-hosting for Google fonts for my clients. Yeah and so what you're referring to just for our listeners who don't know Oliver's GDPR is this rule that you have over there in the in in the Europe I suppose yeah just your European Union yeah Yeah, Union, where you need to get explicit permission from the visitor of a website to collect
**\[41:24\]** 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, 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 plug in that you choose your font on Google and it just pulls it in. And you're saying that might be in conflict with that law because you're technically pulling something from another site.
**\[41:55\]** And you didn't get permission. It never says, you know, do I consent? 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 Fonts, 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
**\[42:27\]** for others. And now with Adobe Fonts, they kind of changed this to target it more towards designers and not towards, let's say, website owners, because you cannot as a designer, a 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
**\[42:58\]** 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 weird. So this is, I'm sad about this, because it's kind of a drawback for more distinct typographies instead of a very nice catalog on there. But on the other hand, it encourages you to go to the foundries directly and license in your typefaces there and just try them out via your Creative Cloud subscription on your computer then.
**\[43:29\]** Right. Yeah, I've gone through some of the foundries that you've mentioned on your site and your YouTube videos and whatnot, and it's, 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 OpenSans finally. Yeah, you're an open sense survivor then.
**\[44:03\]** A little bit. It's like Oliver has successfully educated us. I'll tell you what, though, Oliver. I don't know if you ever thought on this because what I find often happens is I go into Google Fonts so far. It's been Google Fonts mostly. And I try to tell myself, okay, I'm going to 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 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
**\[44:33\]** 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 hope it says, 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 Maryweather just,
**\[45:04\]** you're not using Maryweather pal. Just find something else. Yeah, that's the thing. You can go, just go, change the, there's a lot of crap on Google Fonts. I have to say this honestly, yeah. There are a lot of good typepaces and a lot of crap, too. So just, if you sort it by popularity, start from the bottom, so. Right, I did see that tip. That's a good idea. I'm going to try that. Right. At least popular fonts first. Yeah. Fix some of those. And if you know about what to look for, just take a look at some of the videos and
**\[45:34\]** I'll explain. If you know what to look for, and 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 the safe option there. 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
**\[46:07\]** 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 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
**\[46:39\]** some... Most people think type faces just fall from the sky or they magically manipulate on your hard drive somehow, and nobody designed this. So most people think about this, this way. So, 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?
**\[47:11\]** Layered isn't a 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. Okay. I have a follow-up question to that. you think of a well-known international company that either has obviously care about their
**\[47:48\]** typography and chosen a great font or the opposite one that 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 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,
**\[48:24\]** 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 drop box from that point on. Before that people thought, yeah, it should sink 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 one example. Another example might be MailChimp. MailChimp also invested in some bold typography,
**\[48:55\]** series of typos for the headings. This is also 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. I didn't catch the name of the company that you were just talking about. Mailchimp. Mailchimp. Oh, Mailchimp. Oh yeah. 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 someone who's supposed to notice this stuff,
**\[49:27\]** but I remember noticing it and liking their latest fonts, so I can understand that, yeah. Okay, so number two on common mistakes, inappropriate font choice. So that's learned 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 a display typeface. They're not to get also from the same typeface,
**\[50:04\]** there are display typefaces or display styles. I'm not sure if, for example, 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 not sure. I'm familiar with the font, but I don't know about their displays. 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.
**\[50:34\]** So this also might be the same typeface, but for visually, but for larger sizes, which would be done with this place size. And if you use this one or a very light text for your body text, this would be inappropriate. So the very light text is for display sizes. So this is an inappropriate phone choice. So we kind of touched on a lot of these already, but we'll go over a little bit more.
**\[51:04\]** Number three, too many different typographic styles, I mean any more tips you have for are 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 haven't, I have this so many times, when I do an app or a user interface design, where the brand style guides there from the 2000s or early 2010s.
**\[51:37\]** And this is just an 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, OK, let's use this typeface for the display sizes. So maybe for the headings and for the larger text for the titles, then check. And for something else, you find something that fits to that.
**\[52:08\]** 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 design. There are situations where design can rescue bad content or most situations, good design can't risk your bad content.
**\[52:41\]** And if you had seven levels deep of headings, nobody can save your soul there. So you're back into hell, Vatican. Yes, you're back there. That's good, that's good. OK, 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.
**\[53:12\]** 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
**\[53:44\]** if it's the same size from 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, actually. So, 16 pixels or 1m is the default and don't go below that. There was a trend we all, I guess you remember it when designers designed stuff by making it unreadably small. We didn't talk about that on the show several times, actually recently in the
**\[54:17\]** season, I don't remember which episode we did specifically talk about small type, especially in footers, especially in the footer. Yeah, I heard that one. Yeah, that's true. And making it unreal, the problem may or might be it's not the size, but also the legibility if the type is is open and let's say distinct and the strokes are thinking of 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
**\[54:49\]** not always about the pixel size it always depends on the type is as well and on desktop computers you could go up to 20 24 maybe 24 even for your body text which might be shocking, but it's more pleasant to read, and that's the thing. If the purpose of this content is to be read, then make it readable. Yeah. I love that tip you said about how to hold a book in front of you. You know, roughly this distance of your screen, and if you make sure that your screen copy is the same size
**\[55:23\]** 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, yeah, yeah, yeah, and then just sure that yeah, yeah, exactly. Yeah, right got it You want to go next one Sean? Oh you go ahead. Okay, so don't so you're fine your final tip here in the top five common web topover he mistakes and how to avoid them is two little line height now
**\[55:56\]** Now, is line height synonymous with ledding just a quick question there? So ledding, as I understand it, ledding comes from the tradition that back when they had actual printing presses, they had a bar of led between the rows of letters and they could sort of use a thicker or thinner one, so that became something called ledding. 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 if you can split hairs there, but let's not
**\[56:30\]** Okay, fair enough. Yeah Yes For nowadays typography it's it's not that important. It's just a distance. Let's say the distance between the lines line I distance between the lines and there's also another word. It's familiar from typography From typographic terminology that's measure which is the length of your line and And your line height depends on the measure, on the length of the line.
**\[57:03\]** 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 6280 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 desktop device. Yeah, I know you're getting out there, yeah.
**\[57:33\]** 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. But 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,
**\[58:05\]** which it should be in English and German, for long reading text. And now about the line head. The longer your line, the larger your line head 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 a mobile then, you could be a bit more compact.
**\[58:39\]** And just as an idea of what kind of ratio would be good, start from 1.5, it mostly works in most cases. It's always depending on typeface again, because the metrics are not the same. They just are not. So you always have to decide for this. Gildsands 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 long line, 1.7 full layout with maybe, and on a smaller, narrower measure, maybe 1.4 or something.
**\[59:13\]** But one extra tip there also might be that if you have and heading, a heading, a title, something that's big, reduce the line out there. I often see very, yeah, the default, I think, the browser default is 1.35, I'm 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 a heading, a heading can be more compact but a body text should have a bit more space to breathe.
**\[59:46\]** Okay, this is a good solid advice. So Oliver, you give us a number of links to Share, which we'll all add these all into the show notes. So his newsletter is YouTube channel, specifically an article and video about stop using open sans, 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.
**\[60:17\]** 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. But you
**\[60:53\]** kind of touched on it a little bit when you mentioned my font choice on my company site, caffeine creations, but visitor listeners of the podcast will be more familiar with the podcast site. And they can just click their podcast player to visit the website. Yeah. Any sort of tips, 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
**\[61:23\]** choices myself. It's okay to be brutally honest. If I suck, let me know. As I said before I'm always counting in my words and brutally my intentions. That's the Austrian way, I guess. So this is the... Yeah, Christophe Valtre. This is the website we're talking about is website 101podgast.com for our listeners who don't yet know our website right now. I guess we'll say everything up.
**\[61:54\]** I hope they don't. All right, Oliver, let's hear what do you have to say about So basically I always use a nice tool and Firefox extension on my website to make sure what kind of type is they're used on the site just for a quick check it's fonts ninja I find this is very easy but you can also go with the development tools and what you're basically using is Josephine sense and for your headings for display sizes and for your body text on my machine it's heretic because yeah
**\[62:30\]** 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 Josefine is nice. It's a nice display type face, 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 side stand for? What is it? Yeah. How would you describe that, Sean? I mean, maybe, uh,
**\[63:02\]** okay. So when I, when I initially kind of up with the podcast idea, like three years ago now, uh, 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 Fin for headings and railway for the body.
**\[63:37\]** Okay. Yeah, but it isn't. So that could be it. 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. Back to the review about the combination. So yeah, if it's, so you did not intend to use here, Helvetica, obviously,
**\[64:09\]** but it shows the fall back here. So since it, I guess it's not loaded, yeah, we can look into this later then, but for Josephine, Josefine, whatever it's around, yeah, it's a very themy kind of tie phase. It looks a bit more like a deco-ish or something like this, more elegant. So it's a nice tie phase for a heading or something. Now, I'm not sure what kind of tie phase you
**\[64:40\]** intended for your website one-on-one podcast title on the top left side because as I said it's displayed here in a vertical in my machine. 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 that on mine it's not it's I don't even know what what font it is. It's a system font. Yeah. Yeah. Yeah. Okay. It is a system font as well. Oh my god. That's terrible. Oh, but work developer fail. I got some work to do this week.
**\[65:19\]** Yeah. Hey. But this shows free advice from a professional typographer. This is this is a this is gold. Yeah, I think it's very, yeah, which makes it very repressible and yeah, it feels like drafty and unfinished to me. This is the reason why because it's the system for us, it's the fallback. Got it. Yeah. Oh my God. Oh my God. It's so embarrassing. It's all good, it's all good.
**\[65:52\]** And it's a safe space here. It's your podcast. I will not edit this out. I actually want 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. Everybody does, it makes mistakes, it's great. So, and then continuing here, now I only can judge what I see, as I said, season one, season two, season three, the tabs on the top navigation or sub navigation,
**\[66:28\]** whatever you have there. They are also in Helvetica light and this is 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 there are two simula, two sensory type faces you're mixing, and one is a slightly different
**\[66:58\]** since it's more from the construction, it's more, I guess it's more new, our decoitions and things, and the other one, right away might be a bit more closer to alveatic or 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, no, don't use it for the project, 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 recent episode, season four episodes,
**\[67:31\]** one click here, and the numbers, the figures, how long this episode, the duration of the episode, the channels, 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 so-called X-Hide, it's a rather small X-Hide. 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 hierarchies when I take a look, this is more basic graphic design here.
**\[68:03\]** On the click here, on the episodes you have, this really large, listen now button works out quite well for the season, for the featured episode, that goes full with, this works quite well there, but it's too big for the other episodes. Oh, interesting, okay. It's more like a conflict between the heading of the other episodes and the button wins, always. I totally see that now, yeah. I will reduce the buttons outside of the most recent episode.
**\[68:38\]** I'll reduce those probably about two thirds. Yes, yes, you can make them much, much smaller And the thing why we, I just look at, listen now, listen now, listen now. So 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 we really want to go into the weeds like the icons could have the same strokes,
**\[69:09\]** a stroke with like the text of the small clock display there and the notepad, but yeah, so. Oh, yeah. This is not an integrated details of, I love this integrated details. And maybe one of the last. Yeah, I see that. Now, and you can 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
**\[69:42\]** be the functional text, season 4 and so on. And there's always a great tip with, if you have something in uppercase letters, 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 said next to lower case letters. They are designed this way to have as little space after them as possible to make a compact word.
**\[70:14\]** And then 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, yeah, and if an L, you also get a lot of space in there. And chose a thing is rather wide too. So I'd go for spacing it out or not writing it in uppercase letters. So these are the two sides. And I made also a video about this where I step into a shower. You can see me stepping into a shower.
**\[70:46\]** 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. All of our videos are awesome. They're so entertaining. Some of them are really hilarious. Yes. 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
**\[71:17\]** and not getting the right font to show up. You still evaluated my font choices, give me some things to consider and revise. This is the kind of advice that Oliver or any professional developer, but specifically Oliver can help you with your website. Mm-hmm. Yeah, it's great to hear too that you're clearly very passionate about the work you do. I mean, we've been joking about what fonts never to use and whatever, but it's nice to see people
**\[71:49\]** that really, really care about the work that they do, and everyone who's doing a website should value that kind of input, you know. Yeah. And somebody who's as passionate as Oliver is is gonna put that passion into any sort of work that you hired him to do. So should we wrap this up now? I think this would be a great time to wrap it up. Oliver, where can our listeners find you on the web? Twitter, your website, YouTube, whatever.
**\[72:20\]** Yeah, I'm basically the easiest way to reach out to me and rant about a horrible type face or some bad typography that keeps you 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 log of time. Just reach out via Twitter. I'm glufer there. It's glyph with an E at the end, the German word for glyph. G-L-Y-P-H-E, and you can also, of course, subscribe to my YouTube channel.
**\[72:53\]** You'll find it under PimpMyType.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 it's psychenshots.net is a horrible German word. And as everybody else I'm guilty as charged of not doing it properly. I'm judging everybody else. Yeah. But I'm much more enthusiastic about putting out content which I think is the much more important as you guys do, the typography sure is important but it's much more important
**\[73:28\]** to make new episodes. So yeah, kudos for you guys that you really, really keep on going for four episodes, so I appreciate that. 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 hit me up and tell me if you did it and I'll take another look. I will definitely do that. Thank you so much.
**\[74:02\]** 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, C-A-F-E-I-M-E-C-R-E- 8-ROM, or at my website, caffeine-creations.ca. And by me, Mike Mella, you can reach me online at bee-likewater.ca, and also on Twitter and LinkedIn, where my username is Mike Mella.
**\[74:33\]** That's M-I-K-E-M-E-L-L-A.
Close Transcript
Have a question for Sean, Mike, and Amanda? [Send us an email](/contact).
[](https://www.google.com/podcasts?feed=aHR0cHM6Ly93ZWJzaXRlMTAxcG9kY2FzdC5jb20vZmVlZC5yc3M%3D)[](https://itunes.apple.com/ca/podcast/website-101-podcast/id1449510012)[](https://open.spotify.com/show/3rmSM1R9t6q1U8DmYWJRSO?si=NrYPMgDaRV6Dd56PjEaPow)### Season 06
- 1 [ Tools of the Trade](https://website101podcast.com/episodes/season-06/episode-1/tools-of-the-trade/)
- 2 [ Website Contract Advice From an Actual Lawyer](https://website101podcast.com/episodes/season-06/episode-2/website-contract-advice-from-an-actual-lawyer/)
- 3 [ Choosing a CMS](https://website101podcast.com/episodes/season-06/episode-3/choosing-a-cms/)
- 4 [ Tips for Website Maintenance](https://website101podcast.com/episodes/season-06/episode-4/tips-for-website-maintenance/)
- 5 [ Working with Conflicting Personalities](https://website101podcast.com/episodes/season-06/episode-5/working-with-conflicting-personalities/)
- 6 [ Building an Online Course with Jane Atkinson](https://website101podcast.com/episodes/season-06/episode-6/building-an-online-course-with-jane-atkinson/)
- 7 [ PodCamp Toronto 2023 Recap](https://website101podcast.com/episodes/season-06/episode-7/podcamp-toronto-2023-recap/)
- 8 [ The Good, The Bad, and the Ugly about RFPs](https://website101podcast.com/episodes/season-06/episode-8/the-good-the-bad-and-the-ugly-about-rfps/)
- 9 [ Here's how to work from paradise](https://website101podcast.com/episodes/season-06/episode-9/heres-how-to-work-from-paradise/)
- 10 [ Rebroadcast: Pimp Your Typography](https://website101podcast.com/episodes/season-06/episode-10/rebroadcast-pimp-your-typography/)
- 11 [ Internet Privacy with Michael Geist](https://website101podcast.com/episodes/season-06/episode-11/internet-privacy/)
- 12 [ Lessons from a plugin developer with Ben Croker](https://website101podcast.com/episodes/season-06/episode-12/lessons-from-a-plugin-developer-with-ben-croker/)
- 13 [ Stand Out on Social Media with Jessica Perreault](https://website101podcast.com/episodes/season-06/episode-13/social-media-with-jessica-perreault/)
### All Seasons
- [Season 01](https://website101podcast.com/season/01/)
- [Season 02](https://website101podcast.com/season/02/)
- [Season 03](https://website101podcast.com/season/03/)
- [Season 04](https://website101podcast.com/season/04/)
- [Season 05](https://website101podcast.com/season/05/)
- [Season 06](https://website101podcast.com/season/06/)
- [Season 07](https://website101podcast.com/season/07/)
- [Season 08](https://website101podcast.com/season/08/)
- [Season 09](https://website101podcast.com/season/09/)
<!\[CDATA\[YII-BLOCK-BODY-END\]\]>