An Introduction to Web Fonts & Modern Web Typography

1. Welcome to the class, an introduction and some context.: - welcome to an introduction to weapons on modern Web typography. - My name is Simon Foster and I'm, - a freelance Web designer from London, - England. - This class is basically a beginner's introduction not only to the use of weapons, - but it kind of also serves as an introduction toe modern Web typography in general, - especially within the context of responsive Web design. - Later on, - I'll be taking you through a kind of a mock up project that will be kind of, - as I say, - the mock up Web article that will cover a lot of the techniques and principles that I use - in my dated the use of typography and design. - But firstly, - this introduction video will hopefully put this car's into some context by giving kind of a - brief overview of where topography on the Web started on and where it is now. - So where did it all begin? - Well, - before we had font face before we had Web fonts and type kit, - front deck and font school. - Except you're on before we started to make out where such responsive things were a lot - simpler. - So we had our website funds, - which kind of gave about the design of a very limited palette of what you could use or she - could you Sorry. - So even our website funds we had our sans serif tight friends use out our aerial high - Helvetica comic sans impact except you. - Then we had our mono spice phones that curium you see there console and then we're now - serif fonts like Georgia Times new arriving, - etcetera. - And that's basically what we had. - And not only that, - we have a limited palette of fonts. - We kind of we're limited in. - How websites would be views are Web pages interfaces except Europe. - We kind of knew that they be seen on a desktop or laptop, - and we kind of knew that we'd have a, - uh, - kind of predetermined amount of space for now. - Topography route, - site, - toe be viewed. - Andi, - What? - Life was easy. - Well, - as so often is the case, - things changed. - So whereas we started without humble there stop or laptop and we had a fixed whip screen, - and we pick much at the same size type blogger every time, - and we can't knew where we were. - Suddenly all these little devices tide turning out with Internet and weapons and stuff so - good the beginning of the smartphones. - More phones, - tablets, - then more phones, - more tablets, - net books and yeah, - I would now philosophy. - And on the way we designed in the way we view top every topography on the Web, - I kind of had to adapt. - And so because of these changes, - one of the ways that as his owners, - we adapted his weapons owners We adapted to This change was to use CSS media queries and - responsive design. - So now typography an hour lay out their design. - Our sights now worked and were readable and usable on tablets, - desktops, - phones and whatever device was thrown at us and around the same time is all these modern - weight of looking that the way. - But coming to the full, - the previously neglected at font face CSS poverty start to gain some traction. - So suddenly we were using weapons and suddenly we had the likes of fonts, - cool Google weapons which work for your services. - And then slightly later we had, - like, - a type kit in front deck, - and now we have a much more broader range of bold of palate off typefaces and fonts that we - could use on the Web, - which currently just where we are now. - I guess it's and the purpose of this this whole classes burning a position now is honors - where we haven't unlimited pallets off typefaces and fonts that we can use on our Web pages - , - and we also have our responsibility and an obligation ready to our users now kinds. - And whoever that the typography we use is usable was readable within by using a combination - off best practices and responsive design and media queries weaken make out typography. - No, - only beautiful unusable on a on a desktop, - always on a tablet or iPhone or smart phone android, - whatever you wanna call it. - So before we get started with the actual project, - I want to go over a few basic principles. - Understanding stands in good state for the for the product coming up, - and I think the most important questions as his own a we can off herself. - He's bought is type poker feet, - and I think, - above all else, - first and foremost, - topography is a form of communication the way. - But the Internet is approximately 95% text. - It's how we express our ideas, - how we sent out products or services, - how we interact with each other and as before, - forms of communication. - If we know clear and people can't understand what we're saying, - then they won't listen. - So the difference between good communication, - bad communication is basically the difference between people enjoying being on our websites - . - And no, - it's the difference between people understanding on message and no understand our message. - If l communication is bad as an example, - then it becomes noisy, - becomes quality, - becomes cluttered and and becomes on un enjoyable experience. - And, - uh, - pretty soon you just become the noise and too much noise, - like anything is it's not. - It hurts our brain. - It messes, - gets lost out, - communication gets lost and least her just a generally bad experience. - So how typography should always became clear. - Simple, - easy one stand. - So I'm actually just always clear. - So the big question how how do we make out typography communicate? - How do you make it readable? - How do we ensure a message isn't lost? - What didn't simply sounds to that first of always make it big enough, - But you can see an example. - The type of the first line is Lord, - so you can read it. - 2nd 9 is small, - so you got made it. - It sounds fairly obvious, - but you'd be surprised how often this is forgotten. - Even on a lot of modern, - responsive websites. - I still see plenty of sites by your mind. - Oh, - my, - uh, - my I phone or whatever. - Tom Brady is too small still, - and other services particularly important when it comes to handheld devices. - If you can read the typography it on arms left but a nice comfortable distance from your - face, - then it becomes a enjoyable and a comfortable experience. - But if the type is so small that you have squint and bring it robs your face than surely - that's no good experience and were controlled this so we should know better. - There's no excuse it all for your type to be so small a device that it becomes no un - enjoyable to view it. - No, - I never important aspect off Typography is contrast. - Now, - if our text is uh, - Color Varteks is too close to that of the background color, - then it doesn't stand out very much and doesn't have much contrast, - and therefore we have to strain to read it. - And of course, - if me, - if you have to strain to read any passionate text it's no enjoyable and and you stop. - So we really have to ensure that there's a good contrast. - My bits. - Why on black or black on Wydell, - whatever it may be, - I'll take me to stand out so he could be so we can read it. - So another very important aspect of topography is line spacing or, - as it used be known from the print welder leading. - Now I look line spacing is kind of that the breathing space between between line detects. - So if we look at this example here, - if we could is paramount text, - obviously we can't really read it because it's too close together. - This there's no spacing move. - The line does not come. - If we look at this, - we have a nice, - um, - out space and tonight letting me in between the between each line. - Then it becomes easy to rate. - You don't have to think about it. - And now a similar. - I think that is the spacing you have between letters and words in the CSS, - its letter spacing the words spacing. - We could see again that even though our line spacing is fine now because I word it was - squashed together, - it again it's it's difficult to really, - it's, - it's impossible to read. - And so the game may seem very obvious, - but it's a fundamental aspect of typography that we need to always be aware of. - Okay, - so the final section of these introduction but I want to cover this briefly, - is the idea of content and hierarchy. - And what I mean by that is specifically choosing the right kind of typeface for the right - kind of content and also the signs of our text, - how it denotes a certain hierarchy and a separation of content as well. - So, - for example, - here here we start off with a whether heading and it's quite large, - cold time. - And if you follow that with a passion of text, - we can see here because we've got now having nice and big and out passage I paragraphs - underneath. - Although they're smaller, - they're still big enough for you to read, - not the separation in size. - They let's just see that. - What is the heading? - What is content now another way. - But we could even further demonstrate that is right now the paragraph text is in the same - typeface is heading. - But if we met that into a nice Sarah film. - Then again, - we get even more separation between beheading and the main passionate text. - No, - I never example of appropriate typography. - He's anything is the instance. - We see that we've got Avery cursive fluid typeface or fun for the main heading there, - and it's fine. - We can read it. - And but if we use that for main body text and it's not easy, - unreadable and unusable, - so we would have to bear in mind that type is a functional thing. - And if something's right as a heading in Brittany, - a few words, - it's not necessarily right for the main body of text. - So that concludes Thean production video to the class. - Hopefully, - we've covered some topics there that can stand you in good state and put the class the - product story that's coming up into context. - Andi. - Yet let's move on to Part two 2. Main Project Part 1: - on. - Welcome to the actual project that we're going to be doing the class. - I think I'll start off by showing you the, - uh, - holder structure that the project. - So you should be able to download the zip file with start fellows. - And then everyone apposite fell with the compete files. - I've included the completed one as well, - just as a reference. - So if you get stuck or lost Utkan have a look at that and and it will make sense overly. - So we start off with God. - First things first. - I'm gonna be using Google weapons for this exercise. - Andi, - which I'll show you that in a minute. - How? - Toe go in there and set up a little project and choose what funds you want. - And then, - later on, - I'm going to be showing you how toe used, - uh, - Web fonts. - Self hosted by the front face. - She is this prophecy. - But first things first will be doing it going out. - My phone's give weapons so we don't know about the phone is too much yet. - Come on. - That later. - Let me go. - Our images. - You've got a main hero pit and then smaller contact picture. - But our index makes you now foil, - go out of style. - She and then we've got our scripts, - Which that moment, - when you got a, - uh, - the html five shifting their dispute safekeeping. - So if you open up the the index html fall in your browser, - I'm using Google Grow Mia and I was shooting. - As as budding Web designers, - you'll be using chrome or safari or Firefox or pros and matter and amendment. - You'll see it's basically on style. - So because elements and then it does in pictures, - text and stuff. - But yeah, - it doesn't. - They might send you and no show you a quick It's like a sneak preview of the how it should - look when finished. - And but you weren't using this one much about just come to show you now. - And this is kind of how I look. - Let me done. - So I've opened up my, - um, - Index filed in my style sheep in ah, - text editor. - I'm using supplying text to, - um but you can feel free to use whatever you like. - No pad or no pay plus or Kodo, - whatever you want to use someone. - Now, - I should point out a few things here. - Uh, - first of all we've got How to make the site work responsibly. - We've college metta viewpoint thing here with how many one scale maximum scale is basically - means that it because the science going to paint So it's gonna be responsive. - Basically, - it means we get a accurate representation off. - How you want things that look and it doesn't It does disabled zoom, - but because we're making our top three big enough in this instance, - we shouldn't need anyway survey it a title Dave linked to know stole shape and then become - dance. - It's the main body of the of the page of wrapped up in an article week. - I had a here. - No headings. - H one h two weddings here. - Go out some enemy chair then we've got a content blocks now in a rapper. - We shall explain it later, - not paragraph takes. - You got a block quote here and we got eight threes relevance in the next part of text. - And then you can help that every image here and sort of figured element. - The caption Don't worry too much about these. - Yo will be going for this stage by stage, - so it will soon become parents going on. - So moving on Telstar she you can see here. - I've got Scott. - A start off a basic reset. - Just so takes away any margins and paintings and borders and exaggerate We don't want in - the in the page. - Andi, - we made l for two sections. - Articles orazov, - hateem over 18 or five elements to despite block by the vote me out Clear fix if I need any - block elements that got floated elements inside them. - Andi, - we've set, - uh, - images to be 100% with tonight. - Auto especially means that any images will expansive 100% the width of their container and - the rest of the bear. - The style was basically blank. - When we're gonna be feeling the minutes become alone. - She's how I'm gonna absolute show you how I thought the page. - So now we're gonna go into Google weapons, - and I'm gonna show you how to put together the project and paste the job script give you - into the into the page, - and then we'll go from there. - Okay, - so you re on Google funds, - so if we need decided, - but once I want to use on the page, - I want a strong sand Saref for the main headings and a nice serious front for the main body - of text. - So type in here. - So once you found the front you like, - you can have a look, - a hand weights of it Make it bigger. - If he likes Mora, - just have it. - Keep it. - That so I'm gonna add this to my collection. - So they need the normal lightweights. - This one Honesty bold. - Somebody click on bold. - They're put into a collection here. - It's so now he's serious for I'm going to use his gente um book gentian. - But basics here is so click on that being not shows a different sort of weights and styles - there. - And so I'm gonna add that to my collection as well. - And all I want is the normal which regular and I want the normal town. - It was well, - they really so tracing my my two main typefaces for the page. - So I'm gonna take on use to the collection here. - See, - it was all day were now Genting Book Basic you can use and that takes us Teoh review of - what you've chosen Cervix ecause boat here bold gente and book Basic normal and metallics. - Fine. - So I'm keeping It just says break Latina. - Let me the extended one. - If this exercise Andi, - I'm gonna choose job script. - So this gives you a little job script here, - which we can paste intel in tow. - HTML page. - I'm gonna Okay, - not on you. - Now, - if I go into back into text editor going to the station or page on in the head here and the - scripts, - I'm gonna put it in here and we can get rid of this text equals text drops type. - It was textract skippy don't mean that in a single file. - So yeah, - we've loaded he now funds now. - And if we go back quickly back into the Google fonts here, - we can see that give you also some code here to put the load up your fonts into your CSS - front. - Them yours. - World sensor from in front Family Now, - did you put basic self are beginning to this more delayed one are believing some proper - fullbacks and stuff and which received actual maybe going to see essays, - public 3. Main Project Part 2: - Okay, - now. - So what we gonna do now is stopped at Dion CSS to stop starting the page up. - So it worked properly at the moment. - You as you've seen before, - we just got the page and it's not do anything yet. - No styling. - So if we go into our detectives up, - we're going to I must let me copy and pasting this like of speed. - So in our body type, - be going to add, - well, - inventory we're going to be. - First of all, - we're gonna set the front family for the whole page to change in book Basic, - which I do should remember is this serif form that we chose from people funds and we can - have give a full back off Georgia, - then times new Roman And so which basically what that means is, - if, - for some reason, - out weapon doesn't work, - then doubt browse over to spay Georgia. - If that George doesn't work, - you spent time to be Roman and that doesn't work. - It will display whatever the default serif font is, - which is very annoying to get this part. - But in the unlikely event that kind of work we put fullbacks there, - so we keep the integrity of the page. - Now the next thing to look at is the line. - I, - which is actually covered in the introduction video, - is makes it the spacing between lines. - So I've said it to 1.5 them, - and I'll come to him to the minute this but Web kick takes always adjust. - That basically means that whenever any Web browser, - which includes any safari on an iPad or an iPhone when they re detects that, - reproduces the act 100% which basically means we keep a faithful reproduction off how we - want the sexto look and which the especially, - uh, - relevant for responsive design. - So if you won't say that certain side to display this inside, - we've got kind of to do to, - which is a very dark gray. - Now here is a very important thing, - which is gonna basically informed the the whole layout on off the entire page. - Now browsers will by default show. - Did you fool type font signs and 16 pixels. - Now I don't think that's big enough, - so I always start off with 100 victims, - said, - which makes I don't know, - 24 pixels. - So by default, - any body text will be 24 picks was big, - and then all the other measurements in the CSS can start from that. - So 1.5 times 24 ways it's six. - Did it? - It basically it gives a good start. - A good baseball dude in the page on 11 important concept began using this on this page. - I should industry here is the consequence using EMS now, - as units of measurement, - I try to use pixels, - or PX as little as possible, - especially responsive design. - Now, - an M basically means one em is equal to one time to size the sight of off DEA off the type - of the body text or they get a foresighted off the I don't so in this instance, - because we've set it to 150% my name is 24 pixels, - So l line height here will be 1.5 times 24 pixels. - And I'm gonna be using aims to no only for topography where it comes toe size, - the headers, - H ones and links. - And we said, - Sure, - I'm going to be using it. - The block level elements like wrappers and mind you, - depending on used basically throughout the site so basically every part, - the layout of its padding, - his margins, - memory, - it's box sizes, - whatever is relevant to our starting fun size. - So basically shows how one part about typography ready denote dictates the entire until I - lay out. - So now, - moving on to our don't you know, - uh, - you know, - class here, - This is basically the rapper that's gonna wrap our content, - Keep it 29. - And in Central that I think so. - If I paste in the code here, - you see, - we got whipped of 80% a maximum of 38 EMS on and a margin or no on auto, - it's basically centralizes it. - Andi, - for GM's, - is 38 times 24 pixels, - which is gives us out with off page of our content. - And if we save that and then going toe our browser and if we refresh it, - we should see maybe all it's still a perfect, - but it's centralized the content there we've got. - Our Web front is working on the way. - We start to see the beginnings of the page been going quickly back to our Al content. - Napa. - Here, - this max with 30 a. - M. - This gives us a A maximum width of 912 pixels. - Which back in the browser Get this. - We're gonna be working this lever. - One club. - Great despair. - It's for ease. - Have any exercise. - So now moving on to our had a section which on the pages, - this section here h one h 20 on a small element here, - which I chose the name of the author so good back into him. - First of all, - we want to you want to align the text into the center, - and then we're gonna never overflow it. - Newsbill just in case. - Anything you do is that we don't want on. - First of all, - where hate one some main heading for the page just placed in. - So he offset some, - uh, - some margins. - The font size 3.2 m's made it upper case bully now as well, - which is our san serif. - But we donated from, - uh, - Google funds. - Only in Boulder got a bit late, - spacings and worst basing here, - but as well. - One thing I want to point out here is when deciding on things like margins and font sizes, - except your for especially typography. - I like to use a sort of precise but kind of a rough use off the Fibonacci golden section. - If I go into, - I can shame on the page here. - This is how Fibonacci diagram. - Now, - I'm sure you know this if you studying design, - but I'll go of it very briefly. - The Fibonacci Golden section, - or Golden Rule, - was basically a ratio of 1 to 1.6. - So, - for example, - we start with this square here. - Now, - if we make this rectangle the outside of it 1.6 times the width, - I think, - but I never squaring it. - And then another square there. - And I was quite there. - That was where there don't square that it's all Everything is 1.6 times the size. - And this gives us this ark, - which is basically a kind of formal O. - R. - A pattern that you find in science, - mathematics design. - And it's used familiarly from the design world with er well, - to stop trading, - too, - to quantum mechanics. - You mean so it's It's a kind of a basic sort pattern that that kind of, - if you like kind of a formula for what we conceived from the eye as being beautiful. - So the main thing to remember This is the racial 1 to 1.6. - So if I go back into CSS here, - you see, - I've made the margin. - Top of the H one n 1.6 in the front side is 3.2, - which two times 1.6 and I tried toe. - When I'm working out margin salads and font sizes and stuff keep a rough kind of most work - . - So faithfulness to this 1.6. - So you might be a 3.2. - I might go half their market 2.4. - Oh, - yeah. - Basically, - it's not that May sends its kind of Ah, - it's not precise, - but it just gives it a nice flown, - and I sort of shape Teoh to the layout design. - Now I'm gonna go in, - and I'm gonna now style the H two, - which is under the main hiding on the border. - So again, - you got 1.2, - which is a It's not 1.6 officers. - Piven are cheaper. - It's like 1/4 of that or something. - Andi, - A line to form right there. - And now this small, - which is the the little off the tank thing again. - We've got the margin there and got spayed block. - We got made. - Italian committed it smaller. - So if we think that and then get back into our page, - Well, - we've got our main hitting them. - We've got some penny underneath a age, - too much money, - too. - And we've got l over tank there. - So it's centralized. - It's nice ratio of sciences and stuff and those petting and one space. - So now we're gonna do some more styling of the main body text now on the links and the H - freedoms with headers in the main body of content. - So, - first of all, - I'm gonna put in some styles for the paragraph. - Texas P So again, - we're using a Fibonacci here. - We've got margin 1.6 the top, - but which is half ago at the bottom. - And because a little thing it will beget iPhones, - which basically means it. - It hyphenates long words in Web browsers handy. - So gonna and some current living in the camp, - and then some just get nice read the same may be caught in the main images and then on - offer. - You just have a underline. - Andi, - With the H three, - we're going to have font size of 1.6 was going back to be knocked again on a margin to vote - for, - which is people are Jewish. - And then we're gonna bring back these out as well. - Wishes out sans serif text for the that hangs here and make it bold as well. - No one, - by the way. - Well, - I've included the San Serif e. - I've got Al fullback funds off How Vatican Neue Aerial sensors. - Now the reason we put Helvetica neue first is that basically, - how better go on Apple products Like Mac iPhone Waiver looks great, - but it looks awful on Windows and aerial. - Similarly on on Windows or Internet Explorer. - That's what Windows PC's looks lovely there but looks awful on Mac. - So what we do here is 99.9% of Max will have who Petricka Helvetica Neue installed. - So if we have that in their Al Max would pick that up. - But that won't be installed, - probably on a PC. - So the PC's will go to Ariel. - And if not, - I'll go to the sensor where, - for one, - is there Basically, - it's a waste or ensuring. - Now if we have to have a full back here than it looks like So we save that and then come - down to a page refresher going. - And then we should find that we've got Now we can see how hates retail in the aisle - possible sensory front, - nice and big, - 1.6 times the size of the body text to give a nice ratio. - We've got the pair of glasses, - But now what's nice padding on white space. - So it's much more legible Res to read. - And, - uh, - yeah, - what to expect. - So next I'm gonna start a power block quote, - which is very usual thing when you're especially when you write in block posts or articles - if you want to include a quote from some sort of learned famous source. - So I'm having a whip of 9% which allows us to have a little bit of panning on the left hand - side, - on a little ball of it. - Go to the front star metallic and I've made the text slightly lighter. - Just gets a little bit separation there. - Good morning is not patting here as well. - So if I say that, - go back to the page, - refresh it and we can see here. - That is our block quote. - It's bean made into italic. - It's lighter. - It's a nine side here and just get a nice little separation and lets us know that it's - something of a slight, - different Peter content. 4. Main Project Part 3: - It's the next up. - You've got this image here. - Diagram. - Andi got a little thick caption underneath here. - Now I want to give that leaving more Stein in the and I want toe separate. - This is still the caption here. - I want to make that similar style to the block. - Quite. - We got here, - So forgiving takes it him. - Just This is the success for its because I'll figure here and a caption. - There you go. - HTML needs a figure in a minute with the image inside it, - and he's not fit. - Caption. - So get back into here. - So you've given it another Fibonacci ish kind of margin there, - and in this instance, - I'm gonna start on wider screens and I stopped the fig caption. - It's gonna be floated to floated, - but position to to the right of the on. - While enough screens will be publishing to the white to the right, - I should say off the image and the natural Metromedia Curries. - I'll show you how to make it when the screens and why I love God in the leaf. - So we've got an absolute believe the relatively positioned our figure. - So the fit caption inside is in absolutely positioned on, - then given a whip and put to 105% to the right off the the image. - And it's good Attallah Pier and its size smaller. - And it's the same. - Tyler is the block. - So you think that and I very first page you'll see at the moment. - It's kind of the page here. - But if it was a full size monitor What? - Swear on artist months use. - See you copy. - That is every much of this. - So next up, - if we look here underneath where we go out, - how women sharing the figure 11 we've got out paragraph a texture inside which are called - split. - Now show that the page with basically, - we're talking about this parrot paragraph here. - Now what I'm going to do is just quickly show you how we can use. - Um, - some see it as three here to make a split column. - So here we have split. - Is this makes it is the David that wraps the paragraph. - So we've got call him. - Got to calm Gap. - A bump went to get a little gap in between the columns and then, - as for five folks, - that's for Web kit and then some margins here, - and it's impending and stuff here. - So if we say that and then go back to pay huge, - be fish it. - You see, - we've got a two column paragraph here now, - you wouldn't normally, - you know, - but ask about this. - Go from a one column greed to a two column grid in this way. - But I just used it. - Just an illustration of how you, - in certain circumstance, - you can use the multi column see essays. - Good. - Thank right. - So there's only two bits now that we need to sort off left his style on the page. - We've got a A list here you will, - but needs, - um, - margins. - And you've got a foot out for two here, - which leads him starting as well. - So if we go into our until six Delta, - I'm just gonna give at least just a little bit starting. - Just be a margin again to even Archie. - 1.6 point eight. - And then the fitter. - That's a petting on a dark background. - Seems the text color and some margin stuff there just to get some nice look. - So you're saying that go back into our pain to refresh it, - and then we'll see. - You've got some nice white space in the Army outfitter. - Yeah, - that's basically the page finished in its, - uh Well, - the first state to the page. - Anyway, - we're now going to go on and delve into our media queries to make the site page story - responsive. - Andi. - Yeah, - I'll be showing you how we, - uh, - person it next. - So here we have a media queries. - And what is basically does is which is that media Maxwell of 1600 pixels. - It means anything up until 600 pictures will be affected by whatever rules over I put in - here and that override whatever has come before. - So, - first of all, - I'm gonna fix this little feet caption thing going here, - bristle with screens. - Save that if you get back Intel page prayers before. - No, - he isn't. - There is. - So where's before? - It is over here, - which is fine without pages. - Not from wide on the full screen. - But now when the screen is it is 1600 pictures of wonder the caption. - He's back on the meat here. - Right. - So next up, - I'm gonna have a look at this mess. - Passionate text here, - which is the one that spit into two columns right now when it's on four sides. - Screening and explain. - Its reader was nice, - but when he's stopped screeching up here, - we started to see that it gets a bit. - Squash is not very every attractive, - not good to read. - So what we gotta do is if we go into our CIA says here, - did you remember before they have spent two columns clunk out to now, - we're gonna go into our media queries here. - And when it gets to a whiff of 1200 pixels under, - we're gonna give content of one which will change it from the two columns. - One column to save that. - Get back into here. - Refresh the page on when he screeched down, - we get back to being a con. - She's much more so next up in our media queries were gonna come down here to a maximum of - 840 pixels, - which is kind of roughly outs or tablet size. - I try not to be too Mr, - but to precise on devices that you see a lot of people in the media careers where the exact - pixels they're away for an iPad, - then the exact fixes for an iPhone was I try to be the device independent. - I believe that the content type of would be the layout shoot kind of adapt what it needs to - adapt. - No. - And it just pages design. - It's loud, - different the next. - But in this case, - I have chosen agent 40. - That should catch makes eye tablets sciences. - So I'm gonna just paste in our new Kate here. - What I've done here, - I've made the UNA rapper made it 85% whereas before it was, - If you see here 80% that's makes a little bit wider. - So you flew him or the screen. - I put the H fund, - the main heading font size down a bit. - And I've given change the margin to live beyond the age to their and the overtime on - benefits for saying that and then coming to about page here, - get up to the top here refreshing. - And I won't want to come down to sort of side it will see her hell. - It just gives a nicer solve, - even the the main body text. - Same. - So it's readable. - It just makes the head of her especially so we don't take up so much room because, - yeah, - We don't need to when you want to. - Smaller scientist. - So now we're gonna tackle where the media queries should accept catchall our handheld - devices out smartphones, - etcetera. - So right now, - if we, - uh, - screeching down a little bit here, - I'm gonna show you some papa screen grabs from my iPhone and iPad later. - One. - Just demonstrate partly, - But you see here yes. - Is this second heading? - Here's a bit squished. - Perhaps the main text is a bit too big, - Doesn't each as big is that and headings every two big. - So what we gonna do now? - If we get back into about CS is here, - then this is our at medium Mexican founder picks It's sort catches out mobile devices - that's gonna copy and paste the new code in here and then go for it's what I'm first of all - , - whereas before how on our body sentiment, - we had a fun size of 150%. - Now bring it down a little bit. - 225%. - God doesn't need to be as big. - And, - uh, - I want me. - We've changed that spacing. - The words basically let it there our age to be change a little bit. - Just sort the white space out on a hunch freeze. - Here we bought the size down. - It was 1.6 before is now 1.2 and it's more pending in some mountain stuff here and also - with our main image. - Whereas before it was it was, - uh for with don't need the team used to be as why so what we don't hear I've made the image - the vein image in the head up to be Arjun 40% and then giving it margin of minus 20 isn't - on the left, - which basically assumes in a little bit but smaller sizes. - So if we, - uh, - save that and then go into our page again, - we can click on that. - And as we can see ethnics but nature, - the the type you still nice and big? - Not so because it was before much more readable. - And how I did see her age three. - They're not nice in that size there. - Yeah, 5. Adding self hosted webfonts via fontsquirrel.com: - so, - as promised, - I've got a few screen grabs here from first of all from I I find them, - I had him. - And just to show they doesn't work. - Maybe up the opinion page chair. - And then, - Okay, - we have held up text reproduced, - and now the which works here and stuff. - So yet Very nice. - You go to the iPad. - The guy news. - No. - Only scale and yet so very readable. - Nice line measure. - You have been in proportion. - Music's nice. - Now, - just a little. - I give you have heretics on a various devices. - So basically, - the last thing to show you, - as promised, - is, - um Before we were using Google Web fonts and they give you some jobs skipped and you place - it in the head on, - it's quite easy. - There is another way to, - if you're using especially free funds, - court papers as well is to self host them. - So I'm going to show you how to do that for school. - So fortunately that the funds that we used before available on front school, - so we type in Oswald. - Here we are, - So click on that. - Look it, - he says. - And here we haven't really various weights and, - uh, - style to the front. - You and they do have ah, - normally in front school, - you can down on the web form kip, - but because of certain license new shoes on this one, - you have to download the O. - T. - F and then generate the by phone code yourself. - So click on download, - download your fonts forever going to do that now and then you can go to the World Point - generator and this basically gives you, - takes your front and then makes various versions available version SVG version, - which are going to more in a minute, - which allows you to work on don't various different devices and operating system. - So everyone in the weapon generator kick would add funds. - And I'm gonna go into Can you from here? - She got on that and I'm going to press open. - Take. - So now folks don't know did and you agree that you go, - you cannot do it. - Yeah, - you down under kit. - So it's gonna be there saying that we're going to find out and find - that's the big from kidney ticket. - Maybe up and basically that's taken out fun and made a any ot version spg TTF on which - basically covers all bases. - So we go here, - we have a star shape we can open now. - It takes two, - and these weight gives you. - So this is outfront damages Argentine book Basic thesis a reform we've been using. - And this is our default front here the air 31 and always have a little things here. - The war TTF I fixed They basically four backs for various devices. - So, - for example, - different browsers and different devices will require different versions off off the fun. - Maybe it's a teacher version of what version or S B J version or whatever. - Now, - when you when you, - uh, - use Google funds on doing my job escaped that Doesn't that for you, - which is great. - So we get back to our phone is here. - I've spared you the boredom of watching me download each fund individually. - So I've basically down going into the fund school generator and I made versions of Theo's - Gold on the Gente in book Basic metallic and regular. - And these are all the various funds that we need here in our funds folder. - So if I go now into our CSS, - but we do now is being take the the CSS code we get from the generator from school and we - paste in. - I was paste that our my font face decorations at the time the style sheet. - So which basically means that it allows you to load up first. - Andi, - if you see here, - we've got out front family A gentle but basic got front. - Bamian Genting book Basic metallic and out was, - well, - boat here and have also just ahead is ahead in a bit too. - Make sure. - See, - the year l there. - I've put fonts there, - so basically, - the browser knows to look in the fonts folder to find all the various. - They're very upon them. - So that's how, - uh, - down self hosted funds loaded into our style. - She saved that goingto, - uh, - hnl for we can get rid of these. - Their script here. - You don't need any more cuts. - The giggle funds sleep that Oh, - yeah. - One thing I should remember. - Um, - we need to change this here. - So in our CSS we go down to here we go make that the same as a regular, - and then those won't bode. - I think that again. - And then we're going to a page. - You know, - we have a weapons. - But now that self hosted until working against it should do. - But instead of being called by JavaScript on by the giggle fronts, - what's it We've now got the self person version. - So that concludes our introduction to weapons and one web topography. - Have you enjoyed it? - You got not From it on. - Please feel free, - Teoh drawing pictures and change title change text at things, - play a round of it and have some fun I look forward to seeing you guys come up with on yet - . - Thanks. - No.