An Introduction to Web Fonts & Modern Web Typography | Simon Foster | Skillshare

An Introduction to Web Fonts & Modern Web Typography

Simon Foster, Web Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (57m)
    • 1. Welcome to the class, an introduction and some context.

    • 2. Main Project Part 1

    • 3. Main Project Part 2

    • 4. Main Project Part 3

    • 5. Adding self hosted webfonts via


About This Class

Typography on the web has come on leaps and bounds in recent years and is ever improving and evolving. Designers have more and more control not only of how they approach typography but also the fonts they use and the treatments they style them with, but with great control comes great responsibility. Typography on the web isn't just about choosing the latest pretty font, readability, usability and cross-device scalability must be balanced with aesthetics. 

Who should take this class? This class is for beginner level front-end web designers who are already learning, or about to learn HTML(5) and CSS(3) and want to hone and improve their typographical skills within the context of todays modern responsive and forward thinking design techniques.

The Project. Students will work through a series of type-heavy tasks on a mockup web page article that I will provide that will cover the functional, practical but also fun sides of working with type on the web. You will learn how to use both hosted and 3rd party webfonts, how to maximise readabilty for the user and provide safe fallbacks to aid usabilty, but most importantly how to really enjoy typography and see it as an exciting form of communication.

So what will you learn? The core skills that will be learnt in the class are:

  • The difference between good typography and choosing a nice font.
  • How to impliment web fonts using @font-face and via 3rd party services.
  • How to make your content consistantly readable regardless of the device being used.
  • How to use CSS(3) media queries to enhance the experience when suitable.
  • How to match different typefaces together to compliment each other.
  • How to use your use of typography to aid communication.
  • How typography can be used with images to great effect.
  • How responsive design has changed the way we view web typography and how to enhance the experience on all devices.