Fonts
Essentially, we are limited in our font choices to those typefaces that are widely available on our audience’s computers (or system fonts.) For now, try something from the following list of “font stacks”. These are lists of fonts that should work with most browser software — a browser will show the first one it has available to it in the list. I’ve included the CSS for this so you can copy and paste.
Sans-Serif Fonts:
font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
font-family: Calibri, Candara, Segoe, “Segoe UI”, Optima, Arial, sans-serif;
font-family: Geneva, Tahoma, Verdana, sans-serif;
font-family: “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Geneva, Verdana, sans-serif;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-family: “Trebuchet MS”, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Tahoma, sans-serif;
Serif Fonts:
font-family: Baskerville, “Baskerville old face”, “Hoefler Text”, Garamond, “Times New Roman”, serif;
font-family: “Book Antiqua”, Palatino, “Palatino Linotype”, “Palatino LT STD”, Georgia, serif;
font-family: “Calisto MT”, “Bookman Old Style”, Bookman, “Goudy Old Style”, Garamond, Georgia, serif;
font-family: “Goudy Old Style”, Garamond, “Big Caslon”, “Times New Roman”, serif;
font-family: “Lucida Bright”, Georgia, serif;
font-family: Palatino, “Palatino Linotype”, “Palatino LT STD”, “Book Antiqua”, Georgia, serif;
You can find a great list of font stacks here at CSS Font Stacks.
There is a way to have more creative typography, as it is now becoming possible to embed fonts with CSS3. Of course, this will mean longer download times and currently, nothing will appear on the browser screen until the fonts download (except Firefox renders the text in a system font first, and then redraws with the correct font.) If you’re extraordinarily interested, this article at Smashing Magazine covers the basics of the Font-Face Rule and this article covers some of the Problems of Web Fonts.
Google Web Fonts
For my money, this is the easiest way to use embedded fonts on your website. Google has created this open source web font foundry; be somewhat careful with the fonts you choose — many are not that easily read — and also keep an eye out for how much download time the fonts add to your page. Go here for my step-by-step tutorial on how to use them.
Color
First of all, my apologies for the spelling of “color” here, but if you include the “u” it won’t work properly in the code.
In HMTL, color is represented by a hexidecimal number (that’s base 16 if you don’t remember your gradeschool mathematics). When you indicate a color, you must also include the hashtag or pound symbol before it. The hexidecimal number is actually composed of three sets of numbers, corresponding to the reg, green and blue values of the color. This is despite the new CSS3 standard, which uses RBG colors.
We’ll learn all about color theory when we get to the unit on Photoshop, but for now, here are some good tools for picking color palettes:
- You can find an excellent tool for picking colors, and finding the color numbers, here, at Paletton.
- If you like using Photoshop, you may also enjoy this plugin, called Kuler, which let’s you create, share and browse other people’s color palettes.