Nutrition Facts Label

Introduction

In this second episode of RE:Creation, we’re going to re-create something that we’re all familiar with—the Nutrition Facts Label. This particular design is specific to U.S. Food and Drug Administration—although most nutrition information from other countries appear similar in terms of their tabular design.

We may ask, isn’t this label a print material (as opposed to digital)? Yes, this label—and others like it—are plastered in every packaging of edible products across the planet. Why would we delve into converting it for web then?

The purpose of making a print material suitable for web is to “open–source” its information. Making it suitable for web means marking up the content in HTML and in the process it becomes accessible to people surfing the internet (among other things such as web browsers, screen readers, and search engines).

But for the benefit of RE:Creation, the purpose of choosing a print material to re-create is to discover more about:

1. Separation of concerns of structure and style
2. The capability of CSS in terms of graphic design

[ntt_percept post=”nutrition-facts-label” “ntt_rec_nav”]