All / Class 04 - Getting Font Fancy with CSS

Class 4 – Getting Font Fancy with CSS

via GIPHY


Go over Homework from Class 3


Get Started: Copy class 4 from the server to your desktop. Manage site in Dreamweaver


Formatting Text

Hard return vs. soft return


Lists

In HTML, there are two types of lists:

  • unordered lists – marked with bullets. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
  • ordered lists – marked with numbers or letters. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Read & Practice: http://www.w3schools.com/html/html_lists.asp


Activity 1: Use Dreamweaver’s editor to add lists


Activity 2: Use CSS to stylize lists

With CSS, lists can be styled further, and images can be used as the list item marker. Try it:

Step 1: Copy this in your internal stylesheet (reference):

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

</style>

Step 2: Copy this between body tags:

<ul>

<li>Bach</li>

<li>Beethoven</li>

<li>Mozart</li>

</ul>

<ul>

<li>Bach</li>

<li>Beethoven </li>

<li>Mozart Cola</li>

</ul>

<p>Example of ordered lists:</p>

<ol>

<li>Bach</li>

<li>Beethoven</li>

<li>Mozart</li>

</ol>

<ol>

<li>Bach</li>

<li>Beethoven</li>

<li>Mozart</li>

</ol>


Display Typefaces vs. Text Typefaces

“The best text typefaces are easy to read in long blocks of copy. They do not call much attention to themselves […] Conversely, display typefaces are used to entice a reader into text copy, to create a mood or feeling, or to announce important information. Sometimes, they accomplish all these purposes at the same time. They are intended to stand out, and they perform well when they are appropriate. However, display typefaces can look peculiar in applications where text typeface designs are warranted.” – Fonts.com

Read: Text vs. Display by Alan Halley (PDF)

Activity 3: Customize Display and Text typefaces with Google Web Fonts

http://www.google.com/webfonts or search for Google web fonts at Google.com.


Type Poster Inspiration

You will be following along with instructor for the next activities. We will be using background images from the lovely Coffee Shop Blog.

Activity 4: Create font treatment in Dreamweaver with instructor

Choose one google web font in normal and bold weights.

http://weandthecolor.com/typographic-poster-design-from-etsy-shop-ppck/9976
Photo credit: http://weandthecolor.com/typographic-poster-design-from-etsy-shop-ppck/9976

Activity 5: Create font treatment in Dreamweaver with instructor

Choose two complimentary google web fonts

Read: https://designschool.canva.com/blog/the-ultimate-guide-to-font-pairing/

Photo credit: https://www.behance.net/gallery/Typography-Posters/11589149
Photo credit: https://www.behance.net/gallery/Typography-Posters/11589149

Activity 6: Create font treatment in Dreamweaver with instructor

Choose a script font and 2 colors

Photo credit: https://www.pinterest.com/pin/521432463075973273/
Photo credit: https://www.pinterest.com/pin/521432463075973273/

Activity 7: Create font treatment in Dreamweaver with instructor

Choose a font from google web fonts and get creative with color

typography, poster, digital art, inspirational art print with quote, dreams, motivational poster, graduation gift - MAKE IT HAPPEN



Homework – DUE 9/21

Find an inspiration poster or other typography example and replicate it using CSS in Dreamweaver. (Don’t overwhelm yourself with something super complex – simple is beautiful)

Ongoing: continue working on your Exhibit Site, updating your plan with elements that you now know how to implement. First home page design due soon!