An Introduction to Web Fonts & Modern Web Typography | Simon Foster | Skillshare

An Introduction to Web Fonts & Modern Web Typography

Simon Foster, Web Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (57m)
    • 1. Welcome to the class, an introduction and some context.

      13:25
    • 2. Main Project Part 1

      9:20
    • 3. Main Project Part 2

      15:05
    • 4. Main Project Part 3

      11:33
    • 5. Adding self hosted webfonts via fontsquirrel.com

      7:37

About This Class

Typography on the web has come on leaps and bounds in recent years and is ever improving and evolving. Designers have more and more control not only of how they approach typography but also the fonts they use and the treatments they style them with, but with great control comes great responsibility. Typography on the web isn't just about choosing the latest pretty font, readability, usability and cross-device scalability must be balanced with aesthetics. 

Who should take this class? This class is for beginner level front-end web designers who are already learning, or about to learn HTML(5) and CSS(3) and want to hone and improve their typographical skills within the context of todays modern responsive and forward thinking design techniques.

The Project. Students will work through a series of type-heavy tasks on a mockup web page article that I will provide that will cover the functional, practical but also fun sides of working with type on the web. You will learn how to use both hosted and 3rd party webfonts, how to maximise readabilty for the user and provide safe fallbacks to aid usabilty, but most importantly how to really enjoy typography and see it as an exciting form of communication.

So what will you learn? The core skills that will be learnt in the class are:

  • The difference between good typography and choosing a nice font.
  • How to impliment web fonts using @font-face and via 3rd party services.
  • How to make your content consistantly readable regardless of the device being used.
  • How to use CSS(3) media queries to enhance the experience when suitable.
  • How to match different typefaces together to compliment each other.
  • How to use your use of typography to aid communication.
  • How typography can be used with images to great effect.
  • How responsive design has changed the way we view web typography and how to enhance the experience on all devices.

Transcripts

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.