06 Typography on the Web

Week 6
10/8

Official Midterm Assessment and Peer Review I will make rounds and provide feedback in class or through email.

QUIZ testing comprehension of CSS Layout Strategies.

Type has exploded on the web. Principles of typography, formatting text and using type for effective communication when designing for the web. Activity: Practice using Typefaces from different sources. Activity: Peer Review.

Homework

Send peer review comments to peer and to me. Due: ASAP so the peer review can be incorporated into the midterm. Watch the videos on and by Carson. Create typography assignment. Read chapter 13. Due: In two weeks.

Materials

Additional materials for this unit can be found by following these links (29 pages):

Goals

The goals of this unit are to:

  • To catch up if you are behind, or to help other catch up if you are beginning to feel that you know what you are doing.
  • Provide critique, guidance and help to finish your partner’s midterm portfolio site.
  • Extoll the roll of typography in communication.
  • Understand the basic rules of Typography.
  • Introduce embedded web fonts.
  • Be able to work the text and fonts in CSS.
  • To be inspired to push the Typographic boundaries in creating your own work.

Outcomes

At the end of this unit, students will have:

  • A better midterm portfolio site.
  • Be better prepared in showing their finished portfolio next week.
  • A working knowledge of typography for use on the web
  • Access to the many web fonts now available
  • The ability to set the type rather than rely on the defaults.
  • Be conscious of what makes type legible.
  • know how to follow the rules, and when to break them for effect.
  • Be inspired by Carson discussing his work.

Step-by-Step

30 Review homework and answer questions.
40 Quiz
5 Assessable Tasks and grading rubric used in the evaluating each student.
40 Peer Review
10 break
5 Typography: Using type to communicate
5 Type on the Web
10 Lecture/Demonstration: Formatting Text
10 Lecture/Demonstration: Web Fonts
5 Character Encoding and entities lookup

Talking Points

Topics covered in the reading:

Chapter 10: Formatting Text with Styles

  1. Choosing a Font Family 243
  2. Specifying Alternate Fonts 244
  3. Creating Italics 246
  4. Applying Bold Formatting 248
  5. Setting the Font Size 250
  6. Setting the Line Height 255
  7. Setting All Font Values at Once 256
  8. Setting the Color 258
  9. Changing the Text’s Background 260
  10. Controlling Spacing 264
  11. Adding Indents 265
  12. Setting White Space Properties 266
  13. Aligning Text 268
  14. Changing the Text Case 270
  15. Using Small Caps 271
  16. Decorating Text 272

Chapter 13: Working with Web Fonts

  1. What Is a Web Font? 354
  2. Where to Find Web Fonts 356
  3. Downloading Your First Web Font 358
  4. Working with @ font- face 360
  5. Styling Web Fonts and Managing File Size 365

Current Practices

A lot of websites deserve to be looked at as standard bearers for the web. Here are a few that will provide inspiration as you implement your own typography:

Midterm Rubric

Midterm Rubric

above expectations

at expectations

needs work

below expectations

Volume of work Additional pages or exquisitely done pages. Complete website Fully functional front page, product page and bio page. Pages are not fully functional and incomplete. Pages missing or too incomplete to be functional.
Technical Ability Is innovative and uses User Experience guidelines and clear site architecture to develop engaging web site. HTML is semantic and validates. Various CSS strategies are used to layout the website. Code has errors but still works. Code does not work.
Clean Design Design is consistent with clear design elements throughout; Design tied to meaning; Nothing irrelevant, everything has a purpose. Design satisfies the requirement. Communicates its intent and is clear Design is simplistic and does not add anything to the communication. Design hampers the communication.
Research The portfolio is well situated and targets all potential users. The portfolio is well thought out from the artist’s point of view. Additional research did not broaden the horizon. The portfolio demonstrates artist’s perspective, but lacks general appeal. Lack of research shows up in product that is not clearly defined for any audience.

Assessable Tasks

Assessable tasks are those core tasks required to create modern web design.

Tasks / Activities Date Requirements/Indicators
Marking-up Content Week 2 Is the markup valid and semantically correct HTML5?
Styling the Content Week 4 Is the CSS valid, clean, and using structural selectors when possible? Are various layout strategies used to construct the pages?
Constructing the Portfolio Site Week 6 Information Architecture Is the site logically laid out? Is it SEO friendly? Is it tracked using Google Analytics?
Is the web site Future Proof? Week 8 Is the website responsive to a change in viewport size, from an iPhone to the standard web browser?
Explore CSS3 and HTML5 Week 9-11 Are CSS3 & HTML5 being used to create the final website?
Modularity and Interactivity Week 12-14 Are PHP and Javascript being used in the final website?
Forms Week 12-14 Are forms being used in the final website?

Definitions

These are the terms that participants should be familiar with during this unit. Most of you have had typography, and they should be familiar, but if not, please check out the “12-fall/06-typographic-resource/”Basic Typography Resource for more.

Text Type

Designed to be legible and readable across a variety of sizes

Display Type

Designed to attract attention and pull the reader into the text. It can be more elaborate, expressive, and have a stylish look.

Legibility

Legibility describes the design of a typeface and how easy it is to distinguish different letters from one another.

Readability

How easy words, phrases, and blocks of text can be read. Readability describes how well a typeface works in practice. Good typography is transparent in the way it encourages the user to read the copy.

Alignment

Text can be centered, justified, left or right-justified.

Inter Paragraph Spacing

Should you indent a paragraph or use a line space? Whatever you do, do not rely on the default. Design that spatial relationship like any other.

The Length of a Line of Text

Long lines of text are hard to read and make it difficult to find the next line. An ideal length is somewhere around 65 characters.

Leading

line-heght is the distance between one baseline of text and the next.

Kerning

The space between specific character pairs. Some combinations require more or less distance than others to make the space appear uniform. Kerning pair information is stored in the font’s metrics.

Tracking

Like Kerning, it changes the letter space between characters, but it does do for a selected line of them. Large type can be tracked negatively, and very small type sometimes needs some extra space to be more easily readable.

Case

Type can be lowercase, uppercase, and mixed case. Lower case (with capitalization for grammar) is standard. All capitals can be hard to read for more than a few words.

Font Style and Font Weight

Roman face fonts are the easiest to read. true italic and bolding are better than the browser’s algorithm for turning a roman face bold or italic.

Color

When you squint your eyes and look at the type, it hopefully has an even grey look to it. If it is blotchy, the tracking, kerning and justification can be adjusted to control for that.

Contrast

How the color of the text works with the color of the background. Black against white is ideal, but that can be too start. Large type can handle lower contrast better than tiny type.

Number of different fonts:

Keep it simple! Each font takes as much time to download as a large picture, close to 100K, so be sparing for both design and resource reasons.

Typeface

Choose readability for the body copy, either serif or san-serif, and if you are going all out for style, do that with the Display face.

Serifs

Serifs supposedly help lead the eye along the line of type, but I’m not sure if that is true or not with type on the computer screen, as course as it is. Either way, make sure that the text type is legible and readable.

Font Size

Generally speaking, fonts are not used in isolation, and are usually in a hierarchy developed to lock in particular font size ratios. There is also a hierarchy of font width to consider, from thin to thick, and from condensed to expanded. Be consistent and use your best design judgement, and make sure you read the last section on web fonts, and use rems to size your type.