Google Fonts SUCK!

0:00google fonts might be the web's most popular destination for type but all the fonts that you can get hold of there any good in this video we're going to find out let's go [Music] hello friends welcome back to flux academy the online design school my name is matt brunton i'm a designer from the north of england and today we're talking about google fonts which is a huge library of free-to-use fonts on the web 1400 families to be precise at the time of recording this video but should you be using them are they any good now i have to admit that i have expensive taste i'm guessing that i share that with most

0:40of you watching we're designers we like things to look beautiful and work effortlessly we like things that are classic or unique so just like clothes or furniture or guitar pedals i might have a little bit of a problem there when it comes to fonts i like the classics and i like boutique classics like bodoni garamond helvetica universe these have become timeless and boutique means type cut by leading independent foundries it has quality to it it is optimized for modern usage for digital but also they have some little elements of distinctiveness and because they cost money and they maybe cost more they're more rare so just like with clothes

1:30things from a high street store or supermarket you might see everybody wearing something that's more unique boutique is going to be rare and it's the same with type so free type because there's no cost barrier it's going to be everywhere and if you want uniqueness for example in a brand identity you're probably better going for something which is by design going to be more rare because you have to pay for it now when it comes to looking beautiful and working effortlessly as we talked about earlier let me show you an example of how that works with type so i've prepared a google font here this is

2:13advent pro apologies to the designer thank you for making this available open source and some creativity in this but there's some technical issues which uh i want to demonstrate so you've probably noticed some things what can you see at the moment that are that are issues here so one thing i'm noticing is the uppercase eyes are ones and that looks strange it makes it more difficult to read some of the other characters are strange that this curve isn't very smooth and then the terminals on this s the horizontal and then it's angled at the top and then we've got these angled cuts like on the e

2:57and the g going the other way there's not really a consistency to the way that's done this y is quite strange does it have a bit missing or usually uppercase wise of this format so there's something to do with the letters even the the crossbars are all kind of in different places not in a consistent way i should say so they're not necessarily always at the same line or in a well-drawn font that's not what i'm saying but there's no real consistency student you can see here on this reg part it kind of goes up and down in in a strange way but you'll also notice

3:36things like the kerning so this is set with metric kerning we've got the l and the a and the c and the a kind of crashing into each other um and this is kind of a little bit messy and so that's something you'd have to fool around with on the web it's difficult to kern so that would create some problems now you might be thinking okay you've tried to pick on a particularly poor font here so i want to choose intel which definitely has some good qualities and this again is a google font and it's one that people often mention as a helvetica alternative if you're looking for it for

4:13free and it's not the worst font in the world but on this first line which is set with metric kerning i've just noted that here you can definitely see around the l we've got a lot of space in these areas and that is definitely something that you would want to pull in with neuro montreal book which is pangram pangram an independent type founded their version of helvetica already this is a lot tighter i mean it almost looks like they're set at different tracking but they're both set at zero now on the bottom line if we maybe try to to pull in the tracking on this that would improve it and that's

4:52something you can do manually with headlines but difficult to do on the web or or in browser if we change this to optical kerning which is where the the software tries to kernel itself optical means to the eye and you should kern headlines to the eye it does improve it it pulls this l cluster together and it that the whole spacing has improved but i would still want to finesse this a little bit but i mean every font has issues everything needs to be become manually to be to be done properly even here with the example of the quality font the e and the x maybe a little bit close

5:35versus how the rest of it is done and if we set this to optical they do slightly move apart the e and the x whilst it tightens up further around the l between the m and the p etc and this is obviously quite nicely and tightly kern there so illustrator has done quite a good job so there's some of the issues that you see things that you sometimes have to to get around but just examples of what might occur with a poorer quality font now ran and i were talking and if you don't know around maybe this is your first video on the channel check out

6:15some other videos the gentleman with the spectacles is the founder of this channel and we were chatting about creating a resource selecting some great fonts for the flux community as people were coming into design this would really help them getting started these are the fonts you should use so we were looking at putting the selection of type together and then ran suggested limiting it to google fonts only and my first thought was but i don't want it to look terrible in reality he was right we often have to compromise and i see this on projects all the time even companies with huge budgets are using google fonts or similar services

6:52because it's practical and fun licensing is not cheap if we have a look at commercial type something like druk this is a font you want to use if you want to be trendy right we can go super narrow or super wide and it's kind of in vogue at the moment and it's a nice font so let's say we want the full collection five families okay we'll add that in okay so desktop if i want to put that on three computers that's six hundred dollars okay but i'll need it on my website one domain oh we've got a couple of sub domains 500k page views seems reasonable

7:30okay but we've got an app as well so let's do the app one app hang on a minute we've already got up to 2625 which is a fair amount of money i've taken it off screen there we go it's not cheap so now thinking about using three typefaces in an identity okay maybe you wouldn't need every single weight and width but even so it's a lot of money so are there any decent fonts on google well with over 1400 families as you would expect some are good some are bad and a lot are average so as a designer if you're using free fonts you need to bear in mind three

8:19things number one make the most of what you've got now if i swap guitars with john mayer maybe the guitar behind me it might make me sound a little bit better it might make him sound a little bit worse but probably most people could not tell the difference even though he might have a 60 year old handmade guitar in mind albeit it's a nice american guitar it's from a factory but there's limits like if we were to give john mayer like a 50 guitar from a catalog made out of plywood you'd probably notice a difference at that point if you like your music if you've got good ears and

9:00that applies almost directly to fonts an absolutely awful terrible font you're gonna struggle with but something that's at least passable it's functional a good designer is going to make that work a lot more than a poor designer is going to succeed just by having a great font so proper type setting is the key making the most of what you've got even some something like intel like i said there's some issues with it but there's things you could do like even looking at the the heavier weights some of these headlines are using it as a headline sorry i should say or something like that i i think that's not too bad let's maybe

9:43compare it with the expensive font i prefer the expensive font it's got more it's more elegant it's more classic but this is certainly passable and depending on your situation you could definitely finesse that let's say it's a fashion thing you want to put a sign up maybe or a headline you could do something maybe in a lighter weight maybe increase the tracking let's increase the tracking hugely let's say like 400. so imagine a headline like this we're making the most of of what we got maybe we can't afford to license universe or something like neuer montreal but this could work now that is what a designer does now another

10:32google phone which i did actually discovered by research in this video lobster let's try using this let's let's make it as it's supposed to be title case let's take the tracking to zero returning back to metric it's still ugly sorry not a fan of this font and so it's about making the most of what you want okay you've got a free font that doesn't mean you have to use lobster you could use something like inter choose the right way the right type setting and you're making the most of it it's not just a case of buying a bunch of expensive fonts that's not going to improve a poor layout the second thing

11:12you need to do when you're working with free fonts is achieve distinctiveness by other means so you can't rely on type alone to build a brand identity the way that you use color and imagery has to be what you rely on more when you can't rely on the time and the third thing to bear in mind is being able to separate the good from the bad how do you know what's a good fun and what's a bad fun well there's two ways to do this the first one is to develop your eye that means you get better and better at seeing the vagaries of type and noticing the

11:48errors or maybe the things that wouldn't work in your situation not always that a font is bad just that it's not appropriate for that context or it won't work well with what you're trying to make it do so if you learn more about that and you also learn to see type to understand type then you'll start to recognize it more and more quickly as your experience develops would you like some pointers on that let us know down in the comments if you'd like us a video about identifying uh quality type and maybe we could do that for you but the second way that you can separate the

12:25good from the bad is a way that reduces error and it saves time particularly when you're learning to develop your eye and that's to choose from a curated list which is why as i mentioned before we created this free ebook which is entitled the best google fonts for every mood which i wrote and designed and you can get that via a link in the description of this video with 1400 families on google fonts that's a lot to troll through so you can simply browse our collection and see examples of the type in use and that might help you get started a lot quicker let us know in the comments which are your

13:02favorite google fonts where else do you go to find funds do you like adobe fonts monotype independent foundries perhaps keep the conversation going and until next time happy designing [Music] you