--- title: Pimp Your Typography date: 2021-07-06T05:00:00-04:00 author: Sean Smith canonical_url: "https://website101podcast.com/episodes/season-04/episode-12/pimp-your-typography/" section: Podcast --- <!\[CDATA\[YII-BLOCK-BODY-BEGIN\]\]>[Skip to main content](#main-content)![Oliver Schöndorfer](https://website101podcast.com/uploads/hosts/_200x200_crop_center-center_none/oliver.jpeg)Guest Oliver Schöndorfer UI designer empowering developers & designers to improve their websites, and products with pimped typography. [ ](https://twitter.com/glyphe) Season 04 Episode 12 – Jul 06, 2021 1:14:56 [Show Notes](#show-notes) ## Pimp Your Typography  0:00 0:00 1.0x 0.75x1.0x1.25x1.5x2x [](//dts.podtrac.com/redirect.mp3/website101podcast.com/uploads/mp3/season-04/S04-E12-Pimp-Your-Typography-192.mp3) Join us as we learn from Oliver Scherndorfer, a UI designer and typographer, as he shares his knowledge on typography and how it can impact your website's design and readability. We discuss different font types, common mistakes to avoid, and tips for selecting the right font for your website. ### 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. ### **Timestamps** \[00:00\] Intro \[01:37\] Oliver introduces himself and talks about his background in design and typography \[02:14\] Definition of typography and fonts, and the difference between serif and sans-serif fonts \[05:43\] When to choose a serif or sans-serif font for a website \[06:01\] Legibility vs. readability in web typography \[08:35\] Oliver's thoughts on popular fonts like Comic Sans and Helvetica \[11:31\] The importance of a good typographic choice in branding \[14:27\] Tips for selecting fonts for a website (application, audience, limitations, etc.) \[19:08\] Google Fonts and the pros and cons of using them \[23:05\] Oliver's thoughts on using multiple fonts on a single website \[26:40\] Tips for avoiding common web typography mistakes (not caring about typography, inappropriate font choice, too many different graphic styles, setting text too small, and having too little line height) \[39:50\] Oliver offers to review the typography on the Website 101 podcast website \[47:30\] Links to Oliver's resources (YouTube channel, free typographic review form) ### 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\]** **Mike:** Hello, and welcome. It's the website 101 podcast. I am Mike Mella. He's Sean Smith. Hey, Sean. How you doing? **\[00:13\]** **Sean:** That's me. I'm doing great. It's Friday afternoon. Yeah. Yeah. And this is exciting. We... **\[00:19\]** **Mike:** I always say, well, how great a show is going to be. Don't I? Every single episode. But they are, what are you going to do? And he's always like, this is gonna be the best. This is gonna 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. We're gonna talk about typography mostly today, I think. So as I said, he's an 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. **\[01:10\]** **Sean:** Oliver is definitely committed to his opinions. Yeah, right? **\[01:14\]** **Mike:** I think that's good. So Oliver helps people to improve their websites through pimped typography, man, that's hard to say, Pimped typography, he says, he runs the YouTube channel PimpedMyType, which is at PimpedMyType.com, you can get to it through there, and a newsletter with a weekly font recommendations in there for web and app design. All of her, welcome to the show. **\[01:37\]** **Oliver:** Hey Sean, hey Mike, I'm so glad to be here. Thanks for inviting me on your show. **\[01:44\]** **Sean:** We're really excited to have you and have you help other people pimp their type. **\[01:49\]** **Oliver:** Yeah, that's true. Yeah, everything's pimped up to this podcast **\[01:55\]** **Mike:** 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 just start with some definitions What exactly are fonts? What is typography? How would you sort of describe that? concisely, I guess **\[02:14\]** **Oliver:** Yeah. So basically the definition from this is type is, or typography is setting text with prefabricated letters. I guess this is some kind of definition to it. And basically we are 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. 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 fonts. There's a nice, you can distinguish between fonts and typefaces, but let's not go there. That's senseless details. **\[03:05\]** **Mike:** Yeah, you can get into font families and all kinds of stuff. like that, right? Yeah, yeah. And there's fun families and, yeah. **\[03:12\]** **Oliver:** Let's let's say font and typefaces all the same for this podcast, not not splitting hairs here. It's fair enough. Yeah. So fonts come in a number of different **\[03:23\]** **Sean:** kinds. And the two big differentiators are Seraph and Sensor fonts. And there's there's other ones like handwritten and things like that. But what is the difference between a Seraph and a sensor phone, and when would one be better than the other? **\[03:41\]** **Oliver:** Yeah, the thing is, from the naming, it's pretty weird that one has the name that it's not the other. San Serif means without Serif's, and Serif's, yeah, with Serif's, basically, and yeah, what other Serif's, pretty familiar Serif type phase might be times, or times your home, I guess everybody knows that from Microsoft Word or something. But times is, 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 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 used to read mostly in books or long reading formats in classical books said. They are since when they did came up about 600 years or about 1,450 it came up with typography. And Sanseriff is called Sanseriff since it's more modern. It's the like area, or Helvetica, or open Sans. This is a cent-serif typeface then. And they tend to be seen more modular. Modern, not so traditional, like the other ones, torture would be an example as well, if you're familiar with these old system fonts or no-toe serif nowadays in Google fonts words or PT-serif or whatever is a serif again. But they, basically, the cent-serif typeface are more considered more modern. Maybe also more replaceable. they're 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 very popular as you might know, or maybe also other ones. **\[05:43\]** **Sean:** Yeah. So, when would I want to choose a surf or over a sensor on the web, because you just said that SandSurf seems to be more common or popular, is that because it's more modern and new or because it's more readable? **\[06:01\]** **Oliver:** Yeah, this is a hot issue or a hot, rather hot topic. Since there were wars over this, people died for serif. 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 geometrical sand serif, and maybe 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 long line and then 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're having 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 AG test, I call it the IL-1 AG test. Nice to just remember this. It's the upper case I, the lower case L and the number 1 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, and a number one? If it's not just the vertical line, for example, in gill sense, I guess you know this type is as well, in gill sense, it's all a vertical line with different heights. And if you type the word illustration you know, 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. 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 sans-serive 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. But in our days, retina 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. **\[08:35\]** **Mike:** Yeah, that example you gave a second ago where, what is it, the IL 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. **\[08:57\]** **Sean:** Because sometimes it's a terrible experience. **\[08:59\]** **Mike:** Yeah, I mean, obviously not with a word like, 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. **\[09:10\]** **Oliver:** 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 what kind of number or 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. Oh, no, yeah. **\[09:42\]** **Mike:** That's another one. **\[09:44\]** **Oliver:** There you have to go for a more distinct typeface. Maybe there are also these mono space typefaces are made that way for computer programmers as you guys, of course, know. Yeah. And so that you can differentiate an O from a zero. **\[10:00\]** **Sean:** Cool, cool. For listeners who don't know, Mono Space font is every character takes up the same number or the same amount of horizontal space in 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. **\[10:20\]** **Oliver:** It's just so much better. It's great for editing text. **\[10:27\]** **Mike:** Yes, exactly. When you need 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 unless you're looking at a document, but in programming, it can be very important to have that feature. Yeah, absolutely. **\[10:46\]** **Sean:** Okay, so I have a question for you. We talked about legibility and good fonts or 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 gonna shake their head, baby, 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. What makes it a better font? **\[11:31\]** **Mike:** Or is it a better font? Maybe you're a big fan of Comic Sans, **\[11:34\]** **Oliver:** we don't know yet. I'm a big, let's say I like Comic Sans more than Helvetica. Oh, wow. Oh, can he be a designer? How can he be on the show? Get out here now, stop being a recording. The thing is, the thing here is, there's no bad tie phase. There's a badly use tie phase, so if you're the application or if where you apply your tie phase doesn't fit the content, then it's a bad choice. Basically, the thing with tie and let us is, it's never neutral and it's like 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 was designed for speak bubbles in I guess it was Windows 95 or something. Right. And this 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 plant to put in times in Roman in there. Indeed, just would have looked awful and often weird in this circumstance. This is for Roman. This is for Roman. 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 this, the fonts, the typeface, and installed it on Windows 95, and from there on it was a default system font. **\[13:39\]** **Sean:** And people like to use the name also, because it was in speech bubbles, that is so cool. **\[13:46\]** **Oliver:** Yeah, that's the reason for it. And the good thing about Comic Sense is 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 there and so on. And I got a proposal that's failed out, comic sense. Oh, no, I couldn't take it seriously. Sorry, sorry, it might be the wrong application there. That's great. **\[14:19\]** **Mike:** But I would have had the same reaction to be fair. If I've seen, yeah, in a professional document like that. **\[14:25\]** **Oliver:** Yeah, not very good. 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 assignments, 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, so they did an area or whatever. And this was nice back then. It didn't make the, yeah, let's say, the tests more fun, but 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 two Ls so all the way from hell. **\[15:09\]** **Sean:** 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 fun? Of course I did. **\[15:23\]** **Oliver:** Of course it did. I think it was from 2012 or no, I'm not sure about that. But there was a great conference in Berlin, which is sadly now gone since Monotype bought everything and ruined everything. Monopoly is monotype. Okay, let me rant about monotype later. They own my fonts and everything basically. Oh, okay. 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 on that road, but whatever. Monotype, Yeah. Monotype has Helvetica. So they sell it. And 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 a lower case E, the apertures, this is the space that opens up to the the outset of the letter, these apertures are rather closed. So if you use it in smaller sizes, 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 Helvetica at some point of time. And it's so not distinct, it's so like everyone else, it's a lot of designers like it. And this is maybe because of it's, they might say it's neutral, it's, but type is never neutral, it's the thing, even if you use it, it's never, yeah, this is a quote by Jason instrumental and and he who's also a typographer and does a lot with web typography and great talks can only recommend him but it's never neutral. It's it makes a difference if I write something in Helvetica or if I write something as you said in comic sense. So people really see it and and feel it 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. And we had the, it was like the sky was turning black and my heart started hurting. When I opened up, when I opened up the computer, and so, when you love, I have to love, it's okay. 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 1989, 1989 or something, like that, for printing on printers. **\[17:58\]** **Mike:** I remember being a big, Elvedic, it seemed to be big with Mac users, I'm a Mac user now. **\[18:05\]** **Oliver:** That's the thing. **\[18:06\]** **Mike:** And I vividly remember just every Apple thing had, everyone who wanted to look like Apple **\[18:12\]** **Sean:** Would you use halvedica? Yeah, I love that Oliver is has such strong convictions about fonts. It's great Just like hell Vedica with two L's and Related to hell Vedica now this is something that I heard but I don't know as a fact Hell Vedica and Ariel are but I was told a red somewhere 95% identical Why would you choose Ariel over Helvetica or the opposite? **\[18:47\]** **Oliver:** 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 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 50s and they were cool back then, and 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 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 where it came from I always wanted why they called it yeah it seems like yeah it's supposed No doubt, no doubt. The title 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 It means it's in this place, sizes, 24 or 25 vessels, and above. So it's a typist for a heading or a title or whatever. But it's not a typist for some captions. Captions have to be clear and easy to read. **\[20:53\]** **Mike:** to be beautiful font and it's like you're calling it grotesque what's the deal there that's **\[20:58\]** **Sean:** It's really interesting. I want to jump back to where you said aerial was made for printing 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. **\[21:18\]** **Oliver:** Yeah and also for screen representation which wasn't that far. I don't remember. I'm born 86. So I was four years old back then and I didn't have a strong opinion on **\[21:28\]** **Sean:** Erdogan back then. Well now I feel old, thank you. But I got your Star Trek **\[21:35\]** **Oliver:** next generation to open up in one of the recent episodes. Yeah, that was in the previous areas. I was laughing so much. Good, that's good. He worked very hard on **\[21:47\]** **Mike:** that intro. 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 notice that? I mean, assuming you noticed it. Did you watch the movie? Did you boycott the movie? **\[22:07\]** **Oliver:** 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 **\[22:20\]** **Sean:** Sound didn't miss anything. It's a horrible movie. Yeah, that's right. He didn't miss much. Don't 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 So I just didn't want to disturb everybody. So I took a nap. There was that balance. **\[22:47\]** **Mike:** And all of her had already left, because as soon as they saw the titles in Papyrus, she was like, I'm done. **\[22:52\]** **Sean:** I'm back. **\[22:54\]** **Oliver:** No doubt, no doubt. The title 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 It means it's in this place, sizes, 24 or 25 vessels, and above. So it's a typist for a heading or a title or whatever. But it's not a typist for some captions. Captions have to be clear and easy to read. Of course, people could somehow read this stuff. 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 **\[23:43\]** **Mike:** location. 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 **\[23:50\]** **Sean:** 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 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 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 effect the tone of your copy? Maybe that should have been a follow-up question, sorry. **\[24:38\]** **Oliver:** 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 heading 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 a 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 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. So these are the three different kinds of texts. 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 open sense specifically. Hold on, hold on all over. **\[25:59\]** **Sean:** There's nothing wrong with open sands, but on your YouTube channel, you have a video, where's the title of it, stop using open sands, he did say he doesn't like it because **\[26:16\]** **Mike:** it's overused, so that could be a valid reason to start using it. **\[26:21\]** **Sean:** Okay, but it just seems a little bit incongruous. **\[26:25\]** **Mike:** 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, 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. **\[26:58\]** **Oliver:** Don't worry about that. Sure. Yeah. So, yeah, I'm just click-baiting. Yeah. It's not using OPs. No. But the thing is, it's a good typography, but it's overused. And two things, a good typography 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. If you choose open sands 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. **\[28:07\]** **Sean:** if you choose open sands, you're like Mr. Smith from the Matrix rather than Neil because All the agents look the same. **\[28:16\]** **Oliver:** True, you're like IKEA. IKEA also uses open sense. Oh yeah, that's right. Yeah, so and they have their reasons for it. So it's not a bad type phase, it performs well, but it's the same like everybody's else and it 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. **\[28:41\]** **Mike:** 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, you might have a body copy font, and then I think you mentioned like a micro type font or something. **\[29:05\]** **Oliver:** Function it takes, yeah. **\[29:06\]** **Mike:** Right, right, function test. So how many fonts do you think are appropriate to be used on one website. How many fonts if I'm making a website should I consider using? **\[29:18\]** **Oliver:** Yeah, if we go back, let's say fonts again, so if it's a typeface or 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, set up. This is basically the name then for like aerial bold and aerial narrow are the same type phase 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 type phase? If you think, wow, this looks very themy, very cool, very westernie, slab serif, whatever, saloon, or something like this, yeah? If you think, hey, this conveys a cool atmosphere. This is a very nice type. 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 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, calm one since 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 theme-y or interesting for your headings, like you did Sean on your website where you used, yes, I did look at this, I charged you. **\[31:57\]** **Sean:** I'm opening my website now. Yeah, so you continue. Go ahead, go ahead. **\[32:06\]** **Oliver:** Yeah, sure, but as Sean did on his website, but he's using here on the Kaffin Creations website for his headings, a tie-face that's a very handwritten style. And for the body text, he uses poppins, which is a more geometric sensor. It's not the best one for long reading text 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, 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. You You really something very different for your headings and then for your body text, something else. **\[33:00\]** **Sean:** So I did that, but it's, but it's quote, safe. Yeah. Not interesting. **\[33:07\]** **Oliver:** Safe. Well, no, it's, it basically, the thing is with your headings web development partner you say here on the, on the first heading. It basically conveys an atmosphere, it's more, oh, I'm approachable, since it's a handwritten style. **\[33:23\]** **Sean:** I wanted to go for it actually. **\[33:24\]** **Oliver:** 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. Kefin creations, the logo, the square is rounded. Your buttons are rounded. And then these polygons, OK, there are dots. But they create this kind of, yeah, this kind of more edgy, yeah. But OK, let's go. Let's dig with it. And so this is something that you could maybe then improve as a background maybe, yeah. **\[34:00\]** **Sean:** Nice. Yeah, that's an interesting feedback. I really liked 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 too lazy to update the site. And for this, all of us feedback is really helpful for me because I designed this site myself and I am not a designer. I took 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 the feedback is awesome. Let's get back on topic. And that's about me. **\[34:52\]** **Oliver:** You don't know what I have in there. So when you come back, if we have time, yes, we can, we won't. **\[34:59\]** **Mike:** 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. And, um, but we can briefly just talk about it. Um, if someone were to be making, you know, a website and they're deciding which fonts? What should they be thinking when they're combining, when they're deciding which two or three fonts or which family to choose? Like any tips that you have about how to choose fonts for a **\[35:27\]** **Oliver:** 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. 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 think about the **\[36:15\]** **Sean:** display text. My website, think about the display font more important. Yeah, actually, that's **\[36:24\]** **Oliver:** 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? 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 this is a very special needs there. Of course and you're not blind and can see it's not either 0 or 1 so it's a lot of shades in between and so this is a very specific need here and this took Yeah, 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 the prices. So you start with three to 400 euros for dollars or whatever money for for what typeface 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. 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 newsletter, True. So then this is the first question. What is the key application? Then 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. **\[38:43\]** **Sean:** I should sign up. **\[38:43\]** **Mike:** 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 that I go to Google Fonts. That's what I often do to pick my fonts and often end up with open sands or, you know, Railway or something like that. 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, you know, font resources. Bad idea, good idea. **\[39:13\]** **Oliver:** 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 Oberfonts, 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 downside of it. 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 Adobe Font since it's used through 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 consent, horror, it's got words basically to use it. all the Google funds, but you can self-host Google funds as well, so I'm not talking about Google funds yet. **\[40:43\]** **Sean:** I typically set up self-hosting for Google funds for my clients, yes. **\[40:48\]** **Mike:** 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 Europe, I suppose, yeah, just your opinion, yeah. Union, where 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 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 law because you're technically pulling something from another site, and you didn't get permission, it never says 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. **\[41:53\]** **Oliver:** 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 target it 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 typekid. 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 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. So, but on the other hand, it encourages you to go to the foundries directly and license your typepaces there and just try them out via your Creative Cloud subscription on your computer then. **\[43:13\]** **Mike:** 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. **\[43:44\]** **Oliver:** Yeah, you're an OpenSans survivor then. **\[43:47\]** **Mike:** A little bit. **\[43:48\]** **Sean:** Oliver has successfully educated us. **\[43:50\]** **Mike:** 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 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 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 hope it says, and I'm constantly going back to the fonts that I'm comfortable with. I mean, do you have any tips for designers, I guess, about how you can sort of break out of that tendency? That's a great question, Mike. **\[44:39\]** **Oliver:** Yeah, how I do it, basically. I force myself to do something new every time. **\[44:46\]** **Mike:** Yeah, if you see Maryweather just, you're not using Maryweather pal, just flies up the door. **\[44:51\]** **Oliver:** Yeah, that's the thing. You can go, just go, change that. There's a lot of crap on Google Fonts. I have to say this, honestly. There are a lot of good typefaces and a lot of craps, 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. **\[45:11\]** **Mike:** Right, least popular fonts first. Fix some of those. **\[45:14\]** **Oliver:** And if you know about what to look for, just take a look at some of the videos and 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 make a mistake, I guess. Most people will choose the safe option there. And it's also fine. **\[45:39\]** **Sean:** 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 and that is not caring about typography. **\[46:07\]** **Oliver:** 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 manifestated 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 response effect 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 the 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 recognisable **\[47:19\]** **Sean:** basically. Okay, I have a follow up question to that. Can you think of a well-known international company that either has obviously cared about their typography and chosen a great font or the opposite one that has doesn't care and their font is like generic and boring? **\[47:43\]** **Oliver:** Yeah. For distinct 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, but they're using a narrower 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 sink my files. I don't care about it. Get out of my way. When will I see it anyway? Right. 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 that brand. This is one example. Another example might be MailChimp. MailChimp also invested in some bold typography of Serif Types for the headings. This is also very unique, maybe weird illustrations that are completely different different from the things we were used before. So this is also something that you then will remember. And because of the kind of the name of the company **\[48:55\]** **Sean:** that you were just talking about, I'm sorry. Maybe Mailchimp. Mailchimp. Oh, Mailchimp. Oh yeah. Yeah. Mailchimp is, I love their site. **\[49:03\]** **Mike:** 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. But I remember noticing it and liking their latest font. So I can understand that. **\[49:17\]** **Sean:** Yeah. OK. So number two on common mistakes, inappropriate font choice. So let's learn how we could make an inappropriate font choice. **\[49:31\]** **Mike:** And this would be, I guess, sort of going back to the issues that earlier about using Comic Sans in a doctor's office instead of in a kindergarten or something. I guess that would be a example, right? **\[49:40\]** **Oliver:** Exactly. Or maybe some at this plate hype phase. There are not to get also from the same typeface, there are display typefaces or display styles. It also, I'm not sure if, for example, PT, PT Sans and PT Serif, I think they have a display style. PT Serif, I think. I'm not sure. **\[50:02\]** **Mike:** I'm not sure. **\[50:03\]** **Oliver:** I'm familiar with the font, but I don't know about the display style. 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 for visually but for larger sizes, which would be done with this place size. And if you use this one, not 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. **\[50:41\]** **Mike:** 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 type of graphic styles. Any more tips you have for people about trying to avoid that problem? **\[50:57\]** **Oliver:** 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, we're gonna do an Apple and user interface design where the brand style guides there 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 type base 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. 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 rescue bad content. And if you had seven levels deep of headings, nobody can save your soul there. **\[52:30\]** **Mike:** So you're back into hell, Vatican. **\[52:35\]** **Sean:** Yes, you're back there. **\[52:39\]** **Mike:** That's good, that's good. **\[52:40\]** **Sean:** 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? **\[52:53\]** **Oliver:** 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 it 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 16s 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 designed stuff by making it unreadably small and And we didn't talk about that on the show several times, as I said. **\[54:00\]** **Sean:** 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. **\[54:09\]** **Oliver:** Yeah. 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 as open and the legs are 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 as well. And on desktop computers, you could go up to 24, maybe 24, even for your body text, which might be shocking, but it's more pleasant to read. that's the thing. If the purpose of this content is to be read, then make it readable. **\[54:54\]** **Mike:** 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 text as what's in the book, because they already know what they're doing sort of thing, **\[55:11\]** **Oliver:** 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 for that. Yeah, exactly. Yeah, right. Got it. You want to go to the next one, Sean? **\[55:27\]** **Mike:** No, you go ahead. Okay. So you're your final tip here in the top five common web to poverty mistakes and how to avoid them is two little line height. Now, is line height synonymous with heading, 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? **\[56:08\]** **Oliver:** Yeah, basically it is, you can split hairs there, but let's not. Okay, fair enough, appreciate that. Yes, for nowadays typography it's not that important. It's just a distance, let's say the distance between the lines, line or distance between the lines. And there's also another word that's familiar from typographic 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, and books, and so on. This is just familiar. Don't open up Wikipedia on your desktop device. **\[57:14\]** **Mike:** Yeah, I know you're getting out there, yeah. **\[57:17\]** **Oliver:** 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 aligned, which it should be in English in German for long reading text. And now about the line hat. The longer your line, the larger your line hat 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, yeah. You could be a bit more compact. 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 the typeface again, because the metrics are not the same. They just are not. So you always have to decide for this. Gillesen always looks smaller in the same size like Helvetica or something. And so you should set the line height to about 1.5 on a long a line, 1.7 full layout with maybe, and on a smaller, an narrower measure, maybe 1.4 or something. But one extra tip there also might be that if you have a 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:30\]** **Sean:** 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. 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. 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? **\[60:28\]** **Oliver:** Of course. Did you just submit it through the form? **\[60:31\]** **Mike:** That's right. We didn't fill the form out yet, but you kind of touched on it a little bit when **\[60:39\]** **Sean:** 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 **\[60:50\]** **Mike:** 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 **\[61:06\]** **Sean:** the design and typography choices myself. It's okay to be brutally honest. If I suck, let me know. **\[61:12\]** **Oliver:** Well, as I said before the show, I'm always kind in my words and brutal in my intentions. Whatever. That's the Austrian way, I guess. This is the... This is the... **\[61:26\]** **Mike:** Yeah. Christophe Valtteri. This is the website. We're talking about his website 101podgast.com for our listeners who don't yet know our website, right? By now, I guess we'll say everything up. **\[61:39\]** **Sean:** I hope they know it. **\[61:40\]** **Mike:** Yeah. Let's let's let's hear what what do you have to say about about our all right? Sure **\[61:47\]** **Oliver:** 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 side just for a quick check. It's font 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 we already know what's coming up. The thing here is about the combination of these two. It's a bit delicate. The problem here is, so Josefine, it's a nice display typeface, so the first question basically here would be Sean and Mike, who's your audience, and what values do they have? So what should your side stand for, what is it? **\[62:43\]** **Mike:** Yeah, how would you describe that, Sean? I mean, maybe. **\[62:46\]** **Sean:** OK, 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 Finne for headings and railway for the body. **\[63:22\]** **Oliver:** Okay, yeah, but it isn't. So that could be us. **\[63:27\]** **Mike:** Maybe that's a font embedding issue or something like that. Because it does look like railway on mine as well, but I have railway on my machine. So you know what, it could be that **\[63:36\]** **Sean:** because that makes web developer fail. **\[63:40\]** **Mike:** Hey man, that's why we do this show to learn stuff. It's all good. Absolutely. **\[63:44\]** **Sean:** Back to the review about the combination. **\[63:47\]** **Oliver:** So yeah, if it's, so you did not intend to use here Helvetica, obviously, 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 here, says, yeah, it's a very theme-y kind of typeface. It looks a bit more, yeah, a deco-ish 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 type is you intended for your website, one-to-one podcast title on the top left side. Because, as I said, it's displayed here in the to go on my machine. Okay, so yeah, but it's not easy. It's supposed to be, it's just text, **\[64:40\]** **Mike:** it's not an actual logo. Yeah, that on mine, it's not, it's, I don't even know what font it is, **\[64:46\]** **Oliver:** but it's a system font. Yeah, yeah. Okay, it is a system font as well. Oh my god, that's terrible. **\[64:55\]** **Sean:** Oh, but work developer fail I got some work to do this week. Um, **\[65:03\]** **Mike:** yeah. Hey, but it shows the free advice from a professional typographer. This is, uh, this is gold. **\[65:09\]** **Oliver:** Yeah. I think it's very, um, yeah, which makes it very reprehensible. And, uh, yeah, it feels like drafty and unfinished to me. This is the reason why because it's the system for **\[65:21\]** **Sean:** it's a fallback. Got it. Yeah. Okay. It's so embarrassing. It's all good. It's all good. So 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 **\[65:53\]** **Oliver:** you would recommend to improve it. So keep going. Everybody does, it makes mistakes, it's great. So and then continuing here, yeah, 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, 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 they're two similar, two-sensor of 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 decoitions and things. And the other one, right away, might be a bit more closer to a little bit 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, 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, 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 the so-called X height, It's a rather small excite. 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. On the click here, on the episodes you have, this really large listen-out button works out quite well for the season, for the featured episode, it 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 **\[68:11\]** **Sean:** and the button, and the button wins always. I totally see that now. Yeah. I will reduce the buttons outside of the most recent episode. I'll reduce those probably about two-thirds. **\[68:25\]** **Oliver:** Yes, yes, you can make them much, much smaller. And the thing, why we, I just look at this now, this now, this now, this now. So not that 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, a stroke with like the text of the small clock you display there and the notepad, but yeah, so this is not an integrated details of I love this integrated details. And maybe one **\[69:08\]** **Sean:** of the last I see that and you can tell that I am not a designer because I didn't notice this when **\[69:13\]** **Oliver:** 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 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 set next to lower case letters. They are designed this way to have as little space after them as possible to make a compact word. 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. Or you have 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. I made also a video about this where I step into a shower you can see me stepping into a shower. I will add a **\[70:31\]** **Sean:** 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 **\[70:43\]** **Mike:** So entertaining. Some of them are really hilarious. Yes, everyone should definitely check them out. We'll link to them. **\[70:48\]** **Sean:** So all over this The final review here where you reviewed the website podcast site Gold even though it illustrates my mistakes as a design as a developer and not getting the right font to show up You you still evaluated my font choices gave me some things to 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. **\[71:21\]** **Mike:** 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 that really, really care about the work that they do. **\[71:37\]** **Sean:** and you know, everyone who's doing a website **\[71:39\]** **Mike:** should value that kind of input, you know? **\[71:42\]** **Sean:** Yeah, and somebody who's as passionate as Oliver is, is gonna put that passion into any sort of work that you hire him to do. **\[71:52\]** **Mike:** So should we wrap this up now? **\[71:54\]** **Sean:** 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:04\]** **Oliver:** Sure, yeah, 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 with it. Just reach out via Twitter. I'm Glufer there. It's Cliff with an E at the end, the German word for Cliff, G-L-Y-P-H-E. And you can also, of course, subscribe to my YouTube channel. 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 psychenshots.net is a horrible German word. And as everybody else, I'm guilty as charged of not doing it from the website. I'm charging 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 to make new episodes. So yeah, kudos for you guys that you really, really keep on going for four episodes. So I appreciate that. **\[73:22\]** **Mike:** Hey, listeners, thank you for listening to the website 101 Podcast for this season. That's a wrap for season four. **\[73:29\]** **Sean:** Yeah, we had a lot of fun and we've got a full season planned for season five, which we will start recording in the fall once we've confirmed guests and things like that. So look for us late fall 2021 to return. **\[73:45\]** **Mike:** And in the meantime, check out website 101podcast.com. **\[73:50\]** **Sean:** Oliver, thank you so much for coming out and helping me to pimp out my typography on the website 101 podcast. Yes, thanks. We'll be doing over the next week or two. I'm excited and yeah, **\[74:04\]** **Oliver:** hit me up and tell me if you did it and then I'll take another look. I will definitely do that. **\[74:11\]** **Sean:** 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 Twitter, where my username is Caffeine Creation, C-A-F-E-I-M-E-C-R-E-E-E-T-I-O-M, or at my website CaffeineCreations.ca. **\[74:37\]** **Mike:** And by me, Mike Mella, you can reach me online at B-LikeWater.ca, and also on Twitter and LinkedIn, where my username is Mike Mella. That's M-I-K-E-M-E-L-A. You Close Transcript Have a question for Sean, Mike, and Amanda? [Send us an email](/contact). [![Listen on Google Play Music](/assets/images/google_podcasts_badge@2x.png)](https://www.google.com/podcasts?feed=aHR0cHM6Ly93ZWJzaXRlMTAxcG9kY2FzdC5jb20vZmVlZC5yc3M%3D)[![itunes badge](/assets/images/itunes-badge.png)](https://itunes.apple.com/ca/podcast/website-101-podcast/id1449510012)[![itunes badge](/assets/images/spotify-logo.png)](https://open.spotify.com/show/3rmSM1R9t6q1U8DmYWJRSO?si=NrYPMgDaRV6Dd56PjEaPow)### Season 04 - 1 [ 'Click Here' Hurts Your SEO and UX: Why It's Time to Change](https://website101podcast.com/episodes/season-04/episode-1/click-here/) - 2 [ How to Talk to Your Web Developer: Communication Tips for Clients](https://website101podcast.com/episodes/season-04/episode-2/how-to-talk-to-your-web-developer/) - 3 [ Red Flags](https://website101podcast.com/episodes/season-04/episode-3/red-flags/) - 4 [ Content Strategy](https://website101podcast.com/episodes/season-04/episode-4/content-strategy/) - 5 [ Accessibility](https://website101podcast.com/episodes/season-04/episode-5/accessibility/) - 6 [ Improving Your Website Without a Redesign: Content Audit, Usability Testing & More](https://website101podcast.com/episodes/season-04/episode-6/how-to-improve-your-website-without-doing-a-full-redesign/) - 7 [ Content Marketing](https://website101podcast.com/episodes/season-04/episode-7/content-marketing/) - 8 [ Alternatives to Google Analytics](https://website101podcast.com/episodes/season-04/episode-8/alternatives-to-google-analytics/) - Bonus[ Listener Survey - What Topics do you Want to Hear More of?](https://website101podcast.com/episodes/season-04/episode-/listener-survey-what-topics-do-you-want-to-hear-more-of/) - 9 [ Website Optimization and Speed](https://website101podcast.com/episodes/season-04/episode-9/website-optimization-and-speed/) - 10 [ Exploring WordPress Website Development with Laura Bailey](https://website101podcast.com/episodes/season-04/episode-10/wordpress/) - 11 [ From Novice to Bootcamp Instructor](https://website101podcast.com/episodes/season-04/episode-11/from-novice-to-bootcamp-instructor/) - 12 [ Pimp Your Typography](https://website101podcast.com/episodes/season-04/episode-12/pimp-your-typography/) ### 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\]\]>