css layout with html5
Print
Typography on the Web
index8.html and css/style8.css
Right now, the font we're seeing throughout our design is the browser default. It may look OK to you now, but who knows what other users will see? It's important to specify it somewhere so you have a least a modicum of control over what gets displayed. Let's set a default font for the whole site in a "body" selector, which you should add at the top of your custom styles.
Since the body tag surrounds everything, and CSS rules cascade down to all contained elements, this declaration applies to everything on the page. That gives us a good safe fall-back, but is not gorgeous. While we could have our pick of the 18 commonly-installed fonts available on virtually all Mac and Windows machines, what a yawn! Real typography is finally available on the web through providers like Adobe TypeKit and Google Web Fonts. TypeKit is more advanced and lets you work with virtually any font for which licensing is obtainable, while Google Fonts are 100% free, and cab be implemented without setting up an account. For this exercise, let's stick with Google Fonts.
While you can use as many Google Fonts as you like, I find that most of them work much better as headlines or decorative text than as body text; it's tough to find a custom font that works better than the usual crew of Arial, Verdana, Georgia.
Browse through their collection and find one that you like (we'll skip the advanced typography discussion for now - that rabbit hole goes as deep as you want it to.) Click the Quick Use link below the font.
Google will provide a box labeled "Add this code to your website." Copy the line you find there, and add it somewhere inside the <head> section of your HTML document. Your document head should now contain something like this:
You can now reference these custom fonts from your stylesheet wherever you like. I want to use the native Tahoma font for body text and Google's Kreon for headlines, so I make the following changes to my stylesheet, right below the section#main selector:
Note that I've manually fiddled with the size, margins, letter-spacing and line-height in both selectors to get things looking exactly how I want them. Play with the settings until things click for you.
Subscribe to KDMC tutorials
