Typography is the primary way we, as designers, communicate with our audience. the web has unique rules and some limitations for integrating type styles into html pages. In this exercise we'll explore the intersection of Typeography and CSS.
Using an image for some very specialized fonts is OK! It's a simple process and has the distinct advantage of being very reliable. The downside is that it adds file size and is not accessible. Be sure to include alt tags to describe your images and don't use an image for body copy.
System fonts have the davantage of being reliable and predictable. They will appear similarly on most user systems and browsers. Be sure to include optional font families so that it will degrade gracefully if your fist font is not available on a user's system. the reliability of system fonts also results in a limited set of available fonts.
The demand for more font variety in web design resulted in the introduction of external fonts. External fonts are stored on a remote servers and linked to your page through code in your head tag and in css. Google fonts is a free and offers an ever expanding font selection. Just search for google web fonts and you'll go to a page where you can see available fonts, pick a style you like and download the link (with instructions for applying you your site. This seems like a perfect fix but what if the google server is down or the font's are slow-loading due to user bandwidth?
Those wonderful minds developing CSS3 came up with a coding option that allows us to download some type styles, upload onto our web server and then specify it in the code so that the user can view that specific font. The user is actually downloading the font without knowing it! This has lots of potential but there are copyright issues and this technique tends to make much larger page sizes. Do you have the rights to use this font?...just asking.
If you've been reading the book and tutorial you may have seen the term "class". A class is a predefined css style that can be applied many times within a page. For example, we can write a class named redtype and give it a declaration of color: red;. We can then place the class name .redtype in the html code to specify where it is changing the text properties. This is especially powerful when you want to make a consistent style across many pages.