Learn Web Typography

Explore the wonderful world of web typography! Learn how to choose fonts, create hierarchy, and craft beautiful, readable text for your UI designs.
  1. How to Establish a Modular Typographic Scale

    How to Establish a Modular Typographic Scale

    Tutorial Beginner

    Possibly the most obvious typographic question in the hands of a designer is "which typefaces should I use?" The second question, one which rarely gets the...

  2. H&FJ Web Fonts: A Field Guide

    H&FJ Web Fonts: A Field Guide

    Tutorial Beginner

    Since Hoefler & Frere-Jones announced their foray into the world of web fonts, the internet has been overflowing with the rejoicing of designers and...

  3. Pairing Fonts is Like Feeding Children..

    Pairing Fonts is Like Feeding Children..

    Tutorial Beginner

    When starting a web design project there are a lot of difficult decisions to make, including the classic: selecting fonts. Well executed typography can...

  4. Taking Ems Even Further

    Taking Ems Even Further

    Tutorial Beginner

    I recently wrote about ems; what they are, how they're used and some bits and pieces to bear in mind when you implement them yourself. I only scratched the...

  5. Typographic Readability and Legibility

    Typographic Readability and Legibility

    Tutorial Beginner

    When using typography on the web, there are many things to keep in mind in order to create a page that provides clear access to the content and presents it...

  6. Understanding Typographic Hierarchy

    Understanding Typographic Hierarchy

    Tutorial Beginner

    One of the most important techniques for effectively communicating (or “honoring”) content is the use of typographic hierarchy. Typographic hierarchy is a...

  7. The Anatomy of Web Typography

    The Anatomy of Web Typography

    Tutorial Beginner

    Every conceivable feature of typography can be referred to by its name. Whether you're talking about the typeface itself, or the arrangement of type within a...

  8. Working With WebINK: Pro-Quality Fonts for the Web

    Working With WebINK: Pro-Quality Fonts for the Web

    Tutorial Beginner

    WebINK by Extensis is a web font service which gives you access to over a thousand font families, produced by the best foundries in the industry. As a...

  9. A Beginner’s Guide to Pairing Fonts

    A Beginner’s Guide to Pairing Fonts

    Tutorial Beginner

    Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing - selecting two which work together to achieve your typographic...

  10. Quick Tip: Instantly Preview Google Fonts in Chrome

    Quick Tip: Instantly Preview Google Fonts in Chrome

    Tutorial Beginner

    With the release of the Typecast public beta comes the next step in the wonderful evolution of web fonts. One of (if not the) biggest web font service is...

  11. An Introduction to Color Theory for Web Designers

    An Introduction to Color Theory for Web Designers

    Tutorial Beginner

    Today we're going to learn the importance of color in Web Design and how to choose a pleasing color scheme. This article is part of our Basix series, which...

  12. Emulating Microsoft's Metro Design Language

    Emulating Microsoft's Metro Design Language

    Tutorial Beginner

    Over the past few years, Microsoft has adopted its incumbent design language to a significant extent. Metro is the aesthetic basis of Windows 8; Microsoft's...