Session 1: Today we will continue demonstrating the techniques required to produce the World Project. I will also assign the requirements for World Project Milestone #3.
World Project Milestone #3
Due: Week 6, Session 2 (before class starts)
1. Be prepared to show your template for final feedback
2. Illustrate working navigation to multiple pages or content areas
3. Demonstrate how your markup and stylesheet differ from the in-class demos
Session 2: Please be prepared to show your World project for group critiques and feedback today as described in World Project Milestone #3. Afterward we will discuss the requirements for the Typesetting for the Web exercise. This exercise is intended to illustrate the alternatives to web-safe type as well as alternatives to rendering type as images. Placing type as images in web documents used to be the only way that non-web safe fonts could be included in navigation and content headers. Although many web designers still use this technique it is well known that it limits accessibility and does not contribute to SEO enhancements.
Technical Exercise 4: Typesetting for the Web
Due: Session 1, Week 7 (4 points)
Description:
Use the CSS3 @font-face rule to apply several open typefaces to a single web document. Create three headings and three paragraphs of place-holder text on the page. Use a minimum three open typefaces or fonts that you have a license to use for the headings and paragraphs. Experiment with the CSS properties line-height, and letter-spacing.
Requirements:
1. Use the CSS3 @font-face rule typeset three headlines and paragraphs
2. Download fonts from an open web resource or fonts that you are licensed to use
3. Use three or more typefaces for the headlines and paragraphs in the exercise
4. Apply several examples of the CSS properties line-height, and letter-spacing
5. Add the files and folders to your environment and upload to your student webspace
6. Test loading the exercise from your portal before class on session 1, week 7
Points Breakdown:
3 points will be awarded for applying each typeface
1 point will be awarded for using line-height effectively
1 point will be awarded for using letter-spacing effectively
Relevant Resources:
CSS Text Layout Properties
Open Font Library
Font Squirrel
The three articles that I found address the best practices for web typography. These are really useful for beginners like me to read before diving too deep into editing your fonts for the web. The first one is an all inclusive guide to best practices and it talks about every section of your potential website. The second talks about choosing the right font and the last one talks about 3 must learn CSS techniques for perfect web typography.
http://bootstrapbay.com/blog/web-typography-best-practices/
http://www.usertesting.com/blog/2014/08/06/choosing-the-right-font-a-guide-to-typography-and-user-experience/
http://designshack.net/articles/css/3-must-learn-css-techniques-for-perfect-web-typography/
These links have a lot of info on typography for the web. The first link though is a video about keeping everything consistent between your css pages.
http://www.cssreset.com/keep-things-consistent-applying-css-to-multiple-pages/
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://webdesign.tutsplus.com/articles/a-web-designers-typographic-boilerplate–webdesign-15234
The first website shows CSS web safe fonts. It allows you to try it out as well by first starting with the font that you want and then it will give you the right font in the generic family.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
The second website talks about typefaces and how you can pick the right typeface that works best with your website.
http://webstyleguide.com/wsg3/8-typography/4-web-typefaces.htm
The third website talks about what exactly a typeface is.
http://www.webopedia.com/TERM/T/typeface.html
http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery
This website has tutorials on coding, this page has a tutorial on how to create tabs.
http://www.pallasweb.com/fonts.html
This article is about choosing proper typefaces for your website. It talks about different typefaces.
https://onepagelove.com/
This website has examples of one page websites and templates for websites as well as resources. This website is great for inspiration on your website.