An Introduction to Web Fonts & Modern Web Typography
Simon Foster, Web Designer
-
-
Welcome to the class, an introduction and some context.
13:25 -
Main Project Part 1
9:20 -
Main Project Part 2
15:05 -
Main Project Part 3
11:33 -
Adding self hosted webfonts via fontsquirrel.com
7:37
-
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.
Class Projects 2 See All
10 of 12 students recommendSee All
Not sure why his review score is at 78%, he is very thorough and is easy to understand.
Quentin Ames
Graphic Design / Illustration
It was a really nice intro to this topic. Gave me the necessary foundations and helped me to raise awareness of the typography used on screen.
This was great. Amazing to see how typography had such a profound effect on look and feel of a site. Didn't think I'd learn about responsive design in this class, but was pleasantly surprised! great work Simon!
Chas Wagner
Community Manager at RunKeeper
I'm a freelance web designer running my own small studio in London, UK. I work with clients big and small from all over the globe, from Moscow to New York to Berlin and Stockholm. I also regularly write articles, give interviews and my work is regularly featured in well respected publications such as .net Magazine and awwwards.com amongst many others. I specialise in front-end responsive design and web typography with an emphasis on content and simplicity of use.
