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.
Read moreRead less
All content
Courses
Tutorials

All Web Typography tutorials:

  1. Photoshop CC 2014: What’s New for Web Designers?

    Photoshop CC 2014: What’s New for Web Designers?

    Tutorial • Beginner

    Last month saw the launch of the all new Photoshop CC 2014, with lots of great new features, especially for web designers, including improved Layer Comps and...

  2. Tips to Help You Properly Mix Text With Imagery

    Tips to Help You Properly Mix Text With Imagery

    Tutorial • Beginner

    In this article, we will discuss five different aspects of placing text over images that will help you properly mix copy and imagery.

  3. Designing an Elegant Blog Layout in Photoshop

    Designing an Elegant Blog Layout in Photoshop

    Tutorial • Intermediate

    In this tutorial I am going to show you how to create a simple, elegant blog layout in Photoshop. We'll use a strong image above the fold (wherever that may...

  4. Getting the Hang of Hanging Punctuation

    Getting the Hang of Hanging Punctuation

    Tutorial • Beginner

    Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web......

  5. Simple Visual Enhancements for Better Coding in Sublime Text

    Simple Visual Enhancements for Better Coding in Sublime Text

    Tutorial • Beginner

    Sublime Text offers thousands of extensions and settings to make a personalized code editor available for everyone. Right now, I’m going to show you some...

  6. A Web Designer's Typographic Boilerplate

    A Web Designer's Typographic Boilerplate

    Tutorial • Beginner

    I like to use a typography.css in my projects; a separate file which houses all the basic structural typographic styles I'll need. A lot of what's found...

  7. Figuring Out @font-face

    Figuring Out @font-face

    Tutorial • Beginner

    Within the last five years, typography on the web has taken quite an about face (sorry, pun intended). It used to be that web designers were constrained to...

  8. 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...

  9. 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...

  10. 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...

  11. 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...

  12. 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...

Related Categories

CSS
HTML/CSS
UI Design
Sketch
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.