Skip navigation
Help

Frutiger

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

We are confronted by logos and branding on a daily basis and yet some of the most memorable logos are composed of just a typeface. But how do you choose the right typeface to fit the face of your brand? Making sure the face is recognizable, useable and at the same time interchangeable, is by no means an easy task. In the fourth installment of our Collection Tier Blog series, we bring together our top three tips and a selection of FontFonts from our Collection Tier that are suitable for logo, branding and corporate identity projects.

FF Typeface Six

FF Typeface Six

The Circus Hotel, Berlin

FF Marten

FF Marten

Memorability: Your logotype and your corporate typefaces don't have to be the same - but they should harmonize, visually. Make your logo unique. Many logos use no type at all, but every logo will be paired with text. Your branding and CI faces can be individual, too, but their primary function is to be recognizable and readable. Choose selections that differentiate your brand from competitors, while still appearing clear and 'corporate'. Although many companies rely on modern or humanist sans serif typefaces for their identities, your brand's face could be a serif.

FF Moonbase Alpha

FF Moonbase Alpha

Usability: Does your typeface family have enough weights and widths to support a strong typographic hierarchy? Consider how much differentiation is necessary between the elements in your documents, both for internal corporate communications and external advertising. A superfamily, with sans and serif variants, may be an apt choice. Families with optical sizes for text and display help, too - a logo and the text around it should function well in virtually every size and resolution.

FF Govan

FF Govan

Interchangeability: Corporate fonts are rarely used in isolation. Depending on a company's communication strategy, your faces are likely to be seen together with other types, too. How well does your selection play with others? If your corporate fonts have to degrade to standard fonts in certain settings - like online or in office memos - can your design cope with this substitution? Which typographic extras typically appear in your corporate documents (e.g., small caps, tabular figures and fractions)? Consider the fonts' default glyphs, as your fonts may also be used in office applications that don't easily support OpenType features.

FF Zapata

FF Zapata

Frank Sinatra School of Art, design by Pentagram

Did you miss out on our previous Collection Tier posts? Have a look at our tips and picks for Music and Nightlife, Sports and Book Text. Next up in our series, our Collection Tier selection suitable for Advertising and Packaging.

About our Collection Tier

Our Collection Tier FontFonts are a selection of cost effective typographical treasures offered as full-families. All packages are available in OpenType with Standard language support (with a few key exceptions) and are all affordably priced under €/$ 100 each.

via FontFont News Feed http://feedproxy.google.com/~r/Fontfont/~3/KFzRuZhjwb4/best-collection-f...

0
Your rating: None

  

For years you have been searching for it. You hear the question being asked in your dreams as you go on an Indiana-Jones-type-crusade to find the answer. When the answer comes to you, you know that the confetti will fall from the ceiling and the band will start playing your favorite song. You might even get a kiss from that special someone. So what is this question?

What is the secret to Web design?

A tough question and one that might not have an answer. In 2006, Oliver Reichenstein wrote Web Design is 95% Typography. Some people loved it, others were not so amused. If Web design was based that much on typography, then what was the point of learning anything else? All you needed to do is understand the elements of typography and you were good to go.

Of course typography doesn’t mean font selection. With the advent of @font-face and services such as Typekit, Webtype, Fontdeck, and Google Web fonts, your skills in typography won’t improve. You can easily create wonderful designs with one font for the rest of your life if you choose to—they had to do it centuries ago and they didn’t have Photoshop sticking things to guides for them. If anything, more font selection will make things worse for you because creativity and beauty become hard to achieves when more options are given to us.

More toys means more fun though, right? If you want to go that route, then by all means go for it. I love to look at the different fonts being used and admire anyone that can successfully pull off using newer fonts for the Web. However, I’ve seen too many times what can happen when development options are given to the masses, and it isn’t pretty (re: Myspace). Instead of having a user agreement it would be cool if Typekit made you read a book on typography before you could begin using a font—the Web would improve tenfold, if that was the case.

I’m not being sarcastic, saying that is all you need to know for a majority of websites. Try going through all of the Web designs that you love, strip out the images and ask yourself “how would that website look with just text and spacing?”. When designers say “text is the interface”, they really do mean it. The iA site is a great example of that.

Information Architects
Information Architects is based around strong typography.

One of my all time favorite designs is A Working Library. The site is a showcase of text being the interface. The spacing is just right and the typography is on point.

A Working Library
A Working Library by Mandy Brown.

Some people find design like this to be dull and boring, they feel that design should have more pop to it. At the end of the day some extra visual flair might be what separates your design from the rest, but you need to get the first 95% down. The website that you are reading this article on now has done a wonderful job of presenting a visual design that isn’t reliant on images to be beautiful.

Well That Isn’t Hard

It’s possible to create a wonderful design without the use of images at all. I know that sounds crazy, but it is possible. I’m not saying it should be done, but if we can create elegance simply with typography and white space, then why shouldn’t we be able to create greatness when we start throwing in images, videos and other effects?

With the use of images I’m not talking about images that are needed to represent something such as icons, but images that are there for flare. Sometimes a picture is worth at least ten better words than any word you could use, so it’s better to go with an image (but you still need to consider using white space with it).

Here are two more examples of beautiful websites that place a heavy emphasis on typography to control the design. The first is Blake Allen Design and the second is The Harriet Series (both use images to represent their typography, but you get the point).

Blake Allen Design
Blake Allen Design uses images, but with great typography.

The Harriet Series
The Harriet Series by OkayType.

What makes the two designs above so interesting to me is that the typography not only guides you along a journey, but it does so with personality. You almost feel as if the typography is an expression of the person that designed it. Blake Allen uses Helvetica which gives the website a Swiss, clean and structured personality. On the opposite side of the spectrum, the Harriet Series website is a bit more playful and experimental—there is beauty in the organized chaos that the typography creates.

For 99% of the designs out there, typography and white space are going to be your underlying foundation. So if you can’t get them right, then the rest of your design has nothing to stand on. Stop worrying about the pop of your design and first worry about how it will stand tall. Once you get that down then you can begin to dress it up.

Clear is a very simple to do list application for iOS devices. While the majority of the excitement around it are the gestures used to control the interface, you will notice that the typography does enough to get out of the way and allow you to enjoy the application. Sure it is nothing more than Helvetica, but what if it was Comic Sans and had bad spacing all around? Great typography doesn’t have to stand out in a good way, but that doesn’t mean it should do enough harm when it stands out in a negative way, either.

Typography In Other Disciplines

Art of the Menu
Art of the Menu is a great website on menu design.

The Art of the Menu does a great job of showing the importance of typography in menu design. While a lot of restaurants like to add images and illustrations to their menus to give them a bit more pizzaz, they fail in providing a decent typographical structure that allows you to easily browse through the menu.

If you are a designer you have no excuse to say you can’t come up with a decent design. When you create a design that lacks a strong foundation, anything else you add to it is just going to make it worse. Too many designers attempt to save their designs with fluff without understanding they are pouring gasoline onto the fire. If a design is not enjoyable to read then it is not an enjoyable experience, no matter how many images, colors or sounds you decide to add to it.

Looking to understand typography a little bit better? Not too long ago Smashing Magazine did a comprehensive overview of some wonderful typography tools and resources.

(jvb)

© Paul Scrivens for Smashing Magazine, 2012.

0
Your rating: None

  

Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice out there is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to.

In this selection, we’re pleased to present Signika, Plastic Type, Bariol, Alegreya, Metropolis, Typometry and other quality fonts. Please note that while most fonts are available for commercial projects, some are for personal use only and are clearly marked as such. Also, please read the licensing agreements carefully before using the fonts; they may change from time to time. Make sure to check the free quality fonts round-up from January 2011, too.

Free Quality Fonts

Signika
A remarkable sans-serif typeface with a gentle character, Signika was developed for wayfinding, signage and other media in which clarity of information is required. Developed by Anna Giedrys of Poland, the typeface has a low contrast and tall x-height to improve readability at small sizes and at far distances. The typeface has a wide character set, supporting most European languages, small caps, pictograms and arrows. All weights from light to bold have alternative negative versions, optimized to solve the effect of juxtaposed positive and negative text setting, whereby negative text tends to look thicker. Available at Google Web Fonts and for free download at Fontsquirrel.

Plastic Type
The designers of this typeface were inspired by the plastics industry, exploring how they could use the various forms and imperfections of plastic in their design. The result of their experimentation is a freely available, beautiful, playful font, released under the Creative Commons Attribution Share Alike license.

Sullivan
Sullivan is a bold display face that comes in three variations. Each variation can be used effectively on its own or layered on the others to create a modern, industrial visual effect. The typeface was designed by Jason Mark Jones and released under the name-your-price policy.

Corki
Corki is a distinctive condensed slab-serif typeface suitable for headlines. Four styles are available: Regular, Rounded, Tuscan and Rounded Tuscan. The typeface includes 134 glyphs: both Latin and Cyrillic scripts, plus two manicules and various arrows. It is available for free.

Bariol
Bariol is a friendly, rounded, slightly condensed typeface, available in four weights and designed with versatility and readability in mind. It’s nice and familiar, without being too sweet, and very readable even at small sizes. Bariol Regular is available for free (a tweet or Facebook update is requested), but each font weight can be purchased for just $1.00.

Alegreya
This beautifully designed serif typeface has a classic, olden feel. The uppercase letterforms seem to be based on Roman script, while the lowercase characters rather have the feel of a humanist book. The family consists of 12 fonts (including regular, italic, bold, black, bold italic and black italic.)

Alegreya

Metropolis
Metropolis is a distinctive, experimental typeface in the Art Deco style. The design was inspired by the industrial movement of the 1920s, when skyscrapers where born. As the designer explains, “Using a double line technique, I wanted to create my own Art Deco style font that represented this era. The result is a bold, bumptious typeface with a stolidly calm disposition.” Metropolis could be a good choice when you are looking for a retro or retro-futuristic look. Released under Fontfabric’s Free Font EULA, you may use it in your private and commercial projects for free, but if you use it with a @font-face declaration, then a credit to Fontfabric is required somewhere on your website.

Typometry
An experimental display typeface inspired by geometrical forms. An interesting choice for unique patterns or just playing arond with glyphs. Designed by Emil Kozole. An advanced version of the typeface with 2 weights, 4 styles and 220 glyphs is available as well.

Tikal Sans Medium
Tikal Sans is a family with curved terminating strokes, ending in sharp edges. With a contemporary feel, a tall x-height and OpenType contextual alternate letters, Tikal Sans offers a functional look with a friendly touch. The thin and black weights are great for display sizes, while the light, regular and medium weights are well suited to longer texts. Tikal Sans Medium and Tikal Sans Medium Italic are available for free, but registration is required.

Tikal Sans

Actor
If you are looking for a workhorse typeface, then Actor might be it. It has a tall x-height, which is why it requires fairly high line spacing. The digits of Actor are created as old-style figures. The font can be used for free via Google Web Fonts.

Veneer Extras and Veneer Extras Italic
Veneer is a versatile, handcrafted “letterpress” font that has an authentic vintage feel with a touch of grunge. The freely available extras include 70 glyphs, in both regular and italics. Registration is required for the free download.

Wayfinding Sans
This type family, designed by Ralf Herrmann, sets a new standard for legibility in signage and wayfinding. Herrmann started this project with extensive field studies, driving tens of thousands of miles to explore the legibilty of road signage typefaces in dozens of countries around the world. The results of these explorations, along with an extensive study of relevant scientific legibilty research, formed the theoretical framework for creating an “ultimate” signage typeface. Wayfinding Sans includes 400 glyphs in one style, with arrows. To get the font, a tweet or Facebook update is required.

Ranger
Here is a playful Colorado-inspired italic typeface, designed by Evan Huwa. It’s a good choice for a bold movie title or a vintage book style. This typeface is sans serif and uppercase only.

Poly
José Nicolás Silva Schwarzenberg of the University of Buenos Aires designed this free font specifically for the South American indigenous language Wayuunaiki. Fortunately, the tyepface can be used not only by the 305,000 Wayuu people, but by everyone across the world. It is a medium-contrast serif font, optimized for the Web and efficient at smaller sizes. Poly is available in the Google Web Fonts library as well.

 Poly, A Quality Serif Font

Adec
Designed by Serge Shi of Russia, Adec is an original experimental typeface. The texture of the glyphs makes the typeface a good choice for distinctive playful designs and graphic branding. The typeface has three styles: Main, Initials and Text. The download contains samples of patterns created using the typeface alone.

Frontage Outline
Frontage is a charming layered typographic system that allows you to combine fonts and colors to achieve an interesting 3-D effect. Add the shadow font or just use the capital letters of the regular and bold cut for a stark effect. Unfortunately, only the Frontage Outline one is available for free (or at least paid for with a tweet or Facebook update).

Andada
This serif typeface might be the perfect fit for the headlines and body copy of your next corporate or personal project. Designed specifically for Spanish text, this typeface is a solid fit for English as well. The free typeface was given the 2010 Desigh Award by Bienal Ibero-Americana. It includes the basic set, accented characters, signs and punctuation, numbers, ligatures and mathematical signs. Released under the SIL Open Font License.

Blanch
Blanch is a distinctive display face, designed for the Fruita Blanch brand, a family-run company. The typeface is a great match for brochures and posters, but can be used for headings on the Web as well. Although it might look a bit rigid, the typeface has a modern, contemporary feel. The family consists of six weights: three condensed weights and three caps weights. Designed by the Spanish design studio Atipus, and released with a name-your-price license.

Valentina
Valentina is a classic “didone” that follows some of the principles of Bodoni from the 18th century, while incorporating many characteristics of the Spanish style of the time. The font contains 457 glyphs, with 125 alternative lowercase glyphs and 46 ligatures. Some of the glyphs can be nicely integrated in a logo or branding design and combined with Ampersand (featured above) or Zeta.

Sánchez
Sánchez is a display serif type family. Similar to Rockwell, it has rounded edges, which provide contrast and balance to the overall square forms. Regular and italic variants are available for free.

Erler Dingbats
This typeface covers the full encoding range for dingbats in Unicode (U + 2700 to U + 27BF). Erler Dingbats is the result of a collaboration between designers Johannes Erler and Henning Skibbe to create a consistent, contemporary font that could be used for everyday communication. It includes a range of popular symbols and pictograms, such as arrows, pens, phones, stars, crosses and checkmarks.

Entypo Pictograms
Entypo Pictograms is a set of more than 100 pictograms available as OpenType fonts, released under the Creative Commons license and free for commercial use. The collection consists of many navigation elements and other familiar icons. Its designers, Daniel Bruce and Andreas Blombäck, look forward to seeing usage of it.

Great Vibes
This beautiful, flowing typeface has looping ascenders and descenders, as well as elegant uppercase forms. It is a Unicode typeface that supports languages that use the Latin script and its variants.

Arvo
This typeface has strong contrast without feeling overwhelming. It can be used in headings and design campaigns. The smaller sizes (9, 12, 14 and 16 points) are hinted in TrueType format for better legibility on Windows. The font is published in the Google Font directory as a free open font (OFL).

Banda Free Regular
Banda is a semi-serif typeface with a tall x-height and rounded semi-serifs. Playful and inviting and suitable for logos, headlines and packaging designs, Banda Regular is available as a free download.

Edmondsans
Edmondsans is a free display typeface with three weights (regular, medium and bold). The typeface isn’t suited to every occasion but would be good for bold, conservative headings.

Fenix
Fenix is a serif typeface designed for display and long passages of text, with its strong serifs and rough strokes. Fenix is elegant yet legible at large sizes, probably a good fit for editorial work, books and newspapers. It is freely available for private and commercial use.

EB Garamond
Georg Duffner is recreating the classical Garamond with his open-source project EB Garamond. His goal is to revive Claude Garamont’s famous humanist typeface from the mid-16th century. Duffner’s design reproduces the original, with its letterforms taken from a scan of a specimen known as the “Berner specimen.” It’s a good, comprehensive Web font, released under the SIL Open Font License, 1.1, and also available on Google Web Fonts. The project is under ongoing development, so if you’d like to help Duffner, feel free to contribute.

Noticia Text
This slab-serif typeface was designed for long passages of texts in digital newspapers and other on-screen publications. Available for free in four styles, the typeface is currently under development, but the first version is available now.

Lusitana
Lusitana is a classic serif typeface inspired by the type found in the 1572 first edition of The Lusiads, a Portuguese epic poem by Luís Vaz de Camões. This typeface is made for long passages of text at small sizes. Designed by Ana Paula Megda.

Cardo
Cardo is a large Unicode font designed especially for academic needs. It works well for general typesetting in situations where a high-quality old-style font is appropriate. Its large character set supports many modern languages, as well as those studied by scholars. Cardo also contains ligatures, text figures (i.e. old-style numerals), true small capitals and a variety of punctuation and spacing characters.

Exo Font Family
A successful Kickstarter project made it possible for Natanael Gama of Portugal to create this typeface and release it publicly. Exo is a comprehensive geometric sans-serif font family with nine weights, in both regular and italic. Each font comes with many OpenType features such as small caps, ligatures, alternates, old-style figures, tabular figures and fractions. Both the OpenType and source files are available to download for free.

NeoDeco
This typeface was designed by Jonatan Xavier to imbue the Art Deco style with a strong modern feel. It is best for brochures and packaging designs, posters and magazines.

Bitter Regular
This slab-serif typeface was designed specifically for literary texts and for reading on screen with eInk technology. The typeface is a great fit for headings in a corporate brochure or on a website. Only one font weight is available, in TrueType and OpenType formats. A description and images are available on the designer’s website. The download link on the official website isn’t working anymore, but you can still download it from Designer In Action. Released under the SIL Open Font License.

Alegreya

Last Clicks

Type Connection
A good relationship can be characterized as two people who fit together. Aura Seltzer adopted this idea for her game Type Connection, which was her MFA thesis project. In this game, you are a procurer who helps different typefaces mate with each other. Each typeface is a lonely character searching for love, and your job is to find its perfect partner. By playing the game, you not only explore type history, but also learn typographic terms, while learning how to pair typefaces.

Type Connection

Just My Type
Picking just the right typeface can be difficult. On this page, Dan Eden presents a collection of beautiful font stacks delivered by Typekit. Some of the combinations aren’t necessarily revolutionary, but Eden delivers a nice, visually pleasing collection nevertheless. Some of the fonts are even free. Whether you’re looking for a new font to please a client or just want to play around, you won’t waste your time visiting Dan’s website. And for a more thorough article on combining typefaces, check out “Four Techniques for Combining Typefaces.”

Novel Constructions
A detailed case study on how Christoph Dunst designed the typeface Novel. Interesting and unique insights into the design process.

Showcase of Typographic Posters
This project is curated by André Felipe, a graphic designer who loves typography and its unorthodox uses. Featuring literally hundreds of posters, this project is a great resource that could serve either as a platform to show off your talent or as a reference for your next project.

Showcase Of Typographic Posters

Squared Superheroes
How well do you know your favorite superheroes? What kind of weapons do they fight with? What do their masks look like? Instead of drawing the usual fine details (facial expressions, hair, shadows, special visual effects), René Schiffer goes for a rather laconic, minimal style. He has picked out the most important characteristics of each superhero and represented them as squared forms. Placed side by side, the superheroes make for a great composition. Now, see if you recognize your childhood heroes! And no, it’s not a typeface, but… well, it could be one!

Squared Superheroes

Further Resources

  • Lost Type Co-Op
    The Lost Type Co-Op is a pay-what-you-want type foundry. Users can pay whatever they like for a font or type in “$0” for a free download. All proceeds from sales go directly to the designers of the fonts themselves.
  • The League of Moveable Type
    This open-source type movement brings high-quality tyepfaces to the Web. The creators of the project release quality fonts every now and then, so stay tuned!
  • Google Web Fonts
    This growing directory offers hundreds of free open-source fonts optimized for the Web. Google also provides ready-to-use snippets to integrate the fonts on your website.
  • Typography and free fonts on Smashing Magazine
    An overview of typography-related articles and free font round-ups on Smashing Magazine.

We sincerely appreciate the time and effort of all of the type designers featured in this post. Please keep in mind that type design is a time-consuming craft that truly deserves compensation and support. Please consider supporting the type designers who create and release these amazing typefaces for all of us to use.

(al)

© Smashing Editorial for Smashing Magazine, 2012.

0
Your rating: None

  

What is it that makes a typeface into a text font, instead of a font for larger sizes? The answer differs slightly, depending on whether one aims for print or Web-based environments.

Nevertheless, there are certain features that most good text faces have in common. Familiarity with these helps to select the right fonts for a given project. This article presents a few criteria to help the process along.

Some of today’s most successful typefaces were designed to excel in very specific areas of use: Frutiger grew out of airport signage, Georgia and Verdana were among the first mass-market fonts created for on screen reading, FF Meta was conceived as a telephone book face, and even the Stalwart Times New Roman was tailored for the pages of the London Newspaper The Times. Many typefaces are also often fine-tuned for using in certain sizes.

It should be noted that in this article, when “text” is mentioned, it is in discussion of body text, or running text (in other words, text at a similar size to what you are probably reading right now, rather than much larger sized words).

Features Of A Good Text Typeface

The features outlined in this article are those that type designers keep in mind while developing new typefaces. It’s important to realize that these aspects of typeface design are different from the text treatment a graphic designer employs while laying out a book page or website—no matter what a typeface’s inherent rhythm and niceties are, setting a text is still something that must be done with great care in respect to readability. There are problems that good fonts themselves cannot solve—whether or not a text sings on the page or screen depends on factors like the width of the column, the amount of space between each line, the contrast between the foreground/background and a number of other factors.

Different versions of the Bembo design
Above, Bembo over the years: this typeface was a favorite of many book designers throughout the 20th century. At the top of the image is a scan of the original Bembo typeface, printed with letterpress. The digital version of the typeface—Bembo, seen in the middle, is too light for ideal text in print. A newer digitization was published in 2002—Bembo Book, seen at the bottom. This font is much darker, and is a better representation of the original Bembo idea. However, the middle version is still very elegant, and may still be used well in sub-headlines.

Every typeface has its own inherent rhythm, created by the designer who made the font. With typefaces that are intended for use in body text, it is primarily this rhythm that will make the typeface readable. But there are additional factors that go into the making of a good text face: the space between the letters, the degree of contrast in the letters’ strokes, as well as the x-height and relative size of the whitespace inside of the letters. Not every typeface that works well in text will apply all of these factors in the same way, but all good ones will have many of these features in common.

1. Stroke Contrast

When it comes to typefaces, the term “monolinear” is used to describe letters that appear to be designed with a consistent stroke thickness. Monolinear typefaces are low-contrast typefaces. Stroke contrast can be a helpful feature in small text sizes, but it is not paramount that a text face appears to be monolinear. Indeed, many newspapers employ high-contrast fonts; the question that must be considered is just how thick the thin strokes in high-contrast typefaces are.

Sample Layout in the Cycles typefaces

The images in this section show different ends of the contrast spectrum: the Cycles types shown above are serifed, with a good deal of contrast. Sumner Stone’s Cycles typeface is an excellent choice for book design as its letter forms combine clarity with a rather high degree of stroke contrast and an almost timeless appearance. Five separate “versions” of Cycles are used in the above image; each block of text is set in its own optically-sized font.

Below, Avenir Next—also a great text face—is from another style of letter, and has very little contrast. I wouldn’t split good typefaces up into good contrast and bad contrast groups. Rather, some typefaces have a degree of contrast—be it too high or too low—that makes them less suitable for use in text. There is no definite rule on how much or how little contrast impacts a text face’s legibility. However, it is clear that both no contrast and excessive contrast can have adverse effects.

Text in Planeta and Avenir Next

Geometric sans serif typefaces often appear to be monolinear stokes; their letters seem not to have any stroke contrast. In order to achieve this effect to the max, type designers have always made slight optical corrections. To look monolinear, a geometric sans needs some degree of thinning. In the image above, Planeta (left) is compared with Avenir Next (right). Both typefaces are more recent additions to the geometric sans category than stalwart faces (like Futura), or classic display designs (like ITC Avant Garde Gothic). Planeta has no visible stroke contrast, which must be a conscious decision on the part of its designer. While this does give it a unique style, it makes the face less suitable for text than Avenir Next, which is actually not as monolinear as it appears at first glance.

2. Optical Sizes

Text in Garamond Premier Caption and Display Sizes

The Garamond Premier typeface family features different versions of each font. These variants are tailored for use in a certain size range. Above, the Display font (left) is compared with the Caption font (right). The Display font is optimized for texts that will appear in very large point sizes, while the Caption font has been optimized for very small text.

In her book Thinking with Type, Ellen Lupton writes:

“A type family with optical sizes has different styles for different sizes of output. The graphic designer selects a style based on context. Optical sizes designed for headlines or display tend to have delicate, lyrical forms, while styles created for text and captions are built with heavier strokes.”

The intended size of a text should be considered when selecting the typeface: is the typeface you want to use appropriate for the size in which you need to set it? Does the family include optical sizes (that is, different versions of the typeface that are tailored specifically for use at different sizes)? As with each of the factors mentioned in this article, the size at which a font is set can make or break your text.

In many ways, it is easiest to see the qualities necessary for good text faces by comparing potential selections with “display” faces. Like the term “text,” “display” refers to the size at which a specific font may best be used. In print media, as well as in many screen and mobile-based applications, the term “display” is often analogous with “headlines.” If a typeface that you are considering looks more like something that you might like to use for a headline, it won’t be the best choice for body text.

In the comparison image below, the Garamond Premier Display font has a tighter rhythm than the Caption font—not as much space is necessary between letters when they are set in large point sizes. Why should one consider type families with optical sizes, anyway? Well, as users bump up the point size of digital fonts, the space between letters increases in equal proportion. This inter-letter space slowly becomes too large, and makes a text feel like it is breaking apart. When a proper text font is set large, it may require some tighter tracking. Typeface families that offer optically-sized variants of their styles play a helpful role here.

Text in Garamond Premier Caption and Display Sizes

In the image above, the first line of text—“Stanley Morison”—is set in the Garamond Premier Display font, while the lines of text underneath it are set in Garamond Premier Caption. Each font is balanced for its size, and they also harmonize well with one another. In another image (below), these fonts have been switched: the headline is now set in the Garamond Premier Caption font, and the text in the Garamond Premier Display. The letters in the Caption face look too clumsy when they are set so large, while the Display fonts’ letters appear uncomfortably thin in a “text” setting.

Text in Garamond Premier Caption and Display Sizes

The amount of stroke contrast visible in caption-sized fonts is much lower than in display-sized fonts. If the Garamond Premier Display font (from the above image) was rendered in a smaller point size, its thin strokes would begin to break apart, making the text unreadable. But this would not occur with the Caption version.

Garamond Premier Caption can robustly set real text, even in poor printing conditions. How well a font will render in small sizes on screen depends on the operating system and applications in question. Font formats themselves also play a role; in certain environments, TrueType fonts with “hinting” information may vastly improve on screen display (see the “Hinting” section at the end of this article).

3. x-Height

Text in Garamond Premier Caption and Display Sizes

Garamond Premier’s Display face (above left) is shown next to the Caption face (above right). Both fonts are set at the same point size. The Caption face features a much higher x-height than the Display font.

Many successful text faces feature high x-heights; this means that the ratio of the central vertical area of lowercase letters—the height of the letter x, for instance—is large when compared to the length of the ascenders and descenders. Depending on its design, a text face may have a low x-height and still be quite legible. But the benefit of incorporating a large x-height in a design is that it maximizes the area of primary activity.

A high x-height may also prevent some letters, like the a or the s, from appearing to become too dark; these two letters have three horizontal strokes inside the x-height space, which is a very small area in text sizes. In order for letters to maintain clarity and understandability, they must have a consistent rhythm, as well as include large, open forms.

4. The Spaces Inside of Letters

The images below illustrate just a few of the intra-letter spacing elements that should be understood and considered when choosing which typeface to choose for your body text. In order for the white spaces inside of letters to remain visible in small sizes, it is necessary for their counterforms to have a certain minimum mass, proportionally.

Counters
ITC Bodoni Six and ITC Bodoni Seventytwo

The image above shows text set in two members of the ITC Bodoni family: ITC Bodoni Seventytwo and ITC Bodoni Six typefaces. In the first line, “Randgloves” is set in a size mastered for 72pt display (ITC Bodoni Seventytwo), while “and jam” is in the Caption size (ITC Bodoni Six). These words are reversed in the second line. Note how the enclosed white space in the top portion of the e changes between the display and text optical sizes.

Apertures
Apertures in FF Meta

“Apertures” are the gateways that whitespaces use to move in and out of the counterforms of a typeface’s letter. The above image highlights the wide apertures in four letters from Erik Spiekermann’s FF Meta typeface. These allow for the typeface’s letterforms to feel more open. In certain sizes and settings, wide apertures—and the large counterforms that are their result—will make a text more readable.

Apertures in Frutiger and Helvetica

The top line of the image above is set in Helvetica, and the bottom line in Frutiger. While the counterforms inside the letters of these two typefaces are similar in size, Helvetica’s apertures are much smaller. Because of this, white spaces inside of Helvetica’s letters and between Helvetica’s letters are much more closed off from each other than in a typeface with more open counters—like Frutiger.

Other counterforms and problematic letters worth remembering include the c; if the apertures of a, e, s are very open, the c should follow this same route. Then there are lowercase letters like a, e, g, s that often have rather complex shapes—specifically, they each feature several horizontal strokes inside a small amount of vertical space. How do their forms relate to one another? How large is the typeface’s x-height? Do the ascenders and descenders have enough room, particularly f and g? Do the counterforms inside of roundish letters (e.g., b, d, p, q, o) have the same optical size and color as those inside of straight-sided letters like, h, n, m, and u? How different from one another are the forms of the capital I, the lowercase i and l, and the figure 1? Can the 3 and the 8 be quickly differentiated from each other? How about the 5 and the 6?

5. Kerning

Sample text in Carter Sans, with and without kerning

In the sample above, kerning has been deactivated for the second line. The gaps between the letters T y and V o are too large when compared with the amount of space between the other letters in the text. The typeface used in the image is Carter Sans.

Despite the popular misuse of the term in graphic design circles, “kerning” does not refer to the spacing values to the left and right of the letters in a font. Rather, fonts contain a list of kerning pairs to improve the spacing between the most troubling lettering combinations. The importance of kerning in a font is the role it may play in maintaining an optimal rhythm. Just as kerning describes something much more specific than a typeface’s overall spacing—or the tracking that a graphic designer might apply to a text—kerning is not the rhythm of a typeface itself, but an element that may strengthen a typeface’s already existing rhythm. Not every typeface design requires kerning, and there are typefaces on the market that indeed may have too many kerning pairs—a sign that the basic letter spacing in the font could have been too faulty in the beginning.

6. Consistent Rhythm Along the Line

Simple Text Sample in Frutiger and Helvetica

In the image above, compare the spaces between the letters of the Helvetica typeface (first row) with Frutiger’s (second row). Frutiger is a more humanist design, featuring a slight diagonal axis in its letters; many of them look similar to Helvetica’s, at least at face value. However, the space between Helvetica’s letters is much tighter.

While most of the images in this article feature typeface families that include Optical Size variants, many commonly used typefaces on the market today do not offer these options. This is why it is helpful to be able to identify text typefaces based on their features, rather than just on their names in the font menu. As mentioned earlier, it is primarily the typeface’s rhythm that dictates the readability of a block of text.

Take Frutiger and Helvetica, which are both commonly used in text, especially for corporate communication—Neue Helvetica is even the UI typeface in iOS and MacOS X 10.7. Yet, despite its popularity, Helvetica is not very effective as a text typeface; its rhythm is too tight. By rhythm, I’m not referring to tracking—or any other feature that a designer can employ when typesetting—but the natural flow of space between letters, and within them as well. Frutiger is a much more open typeface—the spaces between its letters are closer in size to the white spaces inside of the letters than in the case of Helvetica. Like all good text typefaces, Frutiger has an even rhythm—space weaves in and out of the letters easily.

7. Caveat: Signage Faces

To round off my discussion on text typefaces, I’d like to briefly mention some fonts that are often shown in rather large sizes: fonts for signage. Interestingly, many signage typefaces have design features very similar to typefaces created for very small applications. The Frutiger typeface, based on letters that Adrian Frutiger originally developed for the Roissy airport in Paris (now named after Charles De Gaulle), is quite legible in small sizes precisely because it is a good signage typeface. Despite their size, signage fonts serve a rather different purpose than Display fonts.

Frutiger in an airport signage-like setting

Additional Elements To Consider

After considering the criteria mentioned above, the next question that often comes up is, “does this font have oldstyle figures, or small caps and ligatures, etc.?” A font’s letters might look really great in text, but if they do not include additional elements and features, their use is somewhat minimized. I avoid using fonts with small character and feature sets where I can, because I feel that the lack of these “extras” may break the kind of rhythm I aim to achieve.

1. OpenType Features

Once you’ve established a consistent rhythm by setting your text according to the correct size and application, it would be a pity to inadvertently break that flow. Large blocks of tall figures or capital letter combinations do just that.

Even in languages like German, where capital letters appear at the start of many words, the majority of letters in a text planned for immersive reading will be lowercase letters. Every language has its own frequency concerning the ratio of “simple” lowercase letters like a c e m n o r s u v w x z to lowercase letters with ascenders or descenders—b d f g h j k l p q y. In international communication, language support is a key consideration when choosing a font, and other character set considerations may especially play a role.

FF Meta Pro Book and two examples from its many figure styles

Traditionally, the style of figures used in running text also have ascenders and descenders. These figures—often called oldstyle figures or text figures—harmonize better with text than the “uppercase” lining figures. These so-called lining figures either align with the height of a typeface’s capital letters, or are slightly shorter. It is no surprise that, when shipping the Georgia fonts for use onscreen and online, Matthew Carter and Microsoft made the figures take the oldstyle form. Many other typefaces that have long been popular with graphic designers, like FF Meta (seen above), also use oldstyle figures as the default style. In my opinion, lining figures are best relegated to text set in all-caps.

Long all-caps acronyms—like NAFTA, NATO, or USSR—also create an uncomfortable block in the line for the reader. Setting these letter-strings in small caps helps reestablish a specific typeface’s natural rhythm in reading sizes, as may be seen in the first line of the image below (set in Erik Spiekermann’s FF Meta).

FF Meta Pro Book and its small caps

Along with common ligatures like fi ff fl, small caps and the many figure options are the most common OpenType features found in quality text fonts. Aside from having both lining and oldstyle figures, OpenType-functionality can enable a font to include both tabular and proportionally-spaced figures, numerators and denominators for fractions, as well as superior and inferior figures for academic setting. Additional OpenType features (such as contextual alternates or discretionary ligatures), are more powerfully noticed in display sizes, and in some cases can even be distracting in text.

2. Hinting

The display of text on screen, particularly on computers running a version of the Windows operating system, may be fine-tuned and improved with the help of size-specific instructions inside of the font file. These instructions are commonly referred to as “hints.” A TrueType font (or a TrueType-flavored OpenType font), is capable of including hinting. However, not every font manufacturer goes to the effort of optimizing the onscreen appearance of its fonts for Windows—even those fonts specially created for use in text sizes.

Prensa in three different rendering environments

All of the text in the above image is shown in the same font: Prensa, set at 18 pixels. The lowest row shows this at actual size in three different onscreen rendering environments. In the enlargements, the top row shows a close-up of rendering in Safari on MacOS X, which ignores the hinting data in fonts. The second row shows rendering in Internet Explorer/WindowsXP (Grayscale only, for this sample). The third row is from a ClearType environment—in this case, from Firefox on Windows7. Prensa is a typeface designed by Cyrus Highsmith at the Font Bureau; the Web font is served by the Webtype service.

Recommended Typefaces For Readability

Aside from the typefaces already mentioned in this article and its images, here is a small selection of faces that I personally enjoy at the moment. Even though lists of “favorite” typefaces are about as useful as lists of favorite songs or favorite colors, I am happy to pass my subjective recommendations along. No doubt that as new projects arise, my list of favorites is likely to change, too. I do think that these typefaces serve as great starting places. Some are also just from cool friends whose work I dig. Alongside each selection, I mention whether this choice is currently available for print only, or if there is a Web font version, as well. Don’t forget: the typefaces that you pick in the end should depend on your projects, their audience, and the content at hand.

Small sample of the Arnhem typeface

Arnhem is a no-nonsense high-contrast oldstyle-serif face. It is a contemporary classic for newspaper and book setting, designed by Fred Smeijers and distributed via OurType. Available for print and Web.

Small sample of the Benton Sans typeface

Benton Sans is a Tobias Frere-Jones performance of Morris Fuller Benton’s News Gothic genre. Designed for Font Bureau, it is not only a great typeface for small print in newspapers, but one of the best-rendering text faces for the Web as well. Available for print and Web.

Small sample of the Ibis typeface

Ibis is another Font Bureau typeface, designed by Cyrus Highsmith. This square serif family is also no stranger to cross-media text-setting. Ibis works just as well whether you use it in print or on screen. Available for print and Web.

Small sample of the Ingeborg typeface

Ingeborg is modern serif family from the Viennese type and lettering powerhouse, the Typejockeys. Like any proper family should, Ingeborg has optically-sized variants for text and display settings. The display versions of the typeface can get pretty far out, too! Designer Michael Hochleitner named this typeface after his mother. Available for print and Web.

Small sample of the Ludwig typeface

Fred Smeijer’s work in contempory type design is so significant that he gets two shout-outs in my list. His Ludwig type family takes a nod from 19th century grotesques, but he does not try to sanitize their quirky forms, as so many type designers had tried to do before him. Available for print and Web.

Small sample of the Malabar typeface

This is one of the typefaces that I’ve designed. I’m somewhat partial to Malabar. Available for print and Web.

Small sample of the FF Scala Sans typeface

Martin Majoor’s FF Scala Sans has been my top go-to typeface for almost 15 years. It mixes well with the serif FF Scala type, but it’s also really great on its own. Available for print and Web.

Small sample of the URW Grotesk typeface

Of all the typefaces designed by Hermann Zapf over his long career, URW Grotesk is clearly the best. Unfortunately, it has been a little overlooked. URW Grotesk is a geometric sans, with a humanist twist that brings much more life into the letters than this genre usually allows for. Plus, the family is super big. Available for print and Web.

Small sample of the Weiß-Antiqua Typeface

Are you a DIY-fan? Do you like to print with letter press, whether you set your own type by hand, or have polymer plates made? Then check out the typefaces of Emil Rudolf Weiß! His Weiß-Antiqua is an eternal classic. Weiß may have passed away 70 years ago, but his work is still relevant. He was German, so his last name is sort of pronounced like Vice, as in Miami Vice. Available for print and Web.

Conclusion

There are many factors that play a role in typeface selection. Aside from just browsing through the available fonts that they have, or fonts that could be newly licensed for a project, designers regularly spend considerable effort determining the right typeface to complement a project’s content, or the message at hand. Understanding some of the thoughts that go into the making of text typeface—including how a typeface’s letters are fitted to each other to determine a text’s default underlying rhythm—helps lead to better informed decisions regarding what types are indeed apt, and which faces are better suited for other sorts of jobs. After having read this article, I hope you feel more comfortable with this kind of decision making, and that you will know what to look for with a font in the future.

Other Resources

For more information about choosing the right text fonts, you may be interested in the following books and Web resources:

1. Websites

2. Books

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

(jvb) (il)

© Dan Reynolds for Smashing Magazine, 2012.

0
Your rating: None

The story begins in 2006 with a trip down Route 66. Day in, day out, I looked at U.S. traffic signs that were either set in the old, somewhat clumsy “FHWA font series” or the new Clearview HWY typeface. Approaching the signs, I would often test myself: which typeface works best from a distance, and which of its features or details might be responsible for its performance. I had so many more questions than answers. Surely every professional type designer has at least an inkling of how a signage typeface should look: Probably it sports a rather clean sans serif design, open counters and a rather large x-height. But which x-height works best, and why? What is the optimal stroke width? A monocular or binocular g? Should the design be somewhat condensed to permit more information on a sign, or rather should it be relatively wide so that individual letters are more easily differentiated?

Studying Existing Road Signs

I was unable to fully answer those questions, but felt that I must find the answers, no matter what the cost. Back in Europe I began studying the typefaces on road signs just about everywhere the Latin script is used. But looking at photos or signage specifications doesn’t reveal much about the actual performance of those typefaces. So I set off, driving thousands of miles across Europe to explore the legibility of these signs and typefaces, first hand. Once I even ended up in a holding cell at the border crossing to Norway, because the customs officers just wouldn’t accept that someone would drive all over Europe simply to take photographs of traffic signs. (See my FLickr sets World of Traffic Signs and Type on Traffic Signs.)

I was surprised by the sheer variety of type styles I discovered on my journey. Even though all road signage systems are intended to be as legible as possible, there appears to be no consensus on how to achieve this in terms of type treatment. Some road signs used grid-based typefaces, some were extremely wide geometric typefaces with the simpler forms of a and g, some very thin, and some very heavy. These days, with digital sign production, we see more and more print typefaces (like Helvetica) and even system typefaces (like Arial) on signs. The old geometric and grid-based typefaces were mostly a product of the drawing and sign-production methods of the time. Today we can choose from hundreds of very legible, high quality print typefaces; however, during my own research I remained skeptical that simply plastering our best print typefaces on road signs would be the best way to go.


Top-left: Germany. Bottom-left: Italy. Right: Holland.

A typeface on a sign that is read from 300 yards has different requirements than a typeface read in a magazine, from your armchair. And even if the typefaces are designed specifically for signage, they are often a local solution that just doesn’t work everywhere. For example, the Transport typeface used in the U.K. is a very good and legible design, but it is designed for English words and names and is far too wide for the generally longer names of German cities. Another example is the Clearview typeface with its extreme x-height, which works on American road signs, but not so well for languages using numerous diacritical marks. So in the end, for every typeface I checked and tested, I discovered both advantages and disadvantages. There was not a single typeface that I could recommend for signage in every situation.

Once I even ended up in a holding cell at the border crossing to Norway, because the customs officers just wouldn’t accept that someone would drive all over Europe simply to take photographs of traffic signs.

Creating Wayfinding Sans Pro

So I determined there was still room for a new signage typeface with a broad range of potential uses, and I hoped that I could design one that would even be more legible than the common existing ones. From the outset it was very important to me that I did not base my work on any of the existing typefaces typically used for signage. I wanted to build my typeface from the ground up, challenging every design principle of signage typefaces. But this also led me to my first major design problem. A signage typeface is all about the moment — when you come close enough to the sign that it just becomes readable. And it’s here where you can actually make a difference. When you attempt to improve the recognizability and distinguishability of these blurry letters just a fraction, the typeface becomes easier to read from a greater distance, thus you have already created a more successful signage typeface. But how should I create a typeface for a reading situation that I can’t actually replicate? A screen typeface is judged on screen, a print typeface is judged from print-outs, but testing every little design detail of a signage typeface by always mounting different designs on actual signs would be, to say the least, rather impractical.

A typeface on a sign that is read from 300 yards has different requirements than a typeface read in a magazine, from your armchair.

A New Design Approach

That’s when I came up with the idea of the Legibility Test Tool, an OSX application I built that offers real-time simulations of different viewing conditions (distance, fog, halation, and positive/negative contrast) during the design stage. While I was working in my font editor on the design of individual letters, the tool simulated views of test words with the letters I was working on. With this tool I could completely remove the guesswork, therefore optimizing my design for even the very worst reading conditions. Often the simulations surprised me. Sometimes I was tempted to design my typeface in the way I was accustomed to from the print world, but the tool clearly demonstrated that the reading conditions of road signs require a unique design solution for maximum legibility within this context.

Design Principles of a Signage Typeface

The design process itself was also very different to that of designing a typeface for print. Usually a type designer first sketches out the outlines of certain letters. But naturally, this focuses on the final design and its stylistic details. However, these very details will be the first to disappear when the text is read from a distance. What matters here is the skeleton of the letterforms. So in the beginning I worked with nothing but single-line letter skeletons and no character outlines. This allowed me to apply different stroke widths to those skeletons, thus testing the crucial correlation between the letter skeletons and the applied stroke widths. I also experimented setting the stroke width of my own letterforms to match those of existing typefaces. With this procedure I could directly compare the performance under difficult viewing conditions, and could optimize my design for maximum legibility — arriving at solutions superior to those of existing signage typefaces. A typical result of this working method are the slightly exaggerated details like the wider crossbars of characters such as f and t. Making them rather short in print typefaces permits tight and even spacing within words, but it also makes letters such as l, t, f, and sometimes even i, harder to distinguish, especially when the text is to be read under difficult viewing conditions. So I always tried to create a rather generic letter skeleton that was familiar and easy to recognize; but I also attempted to stress the individuality of each letter to increase letter differentiation, especially for pairs of similar letters.


Crucial letter pairs:
— CG in the Dutch road signage font (top) and Wayfinding Sans (bottom)
— OQ in the French road signage font (top) and Wayfinding Sans (bottom)
— f l t in the German road signage font (top) and Wayfinding Sans (bottom)


Comparison between Helvetica & Wayfinding Sans Pro.

Another crucial feature is the stroke width. When I compare existing typefaces in my Legibility Test Tool, all the typical stylistic differences quickly disappear. But what remains ,and has the most important impact on the legibility, is the letter’s skeleton, the stroke width, and the interplay of these two elements. Sometimes signage typefaces are extremely bold — the rationale being that a bolder stroke can be read from a greater distance. However, an increase in stroke width comes at the cost of smaller counters and therefore reduces legibility. This problem has become even more problematic in the last few decades, with the increasing use of more and stronger retroreflective sheeting for road signs and backlit signs in airports, subway stations and so on.


Comparison of Wayfinding Sans Pro (top) and the Spanish & Italian Road Signage font.

Therefore, I think that the best solution is to define the stroke width and the x-height of the boldest style, based on crucial letters such as a, e, and s, which have up to three strokes within the x-height. When the strokes of these letters are still clearly visible — even under the halation effect of retroreflective or backlit signs — then the typeface will perform well for signage. Diacritical marks are also an important part of many languages using the Latin script. Again, what might be desirable in print, might not work for signage. On signs the diacritical marks must be unmistakable in their design and prominent in their size, because such separated letter parts will be the first to become illegible or even invisible when viewed from a distance.


Left: diacritical marks in the British & Polish road signage font.
Right: Wayfinding Sans Pro.

Figures are usually designed to blend or harmonize with letters. But the figures of Wayfinding Sans are optimized for the requirements of signage use: maximum distinguishability and lining tabular design, though Oldstyle and proportional figures are also available via OpenType features. Entering and positioning arrows with text in a signage layout can be a time-consuming task. But the arrows of Wayfinding Sans can easily be typed along with the text, simply by activating a Stylistic Set and typing the appropriate code. These codes follow a simple naming scheme based on the cardinal directions: “hyphen hyphen n” will create an arrow pointing up (“North”); add an “e” for East and the arrow will point North-East.

Empirically tested

When presenting my work in progress at conferences, I was often asked about scientific proofs for the legibility of my typeface. Personally, I didn’t feel that I needed such proof. I had based my work on a solid theoretical framework, and with my Legibility Test Tool I could simulate the very worst viewing conditions possible. If my typeface performed well in these extreme simulations, then it would also work well for any typical signage use. But as it happens, an independent empirical legibility study was recently conducted at the University of Applied Sciences “htw” in Berlin.


Mittelwert: average

Minimalwert: minimum
Leseentfernung: reading distance

The study tested different typefaces in the context of signage use. I was asked to provide a style of Wayfinding Sans Pro. I shouldn’t have been surprised about the results, but I was certainly happy about them: Wayfinding Sans Pro (bold condensed) was the winner in all conducted tests. It could be read from a greater distance than any of the other styles of the tested typefaces — among them typical signage typefaces like Frutiger, DIN 1451, Johnston Underground, and Futura.

In 2009, I wrote about the progress of my work under the title “The Ultimate Signage Typeface.” I was not suggesting that I had created the ultimate wayfinding typeface; rather, I was attempting to describe the process in creating one. The article received a lot of attention and commentary — I knew I was onto something, so worked even harder toward the goal of creating a typeface that would be worthy of such a title. We have now begun work on additional pictogram fonts comprising hundreds of common wayfinding symbols — the perfect accompaniment to Wayfinding Sans Pro. To take a closer look at the typefaces, check out the PDF type specimen. Wayfinding Sans Pro has just been released and is available in 20 styles at fonts.info and MyFonts.■

About the author:

Ralf Herrmann studied graphic design at the Bauhaus University Weimar. He is the author of several typography books and founder of the type foundry fonts.info & the German typography community Typografie.info. Since 2009 he is the editor of the German typography magazine TypoJournal. Currently Ralf Herrmann is doing his PhD at the University of Applied Arts in Vienna. In his dissertation he will research the implications of cognitive map research applied to the design of maps and wayfinding systems. Ralf also teaches typography for the MSc course Traffic & Transport Information Design organized jointly by the International Institute for Information Design (IIID) and the University of Applied Sciences FH St. Poelten, Austria, under the auspices of UNESCO.



Sponsored by H&FJ.

The design of a signage typeface

0
Your rating: None