Typography carries so much influence in design for a lot of reasons. It's a main way that you can help to express a feeling or give your content a specific voice on the web. Luckily web typography has evolved quite a lot since the invention of the web. Not so long ago, web typography often consisted of images of text, but not actual text. Meaning graphics that had important content would be created in a program like Photoshop and then added on the site. This created some issues. First, most website weren't as beautiful as they could be because of the limitations of typography. Second, the sites that were using images for text weren't accessible or good for SEO since the search engine crawlers can't crawl images, other than what's listed as the title or alt text. When HTML first was created, the font faces and styles that were displayed relied completely on the settings of the particular browser that the user was using. It might be hard to remember, but try to imagine a web where all the sites look similar because they only had about 16 fonts to choose from. Here's an interesting collection from The Telegraph of 20 popular sites back when they were launched where you can really see how similar the sites were because of the limitations of font usage. It's not really CSS's fault that there was a small pool of fonts to choose from though. Since the late 90s CSS had the ability to access font files, but the browser hadn't implemented that functionality yet.  

Webfonts vs. Web-safe fonts

At first glance, it could seem that web fonts are the same as web-safe fonts, but they're actually drastically different. Knowing the difference between the two terms is essential. Web-safe fonts are fonts that were, no surprise here, considered safe for designers to use on their websites. They're the fonts that most users had on the computer already, like Arial, Verdana, Georgia, and, how could we forget, Comic Sans. If for some reason a user's computer didn't have the particular font the designer had chosen, the browser would replace it with a different one. Because of the potential for replacement, CSS has a specification to allow for fallback fonts. That way the designer could try to specify what they thought should replace their chosen font. Choosing a list of backup fonts is known as creating a font stack. Webfonts, however, are fonts that are configured especially to work in the browser. A webfont is a font file downloaded from a web server and then used by the browser to render text with HTML. It makes it possible to use fonts that aren't installed on a user's computer. By 2010 almost every browser supported webfonts. So in simpler terms, web-safe fonts are the past, and webfonts are the present, and likely the future. Although we don’t need to worry about web-safe fonts anymore, it’s still a great practice to create a font-stack. That way if there’s any reason why your first choice font isn’t selected, you can still control what the user sees. Another way to do this is through font families, although that gives you a little less control about what will show up. There are some generic font families that are available to help control what fonts are displayed. They are: serif, sans-serif, cursive, monotype, and fantasy. Adding one of these font families into your CSS is like having a safety net. Now that we’ve moved into the world of webfonts, there are so many different options for designers. Getting an interesting and relevant font on your site is now easier than ever before. You can visit Google Fonts to browse hundreds of fonts and use them on your site for free. This is an extremely simple way to add a better looking font, since there’s no downloading or storing of the font on your site. All you have to do is add a couple extra lines of code that tell the browser to look to Google Fonts to get the font. You could also use Typekit, which is now part of Adobe’s Creative Cloud. Typekit makes it incredibly simple for you to use beautiful fonts on your site. If you purchase a subscription you'll have access to thousands of wonderful fonts. It’s possible to purchase a font and use it on your site. It’s a little more complicated than using something like Google Fonts or Typekit though. For one, you’ll need to make sure that you’ve bought a font that can be used online. You’ll also need to make sure you’re following the rules laid out by whoever you got the font from. If you’re working on a site that has thousands of views a month, often that will require purchase of a different license. To add a purchased font to your site you’ll need to add the font within your site’s directory and then access it though @font-face in your CSS.