Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course focuses on the theories behind web fonts: what makes a good font, why different fonts look the way
Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course focuses on the theories behind web fonts: what makes a good font, why different fonts look the way they do, and how fonts affect the look of a web page. Author Laura Franz covers common tasks, including downloading a font from an online source such as Typekit or Font Squirrel, implementing the font in HTML and CSS, and changing the size and line-height to improve the readability of text. The course also covers different periods of type design and explores the history behind handwritten fonts, text fonts (used for large amounts of text), and display fonts (used for headlines).
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 Lob