M8: Advanced TypographyClass Recap: In this module, you learned how to incorporate type faces in your HTML pages. Using web fonts adds a whole new dimension to your design and page styling options. You now have the ability to use almost any combination of fonts to take our pages out of the ordinary and truly make impactful designs for the web. Google Web Fonts provide the easiest way to accomplish this, but we also looked at embedding our own local fonts and using the Adobe TypeKit service. No matter which method you choose, type must be readable and easy to understand. Using color and contrast, we styled type to accentuate readability and elevate the user experience.
Student Outcomes
|
In class:
Create a type design for each of the 8 inspirational quotes provided in the module. Use interesting fonts and color combinations to bring life and character to the text. You have the option of creating an HTML page for each quote or give each its own full span div and place them all on the same page (see enclosed example). The outcome should be similar to Chad Mazzola's Beautiful Web Type project.
http://hellohappy.org/beautiful-web-type
The goal of this assignment is to create interesting type pairs using web fonts. You may use Google Web Fonts or embed your own. Try and use fonts that complement each other and add interest to the phrase. For example, try pairing a slab serif with a fat script font to add contrast. Use scale, color, and contrast to really push the design.
Purpose
This assignment reinforces the topics covered in the module, including the CSS @font-face property, embedding fonts, using Google Web Fonts, and designing with typography for the web.
http://hellohappy.org/beautiful-web-type
The goal of this assignment is to create interesting type pairs using web fonts. You may use Google Web Fonts or embed your own. Try and use fonts that complement each other and add interest to the phrase. For example, try pairing a slab serif with a fat script font to add contrast. Use scale, color, and contrast to really push the design.
Purpose
This assignment reinforces the topics covered in the module, including the CSS @font-face property, embedding fonts, using Google Web Fonts, and designing with typography for the web.
Final Project Proposal
Imagine you are pitching this project to a client, and you are competing this job against other 5 designers. What makes your proposal stand out? A solid concept backed by comprehensive research and a nice design.
Site proposal should include the following
|
M8 Discussion
What are some of your favorite web fonts?
List a few of them and describe how/when you would use them.
Please <click here> to participate discussion. (Participation points)
List a few of them and describe how/when you would use them.
Please <click here> to participate discussion. (Participation points)
M8 Homework
1. View the videos in M9 and complete the tasks.
2. Finish your type paring homework
Complete your type setting exercise that you started in class. Use interesting fonts and color combinations to bring life and character to the text. The outcome should be similar to Chad Mazzola's Beautiful Web Type project shown to the left.
http://hellohappy.org/beautiful-web-type Have fun with this assignment. Here are some fun sites to look at www.impertinents.com/ http://ameliaandsteve.com http://www.1one.tokyo http://thesquid.ink/solid-icons/ http://www.cedevita.com/en/index.html <click here> to post your url on homework submission discussion page |