Webwork
/
Fonts and Typefaces

typography

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:
  1. Use the existing set of fonts that are installed on most computers.
  2. 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.
  3. 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">
Web page:

'Comic Sans MS', cursive

poison
(Read this before using Comic Sans.)

Source:
<style="font: 18px/22px 'Courier New', monospace">
Web page:

'Courier New', monospace

Source:
<style="font: 18px/22px Georgia, serif">
Web page:

Georgia, serif

Source:
<style="font: 18px/22px Impact, sans-serif">
Web page:

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" />
Web page:
house3009-spaceage-light
Source:
<img src="isabella-regular.png" width="679" height="97" alt="font-sample2" />
Web page:
font-sample2
Source:
<img src="killer-ants-bold.png" width="679" height="120" alt="font-sample3" />
Web page:
font-sample3
Source:
<img src="cezanne-regular.png" width="679" height="150" alt="font-sample4"; background: #ddc />
Web page:
font-sample4
OR they use Web fonts. More to come on that topic.
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma