The Electronic Arts logo has undergone few changes in the company’s history. EA’s classic Square/Circle/Triangle corporate logo, adopted shortly after its founding and phased out in 1999, was devised by Barry Deutsch of Steinhilber Deutsch and Gard  design firm. The three shapes were meant to stand for the “basic alphabet of graphic design.” The shapes were rasterized to connote technology.

Many customers mistook the square/circle/triangle logo for a stylized “EOA.” Though they thought the “E” stood for “Electronic” and “A” for “Arts”, they had no idea what the “O” could stand for, except perhaps the o in “Electronic.” An early newsletter of EA, Farther, even jokingly discussed the topic in one issue, claiming that the square and triangle indeed stood for “E” and “A”, but that the circle was merely “a Nerf ball that got stuck in a floppy drive and has been popping up on our splash screens ever since.”

Something that immediately caught my eye was the word spacing (I think that’s what it’s called): it looked horrible. Here’s an example of what it looks like:

An example of the typography from the AiGameDev.com report

Agree? Disagree?

So to stop the madness once and for all I decided to take the law into my own hands and user customize the user customizations using Stylish (userContent.css is too unwieldy as you have to restart Firefox). All you have to do after installing Stylish is add the following user style (note that the !important bit is required to override the original author’s rules with those from the user stylesheet):

UPDATE: turns out users can could customize colors too so I added the necessary declarations to put an end to that to.

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document domain("twitter.com") {
    /* Change the background image and color */
    body {
        color: #333333 !important;
        background: #9AE4E8  url(http://assets2.twitter.com/images/bg.gif)  no-repeat fixed left top !important;
    }
 
    /* Change the default font color */
    body, ul#tabMenu li a, #side .section h1, #side .stat a, #side .stats a span.stats_count, #side div.section-header h1, #side div.user_icon a, #side div.user_icon a:hover, #side div.section-header h3.faq-header, ul.sidebar-menu li.active a, li.verified-profile a, #side .promotion a {
        color: #333333 !important;
    }
 
    /* Change the font color for most links */
    a, #content tr.hentry:hover a, body#profile #content div.hentry:hover a, #side .stats a:hover span.stats_count, #side div.user_icon a:hover, li.verified-profile a:hover, #side .promotion .definition strong {
        color: #0084B4 !important;
    }
 
    /* Change the font color of the line containing the time of the notice and some other bits  */
    ol.statuses span.meta a, .hentry .meta a {
        color: #999999 !important;
    }
 
    /* The rest is for for the menu on the right */
    #side_base {
        background-color: #DDFFCC !important;
        border-left: 1px solid #BDDCAD !important;
    }
 
    #side hr {
        background: #BDDCAD none repeat scroll 0 0 !important;
    }
 
    /* Headers in the side menu */
    ul.sidebar-menu li.active a, ul.sidebar-menu li a:hover, #side div#custom_search.active, #side .promotion, .notify div {
        background-color: #EDFFE5 !important;
    }
}

And you’ll end up with just a pretty cloud and the default theme colors :-)

UPDATE: turns out somebody else had already written another user style to achieve this. No problem though as it was fun to do this myself and I learned quite a bit in the process about using Stylish properly :-)