In terms of typography, web designers have never had it so good. Whereas just a few years ago they were shackled to a limitingly small number of typefaces whose names you could count off on two hands, the advent of CSS3 has dramatically opened up the world of web fonts, relegating Georgia, Times New Roman and Arial to the bench amid a sea of possibilities.
But with such great opportunity also comes the challenge of acquiring a new skills set. Figtree Creative Network’s head of digital James Hurst says: “People that have grown up in the world of web design tend to create CSS font stacks and try to shine elsewhere. The thought of using type now can be quite scary for some people.”
Pietro Gagliano, VP and creative director at US-based interactive agency Secret Location agrees and suggests that excessive choice is why type can be so terrifying. “I would compare it to making a pizza for the first time when you’re a kid,” he laughs. “You want all the toppings at once and you don’t care for balance, you seek all the options possible.”
In order to get over this problem, both Pietro and freelance designer Cory Etzkorn advocate thinking about type at the very early wireframing stages, and changing your mind-set to encourage creativity. “Think as a print designer, not a web designer,” urges Cory. “Don’t start with a 960 grid. Don’t put your navigation bar on the top of the page. Don’t make all of your H1s the same font simply because it’s easy to set up the CSS that way. Don’t think too much about the technical constraints, think about the creative possibilities.”
It’s also important to choose type that supports a site’s concept, adding to the consistent mood existent in the imagery and copy, says Cory. When designing a site for mobile Cuban-American restaurant Wicked Palate, he wanted to find a series of typefaces that felt free-flowing and imperfect. “The food truck itself is very pieced together and unique, so I went with type that could show that aspect of the business,” he explains.
Cory cleverly paired two Typekit fonts, the solid but unobtrusive Adrianna and retro-looking Bistro, often using them together in the same phrase to highlight key words and create a cheeky personality.
Think also about why you’re using type and when it could be used instead of an image to create impact. When working for psychiatry practice Psych & Psych, Singapore-based studio We Are Section designed a site that was entirely type?led. Each time a user loads the website, one of five sets of symptoms are generated. We Are Section designer Eugene Boey says: “The specifics of each illness are important, we realised we couldn’t put the symptoms into the one image, but we could be a lot more accurate and engaging with keywords, to help people identify whether they have depression, for example.”
Although it helps to think creatively like a print designer, it’s essential that you research your fonts fully before you get too deep into the design. Rory says: “There are still technical barriers to consider – what typefaces foundries licence for screen, type designers applying font-hinting correctly, and discrepancies with how typefaces are rendered across different OS and browsers. So although the technical process of adding fonts to websites has become easier, there still needs to be plenty of testing and research before applying a typeface online.”
Design director at Blue Cadet Troy Lachance agrees. When working on cultural site With Art Philadelphia, Troy designed the pages in Photoshop, using Pragmatica Web Condensed and Pragmatica Web, tested both fonts on Typekit and liked their versatility. But when he started building, he realised some of the type wasn’t displaying quite as he’d hoped.
“Typekit’s version didn’t have a bold weight and, of course, I used bold a lot throughout the design,” sighs Troy. “Every condensed font you see on the site now was intended to be a bolder weight. It’s won our client quite a few awards, but I cringe a little every time I visit the site.”
The authority of the serif
Adding to the challenge, traditional web design rules, such as only using sans-serifs for body copy, are changing as screens up their resolution. Sans-serifs were originally favoured to get over anti-aliasing problems, but word-heavy sites like Google’s Think Quarterly and many newspapers including The Boston Globe, are opting for serifs, which many believe are less tiring on the eyes, and add an authoritative air.
For R&B Creative’s Ben Fogle microsite for BBC Worldwide, the designers also opted for serif body copy, hoping to use its unexpectedness to their advantage. Art director Mark Bannister explains: “We paired Georgia with Kameron, from the New Typography foundry, to reflect the strong individual personality of the adventurer.”
“It all depends who your target visitor is,” says Cory. “If you’re building a tech news site, go ahead and use the serif font because your audience will have the equipment to view it. If you’re building a medical site targeted at retirees, use a sans-serif font that guarantees readability.”
Similarly, Cory believes designers should think about usage when selecting type for mobile. “Mobile visitors are usually looking for content before they’re looking for whizz-bang effects and type experiments,” he says.
But here not every designer agrees, with some opting for type that best suits the platform, and others remaining sticklers for brand consistency. “When the user is looking at something on the phone they’re in a completely different mental space to when browsing on a desktop,” argues James. “If there’s anything we can do to deliver content in a more meaningful relevant way then I think that’s part of job.”
But R&B Creative’s Mark disagrees: “Consistency when it comes to a brand’s appearance on the web is of paramount importance. Ensuring [typography is consistent is just as important as making sure that] colours are kept the same from print to web, as well as the tone being consistent across all devices, social media avenues and any online interfaces.”
But both agree that simplicity is key to successful type, especially for sites that will be edited by the client. Mark says: “Elegant typography comes down to good design, with the theory that good design goes unseen. If the user experience is right then typography is merely the guide to lead you through and prompt you when necessary.”