Review homework from last class
Show off your web page creation
Continuation from class 2: Dreamweaver’s Editor
Using Dreamweaver’s WYSIWYG Editor (Design View) for above activities
Typography & Web Design
2 Major font classifications: Serif vs. Sans-Serif
Activity 1: Read: http://visual.ly/serif-vs-sans-final-battle
Which is better for the web?
Things to Consider for Typography on the Web
There are many differences in handling type in print versus on the web.
Contrast – Poor contrast makes reading on screen straining. Black text on a white background is the easiest to read because it provides the most contrast.
Color – Color theory and color choice play an important role in web typography. (see class 1)
Readability – Sans serif fonts have been proven to be more easily read online in body copy because serifs make it tougher for the eye to follow, while the opposite is true for printed text.
Size – an important factor to consider when choosing your font styles. Text that is too small is hard to read, but text that is too big takes up too much space. Find a size that works well with your design:
Activity 2: Read: http://www.w3schools.com/cssref/css_websafe_fonts.asp
Web Safe Fonts
Web safe fonts are common fonts that are widely available on most computers and devices. When using web safe fonts, it’s a great idea to include a few options to fall back on in your CSS.
Activity 3: Read great reference & history lesson: http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/
What are Web Fonts?
“Unlike web safe fonts, web fonts are not pre-installed on the user’s system. The fonts are downloaded by the user’s browser while rendering the webpage, and then applied to your text. The main drawbacks of using web fonts is it will slow your site’s load time. There is also limited support for CSS3 in older browsers which is required to use web fonts. The later limitation can be remedied by using a font stack, similar to the web safe font stacks, but including a web font as the first font of the stack. If a browser is unable to use the web font it will fall back on the web safe fonts in the stack.” ~ CSS Font Stack
We’ll have a demonstration/lesson next class. In the meantime…
Browse: creator is from Delaware! – http://www.fontsquirrel.com/
Sites with a great use of typography
Activity 5: Find three (3) more sites with great typography. You can pick a gallery under the resources sidebar.
CSS Font Properties
You can customize the fonts in your HTML page with CSS.
font-family: georgia, serif;
Activity 6: Complete the exercises found here: http://www.w3schools.com/css/css_font.asp
Homework – DUE 9/14
- Finish quote splash page using Dreamweaver to edit css
- Complete the above activities 1-6 and be prepared to discuss next class. Please email screenshots of completion to firstname.lastname@example.org.
- Ongoing: think of a design style & topic for your final exam site