Star Wars styling (a silly idea that might just work)
I sometimes work with other designers helping them to translate their design atmosphere and wide screen layouts into responsive designs. Breaking down their designs into systems is big part of what I do. In practical terms that means working through what are sometimes dozens of static visuals to identify patterns of typography, use of colour and layouts, both smaller modules and whole page compositions. From these patterns I classify and identify elements and compose stylesheets based on them.
Classifying typography styles to develop typographic hierarchies can sometimes be challenging, especially when a designer’s type treatments can be — shall we say politely — a little inconsistent in their case, size and weight. Developing responsive layouts often seems to take no time at all and even the challenge of some fairly complex navigation can be solved in a few hours. But resolving inconsistencies in type styles always seems to take forever.
For the next collaborative project I’m going to try something a bit different as an experiment. Instead of working backwards from the static visuals to classify and identify styles, we’ll write styles for headings, body text and other type first. To make them easy to refer to, I’ll give those classes the names of characters from Star Wars.
You read that right. Star Wars characters as class attribute values.
Oh it gets better. I’ll use Sith characters for headings and Jedi for everything else. Here are some example Sith styles:
| Style | Family | Size | Weight | Case | Colour |
|---|---|---|---|---|---|
| emperor | Roman | 6.4rem | 800 | ||
| vader | Condensed | 4.8rem | 600 | ||
| sidious | Roman | 4.8rem | 800 | ||
| maul | Roman | 3.2rem | 600 | uppercase | grey |
Maybe I should explain, as I suspect you’re thinking this is the opposite of what you’ve learned because for years we’ve sweated over how to make our class and id attributes values as meaningful as possible. We thought that using pseudo-semantic values like content, main and complementary instead of presentationally named values made our code better. But better for whom or for what?
Today we can help people who use assistive technologies by adding ARIA’s ‘role’ attributes to parts of our markup but frankly a browser never cared what class or id you gave to an element. Browsers didn’t parse a class attribute value differently to any another and search engines never gave preferential results to pages containing supposedly semantic values. As for microformats, even the most enthusiastic advocate knows that their potential was never realised.
Users don’t see our carefully chosen, semantic naming conventions either and if they did they wouldn’t care, so that only leaves us, designers and developers whose job it is to work with code. We care about code that’s easily understood by anyone who needs to work on it. That often means that it contains classes and identities that can be followed easily.
This whole Star Wars naming started one night when I was racing towards a deadline. Faced with adding classes into a document and not having a convention to help me name them I joked about calling the next annoying, redundant class ‘jar-jar.’ After we’d stopped laughing I realised that it wasn’t such a bad idea after all.
I could use sith characters for headings ranging from the biggest — though not necessarily the most important semantically — represented by The Emperor to smaller headings represented by less important characters. If I need to name additional, occasional heading styles there are plenty of other bad characters to choose from. I can follow the same pattern with Jedi characters, naming the largest paragraph style Yoda and so on.
Anyone who’s seen Star Wars and knows that sith styles are for headings should easily be able to understand those styles and their place in the hierarchy in a stylesheet. In fact, it’s that a convention makes sense to everyone using it that matters, how you devise one is really up to you.
Movies are a rich source of potential but choose a series with plenty of characters if you want your system to scale. Despite my best efforts I don’t think I can make Planet Of The Apes last very long.