Class 03 - Typography & Web Design

Class 3 – Typography & Web Design

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/


Web Fonts

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…

Activity 4:

Read: http://www.creativebloq.com/typography/free-web-fonts-1131610

Browse: https://www.google.com/fonts

Browse: creator is from Delaware! – http://www.fontsquirrel.com/


Sites with a great use of typography

http://www.dardenstudio.com/

http://www.modny73.com/inspiration/awesome-examples-of-typographic-web-designs/

http://astheria.com/

http://typedeskref.com/

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.

Example:

p {

font-family: georgia, serif;

font-size: 14px;

font-weight: normal;

line-height: 1.4em;

color: #000000;

}

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 clar7722@cecil.edu.
  • Ongoing: think of a design style & topic for your final exam site