One of my favorite designers, Chip Kidd, discusses designing the cover and interior for Haruki Murakami’s 1Q84. If you are unfamiliar with Chip’s work, The Book Cover Archive has put up a wonderful collection, both as a designer and as an art director.
LINKS
I have always been fascinated by the world of the luchadores. I remember watching luchador wrestling (channel 52, I think) as a boy with my Grandfather, who loved it. It’s almost a mythology unto itself; an epic battle between the rudos and the técnicos (basically good guys and bad guys). I love the costumes and masks, many of which are stylized representations of animals, ancient heroes and even gods dating back to the Aztecs. Talented Mexican designer Josè Guízar has used the golden age of luchador wresting as his inspiration for a fantastic desgin project; a premium, craft-brewed Mexican beer. The variety of styles are named after fictional characters, inspired by the classic style of 1950′s luchadores; Black King (Imperial Stout), Blond Gomez (Lager) and The Vampire’s Son (Red Ale).
Dubois & Barral recently completed a gorgeous new rebranding of the Hotel Excelsior in Paris. They designed everything from the print collateral and the website, to the theming of the rooms, including wall and fabric treatments. The colors, typography and use of vintage ephemera all work brilliantly together to capture the not only the spirit of Paris, but also the history of the 150 year old building itself.
LINKS
Typography has long been treated as the red-headed circus monkey of web design. The truth is, typography is just as important to the success or failure of the design of a website as it is to print, motion graphics or any other media. Unfortunately, until fairly recently, it was either difficult, time consuming or both to display anything than Arial or Times New Roman on your website. Sure, there was sIFR, but it was often slow loading and required Flash. Also, due in part to the horsepower required for display, it really wasn’t meant for body copy, but rather for just headers and logos. A few other alternatives followed, such as FLIR and Cufon. FLIR differed from sIFR in that it embedded images, not Flash, to display the chosen font. However, FLIR was ultimately even less accessible than sIFR. Cufon is different than both of the previous methods in that it converts the font paths to vector graphics. Cufon is still used, but primarily just for navigation and headers.
Perhaps the most widely used technique for getting great looking fonts on your website is the use of @font-face. Though it was defined in the CSS2 spec, it didn’t really take off until CSS3. Basically, it allows a font to be stored on the web server and simply referenced in the stylesheet for the page:
@font-face { font-family: ‘DroidSansRegular’; src: url(‘DroidSans-webfont.eot’); }
@font-face { font-family: ‘DroidSansBold’; src: url(‘DroidSans-Bold-webfont.eot’); }
Then, simply call it using font-family:
h3 { font-family: ‘DroidSansRegular’; }
Unlike sIFR or FLIR, @font-face doesn’t require a third-party plugin and, depending on the complexity of the font, is very fast to load. If there is a downside to @font-face, it would be that there are some hiccups in getting it to play nice with Internet Explorer. Not surprising, really, since IE has pretty much always sucked. That being said, @font-face is very easy to get up and running on your website. If you are a WordPress user, there is a fantastic plugin from Google, which lets you not only select from hundreds of free typefaces, but also makes displaying these typefaces on your website as simple as selecting a font from a drop down, then clicking the checkbox next to the element you want to affect (p, H1, H2, blockquote, etc). You can also add custom CSS to apply a selected typeface to elements within a DIV. Let’s take a look at a simple setup of the Google Fonts plugin on a WordPress-powered site.
Install and configure the plugin
You can download the plugin to your machine from the WordPress Plugin Directory. Or, you can simply log into the Dashboard of your website, click Plugins, Add New and enter ‘Google Fonts’ in the search box. Clicking on Google Fonts in the list will open a window where you can install the plugin.
Using the plugin is as simple as selecting the font you want to use from the dropdown, then ticking the check box next to the element you would like to use the selected font. You may also apply custom CSS rules to individual elements. For example, I use multiple fonts on my site and wanted to have my logo display in its own font. To make this happen, I simply added the following CSS into the Custom CSS text box on the plugin configuration screen, allowing me to apply a custom font to an individual DIV:
#site-title a { font-family: ‘Gravitas One’, arial, sans-serif; }
As you can see, whether you are using WordPress to power your website or not, adding custom typefaces is a fairly simple affair and can add a tremendous amount of impact and character to the overall design.
RESOURCES
I have been very fortunate in that I have been able to make a living doing what I love for most of my adult life, despite the fact that what I loved doing at any given moment changed many times. Since college, I have lived on both coasts and a variety of places in between. I have been a prop master, a milliner, a welder, a set carpenter, an html coder, an art director, an artist and, along with photographer (and my fiancé) Nicole Rae, started an online magazine for photographers, called Faded & Blurred which, oddly enough, often depends entirely on those careers that came before it. Though I have followed a number of paths (in fact, one of my best friends in the world would often tease me about my “career du jour”), they all were centered on creating something.
I was lucky growing up to have been encouraged to “follow my passion” by my Mom. She even gave me a book one year for my birthday called Do What You Love and the Money Will Follow. ”Life’s too short to get stuck doing something you hate”, she would tell me. She was right. [...Read More]
