Week 6
3/1
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: Work on Website in class/Peer Review light discussion.
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.
theQUIZ testing comprehension of CSS Layout Strategies.
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 role 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:
- An understanding of how to use grids in design.
- The ability to use CSS grids to do layout.
- A working knowledge of typography for use on the web
- Access the many web fonts available
- The ability to set 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.
Materials
Additional materials for this unit can be found by following these links:
- Type on the Web
- Typographic Resource
- Formatting Text
- Web Fonts
- Character Encoding and entities lookup
- Visual Literacy
- Homework
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
- Choosing a Font Family 243
- Specifying Alternate Fonts 244
- Creating Italics 246
- Applying Bold Formatting 248
- Setting the Font Size 250
- Setting the Line Height 255
- Setting All Font Values at Once 256
- Setting the Color 258
- Changing the Text’s Background 260
- Controlling Spacing 264
- Adding Indents 265
- Setting White Space Properties 266
- Aligning Text 268
- Changing the Text Case 270
- Using Small Caps 271
- Decorating Text 272
Chapter 13: Working with Web Fonts
- What Is a Web Font? 354
- Where to Find Web Fonts 356
- Downloading Your First Web Font 358
- Working with @ font- face 360
- 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(A) |
at expectations(B) |
needs work(C) |
below expectations(D) |
| Quality of work | Website effectively communicates skills, stands out, is comprehensive and exquisitely executed. | Fully functional front page, product page and bio page. | Website does not effectively communicate skillset. Pages are simplistic, not fully functional or incomplete. | Pages missing or too incomplete to be functional. |
| Clean Design | Design is consistent with clear design elements throughout; Design tied to meaning; Nothing irrelevant, everything has 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. |
| Technical Ability | Is innovative and uses User Experience guidelines 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. |
| Research | The portfolio is well situated and targets all potential users. | The portfolio is well thought out from the artist’s point of view but does not target audience. | 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. Lowercase (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 sans-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. 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 judgment, and make sure you read the last section on web fonts, and use rems to size your type.