Typographic Portraits
Intro
I debated continuing to these on my portfolio, since they are pieces completed for a typography class and didn’t seem to have a “real world” purpose, but the more I revisit them, the more I find myself remembering details that I feel are relevant to share about my design process from ideation to execution.
Brief
For a DART 301: Typography for Web & Print, we were given a dozen prompts to choose three from and create typographic portraits of our names. All prompts were in the format of “My name is… and I am…” I chose:
- “My name is… and I was famous in a past life.”
- “My name is… and I’m an expert video gamer.”
- “My name is… and I’m lost.”
For this assignment, we could use our given name, surname, or a nickname, but the goal of the project was to focus on typography of a single word. As a note, I chose “Benjamin” instead of “Ben” both as a challenge and an opportunity, but also because using only three letters felt like a cop out.
Each portrait had to consider typeface, style, size, weight, and kerning/tracking to convey the persona of each “character” using a little supporting imagery as possible.
Prompt 1: “My name is… and I was famous in a past life.”
Concept
Despite the numerous types of fame one can find, I immediately thought of Broadway upon seeing this prompt. This typographic portrait has the most supporting imagery out of the three, but the stage and curtains are only there to give context. The letters themselves tell the story of being “famous in a part life.” The gold border and drop shadow to give the letters inner and outer depth to show they’re part of a life-sized sign. The light bulbs along each letter are mostly shining, but with several burnt out, it shows that the sign may still work but hasn’t been maintained in several years.
Typography
I looked at approximately a million examples of Broadways signs, real and illustrated, for this and landed on illustrating each letter myself, so this condensed sans serif font is “original” as much as a simplistic font based off of several others can be. I chose to keep “Benjamin” in all capital letters for a more uniform shape across all seven letterforms. Although I needed each letter to take up as little space as possible horizontally, I needed each stroke to be wide enough to fit lightbulbs along them.
Design
Without diving into the 3D features in Adobe Illustrator, I used several objects, a freeform gradient, various blending modes, and an outer glow effect to give the letters a more three dimensional feel.
Prompt 2: “My name is… and I am an expert video gamer.”
Concept
Video game graphics have come a very long way, but I am not actually an expert video gamer, and I grew up playing Mario and other platform games on my parents’ old Nintendo 64, so immediately I envisioned the title screen of a pixel art style game.
Typography
I took inspiration for the font from several examples of pixel video game fonts, often tagged as “retro”, on Behance and Freepik. After looking at a few examples, I decided to go with a bubbly style with wider stems, thinner strokes and crossbars, and less prominent counters.
Each letterform started at 8 pixels wide—not including the drop shadow—and was adjusted based on factors such as keeping the stems the same width in each character and how many other elements needed to be added. For example, the “I” is solely a stem, so it only needed to be four pixels wide.
Each letterform started at 8 pixels wide—not including the drop shadow—and was adjusted based on factors such as keeping the stems the same width in each character and how many other elements needed to be added. For example, the “I” is solely a stem, so it only needed to be four pixels wide.
I originally wanted to implement a gradient where each row or two of pixels were a different color, but ultimately, it felt too busy. So, I compromised by using a solid yellow with a single pixel highlight and drop shadow.
Design
To create this design in Adobe Illustrator, I created groups of slightly different colored squares to use as blocks in repeating patterns in the background. To comply with the “use minimal supporting imagery” requirement, I kept the background as simple as possible while still getting the point across. Although I had ideas of game objects and characters I could add, I didn’t want to distract from the typography.
Prompt 3: “My name is… and I am lost.”
Concept
Since I, personally, use Google Maps religiously, I quickly got the idea for a tie in with maps on this prompt. It quickly became an exercise in reverse-engineering a design because once I had the sketches of how I wanted the streets to build the letterforms, the only step left was to figure out
Typography
To create the letterforms out of streets on a map, I took notes on the different elements of Google Maps’ legend. I noted how some streets were wider and darker than others which would be perfect to make a distinction for the streets used in the letterforms rather than the other streets running through the background.
I used green blocks that typically denote parks and other green spaces on a map to fill in the counters of the letterform. This helps guide the viewer’s eyes to trace along the letterforms.
One debate I had while designing this was how many map elements I should add. Since we weren’t supposed to add too much supporting imagery and I didn’t want to distract from the letters, I didn’t put nearly as much as you would see on Google Maps in most places across the world (especially not as much considering I mainly used screenshot from Maps of Philadelphia for reference.) But one of my early ideas was to use the restaurant and store marker as the tittles on the “j” and “i.” This is the main reason why this is the only portrait to utilize lowercase letterforms.
Design
As for other aspects of the portrait’s design, I originally left out details like the names of streets, parks, and businesses, though I believe that, done sparingly, it doesn’t take away from the overall design. I tried to keep other business markers away from the ones being used as part of the typography, and even if the viewer doesn’t pickup on that aspect, it’s still legible. I pulled colors and fonts from screenshots and Google Maps’ style guide for familiarity.