Tools like Adobe Xd, InVision, and Sketch give you the ability to create clickable prototypes and make it easy to send a non-responsive version of your visual design to view on a smartphone or tablet device. However, relying on these prototypes for accurate evaluation is problematic. For example, in Figure 1, the screenshot on the left is a visual design created in Sketch specifically sized for the iPhone 7 Plus, viewed using the Sketch Mirror app on an iPhone 7 Plus. The screenshot on the right is a visual design created specifically for the iPhone 4s, viewed on an iPhone 7 Plus. While not ideal, you can still estimate what your smaller sized designs will look like on a slightly larger screen, the same isn’t true in reverse.

Sketch Mirror on iPhone 7 Plus
Figure 1

In Figure 2, using the same software setup, the iPhone 4s sized artboard is on the left and the iPhone 7 Plus artboard is on the right. Since these are both being viewed on an iPhone 4s, notice how the iPhone 7 Plus artboard on the right is significantly scaled, making it impossible to accurately evaluate your typographic choices.

Sketch Mirror on iPhone 4s
Figure 2

Fortunately, there is an easy way to evaluate your typographic choices in web browsers and on any of the myriad of devices available today. Based on the Web Font Specimen by @nicewebtype I’ve created the Responsive Webfont Specimen Page for you to use to evaluate your typographic choices at the beginning of the visual design process, not after you hand off the files to your front-end developer.

Resources

Screencasts

Part One - Introduction

In this screencast, you will go over the contents of the Responsive Webfont Specimen Page and learn more its use.

Part Two - @font-face

In this screencast, you will learn how to use the CSS @font-face property to load and evaluate webfonts.

Part Three - Google Fonts

In this screencast, you will learn how to use Google Fonts to load and evaluate webfonts.

Part Four - Typekit

In this screencast, you will learn how to use Typekit to load and evaluate webfonts.

Part Five - Uploading

In this screencast, you will add the Responsive Webfont Specimen Pages to you index.html page and upload the necessary files.

Grading

This assignment will be worth 16 points.