173 – Five Tips for Pimping Out your Web Typography with Oliver Schöndorfer

Josh 0:00
Hey friends before we dive into this episode, I wanted to make sure you knew I just launched a brand new challenge on how to boost your web design revenue. This is a completely free 10 day challenge, you can get access to it right now at Josh hall.co/challenge. Every day for 10 days, I’ll send you a quick video with an actionable tip that you can apply to your website in your business immediately. That’s going to help you boost your web design revenue. So if you would like that, get it right now at Josh hall.co/challenge.

Josh 0:46
Hey, friends, welcome in to podcast episode 173. We in this episode, we’re going to talk about something that we really have not talked about much on the podcast, and that is typography. And my guest in this episode, Oliver Schondorfer his help, I got that pretty close all over your Austrian What do you expect from a simple Columbus, Ohio boy tried my best with that last name. Hopefully I got it close. But anyway, Oliver is a typography enthusiast. He actually Gosh, what an awesome guy super funny too. He has a brand called pimp my type.com. I highly recommend after this episode that you visit his website and subscribe to his YouTube channel because he makes typography fun.

Josh 1:34
In this episode, we’re going to dish out some tips for you to get better typography chops for all of your website builds. And this is really interesting, because you might think, How can a couple of dudes talk about typography for over an hour? Well, it’s the Josh Hall Web Design Show. As you know, we can go really deep into something and I, I’ll be honest, I feel like we just scratched the surface on typography here.

Josh 2:00
So really, really excited to hear what you think about this episode and to hear how Oliver’s thoughts and insights and practices for picking out really good typography will help you as well. Because typography is not just words on a screen. I mean, they are super important. They are the conversion tool images. And graphics, as you’ll hear in this episode will definitely help get gain interest, but word sell. I don’t know who came up with that. But I heard it a while ago. And I totally agree. And I found it to be true. So in this episode, you’re going to glean so many insights on how to do better web typography.

Josh 2:36
And before we dive in, before Oliver takes over here, I do want to say Oliver is actually doing a training in my coaching community, my web design club on this. So we tried the best we could in this episode to talk about things that are typically a little more visual. But if you do want to see this in a more visual manner, and you would like to actually visualize this and have some more resources, you can join my web design club, my coaching community, you go to Josh hall.co/coaching, there’ll be a special offer there for you if you’d like to join, and you can hear from all of her and see his presentation. And you’ll also get coaching, private coaching with me and it’ll be welcomed into this amazing web design community that’s just blossoming right now. I’d love to help you in your web design journey as well. And without further ado, here is all of our shown differ. And we are going to talk about tips for printing out your web typography.

Josh 3:37
Oliver, welcome onto the podcast man. What a pleasure to have you on.

Oliver 3:42
It’s an honor and a pleasure to be your guest to us. Thanks for inviting me.

Josh 3:46
I’m really super pumped about this topic because I don’t think we’ve talked really about typography at all on the podcast so far. And I we were just talking. I know, right? I mean, I think I know, I know, I just hurt your feelings which you are a funny dude, man, I love your YouTube channel. I’m gonna bring that up throughout this talk, I definitely recommend one checking you out. Because, look, when it comes to design and creativity, some of this can be a little boring if type isn’t your favorite thing. But I know we’re gonna make this fun. And I think that’s what I like about your style. And why I wanted to bring you on is you have such a fun, energetic charisma style.

Josh 4:22
And typography is important. And like I said, we really haven’t talked about it too much. I think mainly because it’s visual, it’s more visual. But by golly, I know we’ll do our best to talk about this in audio format and obviously have a ton of resources. So before we dive into it, man, do you want to let everybody know first off where you’re based out of? And when people ask you do ask you what you do. What do you tell them?

Oliver 4:46
Yeah, I’m from Austria, south of Germany, middle of Europe. And I actually describe myself as a user interface designer and typographer. And yeah, people don’t know what I do when I say that. So That’s okay.

Josh 5:02
Like, yeah, I was gonna say you’re talking to, you know, your grandma or your aunt or something. Maybe you say, what do you what do you tell them? Do you just say I do graphic design or something?

Oliver 5:13
Yes, graphic design mostly covers it. And it’s also my background from an educational point of view. So I went to design school. And but before that I was a, let’s say, web designer, the webmaster back in 2002, or something when I started or 2000, year 2000, I started doing stuff on the internet. So oh, that’s more than 20 years now. Cool. But that that’s, that’s what what, where I originated with my design career, so to say and yeah,

Josh 5:44
Yeah, give us a little more backstory on your design career, then. So did you start with like, what like print? Or did you start with web back then? You know, I because the cool thing about typography is that it is important for both, of course, any type of graphic design and print. And that was my background. I did. I did print design, t shirt design. And then I did web. And typography was right there, through all of it. So what yeah, what did that look like for you to do? You start out with just print and then work your way into web or what that looks like?

Oliver 6:15
Yeah, my case it was I learned about HTML, not CSS, because that wasn’t such a thing back then in 2000, at least not in Austria, and did my own first Star Trek fan page. It’s always the fan pages.

Josh 6:35
A lot of journeys start, isn’t it? Like I’m a fan page, or I got started when MySpace was really popular. So it was always MySpace pages.

Oliver 6:43
Yeah, yeah. So I did, I did it myself. And it was super exciting to us to create stuff, put this out on the internet, it was just amazing to see how people basically could visit it. But nobody visited this. Of course, yeah. Because it wasn’t my Star Trek homepage. And yeah, these were the beginnings of it. So I kind of figured out Yeah, about designing stuff. That sounds interesting. But then I didn’t want to the to go to, let’s say, to a technical high school where you could learn graphic design, when you’re 14 in Austria, 14 years old in Austria, because I had a wrong image of this job. I just thought graphic design is drawing.

Oliver 7:28
And okay, yeah. And I wasn’t bad drawing, but wasn’t just bored me to draw apples and oranges. And I said, No, I don’t want to do this for four years, and then continue with it my life. I just had imagined this, this profession, totally wrong. But after some time, I figured out it would be the best to Yeah, just do stuff for the web. And then I said, why not continue with doing design stuff. And so I went to design school, and they were mostly focused on print. But I came with this web back ground from my own enthusiasm and interest. And I kind of Yeah, mixed this all together than in my, in my design school years.

Josh 8:17
Well, I think that’s really powerful when you can mix web and the print side of typography, because a lot of the principles are the same. But of course, on web, there’s responsive design. So suddenly, a header on desktop is gonna need to be usually shifted or tweaked for mobile. And then when it comes to other heading and typography and body fonts, it’s all going to be a little bit different than just a static image like you would find with print and graphic design.

Josh 8:44
Now, before we went live, you were talking a little bit about how a lot of people tend to overlook typography. And this was actually my my case, I, I didn’t I didn’t take typography too seriously until later on. And I wish I would have, I always tended to design elements and really go wild on graphics and color schemes. And then I would just kind of, boom, plop a paragraph of text in there. So can you tell us like, why is typography something that we really should view as something really important?

Oliver 9:16
Yeah, maybe a bit about my background here as well, because it was the same for me. When I did websites and stuff before I went to design school, you just okay. There are some typefaces, you can choose them in Photoshop or word or whatever. And then you Yeah, it looks differently. Okay, nice. But the thing is, I didn’t understand why I should use what type is just picked them because I liked and what they were interesting or whatever. I didn’t pay much attention to it. And then I had the great opportunity to learn about this from my typography teacher from Italy, a Venetian called Giovanni de Facto it’s just his name alone. It’s just like music Isn’t it? And

Josh 10:01
Sounded fun to say I’m definitely not gonna try to say it.

Oliver 10:06
Yeah, let’s see my last name. Have fun with that.

Josh 10:09
But yeah, we’ll see how the intro goes for this one, I may just may just call you, Oliver s. So we’ll see how it goes.

Oliver 10:15
Yes, yes. challenge everybody from states that are English, but it’s okay. So and he just told us about why typography is important and showed it to us. And back then I learned so much basic principles that I was shocked how many missed mistakes I made in my earlier designs, and how easily they could be fixed. And I also was shocked why so many professional products or printed layouts and stuff, do not pay that much attention to typography. Because I learned this after one semester of design school one semester, some weeks, and I had a basic understanding of this. But why don’t the professionals know about it. And this shocked me.

Oliver 10:57
And there was one moment when I learned that you should space out all caps letters. And because it makes them more even word image to to change the gaps between the letters because all caps letters are made to be combined with lowercase letters. And this is why in some situations, it will look weird. So tracking in CSS terms, adding some letter spacing for capital letters is very helpful to make it more even and, and harmonious. And after knowing that I stepped into the shower, and I grabbed a shampoo bottle. And there it struck me because the letters were not spaced out properly. And I was just shocked how quickly how couldn’t they see it? And after that, I decided yeah, basically I should talk about this. And then I started with talks and, and so on, and start to educate people how they can boost the visual languages. Oh, yeah. The visual products.

Josh 11:56
Yeah, yeah. You said you said a term in there. That’s really interesting. And that is a word image. And yeah, you just gave a great practical example of, you know, learning something and seeing it on a bottle. I used to do this all the time, when like my wife and I would go to the mall or something, I would just look at posters because I would, if she’d be like shopping for something, I’d be bored. And I just be looking around and and eventually I started utilizing that time to look at good design and learn from different typography. And I actually really enjoyed that. I still do that today. I really enjoy that.

Josh 12:27
But there is often like a breakthrough moment when you look at type differently when you think about it like a word image. And I’m trying to remember, I had a buddy who worked at a graphic design shop for a little while. And I just saw their portfolio. And it was all words, it was all letters. But it looked amazing. And it was just the way they combined the different caps and lowercase and body fonts and structure of the letters. It all made this incredible image. It was all letters. It was all typography. So it is interesting. It’s fair to say that. I mean, it is a I guess typography and letters. I mean it does and can make an image can it like it really makes a big impact on how we view something.

Oliver 13:14
Yeah, yeah. There’s there’s a typographer from the state’s Jason Pimental. Who said, typography is like the word. I actually forgot his quote right now. Whatever. The thing is, that photography is more or less the clothes your words wear. Maybe he said this, maybe he didn’t? Well, that’s fine. Find it, definitely. But the thing is, you always see something first before you read it. And it always evokes a feeling or an atmosphere or something you cannot not pick a proper or not proper font, it will work or it won’t. And this is the magic power behind typography. Because I don’t know any website or any app or any thing in visual communication or graphic design that can work without text, except some signage, pictograms and stuff. But text is such an important part of everything. And people pay a lot of attention to the images, they pay a lot of attention to colors to layout. But then typography outlets, that’s right. Yes. Let’s use Helvetica or Open Sans. It’s good. Yeah, why not? Right. Yeah.

Josh 14:29
Yeah. And that’s where I was, it was it was an afterthought. And I heard a quote a while back that I’ve, I’ve talked about on the podcast before, I’d love to hear your thoughts on this all over. And the quote is, images engage, but words sell. How do you how do you feel about that? I mean, because I totally feel that that’s correct. And this is really important because you can get a lot of traffic and get some engagement, but when it comes to like selling a product or a service, it’s the typography that people are going to move forward with Do you Do you back that statement up as an images engage word sell?

Font follows feeling and the other one is form follows function. – Oliver

Oliver 15:05
Yeah, I totally get this because images Yeah, to draw your attention, but then the content itself it, like seduces you not, or the image seduces you. And then the words themselves, they might trigger that rational point. I guess I, I would agree with that. But as we said, the type itself is an image. And I have two basic principles I always talk about and one is font follows feeling and the other one is form follows function. And before that, as ad form follows feeling is you have to make me care. Why should I want to read it? It should look appealing. Interesting, it should pull me in? Why should I want to read that. And this is so important, because the feeling is before the functionality, because if I don’t care if I don’t feel for it, I won’t. I don’t care if I can read it, if it’s not functional, if it’s not working, it’s not set properly.

Oliver 16:09
So these are basically these two layers where you have to connect with something. And I think in typography, everything is combined because content itself, the words themselves and the shape are one, you cannot put them apart, you cannot not read it. And you cannot say, Oh, this looks or you cannot, let’s say move away from the idea that this think it’s neutral. Type is never neutral. That’s the quote from Jason fundamental. Yes.

Josh 16:38
I knew we get there. Either we looked it up or it would come to you.

Oliver 16:42
Yeah. So type is never neutral. It you always make a decision, you always set things up.

Josh 16:49
That’s a good point. I imagine it either pulls you in or pushes you away, depending on how its laid out. I love that. I love that idea. So font follows feeling and then follows function. Or maybe I didn’t say that exactly correct. Let’s dive into feelings. How do we choose fonts that fit with the right feeling, whether it’s our site as a web designer, or whether it’s our client sites? And, you know, there’s brand styles and guidelines like how do we find fonts that echo the brand? Do you like? Do we have to think about the customer? And who’s going to be looking at the site to decide what type of fonts we choose? What are some of your tips for getting the right font for the right feeling?

Oliver 17:29
Yeah, the thing with font follows feeling we have this broad category categories of typefaces that everybody or most people are familiar with. And the thing with categories is, you want to categorize things to make a decision. And all system is perfect. But these basic categories, most people know, and most foundries or websites like Google Fonts, Adobe fonts, MyFonts, whatever they use these categorizations that you can make up your mind about what typeface should work. And there are six broad categories like center, if most of them know this is the fonts without the serif sans Sans. Then there’s serif sans the sense just serif. And then you have slab serif script, handwritten and display forms.

Oliver 18:21
So these are different categories. And if we go through them one by one and imagine how they might look at sans serif typeface, very popular one might be Helvetica or Arial, which is more or less the same. But yeah. So Helvetica or Arial, or Open Sans, these are all Sans Serif fonts, Roboto. These are considered to be more modern, most people might say, these fonts are old, they are modern, they look neutral, open, whatever. The details always make this up.

Oliver 18:55
So you always want to consider the details of structure of the typeface. It’s not just about if it has serif or not, but they are considered to be the typefaces for the of the future. And reason for that is because in history, this was the Yeah, it was. It’s the point where we are now because Serif fonts before that came before that this was the more or less traditional thing we saw, you can imagine is like Times New Roman, Georgia, these are serif typefaces with these tiny little feet or strokes at the end of the letters,

Josh 19:33
Right. Yeah, yeah. When I got into typography and design I, I started getting into in like 2010 ish. And it seemed to be I think I got into design in the interesting time because it was almost the end of the most popular fonts being the serif fonts like Times New Roman and Georgia like you just said, Oliver. The ones that have feet or kind of have like the maybe not pointy edges, but some sort of ending on all The ends of the letters and then it was like, boom, Helvetica Arial or letters ended straight, or like very flat, the curves were minimal. Is that fair to say, as far as some of the differences and how quote unquote modern sans serif look?

Oliver 20:14
Yeah, this was more or less the trend we entered in the 2010 or late 2000s. Were, for example, Google, Facebook, Spotify, Airbnb, everybody, every every everybody remade the logo, their brand made us whole less. So less geometric, sensory, all of it. And everything looked the same. It was just Yeah, everything flat, clean, replaceable, replaceable. And this is the problem I have with sensor. If it’s all let’s, let’s see, let’s say the positive parts, it can be very minimalistic clean, so on, this can evoke this feeling. But on the other end, and it could be very restrained, technical, dry, and also replaceable. Because you see everywhere. If you use something in Helvetica, or Open Sans, forget about being unique or interesting or something it’s just looking like everybody else

Josh 21:13
And is that because it’s just commonplace and just, you know, typical now for a lot of folks to use, or do a lot of Sam cera fonts tend to look like each other.

Oliver 21:25
No, I think it’s it’s, it’s more because these typefaces are super popular, okay. And it came more or less with a trend. This is my opinion came off lists with the trend from Google Roboto, and many and material design. And now, San Francisco that I praise from Apple, these are all more or less this grotesque, new, grotesque, Helvetica light phones optimized for screen though. And there also was a time when Helvetica was on Necco S, which was a dark, dark, dark time, because Helvetica is font from the 50s and not from the 2015. From the 1980s. It was not optimized for screen. And if you did not have a Retina display, it was not very legible at smaller sizes. It was just a horrible design decision. Horrible, horrible, horrible, but things get better after that.

Josh 22:18
Come on over tell me how you really feel about we got a few how you get it. You really tell me how you feel about that?

Oliver 22:25
You Yeah, sure.

Josh 22:27
No, I suppose the passion man I sense it.

Oliver 22:31
Yeah, no, the thing is, when you pay attention to something like typography, you’re cursed. You’re just cursed. Because you see bed type everywhere.

Josh 22:41
I think that is such a big, that’s a good point. Real quick before you move on to that you do when you look at type, and you start to understand it. And it just, you know, you can do that with websites, too. Once you become a web designer, you look at every website and you’re picking it apart. Same thing with type. It’s like, oh, man, when I see bad type now, I just I can’t get over. I’m like, I tell my wife, my babe, look at this. This is just this terrible. What? I’m sure you do that. Hundreds of times a day. It sounds like

Oliver 23:10
Yeah, it’s like these PTSD moments. Right? You’re just yeah, you just start shaking and lay on the ground. And and yeah, it’s horrible. So. But the thing with typography is it’s everywhere. And after some time, you kind of become immune or not immune. You don’t care that much. But I still care because it’s like wasted potential. This is what really breaks my heart. It’s wasted potential you have so such a great brand, such a great idea or such a great message. Why don’t you just give it the shape it deserves to live its full potential. And in many cases, people just don’t know better. And when I come back to Open Sans, Open Sans is a good typeface. Really, honestly, it’s a good typeface. Also lotto.

Josh 24:07
Because that’s what I have on my website open. I take I figured you wouldn’t have reached out if I had terrible typography unless you wanted to learn me some No.

Oliver 24:17
Yeah, sure. After this podcast, you will change it to something else? I guess. So but

Josh 24:24
Well, I was curious because I am from the school again of Yeah. Sancerre. The typical fonts like Arial Open Sans all the ones you’ve mentioned so far. Yeah, I’m not against by any means. Sarah fonts. However, although I just I think I tend to gravitate towards Sans Serif fonts. And that might just be because of my, my background. And I just tend to maybe that’s just what I was used to. But once it is interesting, I think correct me if I’m wrong, most books are all still printed as Saira fonts, right? Aren’t they mostly all times the Roman or, or Georgia?

Oliver 25:03
Is very popular from from from the Century got century Gothic essentially. No. Yeah, that’s That’s correct. And that’s This is also the reason sans serif was it. The thing is you have to make up your mind for who this project or product is always considered this. And in your case, it’s about web design and web design might be considered to be more technical, modern. So I think sensory fits there. But there are a lot of different kinds of sensors. So imagine Futura, for example, of Futura in German, which is an old typeface basically, it’s almost 100 years old from 1920s. So it’s really old. And but it still looks very modern, because it’s very geometric. It has some big disadvantages when it comes to long reading text. Because it’s the letter shapes are so similar that it’s harder to to make word shapes more distinct, but it’s a nice typeface. It’s a great typeface if you want to make this Yeah, look more than or something like Well, it’s

Josh 26:14
Kind of ironic because it sounds like it would you know, for Tierra would be a future font, but it’s actually sounds like it’s one of the oldest that might still be hanging around. That’s interesting.

Oliver 26:22
Yeah. Yeah. But there are some updated versions as well. And monotype, who are not the monotype is like Monopoly type, because they own everything. Now everything. Yeah. But But monotype made a new version of Futura. And this one is is very cool. I think it’s called Futura now, and also updated it very, very carefully. But coming back to this idea of serifs and censors, yeah, serif typefaces might be considered more traditional because they are rooted steeper in history. And we are familiar with them from print more.

Oliver 27:01
And the reason for them being used in books more is because they are great typefaces on screens on continue or continue on computer screens that are very legible as Serif fonts, like Georgia, which was designed for low resolution back in 1993. Matthew Carter, the one and only, and this is a great typeface for screen. And in nowadays high resolution or high density screens, it doesn’t really matter anymore. On a frame. Because we have such dense displays, we can use a serif typeface the same as we could a sans serif typeface. This also might be some Badgett baggage from the past where they said use a simpler typeface on screen or in web design, just to Yeah, to provide a good experience for the user.

Josh 27:49
So going back to the initial thought of getting the right feeling. It sounds like the common sense approach to this with you know, who is this for? Who are the clients? What, how much reading? Are they going to do on the site? How much content as far as actual words are going to be on this? Is it going to be a long form style blog post type of site? I imagine those all factor into getting the right feeling right. When you look at these, these font selection? Yeah. And what about mixing the two? How do you feel about and this is what I do often. And I’m seeing a lot of brands do this, where they may have a saref header, and then a sans serif body font, or vice versa, a sans serif header, and then a serif body font. How do you feel about that? Do you have any tips or recommendations or feelings towards mixing the two?

Oliver 28:36
Yeah, of course, the thing is, you mixing typefaces is is always very interesting. It’s like me, like with mixing clothes, or mixing colors. If you want to emphasize something or change something, you have a different kind of vibe for every for every kind of texts, because there are basically three kinds of texts. There’s politics, like you said, this long reading format text, if you really have a blog post or news website, where you have a lot of text where you want people to consume a lot of texts. This is politics.

Oliver 29:08
And then you have your display text, which doesn’t come from computer display, it comes from display sizes, which means it should be larger than 24, or in the box pixels or 2024. It’s not that exact, but things like headings, titles, things that can be larger there. And then you have functional text, which is where important for user interface and web design for navigational elements for captions for things that are very small, thinking about the tab bar in iOS or labels, buttons, these kinds of stuff that usually have to be very small, they have very little space. And these three kinds of texts demand different typefaces that can provide a good experience for this. And in the case where you mix it for a heading actually, I think your fonts are not loaded. You have got them in your heading, but it shows up like Helvetica and yeah, and

Josh 30:07
I’ll double check that. Yeah, yeah, it’s yeah, it’s it’s so it’s actually through my, I have Gotham for my heading fonts. But I’ve got that through. I’ve got that coded in there. So I might I might double check that if that’s not pulling up for you. But yeah, yeah. I can’t remember but Helvetica as the back. Well, I’m so sorry, Oliver, you’re probably upset with me now. I’ll change that. They’ll make that Open Sans. How’s that sound?

Oliver 30:33
Yeah, just yeah, just put it in my heart and, and kill me? No. Well, no, don’t make it. Oh. The thing is, you should. When you mix these different kinds of texts, you can always pick back to these categories. A display typeface, this is in Google fonts. And if you have this option, display typeface, display type things, mostly. Anything that doesn’t fit in the other categories. Let’s okay in there. And display typefaces are made to be set at larger sizes. They can look more interesting. They can be very female, like a very, let’s say western style, John Wayne saloon she signage, sir. I’m fond or something very goofy, something handwritten, that looks handwritten or scripted or something. This could be a category on its own. But it’s all only probably usable for display purposes, for larger sizes for short text.

Josh 31:39
And would that be for like, sort of real quick? Would that be good for like quotes? Or like an accent type of tagline? You know, just stuff that’s more spring? Yeah, there.

Oliver 31:47
Yeah, sure. At this also, yeah, it’s like a bit salt in the soup as a German saying yes. But a pinch of salt in your design, maybe. And the, to make things look interesting. And to keep the reader engaged. So when you have a display typeface, you can go a bit wild if you want. So you can pick something that fits the theme you want. Only if it’s short and large. This is the condition, display typeface short and large. If you use something very striking for politics, that’s a better idea. But it takes should always be more or less calm, clean, boring, just boring. Nobody should care about the type. I care. You care. Everybody now cares, I’m sure. But nobody should care about the body takes they should just, it should just be easy and inviting to read. But for the headings, and for the pool quotes and stuff, you can make something interesting, that draws people in. And that’s more interesting. Sure.

Josh 32:51
That’s a great, a great overview. I love that. Yeah, it makes a lot of sense.

Oliver 32:57
And, and for the functional text and this stuff, you have to find something that’s yeah, sensor is mostly used in user interfaces, user interfaces are mostly functional text, because they have smaller sizes are 1210 12 pixels, which is tiny. So when you consider 16 to 20 pixels, size for body text, compared to this for your captions, or for your what a snack bar, oh, another material design, word, whatever. If you if you have this, this, this component UI components, you have little space and you want your text to be readable at small sizes. Also, you wanted to be clear, maybe if name stereo of tokens in their specific tokens like password, maybe you really want to be sure that this is a capital I and not a lowercase L Ah, that’s a good point. It’s really good. Or this is an O and not a zero.

Oliver 33:55
So these are some situations where it’s critical to be distinct, a monospaced typeface that would be really smart in my Password Manager user monospace for these situations. But there are also some names of tokens and stuff where you really have to make things clear and stand out. And this then I always do a test and I call this the i l one test. You use, as I said, a capital I a lowercase L and the figure one. And if all these letters look different, it’s a good choice. In Serif fonts, they will because the capital I will have a serif on top and on the bottom, and the lowercase L we only have a serif or a large serif on the bottom, and the one will also look different. But if you take a look at Gill Sans, which you might familiar with would be familiar with i L. These three shapes are all the same. They’re all long rectangles, and it’s just horrible because this is not very distinct. Yeah,

Josh 34:55
I never thought about typography and the importance of that was passwords because yeah, Some, some letters and numbers do conflict with each other Now, overall are saref fonts better for passwords just because of the legibility rather than a sans serif, or do both tend to work.

Oliver 35:16
They might work but Serif fonts, I go for a monospaced font, because they are mostly made for being super legible and clear everything character uses up the same space. So it’s also easier to read in these situations. So I’d go for a monospace font, but also we have a category that’s called the slab serif font. And slab Serifs are like these, like Rockwell color, and Ron Kind of fonts, where they have some exaggerated serifs.

Oliver 35:45
In history, they came before the censors, because this is very interesting, because we had this serif typefaces, then printing became a thing. And we got some big printing machines with with with with offset printing. And it was easier to create advertising. And people wanted text to be big. And so they made them interesting. They all these display typefaces came in the 1800s. And then they blew up everything. And to make things interesting, they made excetera exaggerated the service and make this made the stroke sturdier and everything. And then they said, why not just leave the service off? Okay, stop saying the word sensor. It’s so

Josh 36:31
Interesting. That was?

Oliver 36:33
Yeah, yeah, it

Josh 36:34
It is kind of funny. It’s like there’s two teams. It’s like, there’s this era of team and the san serif. And sometimes I play nicely together and sometimes are at war with each other. Now, I would now that we’re getting tactical, which I think we’ve really laid a good foundation of why this is important how we perceive typography. And we talked a little bit about the, you know, the, the feeling versus the functionality, I’d like to dive into functionality now with, particularly for web design.

Josh 36:59
I think you I never really thought about it like this, Oliver. But you really laid out a great set of categories for typography and websites. Because we do, I guess in my mind, we have four main ones if I would, if I were to teach this, I would say we have four main ones being that we have headers, we have the body text, we have I guess you mentioned like display text, which would be menu items, buttons, call to actions maybe. And then we would have, I guess I would call them like, I don’t know, ancillary or featured type of text for quotes and things like that. I think those are probably the four main areas of texts that I use.

Josh 37:36
So let’s hope it helps hone in on those. Let’s talk about body font real quick, because this is a biggie, a lot of people I see a lot of designers who early on, who tend to use one font, and then it’s the same for the header. And it’s the same for the body font. But the problem with that sometimes is if they don’t adjust the boldness, or the the letter spacing, or the line height, the line height is a big one and all just kind of bull just kind of it’s like, I don’t know, it’s like you just had like a big blob of paint, and you just kind of just put put it right there on the page. And you can’t really make it out too much. So what are some tips for body fonts? In particular? Do you recommend having a little more line height and spacing in between lines? And then also, you know, extra the the spacing between the letters and the kerning? What are some tips on that?

Oliver 38:23
Yeah, so this is basically now typography. Because typography is setting texts with prefabricated letters. And in our case, they’re prefabricated by the computer. But we don’t write this stuff ourselves. And after picking a proper typeface for these kinds of texts, we have to set it well. And as you said, when you have a headline, and you set it larger, it most likely there are certain kinds of their own.

Oliver 38:53
There are typefaces that are made for that. And they often have this word display after it. And or large or something like this, because they tend to have more details in there. They tend to be a bit narrower, and the spacing after the characters is a bit smaller. So it creates it doesn’t fall apart that much. Because body text fonts, most mostly need a bit more space or if it’s made for body text. It doesn’t need any space at all. letter spacing. It should say it should create a harmonious line or even typographic gray typographic color. Not not color but the appearance of grace. Yeah. And and when it comes to line height, there’s this holy trinity of typography. Yes.

Josh 39:47
All right, hit me with it. Yes, we are. Yeah, hit me with the typography Holy Trinity. Let’s do it. Yeah,

Oliver 39:55
Okay. Jesus came up with it. No, just joking. So

Josh 39:59
I can’t From the original scrolls, that’s, that’s that’s how those typography came. So let’s hear it.

Oliver 40:06
Yeah, sure it came from there. It’s it’s that line length, the line height and the font size. And these all work together. If you adjust one, you have to adjust the other. So starting with your body text, set your text large enough, and what means large enough, you should start with the browser defaults, one m, and one M is mostly calculated to 16 pixels. But then when it comes to screens and larger desktop screens, you could bump up the font size, the larger the screen is, because you can assume that a person is sitting further away from a screen that has 27 inch, it’s not that close to your body, compared to a phone, a phone, you hold pretty close to your body, maybe one and a half feet or something. Not sure if this is correct, because I have the metric system. I’m just in.

Josh 40:56
Oh, yeah, no, I think you’re about right. Yeah, probably about a foot and a half. Yeah. Yeah, yeah. Sounds about right on our side. So across the prom, that sounds about right.

Oliver 41:05
50 centimeters. There it is, gotcha. Whatever. So you, if you hold things closer to your body, you can make them slightly smaller. If they’re further away, you should make them larger. This also means that you could just make a media query and bump up the font size after certain break point or certain screen with, we assume or you can make this fluid there are some techniques about this. How to do this in CSS and with viewport units and clap and stuff. Look this up. But but the thing is, you should consider increasing the font size, the larger the screen is, because we can assume the viewer is further away from it. And maybe slightly, slightly 10% decrease it on a phone or something. But never, never, never, never, never ever go below 14 pixels. No, never. No, no, no, don’t do that.

Josh 42:01
Great rule of thumb.

Oliver 42:03
Small text, if it’s just some. If it’s a little text, okay, but if it’s if it’s body text, really heavy reading text, set it in a size that’s appropriate. And when it comes now to the line length, there’s this idea of an ideal line. So the idea length of line, people say it’s 60 to 80 characters. Recently, I read a study about this or a meta study about this, that this is not backed by science in any way. It’s more or less the convention we have a column in the book is mostly 60 to 80 characters wide. And then we switch to the next line to the next slide.

Josh 42:41
Which would equate to I like isn’t that between like 10 or 15 words or so? Is that right? On average?

Oliver 42:48
Yeah, maybe? It depends on the language in German, we have so long words. That’s one wow,

Josh 42:54
That’s true. Yeah. I didn’t even think about that. That’s a good point. Yeah. I guess you can either.

Oliver 43:00
English. Yeah. I’m not sure about the words. Yeah.

Josh 43:05
So what was interesting, but this is really interesting, Oliver, because in my so I have a design course that touches on typography, I mean, your taky do what you do is typography. So I would say if anyone wants to go further with this, go go to your YouTube channel and stuff because I just cover the basics. But that is a biggie. And one problem that I used to do with a lot of my sites early on when I didn’t really care about typography is I would just put a huge paragraph from end to end on a screen.

Josh 43:33
And there would be in English, probably 30 words across you and I didn’t. I know, right, I just hurt you again. And I probably didn’t mean help me. So you just like don’t have double heart attack. So we’re done isolated. So you know, it was literally like, for a while. And then if it wasn’t responsive, a bigger screen, it might stretch out even further, which is the importance of a max width on a module or an area. And then an English having that break from maybe 1012 words or so. And then it breaks down to the next line. Because that is so much more readable than these long, wide paragraphs.

Josh 44:15
And I didn’t really think about how terribly hard that is to read until I actually like read it myself. Because when you’re you’re used to and I guess if I could give a rule of thumb to everyone listening right now, when it comes to a lot of text on your website, is think about you reading a book, if you’ve got like three paragraphs for a blog post or something for a page. Think about like a book. How many words are you going to read before you’re used to going down to the next line and put it like down on your website, it really does have to lend itself to a similar reading pattern because it can be pretty detrimental to call to action to engagement. I mean, this is the importance of typography that we’re into now.

Oliver 44:56
Sure, sure. Yeah. About the 60 to 80 characters This is just like everything in typography. These are guidelines are no strict rules, right? It’s a visual visual discipline. And, but they are the most rules or guidelines in any visual field when it comes to graphic design. But nevertheless, the 60 to 80 characters, maybe we’re familiar with them. They are not backed by science or something. But even if we’re familiar with them, why not? Yeah. So you can add this max width. And you should, and you did, as you described, this is, this is, yeah, it’s intimidating to have a very long line on a wide screen. It’s intimidating, don’t want to read this. Just visit Wikipedia. It doesn’t have a max width. It’s just horrible. If you check out the typography article on Wikipedia, on your large 20k 200 inch display, whatever. You you have an endless line you

Josh 45:59
I’m doing it. I’m doing it right now. And I’m regretting this decision. It’s like, yeah, it just doesn’t. Oh, I don’t know it’s on this layout. But oh, my gosh. So there’s everyone’s test to do right now. If you’re by a computer, and you can check this out, go to Wikipedia and just drag your browser and the text will never stop. It will just it will no go go.

Oliver 46:24
Yeah, it’s like this fluid layout from the early 2000s.

Josh 46:27
Yeah. So that’s it. That’s a couple of great principals for body fonts. They’re interesting that you said a lot of the fonts that were made for audience body fonts, whether they’re a sans serif, or serif tend to look good kind of as is out of the box. And of course, you can adjust line height. And let me let’s let’s on line height real quick, because yeah, I remember, like I mentioned, I started with graphic design. And I actually was a band, I was in a band, I was a drummer for a rock band. And I first started designing our T shirts and our CDR work. And I made the CDR work look pretty good. But when it came to the words, that was the problem, it was it was nearly unreadable. Because the fonts are so small. And the kerning wasn’t great in the the spacing in between the lines of the letters. That was a problem. And I realized that a little bit of space line height is actually really good to help help it be more readable. Any tips on that? In particular, if you have a lot of text that is in the body?

Oliver 47:31
Yeah, sure. First, you have to set your max width, this is the first step you are the font size, we set the font size to one m or starting there, maybe a larger but one m, and then we continue with the max width, let’s say it’s 60 characters, or 65 characters, there is a CSS unit, that’s the character unit. Did you know that?

Josh 47:54
No, I didn’t know that.

Oliver 47:55
It you can say max width 64, CH or something, okay, this will count the width of the or it will take the width of the zero in account and, and use this as a base and then use it. But you could also roughly say that half an M is one character most Okay. So 34 amps or something is your max width. And then the larger your lines, the larger your line height should be, which means the browser default is I guess, 1.3, or something from the user agent. And this is most likely too little for your for your column of text if it’s full width. So

Josh 48:38
Feel like that’s already standard, the 1.2 or 1.3 M’s that seems to be standard out of the box for most themes.

Oliver 48:45
It’s the relative unit based on the relative size of the typeface, it’s not fixed unit, if you could set it in relative units. And this 1.2 is most likely or 1.3 is most likely too small, for a larger line, because you will start to read the same line over and over again, if it’s more than three lines, because you don’t lose your orientation. But if it’s 10 lines in one paragraph, then you will start to read the same line over and over again. Because the way your eye has to travel from the end sentence or from one line to the beginning of the other is long, so you need more direction, you need a bit more space between that.

Oliver 49:30
And so I would recommend something like 1.5 1.6 Even always, depending on the typeface, how it looks and you have to try this out for your max width. Okay, smaller your column gets that smaller your line height can become this oh interesting could go from 1.617 or whatever it is for your full width column to 1.3. Again, maybe a 1.4 Because the way from the end of one line isn’t that long anymore. You have it column.

Josh 50:00
Yeah, interesting. Wow, that’s fascinating. I know this is big, this would be ideal to see visually, but I think you’re doing a good job of explaining it. Yeah, well, that’s why you got your YouTube channel. Yeah, I think everyone’s gonna be checking out your YouTube because a lot of the stuff you talked about so far, I’ve seen in a couple of your videos that you actually literally, you know, show in video form.

Josh 50:20
So great tips on body font, real quick heading fonts and headers. I’ve seen so much debate on this as far as how big they should be. And of course, this is all relative, like you said, there’s really no right or wrong, there’s preferences, there’s best practices, I think, just from studies and conversion, I mean, it should be pretty obvious if your fonts and typography are terrible on your site, you’re probably not getting much conversion.

Josh 50:43
So if your conversions are going up, because of some of these things you’re implementing, I’d say that’s a good job done, it’s probably working with headers. How, again, relative but I’ve learned that I try not to put too many words in a heading, because then it becomes a really hard paragraph to read. Or like, really like something that early on, I used to make headings that were basically two sentences mixed together. And then suddenly, it was like a big, bold caps. Paragraph, what are your tips for headings to, you know, give us some basic principles on headings to make them engaging. And also kind of like a text image, like you said,

Oliver 51:24
Yeah, this, the headings, basically, you can use, as I said before, a display form, or something that fits the theme, or the idea of your website, it could also be something handwritten, or a script font, or something that conveys this personality, if you if it fits the topic and the audience, because you said it at a larger size, and it’s less text, a little text, just little text. And this will work, then the thing is, you should always consider a proper hierarchy of sizes, people should understand and semantic semantics and SEO, force you to do this anyway, this is about it.

Oliver 52:06
And it’s something that everybody should do anyway, because it’s logical and makes sense and guides people. But if you want people to understand how your website is structured, or your offering, or the things you that the your client provides, or whatever you need this for, you have to have some proper hierarchies. And if I take a look, and you’re sad, maybe your audience might be familiar with it on Josh hall.co, you make this very clear with your desktop, that’s that’s the good, the good, the dude and so on the results.

Oliver 52:42
So basically, you can you see that this is the hierarchies there, your your, your different headings, you just you understand it. And when it comes to to a marketing site or something like a landing page, what your homepage basically is, it’s different than a blog page. Because you might have longer h1 headings because of search engine optimization, of course.

Josh 53:11
And in s like my podcast pages like this, this podcast episode, I’m not sure what number this will be yet, but the heading of this will be a fairly long h1. It’ll be a long heading, because it is a Yeah, it’s a podcast title episode. Yeah.

Oliver 53:25
Yeah. Yeah, sure. And this is all makes perfectly, it makes perfect sense. So and you should also do this. And, but the thing there is there, you can decrease the size a bit. And you can emphasize, or hierarchy comes from contrast, if it’s contrasting to the rest of the site. And hierarchy shows you importance. And when I take a look again, on your website, and I take a look at one podcast episode, maybe my episode 10. And this is a great guy. Great picture. Nice, dude. Sure. All right, then I see Josh Hall out to on the top left. And this is big contrast, because there’s some dark background light text. So this is very, very peculiar. I have to look at the heading so and it also is a good design trick because it kind of removes itself from the content, so it doesn’t struggle with the hierarchies of the headings.

Josh 54:25
That’s interesting

Oliver 54:26
It’s like it’s own thing.

Josh 54:27
That is an interesting takeaway. I have to say I did not think about it that far when I designed my site, but for those I mean, I imagine everyone listening has probably seen my website. But as of now, the background of my header is a dark gray and the text and the menu items and my logo are light or white, they kind of pop off that. But I do that intentionally like you just set Oliver so that the content is in a white space and the content of whether it’s a podcast or a page or a layout or a tutorial that that way I have a little more room to add things into the whitespace there, but again, I do. I tend I always when I design websites, I always design them to have a different color header than the body section typically, just to contrast them to make it very clear. This is a different, you know, it’s a different section.

Oliver 55:17
Yeah, so and this totally works. And then when I look at the heading of a podcast episode, for example, I see it’s large. And what is done well, here is you reduce the Lionhead. Yeah, kudos to you. Right, great, I stay here. Now, this is really also one big tip in headings, you can reduce the line height, the default of 1.3, let’s say is too much, because it kind of starts to fall apart. Because if you have a larger typeface, you only fit a few words in there. And yes, it’s just it’s just not a unit anymore. It’s not combined anymore. And your headings compact. So this is this is a reason why you should you should decrease the line height in your large text large.

Josh 56:09
That’s a great point. But I’m just looking at one of my podcast episodes. And yeah, you’re totally right, the because it is a an h1, heading one, it’s a larger font, although it’s not as big as some other places are on my website. But it is, basically on average is about six words across six to seven words, and then it goes down to the next line. So you just set it all or if the line or the the line or the spacing between each line, the line height was too much, it would look odd, it would be very hard to read. So that’s good to know. I, I think I actually did adjust that intentionally. Well, someone intentionally, it looked odd to me, but I didn’t know why it looked odd.

Oliver 56:48
And then when you would change, when you go to mobile, you always have to consider that you should make it a bit smaller. You can make it bigger if you have more room, of course. But on mobile, there are also typefaces that have a narrow weight, or narrow style, where you can get more words into one line. And you could there are variable fonts. I’m not sure if you’re familiar with this, but you can fluidly adjust if this font provides is the width of the typeface. And this is just so great for responsive web design if you have a heading, and you want to have it bigger, but you also have to fit more text into this very narrow, 370 pixel wide column. And if you can’t, if you don’t have something like this, you will have to decrease your font size for your headings slightly, but then use the bold or ultra bold or whatever the bolder weighed to keep this contrast for your headings.

Josh 57:47
And that’s the other thing I wanted to focus on. It’s a great point, by the way, and I know you’re talking about some CSS terms, the good news is most themes you can out of the box set this stuff like you can set these parameters so I use the Divi Theme by Elegant Themes and in that in the customizer before we even start building your site, you can set it to where headings are this size on desktop this size on mobile out of the box which is great. So that can take a lot of this go struggle this.

Josh 58:12
I am curious about that. So we talked a lot about sizing and font size. Well what about bold because that’s another big way to help out with hierarchy which we’re really talking about hierarchy and separating the big important thoughts that condense you know headings and stuff like that versus body font stuff that you’re going to read so yeah, what are your What are your thoughts on on how bold to go because I over the years I tend to like bolder fonts. I used to not like them but for some reason. I like them now only as headers only as like you know, here’s the big thought and then boom then the body content is like I said calm chill readable, not very sexy. Not very exciting. It’s just boring. Yeah,

Oliver 58:53
The your tastes also evolves and this is where like with everything I don’t know I love gin and a lot of change and but but your taste evolves over the years you don’t like the things you liked back then because your tastes changed. So bold fonts are as you said, always a good decision if they are set in a larger size. And when it comes to body text and making things bold in in smaller sizes, they can look a bit blurry because they are too dark there. They are, they are desig designated for larger sizes. And this is also some the two the two problems I mostly see is when people said something too bold in smaller sizes that attaches to it.

Oliver 59:45
Or the other problem is when people let’s say have some body text set in regular font weight 400 and then set the strong or the emphasis or something bold in 500 in medium, or 600? It always depends on the typeface, of course. But the default is 700 for Android 700. And you should always make it really different when people say, Okay, this is now regular, but the other one is medium. And don’t you see the difference? I’m a design student, I see this difference. Great for you, Guy great for you. The thing is, nobody else will see it, if you want to emphasize something, then it should stand out. And then it should have enough contrast. And you can get contrast through different methods. But in this case, make it really stand out, make it really bold. And then I would suggest going from let’s say, font weight 400 to at least font weight 600 700, or from regular to bold and not semi semi bold, or medium or something.

Josh 1:00:53
Yeah, that’s great. Now a quick question before we get ready to wrap this up. And I want I might, I might want to hit you with just some fast some quick questions here to get your initial thoughts. Yeah, so. But I’m curious, real quick. So we talked about body font, or, you know, body section typography, we talked about headers. We talked about, you know, the, the, I guess the other texts you might sprinkle in there for accents and quotes and stuff like that. menu text? How big? Do you

Josh 1:01:24
Again, what are your thoughts on menu text, so that the as, obviously, depending on the size of your menu, you’re not gonna be able to make that as big as headers. But my rule of thumb was always to have that kind of being in between. It’s always a little bit bigger than body text, but not as big as headers. What are your thoughts on menu text? And how big that should be? Because it’s kind of tough. Sometimes. I mean, that’s a hierarchy thing. But we don’t want it to compete with other areas of our site.

Oliver 1:01:50
Sure, the menu mostly is always on top of a site. If it’s on mobile, and it’s hidden in a burger menu, which is horrible. But then then it’s not on top anymore. It’s just out of sight, out of out of thought. And in this cases, you can make it smaller because it’s on a prominent position anyway. And it will stand out there. You should make it smaller, because in German, it’s just such a horrible, beautiful language. No, we have long words, and it’s

Josh 1:02:27
Right. So you can you can have like two menu items, right?

Oliver 1:02:31
We have two menu items, my surname and another. Good. Yeah, you really have to make this a bit smaller. In New York, English is working most of the time. It’s working great. In your case, again, looking at your site, you used all caps for your

Josh 1:02:52
I did. Yeah. What are your thoughts? What are your thoughts on that?

Oliver 1:02:56
You could space it out slightly, you could add letter spacing, let’s say 0.02 amps or something like it to make it a bit looser, their power, it mostly will work. It’s okay. Because your words are pretty short. And the weight is also not that thin. So it can be a bit more compact. It’s okay. And it also fits your logo type. So I guess this is also fine. You could align the arrow back then a bit and put

Josh 1:03:23
That’s actually by the way, that’s it might, I guess it could go up one, right, maybe a couple, maybe a couple pixels. I see that I know. Again, we’re talking about this while looking at so it’s for some folks just on podcast, you can just hold on to and maybe follow along here. But the reason I actually made my font for my menu and headers Gotham, which I did, I’ll tweak that just to make sure it’s coming through on your end. Is because my logo is the Gotham sans serif font. But yeah, I was kind of curious, which, I mean, gosh, I designed this in 2017. Although luckily, I feel like most of these principles have still held up. I don’t have any plans on completely blowing up my site anytime soon. But But yeah, yeah. So all caps, which what would be your rule for all caps versus lowercase? Do you have any parameters on that? Because I tend to do all caps only if it’s short words.

Oliver 1:04:19
Sure. And that’s the reason for it. Because letters get very low of words get very long set in all caps delete a lot of space, although, depending on the typeface, but mixed case always needs less space than all caps space. And for longer for a sentence or something. It’s harder to read because the letter shapes again, are not this distinct enough. You don’t have ACS and descenders. You just have more or less a long rectangle. It’s all legible. No, no worries about that. But it’s not that ideal. If you want to read longer text.

Oliver 1:04:51
For a menu item, it will work if it’s an English it might work. It’s okay. If it was in German, I wouldn’t use it because it would use up too much space there. Yeah. Next Oh, so I’d go for mixed case then. And about the size. Again, you should make it smaller, let’s say 14 pixels or something like this, the menu for the for the menu. And this is also a tip. If you reduce the size for your functional text or something like this, again, on a podcast that you use, then your bio Josh called the date, the podcast, the comments, the category links and all this stuff that’s below the h1. This is functional text, which means like something like a caption or something like this, it falls into the same category of your navigation more or less.

Oliver 1:05:39
So because it’s small, you could use a stronger weight there to me not to not to make that decision not make it disappear that much, because it gets too delicate. Now, you can always increase the tracking when you set it smaller. So essentially, these are the tips for this navigational elements, you you mostly will need a medium weight, I’m currently working on a font checklist for user interface design. Oh, I were also cover this where I basically cover the things you should pay attention to when it comes to choosing a font for an app or user interface design. One of the tips use a medium weight for smaller sizes so it won’t be this delicate and airy and invisible almost

Josh 1:06:32
Good tips man and my my rule of thumb and what I’ve done, my site is my menu are all caps, my main navigation and then generally all of my buttons so my call to actions or caps, just because it’s like no purchase or buy here or find out more or something like that. So again, that’s just kind of what I’ve found to work but I am trying to get better at streamlining everything that way. You don’t have a mix of all caps, some caps, although you know so that’s that’s kind of an interesting but yeah, like this I it was kind of an unintentional little kind of, you know, peek at my website with some some of your thoughts from the typography.

Josh 1:07:11
So I might might want to do this on a deeper level might schedule a one on one with you. So we can really go through that. So let me hit you. Just to wrap this up here. All of this has been a really interesting hour. I just I love nerding out on some of this stuff. I’m sure some of the people who love typography have enjoyed hearing your insight on this. Really just a couple quick like rapid fire questions before in how many fonts should you stick to on a website? How many different font styles?

Oliver 1:07:38
How many different fonts, styles or typefaces? Now we come into this category of fonts and typefaces. Oh, God, no.

Josh 1:07:47
I guess it would be typeface, I guess it’d be typefaces, right? Because you might have

Oliver 1:07:51
Family of the typeface, or some say a typeface type family consists of the same design just in different ways and styles intelligible and so on. So I’d go for maximum three, you’re always should have a reason you always, always, always should have a reason for introducing a new visual element. If it’s a typeface, a color an image, whatever, always have a reason for it. And if you don’t have then don’t use it. And I don’t see you needing more than two.

Josh 1:08:28
I have two on my side. I just have Gotham for all of my navigation headers called actions. And yeah, that’s it. And then I have sans serif for the body text. And then that’s where you know, some headers might be bigger might be bolder, and then some of the body text might be italic, or underline or bolded. To make that pop out when needed. But yeah, that’s kind of my rule of thumb. I’ve always said that as well. Don’t go more than three, because then it just becomes a jumbled. I don’t know what it looks like over there in your area. And you know, in Austria and Germany and stuff out here.

Oliver 1:09:01
Sure.

Josh 1:09:01
In the states, like lawyers, attorneys are notorious for putting like 10 Different fonts in an ad. And those are the ads that just strike me right to the heart because I’m like, I can’t do it. I would never call them because it’s so bad. And they read words all the time. So I would think they would be the masters of typography, if anybody. Yeah, that’s that’s kind of my rule of thumb, too. I like that to back that up.

Oliver 1:09:24
Yeah. So rule of thumb, if it’s different, make it different. If it’s not different, make it the same for God’s sake. So if you have 10 things with different meanings and whatever, then maybe there’s a case for that, but in most situations, it is not.

Josh 1:09:41
Awesome. Quick question on color. How many colors should should you have in your fonts on a website on average, again, relative but on average? Yeah.

Oliver 1:09:53
Oh, that’s hard. I love 50 Shades of Grey regarding the Color’s. Yeah, designers always love to add another shade of gray or a shade of blue or shade of whatever. And there’s a reason for that. basic colors, I would say you have one color for a primary color than an excellent color and maybe a third color for something that should stand out. And for grabbing your attention, and in within these color spaces, you can have shades of these colors, that’s perfect. Two to three.

Josh 1:10:31
Okay, well, I feel good, because that’s what I teach in my design course too. So I’m feeling good, I was worried if you were gonna have a different view from so I’m on the right track.

Oliver 1:10:41
Adding something there, if you set things smaller, again, you can make them darker. And if you set it like larger, you can make the text lighter. And this is or if you set it in a lighter weight, you can make it darker. And in your case on your website, again, you could for what maybe you increase the font size, or you make your text a bit darker. In some situations, it’s too thin, too airy. For the body font for the body font. Just go maybe just bumping up the font size there to make it more stained, to let it stand out a bit more. Or maybe for links, the green is very light for a text color.

Josh 1:11:22
Okay.

Oliver 1:11:24
Also regarding accessibility issues here, from contrast. And if you maybe you could keep the same tone of green, but just make it slightly darker. So it will stand out more.

Josh 1:11:37
And that’s the point. No, this is good. And we didn’t even talk about that yet. But accessibility is huge. I actually just reviewed well, I knew or web design students sites. And yeah, the tax was like it was it was a light gray. And it was really hard to read. So that was one thing I said is from an accessibility standpoint, you have to make your text legible. So that’s a big Yeah. So I that’s a great point. Yeah, I had actually debated, it’s funny. It’s been a while since I’ve actually looked at my site through this lens from a design perspective. But I had thought about making my body font, just maybe I think it’s at 16 right now have to double check, double check here, but maybe, maybe I’ll make it you know, 17 or 18.

Oliver 1:12:17
Yeah, you could go for 18 indefinitely. And then you also wouldn’t have to increase the line height because you also could increase the land right now. But yeah, that’s always depending on the situation and stuff, and so on. And I know how it is having a website, I just updated the fonts on my type as well. And because I wanted to, and I also made a video about that which is going to be released, I guess, before this podcast, the next one perfect. But yeah, it’s always creating more content is, I guess, more valuable than tweaking the typography of your site? It?

Josh 1:12:53
Yeah. Yeah, what I saw, I actually just adjusted it with Inspect Element on my side, and it is at 16. But 17 seems to be even just that one pixel difference from from font wise, that made a pretty big difference. So I might do that.

Oliver 1:13:10
One glorious pixel. Ooh, that made a big difference.

Josh 1:13:13
Yeah. By the time this podcast goes out, that’s awesome. Yeah. I have one. One last quick, rapid-fire question, then we’ll end this here, Oliver, because it’s been great. But I think we could go for three hours on this stuff, man. Yeah. What about? What are your thoughts on light or lighter text on dark background versus dark text on light background? You’ve heard my thoughts. I tend to use light text on dark backgrounds for accent areas, menus and things like that. And I prefer personally to just read dark text on white backgrounds. What are your thoughts on how and when to use that color contrast?

Oliver 1:13:50
Yeah, this is also an accessibility issue. Because there are some people that are very sensitive to light and dark mode. I made a website for the Association for the Blind in one federal state of Austria. And they are they have your dark mode by default, basically, because the thing is, the problem with accessibility and light text and dark background and all the things is that there’s not you can see. And you can see there’s so much in between this in between. I don’t want to touch on accessibility here too much. Because this is a really strong topic on its own. We could do our own episode about it. But we might have to, especially when it comes to typography, but when you set the architects on light background, you always should decrease the color for or make the contrast not that harsh. Not 100% Black on 100% White This is very harsh.

Oliver 1:14:53
Also accessibility in some cases, this might be just right for some people, but yeah, but maybe less 90% black on white and white. On the other side, if you have a black, a dark background, or a very dark grey in hexadecimal terms, tu tu tu tu tu, or something like this, I like to two to four backgrounds. And this this, this is something where your text can be then 100%. White, but you should. When you set text light text on dark background, the text kind of seems to blow. So you can use the lighter weight there to make it visually even, to the to the to the dark color. And there are some typefaces that provide you also variable fonts that provide you with a version that is optimized for for light text on your light text on dark background, which is awesome, because then you have a great, great experience there. There’s Action Text is one dark mode is one, I have a fun Friday recommendation newsletter each week, where people can sign up to get a font recommendation. And I featured these two typefaces last year where you can check this out.

Josh 1:16:15
Awesome. Well, perfect segue because I was gonna mention your website’s a definitely everybody who wants to visualize a lot of this and check this out, go to all of our site, pick my type com. What was interesting is I was just looking at your website, your website is 99.9% text. So the design aspects, it’s really funny. It’s all typography. Like aside from a couple pictures of you and even the graphics in your website, feature text on top of that, it’s really interesting because you are a shining example of how to make text. Interesting. So we didn’t even cover emojis. I wanted to ask, that’s my final Rapid Fire question. What do you think about emojis because I personally, I love accenting things with emojis now.

Oliver 1:17:00
I love exiting things with them. I love it as well. I just love it. And in some situations, it works really good. You can use it in unordered lists or on Twitter, you can use it as a bullet point or something. You can structure things with emojis, and emojis like our like emphasis, you cannot set text bold in a text message or something. But you can add an emoji to it. And you will immediately react to this emoji. Of course.

Oliver 1:17:27
If you have the possibility to set something strong or emphasize with an italic or something else or link or whatever, in a paragraph. Then your eyes drawn to that automatic reading text. Yeah, also, I would use it. Yeah, I wouldn’t use it that sparingly. Yeah, sparingly. Yeah. But I would definitely recommend doing it. Because, yeah, it just draws people in. If it’s too much, it’s too much of course, but it draws people in and when you use it, always think about that. The emojis don’t mess up your Lionheart edit the most of the font, right in the inline element. Yeah, it changes. So if your liner is too little, you have to address that.

Josh 1:18:17
That’s awesome. Awesome. All right. This has been great, man. I was gonna ask where you wanted everyone to go. But I think you just said it. Gritty website, my type calm and then you have your your font Friday newsletter, which is awesome. Really excited to see what you continue to do. Man, this was a really fun talk. Again, we got kind of nerdy and with the typography, but this was fun. I don’t do this often on the pot. It’s kind of nice to switch up from business talk and just to talk about you know, something design related. So I really enjoyed this man. Thanks for coming on and sharing your expertise. Last Last question for you. What is your favorite font and why?

Oliver 1:18:50
Oh my God, why do you force me to pick my favorite child? I have three of them

Josh 1:18:54
know. Okay. Yeah, three favorites. All right. You could say all three.

Oliver 1:18:58
No, right. The question this is like the question, what’s your favorite tool? Is it a hammer? Yes. It’s a hammer. I always use it to drive my screws. It’s the guys Yeah. Okay. Okay, that’s fair, depending on the on the application on the occasion. Right now, I just used for my personal side magnet, which is a typeface by for a chance to buy us for a chance to also design Gotham. So you like that when I get Hey, all right. I appreciate him. It’s from his foundry. It’s been a blessing, I guess. And it’s a very, it’s a great typeface for headings. It’s a bit quirky, I think it fits the mood and the style I want to convey for my audience. So I use that magnet for my headings and display text and also functional text because it’s readable at smaller sizes as well. And for the body text it The stereotype is peer taller, which is also a bit edgy, a bit pointy bit quirky. So these are my two favorites right now, but I’m steadily having another favorite formed Friday when I pick this okay.

Josh 1:20:02
Hey, that’s great, man. Yeah, no, I definitely feel like your fonts fit you and your personality type, which goes back to the very first point, you got to find the fonts that fit the feeling so great way to end off this podcast. Oliver, thanks for coming on and sharing a lot of your thoughts, expertise and skill set with us on this. I really enjoyed it, man. Maybe we’ll have to have you back on to talk accessibility soon.

Oliver 1:20:23
Sure. Thanks a lot. Bye, Josh.

Josh 1:20:56
Thanks. Cheers.