As a medium that had its origins in plain ASCIIAmerican Standard Code for Information Interchange (pronounced: ass-kee). text, it has taken a while for HTML to provide much in the way of sophisticated typographic tools.
There are three primary ways to work with type on the Web:
- Use the existing set of fonts that are installed on most computers.
- Use an application such as Photoshop or Illustrator to create type as a graphic and save this graphic as a GIF, JPEG or PNG to place in a Web page.
- Use Web Fonts which can be placed on your server or linked to at sites such as Google, Microsoft or Adobe.
The first approach, which is the easiest, requires that you know what fonts are typically available for you to use.
Using the existing set of fonts installed on most computers
The following fonts are generally installed with basic Windows or Mac OS operating systems. It is safe to assume that these fonts are available on the computers of the vast majority of visitors to your site so you can use them in creating your HTML documents. Note that Georgia and Verdana are "screen" fonts specifically designed to be more legible on computer monitors than "print" fonts such as Arial, Helvetica and Times.
For a little more info, check out All the Fonts You'll Ever Need which was prepared by David Kadavy. For a lot more info, check out Kadavy's book: Design for Hackers: Reverse Engineering Beauty.
Source:
<style="font: 18px/22px 'Arial Black', Gadget, sans-serif">
Web page:
'Arial Black', Gadget, sans-serif
Source:
<style="font: 18px/22px Arial, Helvetica, sans-serif">
Web page:
Arial, Helvetica, sans-serif
Source:
<style="font: 18px/22px 'Comic Sans MS', cursive">
Source:
<style="font: 18px/22px 'Courier New', monospace">
Source:
<style="font: 18px/22px Georgia, serif">
Source:
<style="font: 18px/22px Impact, sans-serif">
Source:
<style="font: 18px/22px 'Lucida Console', Monaco, monospace">
Web page:
'Lucida Console', Monaco, monospace
Source:
<style="font: 18px/22px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif">
Web page:
'Lucida Sans Unicode', 'Lucida Grande', sans-serif
Source:
<style="font: 18px/22px 'Palatino Linotype', 'Book Antiqua', Palatino, serif">
Web page:
'Palatino Linotype', 'Book Antiqua', Palatino, serif
Source:
<style="font: 18px/22px Tahoma, Geneva, sans-serif">
Web page:
Tahoma, Geneva, sans-serif
Source:
<style="font: 18px/22px 'Times New Roman', Times, serif">
Web page:
'Times New Roman', Times, serif
Source:
<style="font: 18px/22px 'Trebuchet MS', sans-serif">
Web page:
'Trebuchet MS', sans-serif
Source:
<style="font: 18px/22px Verdana, Geneva, sans-serif">
Web page:
Verdana, Geneva, sans-serif
Many designers find this selection of fonts to be very limiting. So if the font selection is so limited, how do designers get all those beautiful typefaces onto Web pages?
Source:
<img src="house3009-spaceage-light.png" width="679" height="60" alt="font-sample1" />
Source:
<img src="isabella-regular.png" width="679" height="97" alt="font-sample2" />
Source:
<img src="killer-ants-bold.png" width="679" height="120" alt="font-sample3" />
Source:
<img src="cezanne-regular.png" width="679" height="150" alt="font-sample4"; background: #ddc />
OR they use
Web fonts. More to come on that topic.
