My friends were split right down the middle on Colts vs. Saints, but I think we can all agree that the NFL’s plans to keep the new Superbowl logo the same year after year will deny generations to come the ability to say, “Shiny VAG Rounded and a Reflection? What were they thinking?”

Some of my favorites of yesteryear, complete with accompanying snark, below.

1966. The first Superbowl wasn’t a Superbowl at all. Very sporting of us to hold a “world championship” for a game only played in one country. Still, I can’t imagine how such a logo was approved during Don Draper’s 1960s.

1970. This one looks like The Future, or what The Future must have looked like in 1970 back when flying cars seemed right around the corner. The curved multiple lines are very IBM.

1974. A typographically interesting specimen; the curvy “X” is most unexpected and vaguely feminine for the manliest manfest in sports. It reminds me of a yearbook or a Carpenters album cover. I bet the designer got canned that year.

1975. But the very next year, something just as fonty. That’s the legendary Friz Quadrata, by the way, none to the masses as “the Law & Order font”. Also, back in 1975 the letter “X” must not have been as incredibly badaXX as it is nowadays or it would appear bolder. Or maybe the standards for what qualifies as “bold” have changed.

1981. This one just screams Wrath of Khan to me. No?

It’s worth noting that the slab-serif-plus-bezel style of the Roman numerals would be hard to shake for the next few decades.

1995. Peculiarly southwestern. Yes, it was in Arizona but I have to assume that—tame as the Mid-Nineties were—it was a deliberate decision not to play up the XXX theme. I could imagine a logo adorned with neon mudflap girls going over with the Nascar crowd.

2008. What are the chances this just so happens to so closely resemble the Obama logo of that same year? Why didn’t I notice that the first time?

You can see all of the old Superbowl logos here. What’s your favorite?

On a technical level, it’s easy. The words of this blog post are stored in a database and then formatted into markup (HTML) when your browser hits this webpage. Then a stylesheet (CSS) comes along and handles its appearance: which typefaces it uses, what colors it’s rendered in, any non-content graphics like icons or backgrounds, and even layout like whether the sidebar goes on the left or right.

On a semantic level, it’s more complex. Where does style end and content begin? Most of us would say that typefaces and colors are clearly style and not content, but what about capitalization and punctuation? Although it’s mostly obsessive designers ranting about small-capped subheads and em dashes, they are characters embedded in sentences. From a technical standpoint, they fall on the markup side of the markup/stylesheet divide.

Except when they don’t.

The blurry line

For lists, we consider it sufficient to specify whether items are ordered (<ol>) or unordered (<ul>) in the markup. The stylesheet then decides whether to provide bullets, numbers, Roman numerals, or even tiny hearts. Punctuation, in this case, is style. Typing “1.” in an HTML document is semantic heresy!

Those small-capped subheads are the same way. We specify a line of text as a subheader (<h2>) and the stylesheet can decide if it should be all caps, small caps, or left as is. Typing “THIS IS A SUBHEAD” limits these options, so we don’t do it.

Like lists and caps, we could leave it to the stylesheet to wrap any quotes (<q>) with the right quotation marks. It’s not hard to empower the stylesheet for this task and it would provide genuine value to cultures that don’t use double-quotes. Perhaps because quotation marks are readily available on our keyboard, our semantics-inspired idealism fades. We type ” and move on.

The line gets even blurrier with treatments like italics, boldface, or underlining. Traditionally, designers have used these visual alternatives not merely to illuminate or embellish, but to convey meaning. There is more than style at work in the difference between little women and Little Women.

Separation anxiety

Why does finding this line matter?

In your browser, it doesn’t. Content and style are reunited in a practically invisible process, leaving the fact that there even is a line irrelevant to the reader (although it makes the designer’s life better).

The divide is more pronounced with feed-reading. A feed-reader like Google Reader or NetNewsWire (my choice), accesses the content but leaves behind the style. Users of feed-readers value this “pure” approach as a (if not the) advantage over visiting each and every blog or news service to which they subscribe. It allows for quick and efficient reading… but at what cost?

There have been plenty of studies on how typography and other elements of style affect the perception of tone. Color and imagery are used to provide context. Consider the Wall Street Journal’s stipple portraits instead of photographs or A List Apart’s muted palette and watercolor illustrations that elevate it from just another tech blog to the Wall Street Journal of the web design world.

More than superficial enhancements are lost. This is an aside. In a feed, it’s just another paragraph and seems out of place.

Stylistic elements are used to decipher the personality of the speaker, which in turn allows you to parse the content more efficiently. Without these cues, it’s too easy to hit “next unread” and be halfway into a new paragraph before you remember that this author uses a lot of hyperbole and her claiming that everyone needs to be on Facebook is completely different than if the design director for NYTimes.com had said it.

Two solutions

The most basic solution is for authors to exert control over the context of their content. This might take the form of limiting feeds to article summaries, forcing a visit the website of origin in order to finish reading. Or it might be a branded footer including links back to the original source… a reminder that the feed is not congruent to the content, but a variant in an alternative format. This is a popular solution, because it’s something that an author can do by him- or herself.

A more complex—but potentially more satisfying—solution would be to allow for greater blurriness (the blurriness that already exists) in feed-reading. This would involve authors agreeing to abide by stricter semantic rules such as those provided by the hAtom microformat or new HTML 5 elements like <article>, <aside>, and <section>. In turn, developers of feed-reading software would allow styling for those elements alone. We could still provide transportability while avoiding the headers, footers, sidebars, and distracting advertising that have driven people to feed-readers in the first place.

This second solution begins to sound a little like the standards-free hell of email clients right now. Does GMail support this CSS declaration or that one? How about Outlook? No one wants to take that paradigm and apply it to the 90% working world of RSS feeds. Instead, we’re likely to see this situation resolve itself in one of two ways: the concept of authorship and context becomes significantly more important and require more attention than it has been in the past, or a generation that’s grown up with this new paradigm as the only one they’ve ever known says, “yeah, so what?”

The Grid

Having seen Mark Boulton and Khoi Vinh talk about grids at SXSWs and then reading the classic Grid Systems in Graphic Design I couldn’t not redesign my site using a grid.

In fact, I’m even maintaining a vertical rhythm as well (busting out some Bringhurst for that). This particular aspect isn’t 100% yet, as I’m having a time with borders throwing off my vertical grid, but I’m working on it.

Also worth noting is that I, while these strict grid types often make excessive use of Helvetica, after I did a bit of research I found that Gil Sans is included on every Mac and anyone with Word installed on Windows, so I’m going to use it here. Not everyone will have it, but it’s more exciting than Helvetica (and not enough people have Futura).

Colors

I’ve been thinking about how to embrace wabi-sabi on the web since I began the Stanifesto. How can you create something that weathers and gathers character with age in a digital medium? If you follow that last link, you’ll notice that the post is in black & white. That’s because all of my posts gradually desaturate with time now, and anything over a year old is grayscale.

Additionally, this site now slowly cycles through color schemes throughout the year. I wrote a particularly clever algorithm that grabs the day of the year and then calculates the color palette from it. That means that if you visit often, you may never notice that the colors are changing but if you only come by once-in-a-while, the site will have entirely different hues. You can blame my switching to locally grown, organic produce for this feature (just like certain fruit, the purple color scheme is only in season for so long so enjoy it while you can). Oh, and transparent PNGs play a large role here.

Goodies

Most popular posts! Recent comments! Contextual footers! Creative Commons license! All sorts of fun for those looking for it. Still to come is a full overworking using microformats and stylesheets that re-arrange content based on the size of your browser window. There are sure to be some bugs, too but I couldn’t wait until everything was ready or I’d never come back from vacation.

Speaking of vacation, I’m headed to Black Rock City next week, where I’m going to try to do the unthinkable and somehow continue to blog. We shall see.

A quick primer: as you’re reading this, my webserver is sending you text and images for your browser to display, but only specifying the typeface—not actually sending it. Your browser looks on your computer and tries to find it locally. If it can’t find it, the browser uses a different one. This has led designers to suggest “backup” typefaces, so a typical Cascading Style Sheet might look like this:

font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

In the olden days (the 90s), one solution was to pre-render certain text as an image instead. Unfortunately, this leaves non-sighted visitors out of the party, increases load time, and makes updates difficult. Scalable Inman Flash Replacement (sIFR) is a more modern technology that scans and replaces specified text with tiny Flash movies of the same words but in a different typeface. It works well and fails intelligently (if you don’t have Flash or Javascript), but still takes time and bandwidth—limiting it to titles and headers.

The best solution is for me to know what fonts you have on your computer and design using those. Afterall, a good designer can make due with non-fancy typefaces.

Microsoft’s Core Fonts for the Web

Microsoft (caution: Stan is about to praise Microsoft) realized this back in 1996 and released “Core Fonts for the Web“, a collection of 10 typefaces free for distribution and bundled with everything. The project was canceled in 2002 but five years after the project’s cancellation it’s still had an effect on the current landscape; the Top 10 reigning champs of web typography are:

Those are the only typefaces in the 90-100% range. After these, it drops all the way to 88% and keeps getting worse. However, different surveys show different results.

Big Question Time. Which 10 typefaces would you choose for a modern day “Core Fonts for the Web”? What would criteria be?

Since asking the question means I have to try to answer it myself, here are mine. The CSS3 specification contains 5 font families: serif, sans-serif, cursive, fantasy, and monospace. I’ve tried to make sure they’re all represented.

Stan’s ‘Ardkore Fonts for the Web

Serif

Garamond: I almost went with Caslon, but Garamond has an awesome capital W. There are lots of Garamonds out there, but I admit my preference for Adobe’s version.

Times New Roman: it ain’t broke.

Sans-serif

Helvetica Neue: my favoritest font ever. Seriously, who doesn’t love Helvetica? And this one is Neue.

Univers: Or maybe Futura? Does a gothic font deserve the second sans-serif spot? Univers is so versatile, though. You can bend it and stretch it into so many different shapes.

Cursive

Poetica: This has been my go-to cursive font since my college days. Swash capitals, alternate endings… it’s like the Collector’s Edition DVD of script fonts.

Caflisch Script: None of the script fonts have good Unicode support, but Caflisch is at least pretty.

Fantasy

Komika: I don’t know what’s up with “fantasy” fonts, but it makes sense to replace Comic Sans with something nice.

Uncial: This is fantasy, right? It’s from the middle ages, so…

Monospace

Everson Mono: 4,893 characters can’t be wrong (I’ve got your ∴, right here, buddy!).

Silkscreen: A pixel font! How useful would that be, eh?

Hmm… not sure how I feel about my picks. Let’s consider this a first draft. How about you? What would you add or subtract? Once we get the list finalized, we can approach the owners of each one and figure out how to bundle them with every browser (Firefox would be down with that, right?).

I take personal delight in pointing out typefaces to friends and family. “Excellent use of Garamond in this menu, don’t you think?” or “Wow, Adelaide for a law firm. That’s ballsy.” It comes across as terribly geeky, though it’s perhaps no different than a mechanic pointing out a custom tailpipe or a doctor noting that you really should have that Subdural Hematoma looked at. Still, my favorite of all fonts to note is Papyrus, if only for its incredible breath in usage.

To illustrate my point, I’ve just googled (oh my, the spell checker in Firefox 2.0 doesn’t recognize “google” as a word) some general categories that I thought might show a little Papyrus and, sure enough, they have.

Yoga is a no brainer. Spas, meditation centers, health clubs all use Papyrus out the proverbial wazoo. Its weathered outline conjures up an organic frame in stark contrast to a more modern font like Futura (which ironically was created 55 years previous to Papyrus).

This thread takes us through earthy endeavors such as landscaping, plant nurseries, or even local hippie gatherings. Papyrus is the perfect font to announce that save the oak tree grove benefit concert you’ve been planning. And the green grass grows all around, all around. And the green grass grows all around.

Since we’re getting back to nature, we might as well include Native Americans, right? Because, of course, the Cherokee probably just used the Roman alphabet but with kinda messy letters, right?

By now you may start to see my point. What exactly does Papyrus say about Africa other than that we think of it as an underdeveloped and rustic continent? Okay, barring the fact that papyrus was first popularized by usage throughout the Egyptian Kingdom—in which case it’s actually much more relevant to Africa than it is to Navajo yoga hippies.

In short, Papyrus is our font for The Noble Savage. It is unrefined and uncivilized without being barbaric, connoting health and/or righteous purpose. The incredible variety of things that is categorized in the American brain in just such a way is astounding, and entire sites exist just to watch where it might pop-up next.

With that, I’ll leave you to do some hunting on your own. Throw a link into the comments if you’ve found an especially telling use of Papyrus as indicator of “uncivilized” status. I’m not sure if this counts or not.

I am off for Japan and Korea for two weeks of “VacAsian”, to continue my sociological analysis of typography. Let’s see what typefaces they use to represent the West, shall we?