Archive

Posts Tagged ‘Typography’

Expanding basic web font stacks

January 25, 2010 Leave a comment

For years now, typography on the web has been pretty simple – unless you could use images for text, or something like sIFR, you were stuck with a very basic font stack: typically Arial, Georgia, Times and Verdana being the most prevalent. Countless great designs have been made with those basic tools, but designers have wanted to broaden their typographic resources for quite some time.

Currently, it’s an exciting time for type on the web. Tools like sIFR are still around, there’s also JS based techniques like Cufon, as well as commercial solutions like Typekit, and even @font-face embedding for modern browsers. Each of these has their positives and negatives, but a simple compromise solution comes in the form of simply expanding the basic font stack.

This has been written about before, but it never seems to have gained traction in the design community. That’s a shame, because there are some great options available.

Quite simply, this is the idea that instead of just choosing fonts that have 100% compatibility (which limits you to the common choices), specifying fonts that are very common (I’ve chosen ~80% or higher, though it’s up to your discretion), and then using traditional fonts as backups if a user doesn’t have the font in question. This is incredibly easy to code, degrades very gracefully, and doesn’t require a download or installation of anything for the user.

You have to be willing to accept that less than 100% of people will see your design with perfect accuracy to the original, but the payoff is that for 8 out of 10 it will be more interesting and offer a richer typographic experience, whereas 2 out of 10 will simply see standard fonts.

There are good lists of fonts available here (Windows) and here (Mac). Keep in mind you can use these together, specifying first a Windows-prevalent font, then a Mac version, then the more standard type after that. One of the most exciting choices is Arial Narrow (~89% on both platforms) which finally gives you an option for condensed type in HTML text. I’m also interested to see Franklin Gothic Medium (a classic in the design world, 97% on Windows), and Palatino/Palatino Linotype (gorgeous serif face, 97% Windows, 80% Mac).

Advertisements

Swiss cheese fonts for greener printing?

December 19, 2008 Leave a comment

The effort to go green is growing every day, and we can all do little things to reduce our waste and our energy footprints. But, have you ever considered the environmental ramifications of your fonts?

Well, a Dutch company has created a typeface called EcoFont that claims to reduce the amount of ink (and therefore energy used) in printing by 20%. They do this by literally punching little holes in the characters. At a large size it looks absurd, but the idea is that at a normal print size for office documents, say 12 or 14pt, it’s virtually indistinguishable.

ecofont

Does it really work? I’m a little skeptical that the resolution and precision of the average cheap inkjet or laser printer is fine enough to print a dot/line that can really utilize the holes in the characters. It also remains to be seen if the average office will swap their mainstay Times and Arial fonts for something they have to download and install themselves.

Regardless, I applaud SPRANQ for trying something different, and illuminating how we might make common little tasks more eco-friendly.

Efficient design starts with efficient fonts

October 14, 2008 Leave a comment

Typography is a huge part of any well-done graphic design. Choosing the perfect set of fonts and styles for any given design should be intentional and informed, and therefore time consuming. Additionally, the size of a designer’s collection of typefaces grows over time. At an established agency like DigitalDay, we have literally thousands of fonts in our collection that are either supplied by clients, purchased for projects, or picked up from various software installs.

The best tool I’ve found for organizing and working with a large font library is FontExplorer X. It also happens to be free, which is a great bonus. The only downside is that there is no Windows version. There are similar tools for Windows, but for now Linotype’s program is Mac only.  Why do I need any font software, you ask? Well, there are several advantages over the built-in tools on either Mac or Windows.

First, if you have say, 1000 fonts, and they are all activated, it becomes very time consuming to select a font from an applications list. If you’re scrolling through, or just browsing within an application, it’s much more friendly to search through say 50-100 fonts than your entire collection. Loading all of your fonts every time also eats tons of memory. And when you have loads of design applications and files open, every little bit helps.

The true killer feature, for me, is the ability to make font sets or “playlists”. There are many times when I know I’m looking for a sans-serif font, or something very ornate, but I don’t know exactly which font I want to use. What I’ve done is break my entire collection down into different categories. I can browse through single categories at a time, which is an incredible time saver.

Additionally, if I have a large project that uses many different typefaces, I can group them together and activate or deactivate all at once. If you’re familiar with playlists in iTunes, the concept should be familiar. Browsing a few specific fonts instead of digging through hundreds of possibilities is a huge help.

Another nice feature is auto activation. Let’s say you’re working on a big style guide in your page layout program and you’re using many different fonts. You want to be prudent and not leave them active all the time, but you might occasionally forget to turn them on, or forget to add a font you use , etc. Not to worry. Font Explorer X will detect what fonts are used in your file and activate them for you.

Font management is an often-overlooked process, but it can be useful and an incredible time saver. Browsing quickly and intelligently will give you more time to find the perfect fonts for a better piece for your agency and the client.

Getting Typecast – A Basic Typographical System

August 26, 2008 Leave a comment

One of the most fundamental elements of any company’s style guidelines, a good basic system of fonts and usage will help you build brand equity, leave a lasting impression, and appear consitent and professional regardless of industry. From print ads to dynamic websites, type is everywhere and it’s important. To that end, we’ve established a simple, but versatile type system we can use for all DigitalDay materials.

Our logo font is (a slightly tweaked) Futura, and that works well for headlines and pieces where it can be a title or section title. It does not lend itself to readability in large blocks of copy though, which brings us to our secondary font choice.


Avenir is a mix between a truly gothic/modernist style like Futura, and a more contemporary sans serif. It is easier to read in multiple sections of copy (like this one), so we use it to accompany Futura in print oriented pieces.

For the web (which is all we do), we obviously need to use different fonts for browsers and compatibility.

Our main web font is Lucida Grande / Lucida Sans. It is clear and clean, and we use it for copy and web-safe headlines. It’s a little more unique than Arial or Verdana, but is widely compatible when correctly specified.

Our accent font, used much more sparingly, is Georgia. Arguably the most attractive web safe font, its serifs and ornate style are a great contrast to the simple shapes of Lucida.

When used together (and per guidelines, a separate post), these fonts give off the sort of impression we’re looking for. Fun, but professional and fresh but still clear and easy to understand. Whether your intent is simple and minimalistic or ornate and lavish, set some basic typeface guidelines early on, and all of your designs and marketing pieces will benefit.

The Trajan Horse

December 19, 2007 Leave a comment

Quick, beside that cool announcer guys voice, what do you think of when I say movie trailers and posters?

It turns out you should think of Trajan as well. In what can only be described as a typographical travesty, the ever popular Trajan font is used, almost overwhelmingly to promote and represent modern movies. This observation is the sole inspiration for a whole blog, and a humorous video.

Named after a Roman emperor, Trajan is not a poorly formed or simply ugly font (others aren’t so lucky), but it has become so clichéd and overused that it represents laziness on the part of both designers and the marketing community that supports them. Surely there are other interesting typefaces out there, many of whom have more character and unique features. Think of the films of yesterday, especially their titles. Hand-created type was the norm, and creativity ran rampant (see Hitchcock films, or old Bond films especially). Yes, it’s nice to have a semibold font with big pronounced serifs, but I think we can all do better.

Typography that saves lives

November 27, 2007 Leave a comment

To many people, choosing a typeface or a font is simply a matter of picking something that looks good. As designers, we take that a step further and select type taking into consideration the tone, implied messages and brand representation it evokes in each piece. Consider this though, what if your font choice could save lives each and every day?

That’s exactly what happened with Don Meeker and James Montalbano, designers who have created a new font for the US Highway System. Profiled in this NY Times article, their creation called Clearview was researched and developed to be readable at great distances and high speeds, both critical for highway signage. It is still being tested, but has shown great promise in being much more legible than the current typeface, Highway Gothic. That enhanced legibility leads to drivers having more time to react to signs, which ultimately makes the roads safer for everyone.

The amount of research and development that went into this typeface is staggering. Meticulously crafting each letter, carefully considering adjacent letter’s visual relationship to each other, and almost endlessly tweaking the set has resulted in a design that Michael Pietrucha, professor of highway engineering, thinks will “completely change the look of the American highway, but not so much that anyone will notice.” That subtle.

It’s exciting to see such high profile examples of typography and its importance. More than just a pretty face, well-planned and well set typography can be a powerful tool in any piece.

Categories: Web Design Tags: , ,