Guest Article: Kitchen Sink Studios
There used to be a difficult choice to be made between utility and eye-catching web design, but as Kitchen Sink Studios explain in our latest guest feature article, those paths are no longer so divergent.
At Kitchen Sink Studios in Phoenix, Arizona, we’re all-in on web fonts. For years we’ve struggled with the same Catch 22 that all web designers have — if you want great design, you have to sacrifice on functionality.
For most of the past decade, when clients came in the door looking for a truly compelling visual presence on the web, that meant one thing — Flash. And Flash is great, in that it allows you to do a lot of things with design. But the downside, of course, is that Flash sites lack SEO features that HTML sites enjoy, and with the rise in use of mobile devices that aren’t always Flash-compatible, we found ourselves pining for a solution that could meet all needs.
And it got worse over time. Every time a client bought an iPhone and realized that their web site didn’t work on it, we felt a little bit of remorse. More and more clients started coming in the door talking about SEO features and making sure they showed up on Google and wanting to look great on their iPad. As a result, we pretty much stopped doing Flash web sites — they simply didn’t meet the needs of our clients.
We even had clients for whom we’d done Flash sites in the past come back and ask us to redo them in a way that would improve their SEO and increase their functionality on mobile devices. These organizations were used to high-quality design. So how were we going to preserve that design while offering them what they were looking for?
Enter web fonts. When we learned about them we immediately started using them in the design of our sites. They allowed us to do just about anything we wanted with design without using a hint of Flash (unless we wanted to for video or animation purposes). And they immediately had us working on ways to “flex our muscles” with design while using web fonts and enjoying the increased SEO and functionality they gave us. Web fonts not only solved design issues, they solved the SEO issues as well. Web fonts allow for the use of actual text in the design that search engines can read and index — providing a huge SEO boost.
One of the first things we decided to do was to redo our own company’s existing Flash-only web site using web fonts to enhance the design. We figured if we were going to sell clients on moving away from Flash and moving toward HTML5 and CSS features, we needed to walk the walk. So we began noodling designs that would be as creative as possible in representing the unique character of our firm — but would also look immaculate on any given browser.
Our goal was to almost go over the top with the use of web fonts. We wanted the design to be big and bold, while telling the company’s story in a compelling manner. We wanted to create a site that would leave no question in anyone’s mind that we could create something memorable using web fonts and code that would be SEO and mobile friendly.
Our new site at www.kitchensinkstudios.com is the result of that effort. We’ve gotten a lot of feedback on it specifically for its use of web fonts and how they’ve allowed for the unique and eye-catching design. We’re proud of what we accomplished with the site, and it’s been the source of a great deal of interest — as well as new business from companies looking for a similarly creative approach.
Web fonts have enabled us to not only improve the web sites we develop, but to do something even more important — attract new business. Clients are pining for a way to present compelling design that works on the full spectrum of devices, while preserving SEO functionality. We’ve been thrilled with web fonts and what they’ve enabled us to achieve.
When we approached the design of our site, we wanted to showcase the versatility of type on the web. Our designers researched a plethora of web font pairings, and ultimately settled on Bitstream’s Bodoni (with Poster Bodoni) and Brandon Grotesque. And within these self-imposed limits, we found great flexibility.
We love Bodoni for the sheer number of faces available within the same family. It can be elegant, bold, reserved, or striking. Along with Poster Bodoni, this is a family that manages to be both ultilitarian and stately in its character.
Brandon makes a great partner for Bodoni, with its softer edges and casual feel. Set in all caps, it's more modest than Poster Bodoni, so using the two together allows for rich, multi-level headlines. It's also an excellent text face for the type of shorter paragraph used in these varied, typo-centric layouts, with tall ascendars that make for wider line-spacing in shorter lengths.
Our new website was our first experiment with these web fonts, and we look forward to seeing what else we can do with them.Back...
Posted 11 Oct, 2011 by anthony-noel
Filter articles by category:
Filter articles By tag:
- Autotranslate (1)
- CSS (3)
- Drop caps (1)
- Fashion (1)
- Font stacks (1)
- grunge effect (1)
- hand drawn (1)
- Hosting (1)
- Illustrative type (2)
- Licensing (1)
- Line height (3)
- Logotype (1)
- natural media (1)
- OpenType (1)
- Print design (1)
- Publishing (1)
- Sans serif (1)
- Site roundups (1)
- Subsetting (1)
- Web design (2)
- Z-index (1)
Defining a CSS font family
In this article we're going to be digging into the composition of the CSS Font Family and how…
Part 1: We Need to Talk About Line Height
Getting line spacing right is one of those aspects of typesetting that is a tricky combination of…
Layering Type with CSS Z-index
Create colorful standout text effects by using the CSS properties z-index and position to layer…