about

Originally, this page was going to appear as one of the main pages for Technique. However, i decided to co-opt the content i had made back into my own webpage. Here it goes.

The Publishing Services Bureau (PSB) and the associated MIT I.D. Team will be very explicit about the fact that what appears on this page is not the mit logo. Nevertheless, i feel that there exists a need, if only historic in nature, to preserve the mit logo that was in use until 2002.

MIT website owners should feel comfortable using whatever graphic identity they choose, even if only for kitsch, historic or sentimental value. As the logo evolves, so must we remember its history.

Classically, the mit logo has consisted of two parts: the mit and the text "Massachusetts Institute of Technology". This is different than the seal, which you can learn about here.

The 90s logo is amazing because it is all text, which means that the standards conscious publisher can actually implement it as pure text that is styled with css instead of as a graphic. The clear advantage is that a user that has disabled graphics will still experience the substance of the logo as intended. Neat!

Thankfully for the rogue publisher, the text of the 90's era logo is set in a demi-bold variant of Arial. The slightest differences, you will notice, creep in Arial's lowercase t with its chiseled ascender and the weight of the font which is slightly too wide and just a bit too stocky.

MIT Massachusetts Institute of Technology

The font purist may ask "What of Helvetica, Arial's superior counterpart?" Although Helvetica features a correctly shaped t, the problem lies in the fact that Helvetica is simply too tall and features an apparently non-uniform stroke in the M.

MIT Massachusetts Institute of Technology

code

To this end, the following may be used as an inline style definition for the logo. The problematic thing about this is that, obviously, it depends on the fonts Arial and Helvetica. In the worst of cases, the user will just see the words MIT Massachusetts Institute of Technology, but the effect will be lost.

The following should go in the head section of your html page, or optionally it can go in your stylesheet. You can feel free to play around with these values, but the defaults are pretty good...

<style type="text/css">
  .base_logo{
    letter-spacing: .025em;
    font-weight:    bold;
    color:          #b10a21;
    font-size:      1.3em;
    font-family:    arial, helvetica; 
  }
  .logo{
    letter-spacing:-.03em;
    font-size:3.7em;
  }
</style>

This is the following html snippet that you can put in your webpages, it will make the logos you see above. If you don't like the words Massachusetts Insitute of Technology, then just don't use them.

<p class="base_logo"><span class="logo">MIT</span>
  Massachusetts Institute of Technology</p>

The psb makes it clear that there are two official mit colors. If you are using the Pantone color matching system, then you will use 201 for red and 424 for gray.

For the web, however, the psb reccomends that you use #993333 for red and #666666 for gray. Web safe colors were all the rage ten years ago but are an antiquated holdover from those dark ages. Further, the colors in this combination look anemic at best.

MIT Massachusetts Institute of Technology

May i suggest the more lively #b10a21 for red and #636363 for gray.

MIT Massachusetts Institute of Technology

I honestly forget if it's worth the hassle to live your life in websafe colors, but these days, i figure that most people that are designing with css and whatnot probably use plenty of web un-safe colors. But i could be wrong.

When i started at MIT, is had a neat webpage where you could download the MIT part of the logo in different sizes so that you could liberally sprinkle it on your webpage wherever you felt like it. Here are cleverly made replicas: