October 9, 2013
Today’s guest post is authored by designer Brian Warren.
While I was at Happy Cog, we designed and built our own blog called Cognition. It was one of our first projects using web fonts. We knew from the get-go that we were going to use web fonts, and settled on Clarendon for headlines and Franklin Gothic for a sans-serif that we used for navigation, captions, and various ephemera throughout the site.
I had a lot of fun as I started coding the site with type in mind. I’m sure you can relate to the feeling we got the first time we saw all of these beautiful typefaces in the web browser. However, we realized we had made a bit of an oversight.
In our excitement in getting to use web fonts, we had used far too many weights of Franklin Gothic, which was now bogging down the page weight. So I sat down with Chris Cashdollar, the designer for this project, and we made some tough decisions to pare the choices down to a few solid weights.
In retrospect, the final result was even better. The consistency offered by using fewer weights of the typeface, though somewhat forced upon us at the time, made for a more stable, effective design.
Respecting your constraints
What we learned is that it’s easy, way too easy, to get carried away with web fonts. I don’t know about you, but when I come across a really well-made typeface that has loads of weights and styles, all beautifully hinted and looking stellar across all the sizes you need, I can’t help but want to use them all.
But just because you can doesn’t mean you should. This is an important design lesson that applies far beyond typographic choices, but for the purposes of selecting type for a design, Robert Bringhurst summed it up succinctly in The Elements of Typographic Style: “Don’t use a font you don’t need.”
He goes on to say: “The marriage of type and text requires courtesy to the in-laws, but it does not mean that all of them ought to move in, nor that all must come to visit.”
Bringhurst is suggesting a simple, very deliberate approach to choosing typefaces for a design. Let’s work through an example.
Here is a sample of text set in Chaparral. It’s a simple paragraph with a headline. When choosing how to style the headline, my gut reaction is to make it bold and big. Again, Bringhurst suggests exercising a bit of restraint: “Change one parameter at a time.”
So, perhaps choosing to set it in italic, at text size, is a solid move that allows some flexibility as we move up through the hierarchy. As we start to style the more important headlines (in web design parlance, moving from h6, h5, and so on up to h1), we can proceed to make small adjustments. Let’s keep going:
For the “slightly more important” headline, I removed the italic and chose the bold weight. The size is still the original text size.
For the “quite important” headline, I went back to regular text weight, and used a larger type size. In the end I have three rather useful and diverse headlines that were built from regular, italic, and bold text. I intentionally stuck with those three, because since we’re working with our main text typeface, bold and italic are already going be in my webfont kit. Of course you can pack whatever you want in your kit to start, but in my case, the body text has the regular weight, the bold, and the italic.
Mocking up the rest of the set is a simple matter of making more small parameter changes while staying true to the typeface.
We’ve made it from h6 to h1 making only modest adjustments to the type, all the while sticking with either the regular, italic, or bold versions of Chaparral. I feel like we’ve only barely scratched the surface of what’s possible here. Other modest ways to differentiate might be to use color, or you could even (gasp) employ a line.
Does this mean you avoid using anything other than the main text typeface in your headlines at all cost? Of course not. Maybe a semibold ends up being the best choice for some of the headlines, or, jeepers, why not a sans serif? However, this exercise is enormously helpful in forcing us to carefully consider which typefaces make it into our project and which ones have to wait until next time. Giving extra weight (pun!) to these decisions is important from the perspective of both design and site performance.
When designing a full set of headlines like this, it’s a great idea to start with the smallest headline and work your way up like we did today. While you’re at it, make sure you design how bolds and italics look in a paragraph, as well as lists, blockquotes, and all the common styles that will show up in a page. We call this a “General Styles” page. You can include tables, images, captions, and even form elements. Planning ahead for the styles you might need in the future helps you build a more complete typographic system and avoid any surprises.
Be Good Not Bad
When I was redesigning my own site, Be Good Not Bad, I decided to put this idea of working within constraints to the test. From the headlines down to the body copy, and everywhere in between, I used a single typeface.
The typeface I picked was Eric Olson’s Colfax a semi-oval sans serif with tons of spunk. The lowercase “a” immediately drew me in and didn’t let go. I knew when I saw it I could use it exclusively for my site.
I used three weights: Regular, Bold, and Black. It worked great for this design, kept my web font load nice and small, and was a fun exercise in restraint.
In the end, I don’t mean to rail too hard against web fonts or even using a few different weights and styles. I absolutely love that web fonts like Franklin ship with a bevy of different options. It’s beautiful, and there’s certainly a time and place for every single one of them.
The route I took with my blog is definitely not a prescription for designing every site. I love to mix it up, and you should too. What I do recommend, however, is to start small and keep it lean from the get-go. That will open up your options for when you flesh out the rest of your design.
October 8, 2013
Typekit is proud to be sponsoring the ATypI conference, presented by the Association Typographique Internationale, for our third consecutive year. The theme for this year’s conference is “Point Counter Point,” and it is being held in the culturally-rich location of Amsterdam. ATypI ties these two elements of the conference together, explaining that the “interplay of point and counter point also embodies the way visual communication is created and perceived, and it reflects the back-and-forth dialogue that characterizes so much of Dutch cultural history.”
Our colleagues David Lemon and Frank Grießhammer of the Adobe Type team will be presenting their talks at ATypI, as well as other industry luminaries including Georg Seifert, David Brezina, and Nick Sherman. Several members of the Typekit team are in town for the event, so please stop and say hello if you see one of us!
In this week’s sites we like, here are a few people (and organizations) who are working to make the world a better place for everyone.
Based in Paris, L’Institut Choiseul is a think tank designed to support research into economic governance issues, both in France and abroad. Leitura News is a beautiful choice for a big, dynamic header text, with other serif text in Kepler and clean navigation elements in Soleil.
Designing for Social Change by Andrew Shea offers case studies and real, concrete strategies designers can use when working in collaboration with nonprofits and other socially-motivated organizations. DIN Condensed appears for a bold headline font, while other body text is, appropriately enough, set in the open-source Open Sans.
Countless New Yorkers face a real challenge when it comes to finding stable housing, and Common Ground aims to help end homelessness in the city with their combined offering of housing and social services for several different populations. Text on the well-designed site is set in Myriad.
That’s it for this week; share sites you like in the comments!
October 3, 2013
Housing Neil Summerour’s typefaces since its establishment in 2000, Positype covers the spectrum from tasteful restraint to cheerfully outrageous, and shows a clear affection for handmade pen-and-ink lettering. Among the brands and publications that have used Positype fonts are Communication Arts, HOW Magazine, ABC, MTV, and Victoria’s Secret. Available on Typekit for both web and desktop, Positype faces can be dynamic components for almost any kind of creative project.
Lust is reminiscent of the more flamboyant designs from International Typeface Corporation in the ’70s, which were often inspired by classic text faces but infused with a heightened personality and begged for use with advertising and branding. Lust’s strong and distinctive appearance is attention-grabbing in almost any setting, particularly in a medium which can fully support its extensive ligatures and alternates. Even in more restricted settings, such as web browsers lacking OpenType layout support, Summerour has ensured it will make an immediate impression. Check out Lust’s Didone style for more vertical stress and unbracketed serifs, and its display styles for larger settings.
Halogen sports generous width and a hint of reverse stress—that is, horizontal strokes thicker than vertical strokes—putting it somewhere between mid-century advertising faces like Estro and commercial workhorses like Copperplate Gothic. This varying stroke weight often evokes pen writing, but it is more sculptural in the case of Halogen, giving the letterforms a satisfying substance at display sizes. It performs well at smaller subhead sizes too.
Akagi Pro is a comprehensive, humanist sans serif family which serves more quietly but just as deftly. It’s not without some distinctive design quirks—see the italic’s kinky y and curvy v, w and k—which clearly reflect a handwritten influence more than a mechanical one. Still, its overall character is modern in the best sense of the word. Nine weights, ranging from thin to fat, will provide plenty of options for any typographic environment.
Muscle works best when your goal is to coat the page or screen with as much (actual or virtual) ink as possible. Strangely legible if you set it large enough, Muscle adds heft to word marks and short headlines, and works particularly well in designs where color plays a leading role. Check out both the Narrow and Wide variations—and their italic companions, which seem quite comfortable leaning to the right.
October 2, 2013
We are delighted to sponsor Brooklyn Beta for the second year in a row, and if we come away from it even half as inspired as we were last year, it’ll have been a huge success. Now in its fourth year, Brooklyn Beta’s goal is simple: “to inspire you to make something you love”—whether that “something” is on the web or somewhere else entirely.
This year, we’re bringing a special surprise with us. Stay tuned for more details on the blog next week—or find out in person at Brooklyn Beta. We can’t wait to see you there.
We’ve made some new additions to the Typekit library recently—and they cover quite a bit of ground stylistically. Here’s a few to consider for your next project.
Designer Rui Abreu brings us Azo Sans, a geometric sans that takes heavy inspiration from Futura but with softer angles that lend, in Abreu’s words, a “humanistic quality” to the typeface. The result is polished at any size, with the bolder faces making for exceptionally dynamic headlines. Available in five different weights, with corresponding italics for each.
Screenplays are traditionally written in a monospace typeface, which generally means Courier. Frustrated by this status quo, John August at Quote-Unquote Apps set out to build “the best damn Courier ever,” enlisting Alan Dague-Greene for the design. Courier Prime is optimized for 12-point display, and works nicely onscreen or in print. Don’t miss the gracefully-done italics, either.
Sketchnote emerged from a project between Mike Rohde and Delve Fonts proprietor Delve Withrington to develop the typeface for Rohde’s The Sketchnote Handbook. The hand-drawn style is clean and restrained, with the Text font designed to be legible at smaller sizes, while Square works nicely as a headline counterpart.
September 27, 2013
We’ve just got one site to share this week, and you’ll soon understand why. If you’re on a deadline today, you might want to attend to that before reading the rest of this post.
That’s right, Space Toads are invading, and it is your job to defend Earth! We don’t quite follow the backstory (“Burger of Truth”?) but we’re having too much fun to care.
The game was built by Luke Snopkiewicz, who proudly informed us that he used Typekit fonts throughout the entire site and—get this—in the game itself. Yup. He writes, “During gameplay, actual Typekit fonts are used within the canvas element (Canvas 2d rendering)—being moved, faded out, resized.”
Calculator-inspired Xenara appears for most of the text on the website, with wildcard BD Geminis giving the logo and many of the in-game elements a classic sci-fi aesthetic. Mostra Nuova and Peachy Keen appear in gameplay as well—look closely.
“I don’t think you see Typekit used like this every day,” writes Luke. No, we really don’t.
Our Space Toads champ here at Typekit is Christopher Slye with a score of 90,931. Let us know in the comments if you can beat his score—or, as always, if you have other sites to recommend.
September 25, 2013
Designers can’t always include time within their practice to reflect on their processes, tools, ideas, and studio culture—even as they’re making design history. Fortunately, while some of us are designing, others are determining how to document this great body of work. The Cooper Union examines this in an exhibition we’re proud to sponsor, titled Image of the Studio: A Portrait of New York City Graphic Design. Their exhibition, co-curated by Athletics and Alexander Tochilovsky of the Herb Lubalin Study Center, gives us an opportunity to consider these recent accomplishments and methods.
On view October 1st through 26th at the Herb Lubalin Gallery, the exhibition presents a snapshot of what it means to be a designer in New York City in the year 2013, featuring over 75 of New York’s premier graphic design studios. The opening reception is next Tuesday, October 1st, from 6:00–9:00pm, and is open to the public.
The Herb Lubalin Gallery is located at 41 Cooper Square (Third Ave. between 6th & 7th St) New York, NY 10003.
September 20, 2013
We love it when people express themselves with creativity. We’ve kind of made it our business to enable that through typography, in fact. In this week’s sites we like, we’ve rounded up a few more expressive outlets from other corners of the creative world. Get inspired!
CreativeMornings is a free seminar series in cities across the globe, covering eclectic topics for local professionals in creative industries. They’ve recently redesigned their website, and we love the look of Atrament in those headings. The body text uses Proxima Nova for a clean complement to the condensed headers.
Bringing dance performances to the Royal Theater in Victoria, BC, for the past 16 years, Dance Victoria boasts a cheerful website with their upcoming performances at the forefront and plenty of information for aspiring dancers and audience members alike. The headers throughout are in comfortable Myriad.
Say Hi is in its early days, but we already love the look of this space for sharing poetic bits of location-centric writing. Freight Sans appears for most of the copy, with gorgeous italics in Freight Text.
That’s it for this week’s sites; share sites you like in the comments!
September 19, 2013
When we first announced desktop font sync for the Creative Cloud, we mentioned eight top-tier foundries that would be included at launch, and posted about each of their offerings in subsequent weeks. Today we’ll continue the series with an addition to that fine collection of type: Just Another Foundry.
Facit has long been a favorite among Typekit users. It renders impeccably on screen, as it was designed to do: designer Tim Ahrens optimized the letter forms and proportions to work at small sizes, and manually hinted each font style to make sure the typeface performs well in Windows environments.
These optimizations were made specifically for the web, but Facit is also a workhorse for print and graphic design. And unlike with most typefaces, the design differs between web and desktop versions. Tim describes the changes made when redesigning Facit for the web:
Compared to the original design, the x-height was increased and the descenders shortened. The bold version in particular is somewhat lighter and wider – the increased counters aid legibility particularly on screen.
Typekit serves the appropriate versions of Facit to their respective intended media: Facit to desktop, and Facit Web to web. Keep these design differences in mind when mocking up web designs in Photoshop.
JAF Bernini Sans Condensed
Released last year at Typekit for the web, Bernini Sans is made up of two sibling typefaces: Bernino Sans and Bernina Sans. The two are distinguishable by a set of lowercase alternates: the a, g, i, k, and y. The Condensed width of both alternate sets are available for desktop sync for Creative Cloud members. The alternate glyphs are also available as OpenType features in both sets, allowing you to mix and match Bernino and Bernina without having to switch fonts.