Web Typography

Remember when there were “safe” web fonts designers were supposed to use? How quaint. Web typography today is richer than ever, and this course will teach you the practical application of traditional typographic methods to the web. You’re a designer; you know how type works. By the end of this course you’ll be competent in designing for web type and implementing web typography. This course includes in-depth instruction on appropriate HTML and CSS code, custom web fonts and services, jQuery plugins and much more. Experience in writing code and markup is required to participate in this course, as it will not cover the basics. You should be comfortable implementing jQuery plugins and working with basic JavaScript.


Patrick McNeil

Patrick McNeil, the creator of Design Meltdown, is the content director for HOW Interactive Design and the author of the Web Designer’s Idea Book series. He’s not only an HTML teacher, he can instruct in all the fundamental languages of the web—JavaScript, jQuery, CSS, and more.

500x500_Web-Typography

Workshop Length:

4 weeks

Tuition:

$199  $59.99 (70% off)

Start Date:

View Workshop Schedule

Register Now!


Objectives:

  • Learn the fundamental CSS properties for online typography
  • Explore HTML needs in planning for web typography
  • Work with external web font services and understand how they work
  • Implement jQuery plugins to enhance your online type
Who Should Take This Course:
  • Experienced designers who want improved web design skills
  • Web designers who want more focused knowledge of web typography
Prerequisite (or comparable experience):

Here’s What You’ll Learn:




Register Now!

Outline:

LESSON ONE: Getting Started with Web Typography
  • Introduction
    • jsFiddle
  • Building Blocks of Web Typography
    • HTML, CSS, JavaScript, jQuery
    • The Importance of Semantic Markup
    • Important HTML Tags
  • Assignment: Create a Semantic Block of HTML Content
  • Digging into CSS
    • Basic CSS Properties
    • Assignment: Applying Basic CSS Properties
    • Structural Properties of CSS
    • Assignment: Applying Structural CSS Properties
    • Stylistic Properties of CSS
    • Assignment: Applying Stylistic CSS Properties
  • Assignment: Final Steps
  • Additional Reading Material
  • In Closing
LESSON TWO: Advanced HTML and CSS for Typography
  • HTML Special Characters
  • Assignment: Special Characters
  • Pseudo Class Selectors
  • Advanced Text Shadows
  • Assignment: Advanced CSS Text Shadows
  • Assignment: Play With Your Text
  • Fancy Ampersands
  • Assignment: Style a Whole Article
  • Additional Reading Material
    • Margin collapse
    • CSS-based text columns
    • Ligatures
    • Clipping images to text
    • Hyphenation
  • In Closing
LESSON THREE: Custom Web Fonts
  • Web-Safe Fonts
  • @font-face
    • Font File Formats
  • Font Stacks
  • Where to Find Web Fonts
  • Working with Google Fonts
  • Assignment: Using Google Fonts
  • Assignment: Using a Google Font With Two Weights
  • Assignment: Revisiting the Magazine Article
  • Icon Fonts
    • How to Use Icon Fonts
    • Where to Get Icon Fonts
  • Additional Resources
  • In Closing
LESSON FOUR: Advanced Web Typography
  • Advanced Web Type Tools
    • Typecast
    • WhatFont
  • jQuery and Web Typography
  • Lettering.js
  • Assignment: Lettering.js
  • Assignment: Lettering.js Part 2
  • FitText
  • Assignment: FitText
  • Textillate.js
  • Assignment: Textillate.js
  • Continuing Your Education
  • Final Project Results
  • In Closing