Class 10

The Week’s Topics

Quiz 4 Review (Quiz on Monday, May 7)
Web typography Best Practices
Web Design Critiques (Typography)
Embedding fonts
Assignment: Web typography


Assignment 8: Due Monday, May 7

1. Embed a font. Create a webpage in HTML/CSS using the text below.

(or you may use your own text if you find other text more inspiring).

Be sure to use paragraph and heading h1, h2 etc tags.
Using color, size, font, spacing, and layout, enhance the overall look of the text on the page.

  • Embed one font-face into page
  • Use one web-safe font
  • Must use more than one color
  • Must use more than two different sizes
  • Must use line-spacing and letter-spacing
  • Use white space or negative space well.
Sample Text

Logo
Tagline

Seasons Together Void Called Under Was Divide

Appear There Second Years Good To Over

Moving can’t seasons them brought it heaven let divided midst. Spirit image whose, third cattle living. Likeness and hath, saying from creepeth won’t morning. He. Life spirit. Good him, don’t above in i unto under which place fly years days, so. I. You’re, every moveth so set dry kind so blessed him land. Whose creeping. Earth gathered which said may fifth shall abundantly.

Were Shall His Land After

Won’t seas second don’t fish Beast creature likeness. Abundantly our Winged appear be behold lesser in third fifth Every moveth made doesn’t is light is one shall first.

Our Multiply Light Land

Itself to third, sea hath divided sea very signs. His you’re you’re fly after waters beginning moveth without there third female years face, seed called. Don’t brought called sixth sixth set that, behold so moveth appear our gathering you’re blessed seed fish.

Them upon bring meat living they’re winged i spirit life Also signs appear own thing dominion herb air beginning doesn’t were to seas night for Seed land whales he so upon dominion there was for life grass you’re above very blessed without days second. Was hath fowl wherein said he behold saw firmament fourth herb fish lights signs lights very creeping green he and you’re unto, dominion.

3. Study for Quiz 4. We will take Quiz 4 in class on Monday, May 7.
4. Read all the Class 10 notes below.

Quiz 4 Review

Class 07
What is breadcrumbing? (From reading Breadcrumbs in Web Design)
Name 4 of the 5 link states when styling links.

Below are from our reading here: http://www.everythingaboutweb.com/beginner/navigation-basics/
What are the three basic questions a well-designed navigational system must answer?
A well-designed navigational system must also serve the goals of the site, name 2 examples of possible goals for a site.
What is the golden rule of navigation?
What is the 7 +/- 2 rule?
What does “hub and spokes” refer to?

Class 08
Name the three difference between HTML lists and text.
Name the first three steps of Technical Production as outlined in the class notes and here: http://www.everythingaboutweb.com/beginner/technical-production/

Class 09
What is Creative Commons?
Name three of the ten things that are important to double check about your project as specified in the Midterm Project checklist.


Basics of Web Typography

Please read: http://www.everythingaboutweb.com/beginner/web-typography/

Web Typography: Examples

Jason Santa Maria
http://www.jasonsantamaria.com

Quipsologies
http://www.underconsideration.com/quipsologies/

Bauhaus
http://www.extensis.com/en/WebINK/samples/bauhaus/

A List Apart
http://www.alistapart.com

Ride for the Brand
http://www.rideforthebrand.net/

Food Sense
http://foodsense.is/

How’s your Pony?
http://howsyourpony.com/

Web Typography Demo

Please download this file to use in class demo.

Web Typography: @ font-face, Typekit

While it would be nice to be able to just throw a font on the web and link it up, we’re hit with two major limitations.

  1. Licensing, and
  2. Browser Support of font formats: http://webfonts.info/wiki/index.php?title=%40font-face_browser_support

Even many free fonts have limitations on how they can be used, often times requiring specific directions on linking back to the original source or only using them in non-commercial sites.

These days, a number of resources are popping up—especially those dedicated to font embedding. A good start to finding the right font for your project would be Font Squirrel. Font Squirrel even provides @font-face kits to make implementation on your web site easy. However, even these kits don’t provide complete of browser support.

This exposed the elephant in the type foundry: Type makers have largely refused to license their raw typefaces on webpages out of concerns about piracy. The @font-face implementation has brought this concern to the forefront, prompting all parties to figure out a mutually copacetic solution. And many solutions are either available or in the works, ranging from augmented font end-user license agreements to hosted third-party font services such as Typekit, Typotheque, and Kernest.

Above information found here: http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master

@font-face

Please read the information above also located at: http://boldperspective.com/2011/how-to-use-css-font-face/

Typekit

Using Typekit – The Basics
Here’s a simple overview of how to find a typeface on Typekit and add it to your website.

Example: http://www.everythingaboutweb.com/classes/examples/typekit

Add a font to your kit
Log in at Typekit.com and you’ll see a few different ways to browse our library of typefaces. Let’s start by simply choosing Sans Serif style fonts, then look at a particular typeface in that list. So first, click the big Sans Serif button.

Find something you like in the resulting list of sans serif typefaces. We’ll click on the type itself to see the family in more detail, but you can also add this directly to your kit by clicking the “+ADD” button on the right side. After clicking the listing’s name or the type itself, we’ll arrive at a page devoted to just this type family. Here we can browse any additional weights and styles, try our own text in the Type Tester, and view screenshots of the type in every browser and operating system that supports web fonts. From here, we can also click the “+ADD” button in the upper right-hand corner.

Using the Kit Editor
Adding a typeface to your kit will launch the Kit Editor, which you can see at any time by clicking “Launch Kit Editor” at the top of the Typekit.com. The Kit Editor lets you bundle and customize typefaces and families for a particular website.

In the sidebar on the left, you can enter selectors that target specific bits of text on your website, and decide which weights and styles you’ll need (uncheck the ones you won’t use). You can also look to the Subset section for additional character support and the CSS Stack section to specify fallback fonts in cases where Typekit typefaces don’t load (e.g., in older browsers that don’t support the CSS @font-face property).

Now, follow these simple steps to get your kit published and fonts on your website:

  1. Tell the kit where to show up
  2. Put Typekit code into your pages
  3. Publish your kit

Let’s go over these steps individually.

Tell the kit where to show up
Click Kit Settings in the upper right-hand corner of the Kit Editor and enter up to ten domains where this kit should show up. You can use subdomains, too. When you’re done, click Save Settings.

Put Typekit code into your pages
Next, click Embed Code in the top right corner or your Kit Editor, copy the Javascript code, and put it in the head of your HTML pages. If you’re using a blogging service like WordPress or TypePad, what you need here is your Typekit ID (see also: our instructions for WordPress and TypePad).

Also, make sure you add the appropriate class name(s) to your text. Remember that from the Selectors area of your Kit Editor’s sidebar? You can read more about finding and using selectors with Typekit, but here’s what it looks like:

Publish your kit
Last, publish your kit. Within a few minutes (or a few seconds), you’ll have real fonts on your website.

Resources

Where to get web fonts
Web Font Specimen: See how typefaces will look on the web
Eight Important Factors of Good Web Typography

Web Typography Best Practices for Beginners

I don’t agree with the author’s emphasis on Arial and Georgia only, but I think he offers some really good best practices for web typography.



Comments

Sorry, but comments are currently closed.

About Author

jamie

Instructor for Graphic Design 66