Type
Forget about using fonts the way you do when you're printing or creating image files in Photoshop. That's not how typography works on Web pages using HTML. A Web page gets its fonts (typefaces) from the user's hard drive. The fonts on your own hard drive are not the same as the fonts on any other person's hard drive!
Notice that even similar typefaces do not take up exactly the same amount of space. One face at 36-point may be taller than another at 36-point. Even when specifying in pixels for the Web, you might be surprised by the differences in width and height between typefaces.
A common mistake made by beginners: They specify fonts in the Web page; they see those fonts on their computer and they look great; then later they see the Web page on another person's computer and it looks terrible. Why? That other person does not have those fonts.
What you need to know is which fonts are okay. The list is short, so this is not too hard. These two pages show which fonts are most commonly found on the two most common operating systems:
> See some examples of typical typography (in CSS) on the Web
CSS Typography is an article that explains pretty much everything about the proper use of text in CSS.
Choosing a Type Classification
There are only three CSS classifications that are safe to use with today's Web browsers (by "safe," I mean that you can expect them to work consistently):
- Serif
- Sans-serif
- Monospace
These are what they are called in CSS; you must use these terms. These are also the "generic" choices in CSS. (Note that classification in traditional typography has many more variations, such as Oldstyle, Transitional and Modern. These are NOT used in CSS.)
For the body text on the Web page (e.g. photo captions, navigation links, the main text), choose one classification. The standard choice is sans-serif because it is the easiest to read on a computer screen (while serif is easiest to read in printed material).
For each classification, you should spec two or three actual typefaces, plus the classification generic, to make sure your users do not see an ugly page (which may happen when their system is forced to substitute a typeface if you failed to name one that they have). Make sure the typefaces you choose match the generic!
Specifying Font Families in CSS
The notation that follows is appropriate for CSS (Cascading Style Sheets) because that is the way we spec type for the Web today. If you learned to clutter your HTML with <font> tags, it is high time to unlearn that bad practice.
- font-family: verdana, helvetica, sans-serif;
- font-family: palatino, georgia, serif;
- font-family: "courier new", courier, monospace;
It's important to include the classification generic at the end of the list, as shown in each line above -- that's the way to avoid Web type disasters!
Remember, there are only three type classifications that work reliably on Web pages. Each typeface in the list for that classification is a member of that classification, e.g. Verdana and Helvetica are both sans-serif typefaces. Do not mix and match.
Different operating systems (e.g. Windows and Mac) have different standard fonts installed. Times is not the same as Times New Roman, and Courier is not the same as Courier New.
The user's system will use the first font in the list -- if it's present. If not, the second font will be used, etc. If none of the named fonts are present, the generic will be used. Not many people spec Palatino, but it is a very pretty serif font, it is installed on almost all Mac systems, and it's much more attractive than Times New Roman. The sans-serif default is usually Arial on most systems. The monospace list is pretty much fixed.
What about the use of quotation marks within the CSS declaration? For a font-family name such as Verdana (one word), quotes are not needed. Even for a multi-word name, such as New Century Schoolbook, quotes are not needed -- but they are commonly used.
You can read all the details about how to specifiy fonts in CSS here:
It's NOT a good idea to get creative with fonts on your Web pages. If you stick to the three font-family declarations shown above, or something quite similar, your pages will look equally good for all your users, regardless of the operating system they use.
You can learn all about typography here:
Photoshop Is Not CSS
Note that when you make an image using type in Photoshop, you can use any typeface you like.
When you save a logo or other text as an image (either GIF or JPG), then it's NOT pulled from the user's hard drive, and so you are not limited to the most common fonts.
Flash Has Its Own Rules
In Flash, if you set the text type as Static, then your typefaces are automatically embedded in the Flash movie, and everyone will see what you see. But if you set the text type to Dynamic or Input in Flash, then the typefaces are pulled from the user's own hard drive -- UNLESS you deliberately embed the fonts, as a separate step. (Embedding fonts in Flash is explained in the Flash Help files.)
Whenever the typefaces are pulled from the user's computer, you have no control over what they will look like.
Real Artists Use Illustrator or Freehand
This helpful blog entry from Ray Villalobos explains why and walks you through a pretty cool example:
> Portfolio -- Al Palo Advertisement
Most Web journalists know Photoshop, but far fewer know Illustrator or Freehand. Why? Well, it's one more thing to learn, and unless you really know how to draw, the ratio of benefits to effort may not seem ideal. If you really get into typography design, then be sure to take Ray's advice. But otherwise, you will probably get along fine with only Photoshop.