 So this is fun I'm a little nervous actually But hi, I'm Joanna. I'm gonna say it again. Anyway, Joy Anna. That's how you say it My last name was originally Smith. So my parents were like, let's be clever. We'll throw a Y in Joanna So anyways, that's how my name is pronounced And I'm gonna tell you a little bit about my background. Okay. Also, I'm gonna figure out how to talk into a microphone All right Let's see if this thing works How do I make the clicker work? This is great. Ah Perfect. We got stuff All right fun. We did it. Okay, so I've been Doing a lot of different things in the past 10 years At like 19 or something. I started doing screen printing I'm also nervous. I'm like shaking Anyways, yeah No, right? It goes away eventually, right? Okay, cool. So yeah, I made t-shirts Yeah, I made lots of t-shirts. Like I did a you know screen printing doing graphic design. So that's all related. I swear So I've done that and then after I did that for a bit. I was like, you know what? I really like graphic design This is great. I'm gonna go to school for that. So then I started working at a digital marketing firm that makes websites They weren't using WordPress, but then the next one I worked at they were using WordPress So I started using WordPress then Yeah, so then from there after a really long time. I was like, you know what? I really like code I want to get into code So there are a couple things that have shaped my outlook on typography and one of them is Printmaking because you're able to look at the actual letter forms. You're able to see it actually print it so moving from that into working with like a As a graphic designer making websites and having these different responsive states where you you have a break point at you Know, however many places I think at the time we were doing like six different break points Which was really weird especially coming from a design background because you're like, oh, man I took all this time to lay out this beautiful type and put it in the right space and make sure it's beautiful and now it's gonna get weird and Then sometimes if it's a pixel or two bigger than the break point all of that type is gonna look incredibly different So that's a little bit of what shaped my understanding of using the web and using typography So from there as a developer, I'm really really interested in fluid typography. So that's the basic summary Yeah, oh Wow, this is great How do we make any of this work All right, I'm just gonna we're going with it. All right So what we have in the middle is a printing press and like I was saying I've worked with print before I've actually worked with something similar to this and This over here is a glyph and it has a letter on top of it. And so what we used to do What we used to do is we used to line up type We would line it up and then we put spacers between and we would have all this ready to go And then we would print on top of it so this is kind of like where typography started to become what it is today because we started looking at these letter forms and Really thinking about what are we making like? Why is this readable? What are the different things we can do with it? How can we be really creative and so A lot of the fundamentals come from the very beginning whenever we were doing this and we were laying out letters So I'm gonna geek out for a second. I don't know if you've heard of the hot metal type setting But it's ridiculous. You basically have a keyboard and you it's like a it's basically like an old typewriter And you hit these keys and the blocks of letters come out into the machine and line up on this slug And then hot metal is poured in the background of this machine and then afterwards you have your line of type and it's Crazy for the time period that they were able to do this. There's totally a documentary on it I watched it in design school when it was really fun So yeah, all right, so this is type so what we're looking at are all these letters and They have different ways of lining up and we've learned a ton about the way we read and how we're able to take in information from this process Okay, so we're really excited about type. We're lining up things We're thinking about stuff like grids and how these things fit together and As we're doing it we start to come up with all these different rules and that's where you get design fundamentals That's where you're pulling in like letting kerning tracking all of that all of those concepts come from this So this is a baseline grid. It's one of the best things. I wanted the design firms I've worked at I actually had to lay out like a hundred page book and it was A lot of work, but one of the things that really saved me was the baseline grid because when you have a two-column layout Having everything on the same baseline makes it easier for the reader. Your eye just tracks right over to the next line without there being as much trouble so we're thinking about all of this and There's a huge difference between legibility and readability So the ability to distinguish letter form So like the difference between like a lowercase j or a lowercase p or a lowercase q and like all of the things that you're Looking at your eye is picking up on all of that. That's why certain typefaces are definitely more readable than others But there's a difference between that and then there's and actually having type or design that affects the ability to make it understood So there's a huge difference and your priority might really change the way you design something Okay, so let's start talking about type All right, so I've talked to you about baseline That's what that makes a lot of sense and then there's also letting and kerning So letting is the distance between the type and then kerning is the distance between each letter so The reason why that's important is because certain things will be much harder to read than others based off of that letting And it's really important especially at the time for newspapers and different books Making things accessible for everyone All right, so here's tracking tracking is the distance between letters and kerning is where you can precisely put Two letters closer together based off of like the V in the a that space is a little bit different So going back to typography going back to the different blocks that we're using and letterpress in general What they had to do was put tiny pieces of lead in between everything so because of that We have a really strong understanding of What works and what doesn't work? so This is where we start to think about What we should do and what we shouldn't do as designers for People to be able to take away the information that you're wanting them to take away And one of the things we talked about is line length Like if you've ever been on a website where you've literally had to turn your head to finish reading it I'm not going to read that website for very long. I mean, maybe some people will but that's just not a thing It's the same for why that we have double-com layouts in print or why whenever you're working on a book You don't make your text span the entire page if it's a very large book so these are all things we're learning and Okay, so this down here is what we call a display font and Basically, it's a font that's really interesting has a lot to it But it would be very taxing on your eyes to read lots of that display font for a long period of time Because your brain has to take all of that information in has to take in all of those different letter forms Similar to what I just talked about legibility readability different things so Another problem is that if text is too small It's hard to read because you can't see the shape of the letters You're not able to distinguish your a-senders and d-senders. That's just the part that goes above and below the letter So that's really frustrating and if it's too big, it's hard to read because the horizontal flow isn't there Your brain is just breaking up in tiny little pieces So all of these concepts have been in print for a very long time. So as a designer When you come into web and you're writing breakpoints You know, you're asking your developer to write breakpoints where your font goes down a couple sizes here and there Like for four devices It's very frustrating because you feel like you have to let go of a lot of what makes design good design like you have to Really be okay with sometimes your font looks like this and it's What you know so yeah, because basically it'd be like if you had a book and Every single page in the book was a different size and you never changed the font So it all just gets really weird in and out so We have taken a few things from design and regular typography standards into web and They are letting which is now called line height and Tracking which is letter spacing So these work pretty well, it's kind of nice to be able to set these But especially if you're working with letter spacing and you set like a unit that's standard It's going to be that throughout the entire site no matter the font size like it's going to be always so many pixels Which is a little bit weird Okay, so The purpose of design. I'm just going to read the green text because I don't like reading large Thought needs to be given to how a user reader viewer will approach the task of obtaining the information from the design so a huge concept in design is User flow and not user flow as in UX like your actual eyes Going down the page where the hierarchy is what you're supposed to be looking at and how you're delivering that information and Using typography and using hierarchy like headings headings and things like that. That's how you get them moving through the page It's how we know what to read and when to read it All right, so I'm going to show you some really great examples of typography on the web where it's done really well Because I think that we are doing typography beautifully throughout the web And I'm not really talking about that exactly but anyways I love these because they look like print it really looks like someone has a poster and these this is a Okay, so this is beautiful web type from Hello. Happy and it's using all Google fonts So they're all free and I love seeing that because you know You get really inspired by things that you know you can use and that if you just have a little bit of design background A little bit of ability you can really make it look nice like it looks like a very expensive type face that somebody bought So yeah, so here's another example of that And I love this one in particular because it really looks like a book like wow, that's that's on the web That's so easy to read Like how does that respond? You know So, um, yeah, it's really an interesting thing and of course I have to end on Jean some and Jen summons because Her website is beautiful. The typography is gorgeous and it really does look like a poster Yeah, so All right Another thing that we've taken from print that we've put into web is ends Right, so when you see it in web, it's E.m. But when we use it in print We were taking the letter M and we were looking at the size of that letter and that's a unit Why would we want to do that because it's? Responsive whenever we had big blocks of type the glyph with the letter on top of it We wanted something that was relative to that typeface We didn't want something that was a different typeface that might be a lot bigger and use that unit We wanted something that would stay within that typeface that we could reuse and so we came up with ends Ems are pretty great so on the left is also an M but The difference is that sometimes Ems are full-width and sometimes they aren't and so that's one of the distinctions between Ems and print and Ems and on the web because Not every typeface has an M Didn't matter before the internet, but if we're taking ends into web then yeah We definitely need something that's not going to work if we need something better This is obviously not going to work for you know Arabic and Chinese So what we came up with was using a point size and So the point size of the font whatever that is that is now what we call Ems Okay, so I'm putting all this together. There's a lot going on here But I'm coming from print I'm looking at web where we're using it now like typography on the web and I'm thinking well That's great. We actually have a relative unit Like we can actually use that for things. That's really interesting. So Yeah, in CSS we use Ems. This is just explaining it further. All right, but we also have rems. So rems versus Ems They're very different, right? So a rem is basing off off of the root element Which is always going to be the same size and M is basing it off of the element that it's inside, right? Okay, so let's walk us back for a second. Let's go back to our book All right, because basically we're designing for different books, right? So what we're saying is that type size can change it can grow and shrink based off of the book based off of the page of that book So that's what that's why fluid type is so dynamic Because you can set up a typographic scale So that way whenever you have like the smallest phone your font is roughly the same size So that really helps whenever we're sitting here, you know as designers like we're sitting at our desks We're setting up hierarchy. We're putting it all together We're trying our best to show like a user flow and get people moving through the page And it'd be really great if all of that work Was sustainable or it just sustained at all, right? So this is from CSS tricks And basically I'll post all of these but this is there's a lot of different ways to do fluid typography This is one of the methods that I really liked so I know this is the funny thing about it is it's just so Obvious like of course it should be doing that. We've not been doing this So anyway, it's great if the whole thing resizes and so what's nice is the headline and the type They're staying in proportion to one another I've experimented with all this with this a little bit as well This is on my code pen and Basically it just responds So This is justified type Which is incredible to respond because the way that should work is it should just be reflowing and you get these huge gaps in the paragraphs That's what you should expect to see but you don't see that at all So if the whole thing is responding like this, right? If we've we've gotten to this place finally where we're able to control this medium that's so fluid It's so hard to handle as a designer Well, why not let's do it with images, too That's a background image and it's just responding. I'm not even like it's the same size as the box So the background size is just responding So yeah, I think we've spent a lot of time Talking about design. It was probably a little bit confusing, but this is basically all I have I'm really excited about this. I'm excited about using fluid design and being able to just get things to do what they should have Sort of already been doing in the first place But yeah That's basically it So yeah, I'll take questions Well, it's on my code pen and then I also have a portfolio on Behance still I think but most of myself is in code now So, yeah, gotcha interesting, okay, so His question was how When I'm referencing break points, like what's the difference between that and fluid design? Okay, so the difference is you have a lot of different devices, right? And you can't really code for every single device and when your font size is something that's static It's always 24 pixels. It's gonna be 24 pixels on something this big and it's just gonna wrap Right that text is just gonna wrap around and you're gonna have this giant font on this tiny device Like it's not going to change. So what you do is you go, oh, yeah So for tiny devices from this break this point to this point I want all of these to be roughly this size and that's kind of how we walked around it which Sort of works sort of works unless you have a slightly outside of that looking font and or well Let's slightly outside of that device that's going to not be at those break points and one of the biggest things That's kind of hard to explain is that the actual Proportion between the heading and the rest of it you want that to stay fluid You want that to stay the same like when when you're doing it you you put it at that point size on purpose for a reason It's very much a specified thing So yeah, maybe it'll change a little bit But if it gets a lot smaller then it's harder for you to see like is this what I'm supposed to be looking at Is that what I'm supposed to be looking at and it's not even just typography You can do the entire thing like you can do the entire module you can have it just Move up and down like the entire box can move and so when you're basing it off as something that's relative It's way easier to get it to be fluid. I Think that maybe answers it. I don't know max widths Like using a max width. Yeah, so that's an interesting way to do it because like I said before like We're just gonna go back We should not be doing this We should not be having line links that go all the way on a website We should not be doing that so max widths are great, but that is awful. It's awful for reading It's awful for people with glaucoma. It's awful for a lot of people It's just making it harder for them to get to your content Anyways, yeah, you can just do a max width it can stop it can grow and stop at a certain place and continue. It's yeah Yeah, yeah, yeah, she's great Yeah, it's gorgeous No way really that's so cool. Yeah, I know I have to go check that out I'm I love it so much from such a geek about it. Like her stuff is just so beautiful Yeah, for sure. We need really good web typography. We do Call them. Yeah. Yeah Very smart. It's a really good way to do things. Yeah, once we start being able to utilize grid more widely I think it'll help a lot of things a lot more things can be more fluid with with that. Yep. Yes. Yeah Yeah, I'll tweet it out. I'll do my citations at the end. So I'll just tweet them out So you guys have them. Yeah, I'll put that in there. Yeah. Yeah Mm-hmm. So I Could definitely answer to higher contrast not sure that it would be a screen reader thing I think that really falls on the front-end dev to make sure that they've put things in the right spots But yeah, I know for sure we have I think it's ADA compliant You have to make sure that it's ADA compliant so that everything is in a great way like one of the things I think that people don't realize is that really good type designers and really good type boundaries spend a year working on a Typeface one year and so when you're going to like dove on or whatever What have you someone has just put that together and maybe they did a really good job You never know but they might not have so a lot of this stuff where we're looking at like really bad Versions of this right where you get a typeface and because we don't have kerning We don't have the ability to just get different letters and put them together on the web I mean that would be insane Because we don't have that you get typefaces that just look awful like they'll just have too much space here It's hard to read so I think some of that really related to accessibility because you want to make it as readable as possible Yeah Yeah, for sure It's always a balance between making it like beautiful and making it accessible And I think that when you hit that sweet spot You have a really gorgeous website and a lot of people do really great work, but yeah Yeah, so I had thought about using percentages like So I have looked at that before I'm a really a big fan of this method because you can set them like the tiny Like the you can set 320 and set your pixel size And you can set your largest screen and set that pixel size and it basically makes a scale using calc And it's so nice Yeah Right I'm not sure on that one either because I did look into it for like a half second And then I was just like I don't know I really like the being able to set it exactly and knowing what it will actually be because also My designers are coming in and giving me pixel sizes So it's kind of nice to just be able to use what they've designed and have it set and then set it So what what we've been doing a lot of is having calc on every header So like every header might have a different size at different screen sizes and then on body So really we're setting it a few places, but it's still going to have the same proportionate response Yeah Yes, yes, I think I think it definitely does and there I just listened to a podcast about that I forgot which one it was. Oh Yeah, absolutely He was asking if there's a disadvantage coming from print and looking at web as if it's print and I really think that there is I think we've done a lot of things Like it took us a long time to get to where web is now because we looked at it as if it was print Like we really and I stress this all the time to my designers that I work with I'm like you have to stop making it a Width that stays the same all the time whatever element you're doing you have to stop that stop making margins on websites Nobody wants margins on websites, you know, like, you know, like you take the page You move it out and then there's just big white bar down the page like what is that? No, you know It's like we have in print we have gutter That's the middle portion of the book like you don't want to gutter on a website like come on like anyways But um, but yeah, so I think that there there are things that have been done that are like Detrimental and then there are things that are really great like bringing ends into web I think is really smart and making it something standardized because not all languages have ends, you know Like that's great But I did just listen to a podcast about that and I don't quite remember the one, but if I remember all it Cool yeah Yeah, one of the things I like to tell them a lot is think about it as multiple grids Right because if you're a designer like 101 use a grid right like and there are lots of grids There are lots of beautiful grids that you can use and I like to tell them like don't think about it Just being like a half column half column like think about it being four columns. Oh, what if it's five columns? You know like it's the web you can literally do five columns and have it just flow like it can just have You know four columns here and wherever else like it can just scale and stack basically the biggest thing is scale and stack I feel because it's it's hard for them to understand. I think the designer who I work with who understands It the best is the one who worked at the Apple store first and Would just watch every year they slightly change the device like a few pixels or whatever and so he's like yeah No, I can't really just design something at a pixel size like it's gonna be something else tomorrow You know so and there are all these different devices everywhere. So I think he understands it the best and trying to think about it being Like try to think about it being a movable thing that can just completely Grow like instead of thinking about it always staying where it's at think about it growing and then starting with mobile I think the biggest thing is starting with like mobile sizes. So anything that's movable that you can move around. Yeah Yeah, absolutely cool