Arial vs Verdana
Sans-serif fonts work well on the web, because they are clear and legible at 72 dpi, the current standard screen resolution for browsers. But not all sans-serifs are the same. Two of the most common sans-serif fonts, Arial and Verdana, are often confused with each other. In fact, they have very distinct differences. For one thing, Arial is condensed, while Verdana is expanded. It's easier to see these differences in larger font sizes:

This is Arial 18pt

This is Arial 18px

This is Verdana 18pt

This is Verdana 18px

Points vs Pixels
A related issue is the difference between points and pixels. They are both valid units of measurement for browser fonts, but as you can see from the illustration above, points are bigger than pixels, and cannot be used interchangeably. There is another difference that most people aren't aware of, and that is that pixels are always whole numbers, while points and ems (another common unit of measurement) can be expressed in decimals. You can have 1.5 points (pts) or ems, but you can't have 1.5 pixels (px). Font sizes can also be expressed in relative terms, such as 85%, but that presumes a baseline size for the body of the page, or for a specific context.

Photoshop vs Browser
In the web development process, page comps are often done in Photoshop or Adobe Illustrator, which are great design tools, but have less limitations than the browser. In other words, you can achieve visual results in Photoshop that you cannot achieve in html and css. This may be frustrating for designers, especially print designers who are used to working in high res, but that is the world as we know it in web design, at least for the foreseable future. For example, you may be surprised to learn that there is no 10px Arial bold in the browser world. You can find it in Photoshop, and build beautiful, precise graphic comps with Arial 10px bold, but it does not exist in css. You have to go one pixel higher, to 11px to get a bold in Arial. There is, however, 10px Verdana, and that is what I use. Remember, points are not pixels.

Of course, there are hundreds if not thousands of fonts available for download on the web, but just browse the most successful and useful websites, and you will see how few fonts are actually necessary. To get all of the info about css classes and properties of fonts, go to the source:

Photoshop is still a great way to provide the variety and visual beauty of decorative fonts. The precision and high resolution that everyone expects is best achieved with Photoshop, even though care must be taken to optimize the file size, even with today's increased bandwith. For more about this topic, go to my San Jose City College page.