 Wow lovely welcome. All right, so do you want some more music tomorrow tomorrow this morning? All right, so let me try to engage a little bit if you can repeat after me. So right foot left clap Right perfect once again, you know the song Come on We rock you. Oh, we all can play music, right? So I mean this topic should be much easier now, right? Anyway, uh, you know today we can really Web designers know how to set legible body copy and how to set the layout We have the responsive web design and responsive layouts and we have multi-column single-column else, etc but I sometimes wonder if the You know strive to to build usable web interfaces accessible interfaces Removed this away from you know our direction and creative thinking in on the web You know when I'm thinking about our direction. I don't think about something like this I mean I can understand comic science because this is a field trip bus, right? I can understand like six typefaces because it will be like very interesting trip, right many places to visit I can understand the italics here because it has to be dynamic. It has to move right and even the jumping dot Probably something you know you will play with especially when you go to your trip with your kids, but what I really cannot understand is this here, right because To me it seems like the designer hated this design so much That they put some kind of subliminal message here like think twice because tell this number, you know Make a pause, you know Make sure you'll want this When I'm when I'm thinking about our direction and web design I think about something like this So this is the the the New York Times issue about really tall skyscrapers So when you load the page It should just animate the The headline and also all the subheads Down below are also animated kind of you know simulating this growth of of Manhattan, you know up in the air um And I don't know if you ever kind of Stumble across the the term typographics Typographics are these typographic arrangements that you know create some kind of illustration This is this is the work of her blue ballin famous american typographer and graphic designer and you've probably seen this This logo for for mother and child and also this spasm adverts But I don't think this should be reserved only for for print, right? For instance the benton modern project the thing that we designed last year is a web font brochure website and It's a nice example how you can be really creative with typography on the web So Before that let me just quickly explain what's responsive web design so that you have some kind of framework Maybe some of you already use some of these techniques, but It's not a bad thing to just repeat them quickly. So number one Use different font sizes for different reading distances If something is uh closer to your face, you can you know have it smaller if it's further away You can have it you you have to have it larger Currently we it's not ideal because we detect it by uh testing media queries and hence, you know Kind of assume what's the device size and then we assume that it's handheld instead of Something you know further away But for instance, you can imagine that some someday you'll have a really small screen or a refrigerator or you'll have you want to read the recipe from your iPad that's on the kitchen desk, right? so we cannot really assume the reading distance based on the on the media queries, right? But anyway Before we will have these, um, you know Reading distance techniques Possible in browser. I mean it's already possible, but you have to enable camera and we have a lot of privacy issues we can Use a tool size calc.com to kind of enter the values for the assumed Reading distance and then you get the the value in pixels or whatever you want to use on the website Number two Maintain perfect proportions in a paragraph. We all know that Uh, the longer the line the more line spacing you require, you know in between lines so that the eye can find Uh, the next row, right when you when you end up Uh, and reading the this line, you know, you need some Kind of tunnel to to bring the eye at the beginning of the next row But the opposite applies too. So when you have really small, uh Width of the screen you have to Uh, kind of compress the text so you don't end up having Um an itemized list instead of a paragraph Uh, really cool tool to to help you with that universal typography.com slash demo Uh, the cool thing about it is when you move the sliders, it will, you know, turn green or red whenever you hit the You know The edge of what's acceptable or what really doesn't work Number three Establish hierarchy appropriate for the screen where it'll say that means that um Basically instead of using Different font sizes on smaller screens because you'll have a really huge headlines You can use all caps for instance for h2 small small caps for h3 or or italics for h4 All are the same, you know font size of 16 pixels or whatever is the body copy size. So you don't you don't um What's up with this You don't um Waste your screen real estate. Oh something's wrong with the graphic card. Not a good sign All right, let's let's try it so far. So good. Um, anyway, there's another tool model scale.com You can choose values here and you know, you can you can decide on a scale These are basically musical scales. So you see music development design Um, and then you can choose the the values here and use them in in your design um I wrote an article about, uh, you know different ways to set subheads and there's about 20 Different versions you can use Um, you know to style subheads. So you don't have to just rely on like font sizing And the usual suspects Another thing is to indent paragraphs instead of separating them on mobile. So you have another line On the screen and you know separate the paragraphs on on the desktop And then when you combine it with the previous rule for small screens You can use style variations such as all caps small caps italics for for subheads You can you you can indent paragraphs and you can use white space to separate different sections While on the desktop screens, you can use different font sizes. You can separate paragraphs by you know entering An empty line in between this is called block paragraphs And you can use graphic elements such as different background colors borders or textures to separate For instance the main content from the sidebar or header or whatever um Still not supported by by many browsers, but css shapes Are something that they're really looking forward to especially, you know When you'll have plenty of space on the desktop screen doesn't you know It doesn't make sense to just fill it up with text. You can use css shapes sar su dan. Yeah Is a I'm mixing question in English now is a really great developer who who who is well very well known with for for her svg work, but she also has a couple of css shapes demos that you can you know look up after The next thing is you can use graded fonts to kind of normalize rendering across different pixel densities What does it mean? For instance for the low dps screen you can use a grade like this and for for high dps screens You can use grade like this because high dps screens has have a lot more Pixels on their disposal so they can render all the details in a font, right? So for instance if you If you just apply the lower grade to To for instance default desktop resolution and then provide a heavier grade for for for instance for Retina screens or something that it will be much more equal in appearance and rendering the difference between Font grades and font weights Is that the font grade? Doesn't change the offset of the words So the word is the same with as the word in any other grade While when you have a regular and bold bold is usually white wider much wider So basically with grades you have the same offset of the word, but it's a little more legible on on On a different resolution also This is a pixel With sub bits up pixels Red green and blue and when you change the orientation of the screen It will also change how the rendering engine smooths the curves So again, you can use grades to compensate for that Then we have Different optical sizes What do I what do I mean by that? For instance, this is an optical size for small For small sizes. This one is for really huge The main difference is that here you have a really high contrast between Tins and ticks and here it's much more robust and more even right again Here you have a really tall x height while here the x height is much lower What's the problem of using this? Optical size For instance 12 pixels is that you will lose all these details because the browser won't be able to render You know all the shapes that you have in the letter And lastly you can use different font widths for different Screen sizes. So for instance, look at this guy here So from condensed to middle to the regular, you know, we just swap When he's the breakpoint we swap it to another font and it will kind of occupy less space on small screens Again, you don't have to do it manually. There's script font width.com You you enter a list of fonts that you want to use and it will just detect which font is the best for the for the given width Here's a pro tip you you've probably never heard of georgia pro or rodana pro, but they actually exist So if you want to use georgia and vardana as a website of Defaults and provide a better experience for mobile screens You can you know load georgia pro or rodana pro that are much more condensed And you know, you can fit more characters in a line on mobile screen All right, so that's the first part I always like to kind of you know, take a break after this list of Rules All right, so the main project This is the this is the link if you want to look it up Was done in collaboration with Indra Kupferschmid. Here's her CTS, you know, was that That's chief type savant. So somebody who really knows typography and Nick Schumer was quality assurance director And when we start The project we want we didn't want to just you know, have the traditional or conservative product Page with just pictures and some text, you know describing how the product is really great We wanted to to You know showcase what's really possible with that font live on the page. So we ended up basically doing two teams and for Both are fully responsive and just utilizing the same html. Basically, uh, you know emphasizing this this idea of Having one html that you can style in different ways. So in these two teams only the CSS is definitely the html is completely the same All right, so we started with something like that the initial idea was to To develop the newspaper layout and you know kind of designed from that Um Other than that, we didn't have any any other limitations The the brief was to literally use as many responsive techniques as possible and you know go crazy try to kind of push push the boundaries But nevertheless, we started with just a paragraph and we wanted to Have this multicolumn layout which you know resembles the the newspapers layout Um, but there was one problem and that's when you when you have smaller screens. You don't want to have Uh colms bleeding out of the screen, right? Because you'd have to you know, read one column and you'd have to scroll to another, you know, and etc. So Uh apart from having the uh the width queries, right? Where we kind of break the paragraph into two columns and three columns We also introduced a mean height media query So that you only get the colms if you can see the full section On your screen. So it never bleeds out of the screen. You don't have to scroll it to read it Um, the formal version was the first to be developed and we just literally Justified this huge headline um use some intro and then Learning about how can we use the glyphs from the font file to actually add graphical elements? So everything that you see on this website is either a glyph or a css border So we don't use any graphics or stg's or anything like that. So everything is done with with topography Um And then you know when we when we established subheads, um, that was all cool That was all like proportional and following the rules that that I mentioned previously But something was missing and so we introduced this Um This dotted you don't see it maybe on the screen, but it's it's dotted border and it really added this sophisticated, um, you know detail to kind of emphasize the You know the fidelity of of the typeface and then We also wanted to Showcase some of the glyphs that are rarely used in web design. So for instance, this is a standard section sign You have it in in books in contracts in in lexicons in You know, uh, it's it's an actually valid sign. You can use it We use it for for about then we use the mid dot for for optical sizes Then the italic high for how to use Plus for bonus features and also the asterisk for pairings because you can pair benton with with other fonts All right, so whenever you need to showcase important details within content in this case open type features No, we thought we should, you know do it in in an interactive way. So Basically when you mouse over this whole section These guys will switch there. Um, you know from from ligatures into non connected Glyphs right And then you can you know easily preview what's the difference between ligatures and non ligatures on the screen If you're wondering how to enable open type features, there there's actually a property for that in css So basically this one means allow the alternate characters from the font. This one means Enable ligatures and this one means Enable small caps Uh, if you never heard about it, I strongly suggest to visit the uh clagna.com sandbox slash css free There's a lot of things you can actually try it's it's a you know Check it's a form with with check boxes and you can you know enable stuff and see how it Works with your uh with your text There's one piece of bad news, of course, do you know who doesn't support that? Who And it's not in this floor. It's safari on mobile and and desktop, right? All right All right, so safari supports open type features, but it won't allow you to You know enable them at all. So you cannot you know, uh, you cannot turn them off So if if uh, if safari renders ligatures, you cannot turn them off For instance, if you want to current text if you want to divide the letters The ligature will just you know keep it It's structure intact. So you'll have for instance if you have fi It won't be current. So everything else could be kind of current and tracked But this one won't so in that case you don't want to have ligatures and unfortunately you cannot do that in in In safari you cannot kind of disable it for for these specific cases But lucky for us we have this add supports query. You know about that So with add supports you can test if the browser supports Any of these and then if it does then you can you know enable them Uh, also really good resource state of web type dot com by my friend bramstein. He works at typekit He collects all the all these inconsistencies and you can you know, look them up if you're not sure if you support All right, so the formal version was really great And I was on my vacation and you know, what what else do you do on your vacation? You just you know Lay around and think about Wait a minute. This is wrong All right, that was my wife. All right, so So I was thinking about you know my project and I was I was reading magazine her magazine, of course So I was like, oh, let me recreate. You know this beautiful girl on the magazine cover But instead of using a girl I'll just use something that's really beautiful from the font and in in this particular typeface dr is really really something that's very distinctive from from other typefaces So basically, you know added the flower here like, you know To add additional Kind of detail And these two elements are actually pseudo elements. These are not in html. So again, it's very semantic You know up to this point We add them true css and then styling with css To kind of keep the the the the basic html intact all right, so There's a couple of things I want to uh, I want to show you so How to achieve 3d effects drop caps flip type and rotate the type very important thing about this is Whenever you try something like like any experiment always keep in mind that it has to be responsive It has to work on mobile, you know tablet desktop whatever refrigerator or your car so So how to achieve a 3d effect? So we have one shade here another shade here Well, if you know how to it's very easy, of course We have text shadow property There's a great net lesson about text shadows, by the way, there's there Painters shadows, which are, you know Lower left because this is when you paint the the letters on on the signage, for instance You spend less color and then we have printers shadows Which are the ones that we usually uh kind of mimic on the web which are you know to the right and to the left Which actually use a lot more colors. That's why painters don't use them trivia whatever but The good thing about again css and sass and the good thing about you know designers who can code is that You know, I'm super lazy. I don't want to tweak, you know Like 20 values when I want to change the shape. So you can easily, you know write a sass function with some arguments arguments here and then You know, you can just call it and you know change the shape if you want to have something else or you know the depth of the of the shadow So this is really something that I allow about You know coding in general. I can hack my own process Um, another cool thing Is this drop cap? That that was kind of something we thought it will just it will be just floated to the left and it will work But it's not like that of course because you know who and now It's not safari anymore. It's it's internet slower Um, we'll just render it differently. It will just fold You know into some weird baseline that doesn't exist on the whole web page and then you know You start questioning the existence of the universe and is it really that when we look at it, you know Runs faster, you know far further away from from, you know galaxies from each other Crazy stuff And then you're like googling and you stuck or flowing if that's word at all And then you find that you know some some guys have some problem So the adobe web team developed this uh drop cap.js. It's completely independent of any j query. So it's you know It's just that script. It's really small and you can easily just um You know use the assign the values to To kind of say oh, right. I want three lines high High or I want five lines high, but you know, uh, keep it in you know stick it out And keep it just uh three lines indent into the text. So it's very really really cool thing Uh, maybe most applicable for for for for writers who want to kind of have this Handcrafted feeling when they're writing their blog posts for instance in raw press not in tripol because this is not a conference Or medium Because they are not a threat to us so Another cool thing with with this was I mean this was really short for when you have something that you really like that's that's a bonus Then you can uh, then you know, you can you have this emotion that you can evoke again Very cool rule. Uh, just rotate the letter. If it doesn't work nothing will happen Uh, this split type also very easy You use a transform scale rule just flip it. It doesn't work. It will just render normally um, and then we have a couple of Uh, details here They're hurrying me up. So I'll just you know, uh, speed it up. I have a couple of slides. Maybe five or ten um Again, uh, what you want to do is just make sure that the container Has the viewport width unit and then everything that's inside of the container Is is uh, so it's sized in ms because ms are multipliers of whatever the parent is So whenever the parent is you know shrinking because it's specified even viewport widths All other elements inside of it will just proportionally scale, right? This is some piece of css Maybe the most important thing is if you want to retain the canvas for your for your artwork So for instance, if you want to keep it four by three or two by one You can use this cool trick hide zero and then padding 75 percent, which is basically a 75 percent of the width because this is how css works uh, and then you have this uh This canvas that that you that just retains the aspect ratio Whether, you know, you resize it to a small screen or a big screen. It will always be like that Uh, how it looks like when you put it into practice Again multiple ways to solve one single problem We have sizing with ms sizing with percentages And with margins it retains the proportion, right? So you don't have to recode it for every for every single breakpoint. You just code it once and it will work on every size of course, so Many of these techniques are you know require a lot of manual labor and i'm against super lazy So we had this application type testers since 2005 and we added like google fonts and adobe type kids Sarah Sarah So we said like let's let's just add a couple of properties here. So basically what you can do in css. You can also You know edit there It's available for free preview preview dot types of the torque you can visit it and you know You know sign up and try to test it and you know see how it works for you What I you often knew I just get lost in in it. I just pick one random i'm percent and Then I add some random words like something like that. It's very cheesy, right? Uh, yeah, my wife loves it. It's like, oh my god, you're so romantic And then and then I'm like like wait wait for the next thing like oh, you know, she's like, uh All right, so guys, thank you very much for listening and