The word typography refers to the selection and application of typefaces (aka fonts) to form a visual system that facilitates comprehension. Let us not confuse typography with type design, which is the design and programming of fonts.

This class will focus on the particular evolution and contemporary form of the latin alphabet. This is not to say that other writing systems haven't their own distinct histories and mesmerizing aesthetics. The latin script is far from alone on the web and has been interestingly challenged in code as well.

Nevertheless, in class we will review a linear history of the Roman letterform as we try and classify its various incarnations over time. We start with ancient Greece and the first antique scripts, moving on to the Trajan column in Rome, followed by Charlemagne and Carolingian script, and then the Humanist scribes.

After the invention of printing Aldus Manutius rejects Guttenburg's unreadable Fraktur. Later, many attempts at rationalization are undertaken starting with Albrecht Dürer, Claude Garamond, Fournier, and Baskerville, to arrive at the 18th century's modern typefaces: Didot and Bodoni. We'll follow Napoleon to Egypt, and the technologies of the 19th century that set the stage for modernism and the Bauhaus.

Web Typography

p {
    font-family: "Times New Roman", Times, serif;
}

The above code tells the browser to set paragraphs in Times New Roman. Should that not be installed in the user's system, then to move on to Times. Should that not work either than any old serif will do.

There are a number of ways to introduce fonts into your design:

Microsoft's Web Safe Fonts are installed on every computer by default. The selection is very limited and was obviously not made by anyone who enjoyed typography, but some of them (Verdana and Georgia) aren't bad at all. The others can be interesting when used with deliberate ugliness. But to expand on this limited list, the user will have to download a font file:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /*IE9*/
  src: url('webfont.woff2') format('woff2'), /*Modern Browsers*/
       url('webfont.woff') format('woff'), /*Other Browsers*/
       url('webfont.ttf')  format('truetype'), /*Safari, Android*/
       url('webfont.svg#svgFontName') format('svg'); /*Old iOS*/
  }

The @font-face rule allows you to host your own typefaces. The practice often violates the EULA (End User License Agreement) of most fonts, but should you have your own designs or a special license to do so, Font Squirrel helps convert .otf files into the various formats necessary to support all browsers. This article clarifies the list of fonts files needed to support most browsers. Once you've linked your fonts you can call them .

Most designers end up using some kind of web font hosting service: Google Fonts (free and fine), Typekit (a paid but popular option), Hoefler & Co. (offers a selection of free fonts), Webtype by Font Bureau (paid but quite good), and my favorite: Typotheque by Peter Bil'ak. All link to files using the @font-face rule, but do so in a way that tracks its usage and license compliance.

Homework

Read the available online chapters (Letter, Word and Grid) in Thinking with Type by Ellen Lupton. If you can, go to the library and read the book in print. The rules espoused in print-based typography books are often too detailed for the screen and impossible to control on the web. Still, I believe that a discipline honed over centuries in print will offer an ideal against which we can compare forms on the web.

Recommended

You may find Robert Bringhurst's The Elemenets of Typographic Style, Robin Kinross' Modern Typography, and Gerrit Noordzij's The Stroke at the library. Each has profoundly influenced typography and our understanding of graphic design.