In this week’s sites we like, we’re taking a quick tour through the beautiful, inspiring country of Japan—with, as always, a few side notes about type.
19 Days in Japan showcases the stunning photographs from a Portuguese couple’s trip to Japan; get ready to feel inspired to take up photography again, or to visit Japan, or most likely both. Image-heavy pages like this one often do well to steer towards an unobtrusive typeface for the text, and FF Dagny does a superb job of this here.
Maru is, in fact, based out of Oslo, but is nonetheless all about Japanese design. The shop aims to represent “the highest standard of Japanese quality and design” in its offerings, and everything they sell is designed and made in Japan. The site uses FF DIN Round for the copy, reflecting many of the same subtle, soft edges in its products. (If you were hoping this would be about Maru the cat, we’re sorry to disappoint. Here’s the other Maru.)
Japan Architecture + Urbanism is an English-language magazine produced in Japan, which “offers an insider’s look at the very latest Japanese architecture,” and explores other cutting-edge architecture worldwide. The site features Proxima Nova in a few different weights, giving a pleasant lightness to the body text while keeping the headings firm.
That’s it for this week; share sites you like in the comments!
November 7, 2013
Today’s post was authored by designer Leigh Taylor.
I recently answered a question on Quora about why we selected FF Tisa as the typeface for Medium. It wasn’t a decision we made lightly. Type is an integral part of your brand’s personality, and will impact your overall design. Here’s how we made the decision.
Focusing on brand development
We needed to identify the essential qualities of Medium to begin establishing the elementary building blocks—including typefaces—that would become the Medium brand identity. The questions we asked were basic in nature, and our goal was simply to learn and understand the product we’d built, and to reduce the anxiety a lot of us were feeling around decision-making.
What are the values of the Medium brand?
Initially we did a ‘data dump’ of all those unfiltered thoughts, ideas and desires that the team had, sharing ideas, product improvements, feedback, and suggestions. With that information at hand, we condensed what we had into product statements, highlighting the values, strengths, and focus areas of the Medium brand, and targeting how we wanted it to be received by our audience.
Through iteration we eventually refined the statements down to the six guiding principles of the Medium brand:
- Quality first
- Interest over Social
- Appropriate over Consistent
- Direction over Choice
- Evolving over Finalized
- Networked over Controlled
We now had values we could reference to validate our decisions. It allowed us to make progress with confidence.
Who is Medium for?
To identify Medium’s core audiences, we gathered even more information from our internal collections, continued discussions internally, and harnessed the feedback from our early adopters—from whom we gratefully received many suggestions for improvement each day.
We distilled this down into four personas to encourage ourselves to view the product through ‘their’ eyes, running through user flows, mock-ups, and prototypes several times to highlight the subtle differences in each user case. We built an understanding of what works well and what doesn’t for each persona—which allowed us to address how to empower each ‘type’ of user on Medium and, secondly, to identify priorities on our roadmap.
How do we want Medium to be perceived?
We believe the brand should always support and enhance its content, and the minimal amount of chrome and embellishment used throughout Medium’s interface shows how this principle became a reality. We studied several other major brands whose visual qualities ranged from lighthearted and playful to serious and refined, and used this information to design Medium’s minimal brand presence with the appropriate personality.
Selecting a typeface
Considering that the Medium product is built on the words of others, the typeface was a fundamental component of the brand aesthetic. It was vitally important to find a typeface that supported what the words were saying, yet was still beautiful, legible, and encouraged the wide range of writing we wanted to see on Medium—not just opinion pieces.
This type critique meant our existing typeface, FF Meta serif, came under some scrutiny along with a small collection of perhaps four typefaces that we used when exploring and prototyping Medium, prior to launch. We reviewed each typeface in different environments and in different contexts to establish the right fit for Medium.
We compared articles in multiple typefaces that had a broad spectrum of overlapping qualities.
Comparing the high-quality shortlist of typefaces against each other, rather than throwing in, say, Comic Sans, allowed us to assess the presentation of each, and validate and justify those against our ideal brand direction.
In a direct comparison of FF Tisa and FF Meta Serif, we found FF Meta Serif was a little too formal and authoritative, making the words feel declarative, factual, and slightly more opinionated in presentation than we felt necessary. FF Tisa, however, still contained the positive aspects of FF Meta Serif, happily accommodating an opinionated piece, but with a touch more understatement than its predecessor. It is softer in presentation, with slightly more relaxed terminals, descenders, and tails, more consistency in stroke weight, and a touch more tracking. These factors contribute towards making the typeface appear more inviting, approachable, and supportive of storytelling.
This is definitely an example of content-led design—a typeface that accommodates multiple article types and styles while aiming to minimize the conflict of its presentation with the context of the article.
It helps that FF Tisa looks beautiful, too.
Leigh Taylor is a designer, Partner and Founder of @GravitaCo, a design collective that applies design approach and solutions to a wide variety of products, platform and systems. Partner of @Noflo and @thegridio, making tools to help produce software. Sometimes he tweets @lat and showcases work via be.net/leightaylor and dribbble.com/t47lor.
November 5, 2013
We’ve made a small update to the languages supported by Typekit’s default web font character set. In addition to English, Italian, Portuguese, and Spanish, you can now use the Default option in the Kit Editor to display content in French and German.
To recap how language support works in Typekit, there are two character set options for each font in the Kit Editor, Default and All Characters. The All Characters set is exactly what it sounds like: every character (or glyph) in a particular font, including ligatures, alternates, and OpenType features (where available). Though these fonts have the broadest possible language and feature support, the font files themselves are much larger, typically 100-200% larger (in terms of KB).
The Default character set, on the other hand, includes all the characters necessary to support our most common languages, as well as some useful typographic characters like smart quotes and bullets. Because Default fonts include just the characters required for most web pages, these font files are much smaller, resulting in faster load times for your users.
What it means for your site
If you’ve been using the All Characters set to include French or German characters on your site, you can now switch to the Default character set instead (and trim down your kit size in the process). Simply launch the Kit Editor, select the font, and then change the Language Support setting to “Default.” When you’re done, republish your kit.
If you’re using any language that’s not included in the default character set, keep using the All Characters set. (Language support varies by font family and is specified on the font detail page.)
As always, if you have any questions, contact us at firstname.lastname@example.org and we’ll be happy to help.
November 1, 2013
The Typekit pop-up library will appear tomorrow, November 2nd, at Ampersand NYC. The library will be located on the upper level, to the left of the stage entrance and just around the corner. If you saw the pop-up library at Brooklyn Beta, it’ll look a little different this time, as we’ve changed the look and layout to be unique to Ampersand. In addition to hosting a few new books, our space is a little cozier, which we think suits a library well. Come find a book and take a seat for a little while between sessions; maybe you’ll learn something new.
And don’t forget to join us for the after party at the Hudson Bond, 215 West 40th Street. We’ll be there from 7:30pm on!
New additions to the library collection include:
Typeface: Class Typography for Contemporary Design by Tamye Riggs
Here is an ambitious book that covers a lot of ground and does it well. Written and designed by my friends Tamye Riggs and James Grieshaber, respectively, it works as both a visual introduction to typefaces in use in a variety of settings, but can also serve as a colorful reference for future typographic projects. — Christopher Slye
Typoholic by Viction:workshop
Thinking with Type (2nd Edition) by Ellen Lupton
Merz to Emigre and Beyond by Stephen Heller
Playful Type 2 by Robert Klanten; Hendrik Hellige; Jan Middendorp
Interaction of Color – Josef Albers
designing with web standards, Jeffrey Zeldman & Ethan Marcotte
Corporate Diversity – Andres Janser and Barbara Junod
Herb Lubalin – Gertrude Snyder and Alan Peckolick
Symbols Signs Letters - Martin Andersch
Football Type Rick – Banks and Sheridan Bird
Adobe Originals type specimen books: Poetica, Minion, Adobe Caslon, Adobe Garamond, Adobe Jenson, and Garamond Premier.
If you think Typekit’s pop-up library would be a good fit for your event, please get in touch with us through email@example.com.
November 1, 2013
In this week’s sites we like, we’re getting into the spirit of autumn—the season of transitions, gatherings, and pie. What’s not to love?
We Don’t Need Daylight Savings Time draws you in with a mesmerizing spinning globe animation and clean Proxima Nova text, neatly laying out the rationale behind doing away with the biannual time shift. In the meantime, those of us in the US are reminded to change our clocks back an hour this weekend.
Autumn being a traditional time of gatherings, we couldn’t resist noting the Nearly Impossible conference, which is happening next week in New York and aims to bring together “people who make and sell physical products.” Body text is set in lighthearted PT Sans, and we also enjoyed seeing Latinotype’s Trend Sans in the headers.
So, now we’ve got an extra hour and some new friends; let’s make the most of this situation and get some pie. (Perhaps the official baked good of autumn.) Mission Pie serves up delicious options, both savory and sweet—and uses Crete Rounded on their site to boot.
That’s it for this week; share sites you like in the comments!
October 29, 2013
Are you going to be at Gigaom Roadmap in San Francisco next week? Designer and typography expert Erik Spiekermann and our own Jeff Veen will be sitting down together to discuss Typeface on Screens: the Invisible Building Blocks of Brands. Join them to hear their thoughts on the importance of type in the digital age.
October 28, 2013
Ampersand, The Web Typography Conference, traditionally takes place once a year in Brighton, England. This Saturday, November 2nd, Ampersand will be making its stateside debut in New York City. The speaker lineup is impressive, including web design and type professionals such as Trent Walton and Nick Sherman.
Typekit is pleased to be sponsoring the event, and will be buying everyone drinks at the after party at The Hudson Bond. We hope to see you there!
The conference takes place from 9:00am–6:15pm on Saturday, November 2, at The TimesCenter (242 West 41st Street). The after party kicks off at 7:30pm at The Hudson Bond (215 West 40th Street). Tickets to the day event can be purchased online.
October 25, 2013
We’ve worked up a bit of an appetite looking through this week’s sites we like, which rounds up a few menus we’ve noticed recently—showing both delicious-sounding dishes and (of course) tasteful use of type.
The Electric Diner menu boasts “unfussy combinations of the best ingredients” in their London restaurant, and we might use the same phrase to describe the pairing of typefaces they selected for their website. Proxima Nova is a dependable choice for clear body text, and we love the bold, precise look of Prenton Ultra Condensed in the headers.
Futura gets center stage on the Fuel Cafe website, its geometric shapes working in good visual harmony with the clean design and navigation. Brandon Grotesque adds a touch of warmth to the menu descriptions—not that it takes much to make a “cheddar scallion biscuit with homemade sausage gravy” sound pretty appealing to us. (We’ll take 30, please.)
Not full yet? Let’s head over to Vermont Salumi, purveyors of fine cured meats with an evident flair for type. They use Chunk for an old-fashioned woodcut aesthetic in their standout headings, and News Gothic for no-nonsense navigation—and see if you can detect the tiny traces of Bello and Aviano Sans in there, too.
That’s it for this week’s sites; share sites you like in the comments!
October 25, 2013
The latest issue of 8 Faces magazine (run by our creative director Elliot Jay Stocks) is now available to buy, and features an article by our engineer Bram Stein about hyphenation and justification on the web. Bram gets into the details of just what, exactly, makes line justification so tricky on the web.
Here’s a preview:
As screen resolutions increase to the point where it’s comfortable to read long-form text from a screen, more and more traditionally print-based publications are moving to the web. However, the quality of these two reading experiences is not quite the same, and this is partially because designers working on print publications have the benefit of advanced justification and hyphenation algorithms that are not available on the web. Ideally, using paragraph justification (or not) should be a design choice. This choice is made more complicated because of the short-sighted justification algorithms employed in web browsers.
We’re going to need better paragraph justification in browsers if we aim to make it a place for long-form reading.
The whole issue looks great, and we’re proud to have members of the Typekit team among its contributors. You can pick up a printed edition, a PDF edition, or both versions of the issue right now from the 8 Faces website.
October 18, 2013
Design studio websites are reliably interesting for us, since they frequently want to pack a lot of character into the space while maintaining a wholly-functional work portfolio. It’s easy to mix up signal and noise with those priorities at stake, but here are a few studio sites that get it right.
With an energetic crew based in Charleston, South Carolina, the Fuzzco studio website shows a lot of personality—not to mention a lot of great type. Proxima Nova and Adobe Text are used for most of the body text and headings, but Droid Serif and Hydrophila Iced both make appearances as well. It’s a lot of fonts, but all are used with just the right amount of restraint.
Cultivated Wit is the studio of three former employees of The Onion, who have harnessed their penchant for humor and unleashed it upon all manner of web projects. Their selected web fonts are attractive and lean towards the conventional, which is all the better for tongue-in-cheek statements. Alternate Gothic No. 2 D appears in many headings, with Brandon Grotesque on broad display as well. FF Tisa appears on the blog and in other longer blurbs throughout the site.
I Shot Him is a design studio based in one of San Francisco’s sunnier microclimates. The type on their website does a great job of sturdily accompanying the stunning graphics, with Jubilat for most of the heading text and Gesta in place as a friendly, distinctive sans-serif body font. You’ll also see a few samples of lovely Signalist from Mika Melvas.
That’s it for this week; share sites you like in the comments!