VDES15738 Project 2: How Sweet It Is!

PROJECT BRIEF: Students are to select a chocolate bar and transcribe all text information from its wrapper, in English and in French. This copy text be used to explore contrasts, stance, weight variations, case, as well other variations within a typographical setting.


For this project, I chose to use the wrapper of a Ritter SPORT chocolate bar.

Based on the information that was on both the front and the back of the wrapper, I sectioned it as follows:

  • Primary: title, subtitles, type of chocolate
  • Secondary: ingredients on front of wrapper, net weight
  • Tertiary: nutritional facts, ingredients

This way of sorting the text on the wrapper was then placed into a HTML document that also shows the hierarchy of information, as well as the reasoning behind the decision to sort it that way.


Once the information had been organized, the second phase of the project was to begin organizing the information in terms of a visual layout done in InDesign, then code it in HTML and CSS.

For this project, we were given access to Monotype fonts and the goal was to use them, although due to embedding issues, they could only be downloaded and used for the InDesign portion. From the Monotype fonts, I chose Avenir Next and substituted it with Adobe’s Proxima Nova in the HTML portion.

The following images are a comparison between the InDesign layout and the HTML layout. The idea was to gradually reduce the font size based on which section of information was being displayed, while still being able to separate titles and subtitles through weight.

InDesign layout (left), HTML layout (right).

Due to the difference of fonts being used, the HTML layout doesn’t contain as much line spacing, in addition to the using both lowercase and uppercase letters in the section with secondary information.


The third phase of the project was to select one font size and create a visual layout based on that restriction. Font weight, line spacing and letter spacing (tracking) could still be changed. Once again, Avenir Next was used in the InDesign portion and Proxima Nova in the HTML portion.

InDesign layout (left), HTML layout (right).

Personally, I was very happy with the way that this layout turned out because I was keeping the same positioning of elements, but still managed to distinguish the title from the rest of the text due to the emphasized font weight and tracking. This time, I incorporated more capitals for titles and subtitles, rather than using a mix of uppercase and lowercase. There was also a change in font weight between the percentages for daily value in both layouts.


The final phase of the project was to create a layout that incorporated two fonts. I chose to combine both serif and non-serif, keeping the non-serif font for titles and subtitles, and the serif for body text.

Choosing the serif font proved to be a challenge because I wanted to use the same non-serif fonts but be able to match it with both, rather than picking two separate serif fonts.

The final font that I chose to use was PT Serif Pro. I like the condensed and tall look that it had and for some reason, I reminded me more of a non-serif font, despite the serifs. Once again, for the non-serif fonts, Avenir Next was used in the InDesign portion and Proxima Nova in the HTML portion.

InDesign layout (left), HTML layout (right).

For these layouts, I reverted back to using both uppercase and lowercase letters for titles and subtitles. I added more spacing between each section, in addition to trying to match the font weights from previous layouts.


This project was quite interesting to do because it surprised me how much font weight, font size, letter spacing and line spacing could impact a visual layout. Overall, I chose to keep the same layout throughout all three variations because I liked the way that the information was displayed, which occasional changes in the placing of elements. Turning the layouts into HTML/CSS layouts was a challenge because I was working with a grid and strictly using text only, rather than combining images. For next time, I wish that I could’ve used Avenir Next for the HTML portion as well, rather than changing fonts because it would’ve matched the InDesign layouts much better.