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.
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.
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.
In this screencast, you will go over the contents of the Responsive Webfont Specimen Page and learn more its use.
In this screencast, you will learn how to use the CSS
@font-face property to load and evaluate webfonts.
In this screencast, you will learn how to use Google Fonts to load and evaluate webfonts.
In this screencast, you will learn how to use Typekit to load and evaluate webfonts.
In this screencast, you will add the Responsive Webfont Specimen Pages to you index.html page and upload the necessary files.
This assignment will be worth 16 points.