Consider these issues in typography for the web...

CSS Font-Size: em vs. px vs. pt vs. percent

How to Size Text in CSS

Improve readability with line-height

On your own...

What are the capabilities and limitations of each of these approaches to putting text on the web?

  1. Photoshop
  2. HTML formatting
  3. CSS styling
  4. Web fonts

...render one line from Dieter Rams' ten principles for good design (copied below) or browse these design quotation sites for other inspirational quotes to work with.

  1. Good design is innovative.
  2. Good design makes a product useful.
  3. Good design is aesthetic.
  4. Good design makes a product understandable.
  5. Good design is unobtrusive.
  6. Good design is honest.
  7. Good design is long-lasting.
  8. Good design is thorough down to the last detail.
  9. Good design is environmentally friendly.
  10. Good design is as little design as possible.

Five ways to work with type in web design

Companion page in design concepts: Typography for the web

1. Text from Photoshop

In the album cover exerise for our first WordPress blog post, we used Photoshop to add a text layer on top of an image. We exported it using File > Save for Web and this collapsed the text and images layers.

Why is Photoshop unacceptable for making complete web pages?

course web site

The web site could look the same, but what would be lost?

2. HTML formatted text

HTML formatted text is the most limiting stylistically, but it's the most useful for readability, searchability, and page structure. HTML formatted text lends itself to easy page scanning. HTML formatted text make use of headings 1-6, strong (bold) text, emphasized (italicized) text, blockquotes, lists (ordered, unordered, and definition), and paragraphs. We use HTML formatted text and headings to start our course home page.

Here is one example of HTML formatted text that we'll talk about in class.

3. CSS styled text

Here is one example of CSS 2 styled text that we'll talk about in class.

4. Web fonts

Here is one example of CSS 3 styled text that we'll talk about in class.

Use Font comparer to compare and choose web fonts.

 

Adobe Flash and text within video

Flash and text within video are yet more ways to work with type on the web.
More on that later.