Reverse Engineering the Marlins Logo
When the Marlins unveiled their new Miami logos on November 11, 2011, I was struck by how it looked simple and “off-the-shelf”.
Most sports logos look and feel like they were designed with custom art and fonts and the designer put a significant effort to create something new. While the Marlins logo was a result of many iterations and careful review by the Marlins, MLB Properties and SME Design, the final result looks like a Photoshop job (yes, the Fish is more custom art but it’s a small weird protrusion from the basic large word mark). In fact, many reviews of the logo by design experts suggested the logo had an “initial concept” quality to it, meaning something that was put together using widely available fonts and techniques as inspiration for creating something custom and great. You would expect this from a corporate logo, not a sports logo.
As part of my redesign of this website to match the new Marlins look and feel, I wanted to test the theory above by using my amateur Photoshop skills to reverse engineer that basic elements and design language in the new Miami Marlins style. It took a few attempts but the ultimate process turned out to be so simple that I easily created the entire alphabet in Marlins font with all its variations in a matter of a few hours.
My thoughts below represent my research, opinion and trial-and-error. Don’t take these as facts but rather a process I used to “reverse engineer” the style. Maybe one day someone will tell the detailed story of how the logo was designed.
The Marlins word mark is composed of two elements: the rainbow colored M and the rest of the text (“IAMI” and “ARLINS”). The Rainbow M has an inner bevel that’s red on the sides, yellow on the top and blue on the bottom. The other letters are either black with a red shadow, white with a red shadow, or white with a blue shadow.
The rules for colors appear to be:
- On a white background (home uniforms), use black fonts with a red shadow and a grey outline. The fish has a white middle and no outline.
- On a grey background (road uniforms), use white fonts with a red shadow and a black outline followed by a grey outline. The fish has a grey middle and a black outline.
- On a black background (alternate uniforms), use white fonts with a red shadow and a black outline followed by a grey outline. The fish has a black middle and no outline.
- On a red background (Sunday uniforms), use white fonts with a blue shadow and a black outline followed by a grey outline. The fish is reversed (blue on top, red on bottom) and has a black middle with a black outline.
For the record, the Marlins have been inconsitent in following these rules when they make new one-off graphics, often deviating from the color combos and fonts (look how unpolished the text appears in the Marlins Park logo below compared to the official wordmark below it).
Much has been written about the Marlins rainbow of colors and I will, one day, write a detailed post just about the Red-Orange. My research, based on interviews I read with people involved in the the design process and my conversation with people in the know, led me to selecting the following colors:
- Red-Orange (#FD4239)
- Blue (#0077C8)
- Yellow (#FFD100)
- Grey (#8A8D8F)
- Black (#000000)
- White (#FFFFFF)
A key issue to understand is that color processes differently in fabrics, on the web and in print. The Marlins website, designed by MLBAM, turned Red-Orange into a orange despite the fact that the Marlins actually use a Pantone fabric color that is a variant of red. I’ve chosen a slightly warmer yellow as the Marlins fabric yellow is far too bright for web graphics.
Many have suggested that the logo uses a variant of the Futura font family but I believe they are using two different fonts. The Rainbow M is likely Futura, although could be a similar font such as Le Havre. As others have pointed out, the rainbow M is actually a W flipped upside down. Here it is as a W in the Safeway logo:
I don’t believe the rest of the word mark is Futura because the “R” does not conform to that style. I suspect that the Marlins may actually be using a variant of Highway Gothic (or its replacement Clearview), the standard font for US traffic signs. The Marlins have stated that they wanted a brand that would sell to fans of Miami, not just fans of the Miami Marlins so using the roadsign font actually makes sense.
For my design, I tested several free fonts that were inspired by Highway Gothic (Roadgeek, Expressway) and ultimately settled on Hit the Road. It’s far from perfect – the R and L are a bit too wide, the proportions of the A are a slightly off but overall, it captured the essence better than the other free alternatives. For now, I used that font for my capitals too. I though the width of the B and simplicity of the F worked better. If I were to try to replicate, would recommend Motor Oil 1937. I prefer its exaggerated W over Futura.
Designing the Rainbow Capitals
The easiest way to create the rainbow bevel is to take the letter and create a sharp “inner glow” (blending options in Photoshop). Create one in each of the three rainbow colors and then delete the unneeded parts so the yellow is on top, blue on bottom and red on the sides. The outlines should conform to the width of the outlines on the rest of the letter. The width and proportionality of all of these elements (bevel, shadow and outlines) can be easily determined by measuring pixel sizes on the real Marlins logo.
Look closely at the letter above and how really simple it is. You can draw this in Microsoft Paint.
Designing the Other Letters
Designing the remaining letters may take a bit more skill but is not a big challenge for anyone with basic design skills. Photoshop makes it easier but it can be done with less sophisticated software. Here is the process in 5 simple steps:
- 1. Create the letter in white (you may want to rasterize the layer and clean up any aritifacts)
- 2. Duplicate the letter, overlay red (via blending options) and lower it by a number of pixels to create the shadow effect (I found this more effective than using drop shadow tool)
- 3. Fill in the open areas (see the bottom corners of the red A) by copying and pasting or drawing and filling
- 4. Merge the white and red layers, duplicate them, and add a stroke to the duplicate with the black border
- 5. Duplcate the layer above and add a grey stroke
Note that Photoshop tends to round corners when you use stroke so you may need to manually clean up some of the corners.
You should now have several layers which you can easily adjust for color using color overlay. For black letters, for example, change white-red-black-grey to black-red-grey.
Putting It all Together
Now I have the entire alphabet in Miami Marlins style so I picked out the letters, lined them up tightly and then to get the Marlins curve, in Photoshop, go to Edit / Transform / Warp. Chose Arch with 20% bend and you’r done!
If you want to get really creative, you can spell out various words and even change colors. Here are some examples:
Or perhaps another Team name (with a little flame on the top right):
What if the Marlins never changed to Miami and remained Florida?
Or better yet, if the 1993 Florida Marlins used the 2012 Miami Marlins font style: