April 19, 2013
Let’s round out the week on a lighter note with some burgers and bicycles.
If websites were hamburgers and fonts were the fixings, Burger Anarchy would be a challenge to eat neatly, packed as it is with five different typefaces. Octin Sports leads the typographic aesthetic, taking position front and center in the site’s bold header and top-level navigation. Main body text appears in Chaparral, while Metallophile Sp8 appears for the majority of headings. If that wasn’t spicy enough, they also add in Grad and Expressway for additional navigation and sidebar text. The site may actually make you hungry with their reviews and recipes for all manner of burgers, but you won’t be lacking for typographic inspiration.
View a gallery of beautiful, lightweight city bicycles by designer and creative entrepreneur Paul Budnitz on Budnitz Bicycles. FF DIN is a great choice of typeface for the restrained design of this page, carrying just enough weight to command attention but letting the visuals do most of the communicating. Purchase a license for FF DIN directly from FontShop, and we’ll host it for you along with your other fonts.
That’s it for this week; share sites you like in the comments!
April 18, 2013
Typekit is proud to be a sponsor of Entretipos, a new one-day typography conference in Barcelona. The conference will hold four morning workshops, covering typography as embroidery, lithographic printing, creating glyphs, and Copperplate letter expansion. The afternoon will be filled with several presentations by type designers and other visual designers. Typekit is excited to help make the first Entretipos conference happen!
The event will take place in the Elisava School in the heart of Barcelona on Saturday, April 20. As of right now, there are still tickets available for select portions of the day! Register through the Entretipos website.
April 17, 2013
Today’s guest post was written by Jordan Moore, a writer and web designer based in Northern Ireland.
Recently, I was working on a project where the font kit was starting to get rather heavy due to the number of fonts we had painstakingly chosen to reflect the voice and tone of the brand. The kit was weighing in at around 300–400kb, which was a massive handicap on our target page weight before we had even added a single piece of content.
This realisation forced me to rethink my approach to the typography in the project, especially for users on poor connections—who we generally assume to be mobile users. My next plan was to use web fonts only as typographical flourishes, and the default system fonts would provide a stable baseline for the bulk of the typography. Headings would be web fonts served from Typekit to retain the link with the brand identity.
This was before I discovered that relying on default system fonts in responsive design is a fool’s game.
Modern web design has, without a doubt, become more complex when compared to the environment in which we started out as web designers—particularly in regard to typography. Before the introduction of web fonts, and the added challenge of the varied device landscape we face today, we relied on a select few system fonts to either display common typefaces across different platforms, or to fall back to the nearest common font in the font stack. System fonts in the past were the foundation from which we built our typographic decisions, but today’s device landscape is a wildly diverse space and requires a more nuanced approach. Our desire to present a smooth, consistent aesthetic across devices must be balanced with the principles of responsive web design for an optimal user experience.
I learned through my own experience that a font stack based on system fonts is no longer as safe as it was before the mobile device boom. Where system fonts in the major mobile operating systems are concerned, there is barely any consistency at all. For example, the Android operating system only comes packaged with 4 system fonts — none of which appear on iOS or Windows Phone, and those two platforms only share a handful of fonts between themselves. In the process of creating a compatibility table of shared default fonts across these systems for my own reference, what I ended up with was actually more like an incompatibility table. There is no safe native typographic foundation on today’s web.
Fortunately, web fonts do provide consistent typography across major mobile and desktop operating systems, but they come with the caveat that good typography isn’t free in regard to page loading cost.
Web fonts are like any other asset when it comes to responsive design: they carry a variable weight that changes depending on the number of fonts you use. A heavier page weight results in a longer page load due to the time it takes the browser to download the assets, and as a maker for the web it makes sense to shoot for the lowest common denominator in terms of performance matters like page weight.
“Loading only the necessary” is a mantra for responsive designers. For responsive projects, we want to keep the page light in anticipation of the next user coming from one of any number of devices, and on a completely unpredictable connection speed.
If we think of web fonts as assets on the page—like images or any other asset—then we can use media queries to load different assets for different displays. For example, we can load high definition images for retina displays; why not do something similar for web fonts?
I am loading the “full” kit when screens meet or exceed one of the larger breakpoints, on the assumption that such a screen is a larger device—like a laptop or desktop—and more likely to be on a faster internet connection than a smaller device. Many techniques in responsive web design require developing assumptions like this for the purposes of decision-making. It sounds like a lot of parameters, but this is how we work with other assets—such as images—in the meantime until other methods like the Network Information API become available to us to make more informed decisions. In this case, the decision resulted in a much more reasonable page loading experience, specifically for devices on poorer connections.
If multiple kits aren’t an option, then I would suggest revisiting your approach to typography based on responsive principles. Aim for the lowest common denominator serving only the necessary assets. Establish your font kit by adding fonts and families only when you need them—this works best when you are working in the browser with real content. By evaluating which font assets are necessary with a mobile-first mindset, you’ll be less inclined to bloat a font kit with unnecessary typographical assets that will lead to an underperforming page.
I have a real passion for responsive typography, specifically for mobile. These small, incredibly powerful little devices provide immediate intimacy, and what I love most about them is that their beautiful high density displays allow web fonts to really sing. From a typographic design context, responsive design allows us to have fine control over our typography, using media queries to create different typographic rules to address different screen properties where appropriate.
Responsive web design has allowed us as web designers to become more flexible and embrace the inherent fluidity of the web and the diversity of devices that access it. We don’t have to sacrifice beautiful typography for the sake of developing a page that performs smoothly across multiple devices; indeed, responsive design and typographic design go hand-in-hand.
Jordan Moore is a Web designer and front end developer from Bangor, Northern Ireland. He is a responsive web design enthusiast with a passion for typography and frequently tweets as @jordanmoore.
This week, we’re going to spend a little time looking at League Gothic close up. From The League of Moveable Type, League Gothic is a redesign of the classic Alternate Gothic No. 1, which is now in the public domain. Attractive and matter-of-fact, League Gothic shines exceptionally well in headings and is neutral enough for a variety of layouts and font pairings—as we’ll see in the following sites.
An interactive web agency based in Tampa, Social Forces covers a lot of ground on their homepage, but does so with convincing style. League Gothic appears big in the headings here, and we love the effect of that slight shadow—in combination with the textured background, the letters appear lightly embossed, but not in a distracting manner.
For an organization as broadly expansive as Open Society Foundations, it’s easy for a website to descend into complete disarray—so it’s refreshing to see such a clean, organized page that nonetheless communicates a lot of information about the nonprofit and its initiatives. League Gothic shows off its condensed properties here, making for efficient and balanced subheads. Prenton Condensed also features as a header, lending a bit of rounded dynamism to the page without confusing its rhythm (or its readers).
Photography dominates on the website for Soho Fixed, beautifully profiling their small collection of hand-built single-speed bicycles. League Gothic matches the attitude perfectly in bold headlines, with FF Meta Serif placed as a thoughtful counterpoint to keep the page nicely balanced; the page makes a strong impression without feeling overwhelming.
That’s it for this week; share sites you like in the comments!
April 11, 2013
Today’s guest post was written by Billy Whited, a software designer in Chicago, IL.
With the growing popularity of type design, the sea of typefaces from which to choose gets bigger every year. I’ll be the first to admit that, at times, the waters can be difficult to navigate. There are a lot of variables one must consider when selecting type, and these can be a struggle to prioritize.
Following up on my previous blog post, “Setting Type for User Interfaces”, I’ve chosen a few exemplary fonts from the Typekit library to serve as a reference for your next project. I believe each of the following three typefaces possesses the necessary qualities for distinguished employ within the realm of user interface design.
Originally intended for use at small sizes on low-quality paper, FF Meta was designed to be “very legible, neutral, and space-saving .” With its flared strokes, angled terminals, open apertures, and sharp intersections, it possesses highly distinguishable letterforms and an approachability that belies its ruggedness.
FF Meta’s unique charm and combination of features lends it an adaptability that is likely responsible for its widespread popularity. Over the years, an untold variety of corporations, publications, and websites have adopted it. Typographers and soccer fans alike will appreciate it’s prominent and tasteful use on the website for the famous EPL club Arsenal.
Typekit hosts a manually hinted version of FF Meta that is available in a variety of weight and styles (including true italics), making it well-suited for a design project with a variety of typographic needs.
Source Sans Pro
A relatively recent arrival, Source Sans Pro is Adobe’s first open source typeface family. Designed “primarily as a typeface for user interfaces ,” Source Sans Pro features a hardworking simplicity, elegantly-drawn letterforms, and a familiarity derived from allusions to the “legibility of twentieth-century American gothic typeface designs .”
With comparatively wide proportions, large x-height, and balanced upper and lowercase forms, it remains highly readable in both shorter text strings and longer passages. Recently, it has become a staple of Stanford University’s identity, recommended for use in the school’s print and online communications .
Manually hinted for cross-platform consistency and available via Typekit in a whopping nine weights (with true italics), Source Sans Pro is an attractive, clinical typeface that can harmonize an interface without drawing undue attention to itself.
LFT Etica by TypeTogether is a brilliant option when you find yourself at odds with a client who really loves Helvetica. Billed as a cure for thoughtlessly prescribed “common” and “cold” grotesque sans serifs (like, ahem, Helvetica), LFT Etica is a delightfully understated typeface. It retains the neutral appeal of Helvetica, but does so in a way that is much more welcoming. It’s got an endearing, unexpected warmth.
Unfortunately, LFT Etica does suffer from a visual conflation of its capital “I” and lowercase “l” letterforms—an affliction that also befalls its austere grandfather, Helvetica. It makes up for this drawback with open counters, large apertures, generous proportions, a large x-height, and personality.
Typekit hosts 6 weights of LFT Etica, which was featured in the recent high-profile redesign of Digg.com.
A place for typography in UI design
By some accounts, web design is 95% typography. And while I don’t intend to examine the scientific truthfulness of this sentiment, I think it is difficult to overstate the importance of good typography. It operates at a functional, almost subliminal level distinct from decidedly more ornamental concerns like graphics, texture, and color. The quality of your typesetting can support your client’s message (and their application’s functionality)—or can detract from it by drawing undue attention to itself.
Even the most tasteful color scheme or well-apportioned graphical treatment cannot make up for a site or application that is difficult to read. Simply put, poor legibility is not a mistake that’s easily forgiven, or overcome. Having a solid grasp of typographic principles will do a great deal to steer you in the right direction—and it never hurts to have a few favorite fonts in mind, either.
- http://spiekermann.com/wp-content/uploads/2008/10/baseline0785.pdf [PDF]
April 9, 2013
Typekit is proud to be a leading sponsor of FontShop’s TYPO San Francisco 2013, a two-day conference covering “more than just typography — it’s design, culture, society with a little bit of kerning.” The TYPO SF theme this year is contrast: cultural, visual, and everything in between. An excellent lineup of speakers has been invited to reflect on this theme, and we’re excited to hear what they have to say. Typekit is represented on the speaker list by Adobe VP and former Typekit CEO Jeff Veen, Typekit engineer Sean McBride, and Typekit alum Mandy Brown.
The event will take place in the Lam Research Theater at the Yerba Buena Center for the Arts starting at 9am on Thursday, April 11. As of right now, there are still tickets available! Register on Eventbrite.
This week, we’re looking at the scaffolding that keeps the creative world running: templates, punctuation, and personal missions. Oh, and typography, of course.
Designer Conor O’Driscoll ties together threads of creative inspiration from an impressive batch of professionals in his interviews on oneminutewith.com. Body text is primarily in Proxima Nova, but the interview questions are offset in blocky Quatro Slab, lending a textured feel to the transcripts.
Minion is a great typographic choice for Quotes & Accents, Jessica Hische’s website dedicated to documenting Mac keyboard shortcuts for accented characters. The font’s clarity of form really comes in handy on a page detailing the subtle rules of various punctuation marks, and looks lovely to boot.
We’ve seen Stratum in action before, but it never fails to impress. Here, Stratum 1 sets the aesthetic for Underscores, a WordPress starter theme designed for people who want to build their own themes but don’t necessarily want to begin from scratch. Stratum is available directly from Process Type Foundry; purchase the license from them, and we’ll happily host the font.
That’s it for this week’s sites! Share sites you like in the comments.
March 29, 2013
Modern communication feels like such strange drudgery sometimes. In this week’s sites we like, three entrepreneurial products are looking to turn that around and help you get things done.
Does anyone really enjoy managing email? Mailbox may be about to change that with their innovative approach—which is gaining hype, to be sure, by the ever-growing waiting list to try out the service. We love the Futura PT headings on this site; there’s nothing quite like this timeless typeface to bring a feeling of modern simplicity to any design (and, with luck, to your email backlog as well).
If you’re a checklist addict, you can assume you’ll need at least ten minutes just to play with the fun demo app on TeuxDeux’s homepage. Once that’s out of your system, have a look at how Alternate Gothic No. 1 D adds a trim, organized feel to the weekday headings. Rarely does sprawling “Wednesday” look so contained.
Proxima Nova proves itself again and again, and we love how it feels on the HipChat homepage. Simple and non-ornamental, it’s a typeface that gets out of your way, offering the same sort of straightforward functionality as HipChat’s sleek group chatting service.
That’s it for this week’s sites! Share sites you like in the comments!
March 28, 2013
Today’s guest post was written by Billy Whited, a software designer in Chicago, IL.
As a UI designer, I do my best work within the bounds of a clear hierarchy of constraints. Because typography is the catalyst for my design work, the most important step I take at the beginning of a project is to select a typeface (or a set of them). Once this choice is made, I can develop a system to aid my decision-making process and, in so doing, avoid the terror of a blank canvas.
To narrow down the vast number of typeface options, I start out by defining the scope of the design problem before me in broad terms. This usually requires that I make a decision about the essential purpose of the project I’m working on. Is it a content-driven website that serves up information to be read at leisure? A task-driven web application oriented towards getting stuff done in a timely way? Or is it a site possessing both content-driven and task-oriented elements (like a CMS)?
The differences between these types of sites have implications for the way we approach the process of choosing type for them. Content-driven websites frequently make extensive use of contiguous, flowing paragraphs of text, whereas primarily task-driven web applications may favor shorter, more linear staccatos of text. Awareness of this functional distinction can help narrow our focus at the outset of a project by providing a set of meaningful constraints which, in turn, can help us make more intelligent decisions about our type.
Today, I’ll examine some of the issues that specifically affect setting type for task-driven web applications (user interfaces), beginning with our own biological constraints for interpreting text and then exploring how this informs type design. My express goal is to provide you with a few hints that will aid your typographic decision-making and help set your future designs apart—both functionally and visually.
The implications of how we read
In user interfaces, it’s common to encounter screens that are nothing more, typographically speaking, than a collection of singular words displayed in isolation from one another. Examples of this abound: web forms, navigation menus, control panels, etc. This is a key difference between primarily content-driven web sites and task-oriented web applications. So, why does it matter?
As it turns out, the efficiency/ease with which we read is a function of the amount of text available to us as we do so. Within a certain perceptual threshold (up to 15–20 letters) there is a linear relationship between reading speed and the number of letters that are visible to the eye . This means an isolated word that is comprised of fewer than 20 characters will be read more slowly than a word that forms part of a longer sentence.
To fully appreciate this phenomenon, it’s helpful to understand one of the basic mechanicals of reading: saccades. Instead of moving smoothly across the page when we read, our eyes actually make discrete jumps between words, fixating on one word for a short period of time before making a ballistic movement to another one. We call these movements saccades .
But despite their “ballistic” nature, these rapid eye movements actually improve our reading capabilities. While we process the words immediately within our focus, we use the additional information just outside of it to further guide our reading. As readers, our time to comprehension is aided by the context of adjacent words—to the extent that we are often able to automatically process (and thus skip over) shorter functional words like and, the, of, and but.
This revelation profoundly affects typographic decision-making for user interfaces. By necessity, our task-oriented web applications tend to collect more isolated words and sentence fragments than their content-driven counterparts. Because of this, we cannot rely on the contextualizing effects of saccades to help improve comprehension of the textual elements of our designs, nor can we rely on the sheer presence of additional letters to assuage the unfortunate consequences of a poorly-chosen font. This makes our choice of typeface extremely important on task-driven sites.
The importance of well formed skeletons
Given that the latest research in the field of cognitive psychology supports the notion that we recognize words by first identifying their constituent letters, it follows that any typeface suitable for UI work should possess an unimpeachable clarity of form.
Several years ago, researchers in the University of Victoria’s department of psychology conducted an empirical study that sought to reveal which features readers used to tell the difference between visually similar letters.
The authors of the study concluded that “line terminations (terminals) are the most important features for letter identification ,” but I feel that designer Ralf Herrmann’s insightful analysis of the results is more applicable to our discussion:
[Looking at the left most column] We can clearly see that we mostly pay attention to the features of a letter skeleton that make them unique…the crossbar of the e, the stroke endings of the c and the existence and shape of ascenders and descenders in general .
Indeed, these skeletal features play a crucial role when it comes time for readers to discriminate between frequently misrecognized letters of the alphabet, such as c/e, a/o, I/l, and O/0.
A well-crafted and legible typeface will counteract these formal conflicts with letters that, while still familiar, are highly discernible from one another. Interestingly, such feature recognizability is a hallmark of monospaced typefaces, which makes sense due to their widespread adoption by computer programmers (whose livelihoods depend on character-level accuracy).
The coarseness of screens and counteractive letter shapes
Due to the technological nature of our medium, the visual fidelity of our work is constrained by the precision of the pixelated screens on which it is displayed. Consequently, no exploration of UI typesetting would be complete without a discussion about the challenges that arise from the peculiar way text is rendered on screen.
With the exception a few notable “Retina” or “High Definition” devices, most computer screens have relatively poor resolution: in the ballpark of 100–150 pixels per inch for a high-end display. (To put this in perspective, this is less than 20% of the maximum resolution the average person can perceive—which is somewhere around 800 ppi, depending on how you run the calculations.)
This limited resolution presents a problem, since most fonts were originally designed for the much-higher resolution of printed media. At text sizes (usually 18px and below), the coarse pixel grids of our monitors can restrict users’ ability to resolve the fine details that make letters recognizable. In turn, this can make our designs exceedingly difficult to read. Type designer Peter Bil’ak outlines the core of the problem:
The letterforms are designed and stored as outlines, mathematically perfect lines and curves which look great at high resolutions, but can be distorted or even illegible when converted into groups of pixels…
To counteract this well-known problem, some typefaces destined for onscreen use are subjected to an optimization process known as “hinting,” whereby “mathematically ideal [vector] outlines [of letters] are mapped onto a monitor’s pixels .” In theory, a typeface that has been hinted will display more accurately—or at least more legibly—onscreen and should perform more consistently across browsers. And certainly, when selecting a typeface for a user interface, hinting is a feature to look for; it can serve as a deciding factor between two otherwise comparable fonts. But it’s a supplement—not a guarantee.
Hinting can improve font rendering, but because different platforms and applications use different rasterizing technologies, results can vary widely. Moreover, according to Bil’ak, “hinting is tedious, time-consuming and widely believed to be nearly obsolete,” and because of this, “99% of all fonts, even commercial ones, are non-hinted.” As a result, we cannot rely on technology alone to solve the problems presented by low resolution screens.
Instead, we must redouble our focus on letter shape and accept the demands the low fidelity environment of the screen places on the typefaces we choose. Specifically, a good screen font will tend toward an aesthetic middle ground: not too delicate or showy, nor too bold or imposing, it will favor recognizable, workmanlike features over those that may be be more visually interesting or unique. Structurally, such typefaces exhibit a subset of features like these:
- A large x-height.
- Open counters and apertures.
- Familiar/recognizable features that follow established design patterns.
- Modest ascenders/descenders.
- Wide proportions.
- Breathing room in-between letters (letter-spacing).
- Low/minimal stroke contrast.
- Sturdy, well-formed or unbracketed serifs, or none at all.
- A rational (vertical) axis (pixel grid-friendly).
I will illustrate this more clearly, using real fonts set in UI contexts, in a forthcoming post.
Typography enables productivity
Ultimately, learning the distinction between typesetting for web sites and web applications is of lesser importance than mastering the basic principles of good typography. In fact, many of the same guidelines I’ve covered here for choosing type will apply whether you’re setting lengthy paragraphs or shorter, more isolated strings of text: you should understand how people read text, and then choose type that helps them do this as efficiently as possible given other design constraints.
Good typesetting is an exercise in subtlety, and a demonstration of skill and sensitivity—to context, form, and user needs. As UI designers, it’s important to remember that our goal is not to distract users with superfluous details, but to ease the burden of their work and help them get stuff done.
March 22, 2013
Brooklyn, bitly, and bricks: this week’s sites we like are all brought to you by the letter B!
Slightly rebranded from the original .ly domain, bitly is in the market to help you keep your digital life tidy. It underscores this goal with a clean, organized website design, featuring the extra-legible Adelle for clear copy across the page.
We just love the look of Quatro in a big, bold title format. BKLYNR uses this expertly on their smart new site, whose goal is to provide a platform and funding for Brooklyn-centric journalism. Body text is set in the smoothly modern Proxima Nova.
Many of us played with Legos as kids; however, Nathan Sawaya never put them down. The Art of the Brick showcases his artwork, which uses Legos as a medium for larger-than-life sculptures. The site is thoughtfully put together, with sleek League Gothic used in headings and navigational text, and Museo Slab offering a robust counterpoint.
That’s it for this week! Share sites you like in the comments!