The objective of this project was to learn more about typographic hierarchy and how to incorporate the element into a text-based web article that can be translated from a desktop model to a mobile version while maintaining its effectiveness.

With the purpose to focus on the typographic and visual elements, to convey the emotion and aesthetic of the piece into a an interactive article, I created a landing page that highlights and recognizes the “Lost” element of the pieces’ title. Using the contrast between the size, weight, colour, and natural differences in anatomy of sans-serif and serif typefaces, the landing page has a fixed background of certain letters of the title with filled text, while others remain outlined. The outlined letters become filled as the user scrolls down the page to read the text, and the fixed background scrolls along once the letters are filled.

As I started the project designing the web-version, translating the graphics and typography onto a mobile surface was a learning curve for me to reevaluate type sizes and padding. To have the same aesthetic and motion be moved onto a much smaller screen, I enlarged the letters to fill the whole mobile screen, much like the web version.