Typography

Type is always a part of the web page. The webpage type need be clearly legible. The legibility and readability are important for the web page typography. Unlike any other medium, the typography in the web space meets a great limitation. Unlike Flash, the dreamweaver program cannot embed the font you used. Please stay away many uncommon fonts, or a missing font problem may occur.

Graphic design is all about visual communications. Hierarchy is one of the most important principles behind the web layout design.

"Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor." - Brandon Jones

There are some important typography rules for designing web pages:

  • Read through the text yourself (a legible type and a readable content will be essential)
  • Show a clear hierarchy
  • Take care with type colors
  • Get serious about your CSS
  • Show a preference for sans-serif or for serif

Requirement :

  1. Create a "type.html" page. The page should have links and descriptions for the pages that are being linked to
  2. Create a "hierarchy.html" page (choose one typography related article or two, then design a typographic layout via HTML5 and CSS) and use some of the following tags to display multiple hierarchies:
    • p tag and br tag
    • em tag or i tag
    • article tag
    • aside tag
    • div tag and section tag
    • heading tags
    • strong tag or b tag
    • anchor tag
    • link tag
    • mark tag
    • ul tag and li tag
    • preformatted tag
    • span tag
    • cite tag or blockquote tag
    • ruby tag
  3. Link the external css file, "dwwk.css", on inserting a hyperlink here.
  4. Create a couple of gif images for the "graphic-txt.html" page.
  5. Create a text-overflow page, "overflow.html", by pasting some Dreamweaver related content.
    (overflow both text and images)

  • There are totally four pages in the type section: one main type page and three sub-pages.