Brief: Design and develop an informative interactive game focusing on an aspect of typography.
Concept: I took ten typefaces, Garamond, Didot, Courier, Avenir, Syntax, Bodoni, Sabon, Univers, Carme, and Helvetica. I put two of each typeface on a 4x5 grid of twenty tiles to create a memory game. I focused on the letter A of each typeface as it is fairly distinguishable across most typefaces. It takes two clicks to make a match, if the 2nd click does not equal a match you get an oops try again message. However if they are a match, the tiles fill with green, and display the typeface name that you just got correct. This essentially teaching you what attributes the A has across different typefaces.
Programs/Language: Illustrator, SVG, and d3.js
Behavior code showing function that initially draws the tiles.
Behavior code snippet showing how the tiles are matched.
HTML snippet showing the placement of the SVG section.
Back to Top