Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So now that we've picked our font, Lobster Two Italic, let's make it work. I've provided an exercise file which we're looking at here called lobster2_script_book_sale.html. I've already added the Google Web Font code to the head of the HTML document and I've setup the font-family as usual. Note that I've added a font style of italic to our h1 which is our main heading on this document.
Now let's take a look at it in the browser. I already have mine open, I'll toggle to it and we can see that there are a couple of problems. First is that everything in the page is set in Lobster Two because we used it in the universal selector. So it makes it sort of hard to figure out what we might need to change to make this headline look as good as possible. So let's go in and change that. Back in the text editor, I would take this font family and copy it, go down into the h1 and paste it.
So now our h1 is definitely set as Lobster Two and then back up in the universal selector, let's just delete Lobster Two from our font family stack. You can save that and back in the browser we can refresh it and that's better. Now we can see how the display font, how the headline interacts with the text font. And I think it looks a little bit too small. Now this page is based on a default page that was created in Georgia. And in Georgia, the font looks fine.
But with the Lobster Two it just looks a little bit too small. So let's try bumping that up a bit. Back in the Text editor, let's try making this 95 on a 105. You can save that and refresh it and that looks pretty good, but now I think it actually looks a little bit too big and I'll tell you why. When I set this in the HTML I actually use some line breaks to control where the lines would break. I wanted to keep one book together and one potato chip together.
So I don't usually use line breaks. I very rarely use them, but I will once in a while in a headline. But when you use a line break, you have to be more responsible. We have to be sure that if this page is seen on a browser that makes the font a little bit bigger or a little bit looser, we don't want one of the words to bop down to the next line. It would create a very uneven ragged edge in this headline. So we need to go in and make it a little bit smaller. Why don't we try that at 90 on 100, go ahead and save this, back into the browser and refresh, and that looks a lot better, it gives us some wiggle room.
Now you've probably noticed we're keeping the line-height really tight. It's only an extra 10 pixels, I would never do that in text. But it works here because we're working with only a few words and it also helps that this font, Lobster Two Italic, has a really short ascenders and descenders and then it also helps that none of the ascenders and descenders are directly above and below each other. So they don't have the opportunity to run into each other. This looks pretty good and we could keep it just the way it is, but I think we should look for a better font for the text part of the ad.
Georgia is a good font but the Serifs have a lot of texture and the bold is sort of bubbly. We might be able to find another less visually complex font that could let the heading pop out even more.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 47343 Viewers
117 Video lessons · 34296 Viewers
113 Video lessons · 80265 Viewers
116 Video lessons · 70186 Viewers