As a designer, I am interested in how certain solutions connect to the user. It is amazing to see how different solutions can change feelings, resulting in different ways of interaction. In consequence, in the type]media master I knew I wanted to design a typeface that would bring a new experience to the user in a specific area.

As I am coming from Portugal, the creation of Guia was very much influenced by my personal visual memory: It is very common to find diverse guidance systems in different Portuguese cities. They differ in material, technique and lettering. Those differences are connected with the individual cities. For example, if a city has a granite tradition, it is most probable to find street name signs made out of granite, with the letters carved into the stone. There are also signs in marble or metal, but most commonly, painted tiles can be seen, as all of Portugal has a great tile tradition. Even though, different executions can be found yet again within the technique of painted tiles. Those street plaques appear to be there since forever, and they have become part of the history of the city.

I know the portuguese sign tradition from my own experience, and I was visually supported by many images on Flickr. As I did not have the possibility to make a deeper research in person, online archives of photos were of great help.

Street sign made of stone in Aveiro, Portugal. Photo by Filipa Cruz

Enamel street sign in Tondela, Portugal. Photo by Filipa Cruz

Street sign of painted tiles in Évora, Portugal

Inspiration sources for getting the feeling right were also found studying books on signage and lettering, such as Nicolete Gray’s “Lettering on Buildings” and Jock Kinner’s “Words and buildings: The art and practice of public lettering”. Their research images showed many manually-produced signs, which all had a strong appeal to me. The signs’ purpose was mostly illustrating and matching a place, rather than providing a coherent appearance, or offering greatest readability.

All those impressions helped me to get into an overall mood to create a typeface which would be personal, but at the same time useful and usable.

In Portugal, almost no standardizations for signage systems exist, except for the use of the typeface “Transport” for transit guidance. Today, when new pedestrian sign systems are being created, they are mostly designed using rational sans serifs, being totally out of context within the sign lettering tradition. There are no ties with the surrounding architecture or connections to the city history.

I felt there was a gap between the charming lettering of old street name plaques and current signage systems for pedestrian guidance. This area I decided to work on.

I do understand that the complexity of the cities nowadays is not the same as it was 100 years ago; not even 20 years ago. Hence, new solutions are required in order to guide persons around a city. What I wanted to experiment with, was to bring back some of the lettering-feel to an up-to-date wayfinding typeface. Ideally, new pedestrian signage systems could consequently transmit more of a humane feeling than they are doing right now.

The different styles of Guia and their features.

Guia shall provide multiple possibilities for the sign creator of today, yet retain a strong human touch, in order to make the user comfortable and welcome with the new place that he is about to discover.

For this reason, Guia is based on the movement of the broad-nib pen. In my research I found out that this particular way of creating letters results in pleasant shapes and it has advantages in readability in comparison to other contrast models. Contrast-less typefaces mostly have the characteristic of being uniform; so they do not evoke a feeling of their own.

Calligraphy sheet produced during the design process of Guia

Many decisions were taken bearing a foreign reader in mind. If a foreigner arrives at a new place, he or she does not have the word-images of street names etc. in mind. In consequence, reading succeeds letter by letter. Therefore, the spacing of Guia is relatively wide. For the same reason, it does not have any ligatures. Persons which are not into type design or typography might just decipher a ligature as a strange character they do not know.

Guia does not have ligatures.

To make the typeface really fit for signage purposes, various OpenType features and additions were implemented. For instance, any word can be converted into a pointing sign, just by selecting a stylistic set. Also, different kinds of arrows exist; to work in a mixed or all-cap setting. Circled arrows provide the possibility of stand-alone usage.

In many languages such as Portuguese, Spanish and French, long words are abbreviated using superscript letters. For the purpose, Guia provides the whole alphabet in a superscript feature.

The arrows of Guia correspond to the cap-height, x-height and ascender/descender height.

With the help of OpenType, any word can be transformed into a sign

Guia contains the whole alphabet also in superior letters.

In all those details, I was also focusing on the broad-nib contrast. Even the arrows are based on the construction model, just as the circles around them. Those details might be negligible for an outsider, but I think they make the whole typeface more coherent in itself.

Another area I focused on concerns the recognition of the individual letters. Therefore, cap- and ascender-heights are significantly different, in order to make their distinction easier. Stem joints have been adjusted, to make the whole letter shape sharper, avoiding visual clogging. All those corrections lead to a better legibility, which I find to be essential for a signage typeface.

Different height of caps and ascenders. Adjusted stem joints avoid visual clogging.

Guia is composed by a Regular, Bold, Condensed, Bold Condensed and Extra Condensed style — yet this selection might not be absolute. It is still an ongoing project. I have learned a lot during its creation, and I am sure that many things will change before the typeface is ready to be released. A next step will be designing a set of pictograms and symbols; and I am curious how to get the broad nib feeling into them.

Picture: F. Grießhammer, http://www.flickr.com/photos/frankrolf/4745934619

I am very glad I had the space and time to do this experiment, and I thank all the type]media teachers for being open to my ideas and for all their advice and support.

Tânia Raposo

http://www.taniaraposo.com

See also:

• Wayfinding articles on opentype.info
• Articles on traffic typefaces

Tweet This Share on Facebook

Oh my gosh! Yet a another font format for the web? EOT for Internet Explorer. TTF/OTF for Safari & Opera. WOFF for Firefox 3.6 and now SVG fonts for Mobile Safari? Unfortunately, yes!

But what are SVG fonts anyway? Is this a good webfont format? Actually, it is not a webfont format at all. The purpose of SVG fonts is to be embedded inside of SVG documents (or linked to them), similar to the way you would embed standard TrueType or OpenType fonts in a PDF.

SVG fonts are text files that contain the glyph outlines represented as standard SVG elements and attributes, as if they were single vector objects in the SVG image. But this is also one of the biggest disadvantages of SVG fonts. While EOT, WOFF and PostScript-flavoured OpenType have compression built into the font format, SVG fonts are always uncompressed and usually pretty large. For example, our Graublau Sans Web fonts have just 61 KB as OpenType PS, but 172 KB converted to SVG.

This is how a SVG font (reduced to 2 glyphs) looks like

But there is more bad news: Since SVG fonts are just a collection of vector shapes, there is no way to store hinting information. Font foundries such as FSI have put a lot of effort into optimizing their Web FontFonts for small sizes on screen using elaborate TrueType hinting. But when you convert such a font to SVG all these information will be lost.

So, SVG fonts are not really an alternative to the other webfont formats. In 2008 Apple fueled the webfont revolution with the release of Safari 3.1 with support for webfonts in TrueType or OpenType format. It’s understandable that this support was deactivated in Mobile Safari for the iPhone. The screen is very small and the use of downloadable fonts hardly justifies the loading times and traffic costs of the webfonts. But this is now changing with the iPad. The resolution of the iPad in landscape mode is equal to the standard minimum resolution used for almost all websites today. The internet on the iPad is not a light version for mobile devices. So there shouln’t be any limitations either. Steve Jobs said in his iPad keynote:

»Those devices need to be far better than a laptop or the iPhone at some key task—things like browsing the web.«

But without support for real webfonts format such as WOFF and EOT, browsing the web with Mobile Safari is not really better. So I am really hoping that Apple will include true webfont formats in Mobile Safari—preferably WOFF which is also missing in Safari but has a good chance of becoming the webfont format in the near future.

The site about webfonts, but by default, no true webfonts supported on the iPad

If you want to use webfonts on the iPad today, you need to provide SVG fonts. To convert your fonts to SVG you can use applications such as FontForge or the @font-face generator from Font Squirrel. With the webfont services from Typekit and Typotheque you also get (experimental) SVG fonts support.

The Typekit homepage with experimental SVG fonts support

Linking SVG fonts in your website is similar to using any other webfont format. You just add another line to the @font-face rule in your CSS:

Note that the file name is followed by a hash tag. This relates to the font ID, which you will have to set while converting the font to SVG. The reason for this is, that multiple fonts can be embedded in a SVG document and therefore an identifier is required.

Tweet This Share on Facebook

Tweet This Share on Facebook

In March 2009, Cameron and his wife, Suzanne, spent several days in Rome to celebrate their 10-year anniversary. This was also a chance to observe in detail the Coliseum, which Cameron had already selected as the next subject in his series of letterpress posters.

Over the course of the next 12 months, the artwork was handcrafted character by character, totaling roughly 250 hours of work from start to finish. Characters from the Goudy Trajan and Bembo Pro typefaces form the Coliseum (or Colosseum), also known as today as Colosseo (Italian) and originally known as Amphitheatrum Flavium (Latin).

http://colosseotype.com

Tweet This Share on Facebook

(Source)

Tweet This Share on Facebook

Tweet This Share on Facebook

Web FontFonts come as a download package with an EOT and a WOFF file. The official announcements states that this will cover “more than 90% of all web visitors”, but unfortunately at the moment this is marketing talk. WOFF is currently only available in the latest release of Firefox. If someone uses an older version or Safari or Opera, Web FontFonts won’t show up. I just contacted the major browser makers asking for their plans concerning WOFF, but no one is currently working on an implementation of this format. So we probably need to wait some time until this concept of WOFF and EOT (as an Internet Explorer fallback) will really take off. Nethertheless, WOFF has a very good chance of becoming the webfont format, so I really appreciate that FSI is taking the lead in supporting it.

The fonts are licensed based on the estimate number of page-views per month for the website. There are three levels: up to 500,000; up to 5 million; and up to 50 million. To me this sounds like a very reasonably deal.

A detailed user guide describes how you can link the fonts on your website. It is also important to mention that FSI’s webfonts are carefully optimized for screen. A regular desktop font converted to WOFF or EOT will very likely look terrible in smaller sizes on Windows. Only optimized screen fonts promise a good legibility across all platforms and in all sizes. The Web FontFonts certainly fulfill this promise. You can check it out by looking at the browser samples provided by Typekit.

The Web FontFonts are available for licensing here: http://www.fontshop.com/fontlist/n/web_fontfonts/

Tweet This Share on Facebook

left: compact direction sign, right: compact table sign

left: partly-separated table sign, right: separated table sign

The amount of separation increased on these sign types. On the first sign, all targets are presented together, on the last sign, every  target has its own sign. But which one is most effective? On which sign can we find our target as fast as possible and without making mistakes?

In his diploma thesis Dr. Raoul Bell researched this problem. He conducted a series of tests: In one of the tests probands were presented with signs like these and should look for a certain word and also state the direction of this target.

The study found that the type of sign significantly influences the time we need to find the target. When all information were presented on one sign and without any separation, the targets could be found much faster. Bell argues that we perceive these objects as groups and only one group can have our attention at a time. So if the information is split into several groups we need to shift our attention from one group to the next, thus need more time to perform this task.

This corresponds to my experience when using road signs. I am used to the very clean and unseparated motorway signs in Germany, but for example these separated French road signs make it really hard to find a target.

Of course these findings are by no means limited to road signs. They are valid for any kind of signage. So wayfinding designers should carefully think about how many separating signs, lines, boxes and colors are really necessary.

The full research paper (German only) is available here: Objektbasierte visuelle Aufmerksamkeit: Relevanz für das Design von Verkehrsschildern
.

Tweet This Share on Facebook

Tweet This Share on Facebook

http://www.fontspring.com

Tweet This Share on Facebook