Tennessee’s new 248 byte state logo

Published on May 23, 2015

Updated 6.26.2015:

Since publishing this post, the redesigned Tennessee State Government site has launched. The new logo isn't rendered in pure CSS like below, but does use an SVG file that is about ~1KB when gzipped, which is still very performant and a fine way to go. If you are really interested in logos, performance and semantics, you may also enjoy this post by Harry Roberts

A new logo for the state of Tennessee made the local headlines this week. The red square with the state's postal code replaces many various marks for many different government offices, most of which used the iconic Tri-Star emblem from the state flag.

Unsurprisingly, the media coverage has focused around the $46,000 price tag, and the rudimentary simplicity of the new design. The definitive article on graphic design criticism as a spectator sport has already been written, but as a designer and a resident of Tennessee, I still feel compelled to respond.

I have been reading and researching a lot about web performance lately. When I saw the new state logo, I was struck by how easily it could be written in plain ’ol box-model CSS. Before I could open a code editor, I had most of it mapped out pretty well in my head. I did drag the screenshot into Photoshop to use the color picker to get the colors accurate. The example below was the result of a few more minutes of playing with the border, box-shadow, font-size, and letter-spacing attributes:

See the Pen New Tennessee state logo in 227 bytes of CSS by Nick Simson (@nsmsn) on CodePen.

The minified output of the css code is less than 250 bytes, which means this logo could be delivered to the tn.gov websites super-fast in a global CSS stylesheet without incurring any additional HTTP requests. GS&F, the advertising firm responsible for the logo hasn’t issued a case study yet, but the WSMV news reported that the logo would be used by several state agencies. Approaching logos and other website assets like this paves the way for a much faster, more mobile-friendly user experience for Tennesseans trying to access government services through weaker internet connections and data plans. For comparison, the average website size in 2014 was about ~2MB.

I do hope GS&F issues a release or case study soon, because I am still curious about the type their designers based the state logo from. In my CodePen demo above, I went with the closest web-safe serif font available on most desktop browsers. Ironically, that font is named “Georgia”.