Week 09

Week 09 – Topics

Web Typography
Design for the User
Web Standards
W3C Discussion
Accessibility issues
What is Social Media?

Deliverable: Design Comps (2 directions)


1) Continue working on your home page and landing page of the Design Technology website. Your midterm project is due Thursday, November 3


  1. Sitemap for entire site
  2. Design Comps (2 directions) Due Week 09 at the latest.
  3. Home page (HTML/CSS)
  4. First-level page for one of the sections. Commonly referred to as the “landing page.” (HTML/CSS)
  5. Posting your thoughts and decision-making process for this project on your WP blog.

Please make use of the following resources to get you started with your technical production. “Starter” code for 1, 2, and 3 column layouts.

You need to upload your midterm project to the class server in order to present your project to the class. Please do this BEFORE class on Thursday, November 3. Please upload your work in your folder and name it “midterm_yourlastname”

Web Typography: Examples

Jason Santa Maria

Web Typography: @ font-face, Typekit, Cufón

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

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


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


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.


Cufón aims to become a worthy alternative to sIFR, (sIFR, or Scalable Inman Flash Replacement, is a technology that allows you to replace text elements on screen with Flash equivalents), which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:

No plug-ins required – it can only use features natively supported by the client
Compatibility – it has to work on every major browser on the market
Ease of use – no or near-zero configuration needed for standard use cases
Speed – it has to be fast, even for sufficiently large amounts of text
And now, after nearly a year of planning and research we believe that these requirements have been met.

So, how does it work?

Cufón consists of a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.

The following browsers are supported:

  • Internet Explorer 6, 7 and 8
  • Internet Explorer 9 beta (as of 1.09i)
  • Mozilla Firefox 1.5+
  • Safari 3+
  • Opera 9.5+ (9.01+ as of 1.10)
  • Google Chrome 1.0+
  • iOS 2.0+
  • Opera Mini (to a certain degree)

Step 1 – Get cufón!

It is highly recommended that you always use the YUI-compressed version of cufón, available from the cufón website.

Updating to a newer version? Just replace your old cufon-yui.js with the new one and you’re good to go. Fonts need not be converted again.

Should you experience problems or if you just want to poke around a little, you may also use the uncompressed version, available from GitHub.

Step 2 – Generate a font

You may use the font generator at our website or run a copy of your own. If you plan on going for the latter option you’re probably clever enough to figure out how to get it running – the source is available from GitHub.

The name of the resulting file will include the name of the font and the weight of the font (as a number – 400 is equivalent to “normal” and 600 means “bold”). So, for example, the bold version of Bitstream Vera Sans would result in a file called Bitstream_Vera_Sans_600.font.js. The name of the file doesn’t actually matter at all, but it makes it easier for you to identify your fonts.

Using the generator should be pretty straightforward.

Step 3 – Replacing text

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">

<h1>This text will be shown in Vegur.</h1>

For the purposes of this example you may ignore everything that is not contained by <head>.

So what exactly happens here?

First, we include the YUI compressed version of cufón that you should always use.

Then we include the font that we converted in Step 2. Nothing special here, you include it just like you would any other JavaScript file. So far so good.

Then we get to the magic part. We want to replace all <h1> elements in the document. And that’s exactly what the tell cufón to do, with Cufon.replace(‘h1′). Nothing else is needed, cufón will use the CSS rules associated with the elements and determine what to do. You should not place Cufon.replace inside $(document).ready or similar functionality because it will make Step 4 ineffective.

In order to avoid unnecessary duplication cufón does not come bundled with a selector engine, which means that by default you’ll only be able to use tag names (such as h1) as selectors. However, cufón detects quite a few popular JavaScript frameworks (such as jQuery, MooTools, Dojo and Prototype) automatically, so if you’re using one you’ll only need to include it before cufón and things like Cufon.replace(‘#content > h1:first-child’) and Cufon.replace(‘#nav a’) will work just fine.

Step 4 – Making Internet Explorer behave

Unfortunately one problem remains with Internet Explorer. In most cases, there is a short but visible delay before the text is replaced. You can avoid this issue by inserting the following snippet right before the closing </body> tag (or before any external scripts such as Google Analytics):

<script type=”text/javascript”> Cufon.now(); </script>

And the delay is gone. For a more in-depth example, see API.

Note: This step will hopefully become obsolete in the future.

Using multiple fonts

To use multiple fonts you only need to specify which font you want to use and you’re set:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Vegur' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });

<h1>This text will be shown in Vegur.</h1>
<h2>This text will be shown in Myriad Pro.</h2>

If not specified, cufón will use the font that was loaded last (in this case it would be Myriad Pro), which is why there was no need to specify the font in the first example.


For simplicity, all examples use the HTML4 strict doctype instead of an XHTML doctype. You may use any doctype you want but a strict (X)HTML doctype will always yield best results. Quirks mode isn’t supported but might also work in some cases.

All cufón-enabled pages must be UTF-8 encoded. Compatible encodings, such as US-ASCII, are also fine

Above information found here: http://wiki.github.com/sorccu/cufon/usage


Where to get web fonts
Web Font Specimen: See how typefaces will look on the web

What is W3C?

“The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (abbreviated WWW or W3). It is arranged as a consortium where member organizations maintain full-time staff for the purpose of working together in the development of standards for the World Wide Web. As of February 2008, the W3C had 434 members.

W3C also engages in education and outreach, develops software and serves as an open forum for discussion about the Web. It was founded and is headed by Sir Tim Berners-Lee.” –Wikipedia

What is Web Accessibility?

Please read: http://www.everythingaboutweb.com/beginner/what-is-web-accessibility/

What is Social Media?

The definition of Social Media

Short Version

Any tool or service that uses the internet to facilitate conversations.

Long Version

Social Media is the democratization of information, transforming people from content readers into publishers. It is the shift from a broadcast mechanism, one-to-many, to a many-to-many model, rooted in conversations between authors, people, and peers.

Above from Defining Social Media: 2006 – 2010, Brian Solis January 2010

Examples of social media software applications include:

Brand monitoring

  •     Social media measurement: Attensity, Statsit, Sysomos, Vocus


  • Blogs: Blogger, Drupal, ExpressionEngine, LiveJournal, Open Diary, TypePad, Vox, WordPress, Xanga
  • Microblogging: Dailybooth, FMyLife, Foursquare, Google Buzz, Identi.ca, Jaiku, Nasza-Klasa.pl, Plurk, Posterous, Qaiku, Tumblr, Twitter, *Engagement Advertising & Monetization: SocialVibe
  • Location-based social networks: Facebook places, Foursquare, Geoloqi, Google Latitude, Gowalla, The Hotlist, Yelp, Inc.
  • Events: Eventful, The Hotlist, Meetup.com, Upcoming, Yelp, Inc.
  • Information Aggregators: Netvibes, Twine (website)
  • Online Advocacy and Fundraising: Causes, Jumo, Kickstarter, IndieGoGo
  • Social networking: ASmallWorld, Bebo, Cyworld, Diaspora, Facebook, Google+, Hi5, Hyves, IRC, LinkedIn, MySpace, Ning, Orkut, Plaxo, Tagged, Tuenti, XING, Yammer

Collaboration/authority building

  •     Collaboration: Central Desktop
  •     Content Management Systems: Drupal, Joomla, Plone, Siteforum, WordPress
  •     Diagramming and Visual Collaboration: Creately
  •     Document Managing and Editing Tools: Docs.com, Dropbox.com, Google Docs, Syncplicity
  •     Social bookmarking (or social tagging) CiteULike, Delicious, Diigo, Google Reader, StumbleUpon, folkd
  •     Social Media Gaming: Empire Avenue
  •     Social navigation: Trapster, Waze
  •     Social news: Digg, Mixx, Newsvine, NowPublic, Reddit
  •     Wikis: PBworks, Wetpaint, Wikia, Wikimedia, Wikispaces


  •     Game sharing: Armor Games, Kongregate, Miniclip, Newgrounds
  •     Media and entertainment platforms: Cisco Eos, Myspace, Youtube
  •     Virtual worlds: Active Worlds, Forterra Systems, Second Life, The Sims Online, World of Warcraft, RuneScape


  •     Livecasting: blip.tv, Justin.tv, Livestream, oovoo, OpenCU, Skype, Stickam, Ustream, Youtube
  •     Music and audio sharing: Bandcamp, ccMixter, Groove Shark, The Hype Machine, imeem, Last.fm, MySpace Music, Pandora Radio,  ReverbNation.com, ShareTheMusic, Soundclick, SoundCloud, Spotify, Turntable.fm
  •     Photography and art sharing: deviantArt, Flickr, Photobucket, Picasa, SmugMug, Zooomr
  •     Presentation sharing: Prezi, scribd, SlideShare
  •     Video sharing: Dailymotion, Metacafe, Nico Nico Douga, Openfilm, sevenload, Viddler, Vimeo, YouTube

Reviews and opinions

  •     Business reviews: Customer Lobby, Yelp, Inc.
  •     Community Q&A: ask.com, Askville, EHow, Quora, Stack Exchange, WikiAnswers, Yahoo! Answers
  •     Product reviews: epinions.com, MouthShut.com

Above material from Social Media, Wikipedia


What social media do you use?

How Mercedes Benz Successfully Uses Social Media to Engage

The Top 10 Questions Customers Are Asking You in Social Media
  1. Why should I like you on Facebook?
  2. Why should I follow you on Twitter
  3. Why would I value the experience? What would I take away?
  4. Why would I want to stay connected over time?
  5. Why would I choose to engage your updates in my social stream over those of my real friends?
  6. Why would I tell everyone I know to follow you?
  7. Why would I share your content with my audience of peers?
  8. Why would I decide to invest my time and express loyalty in your network and not mine?
  9. Why should I care if you don’t care about my needs, experiences, or questions?
  10. Why should I come back?

Above from The Number One Least Asked Question in Social Media…Why?, Brian Solis July 6 2011

Social Media Resources

Brian Solis
Chris Brogan
Social Media Examiner
Social Media Club
Nielson: The Social Media Report


No comments yet.

Add Yours

  • Author Avatar


Comment Arrow

Powered by WP Hashcash

About Author


Instructor for Graphic Design 67