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.
CSS