fonts.com blog
Archive for April, 2011

by Julie Strawson

One of the first brands to recognize that typography was core to their brand was the famous newspaper, The Times (London). Seeing the efficiencies and distinctive cost advantages that could be achieved by customising their typeface to suit their production environment, they also aimed to use the typeface to set a tone that was consistent with their brand. The Times New Roman® typeface most of us have touched at some point in our lives was born. As technology continued to evolve, so The Times developed their typefaces to suit the production environment transitioning the brand successfully across print, Web and most recently mobile platforms.

Since that time, many global brands have used type to create a unique brand identity. Think of Dyson, Honda, Intel or Orange and you can instantly visualize the company name in the style of their typeface. Newspapers and magazines are reinventing themselves again to serve readers who prefer their news online and on-the-go.

When a typeface is used consistently the style of communication from that company becomes lodged in the reader’s sub-conscious. Customers become unwittingly attached to the style and feel that they can trust the communication.

In a UK study of 2000 consumers conducted by Opinion Matters and commissioned by Monotype Imaging, 86 percent of respondents said if they received a message from a source they often use but it appeared in a different font, they would not trust it.

The effect of on-brand Web design

Recently The Times, reported 21% increase in brand recall and 18% uplift in message recall in their pay-walled original content Website. They also measured higher ratings compared to other sites for measures such as clarity, exclusivity, engagement and ‘premiumness’. The strategy of designing a Website as close to the newspaper in look and feel undoubtedly had something to do with this.

An industry wide study by the Association of Online Publishers in December 2010 showed that consumers had a more positive brand opinion on original content sites than portals and social media sites. The study revealed new measurement criteria for the online brand environment that are all delivered through site design and correct use of brand assets: trustworthiness (recognition of and confidence in a brand); authoritativeness (consistent, reliable thought-leadership); its uniqueness (original content); its community (featuring like-minded user forums); and how entertaining the site is.

AOP and The Times research http://bit.ly/hDQrV9

Download Dan Rhatigan’s Times Modern in Modern Times talk here for more about the bistory of typography at The Times (London) newspaper.

MP4 (61.5 MB) | WMV (62.9 MB)

Download UK Visual Trust research


by Allan Haley

Ed Gottschall, the editor of U&lc in the late 1970s and early 1980s, loved technology. Although he wore a suit and tie to work everyday, he was a certifiable geek. He also had a lot to be geeky about. During his tenure as editor, the manner in which typographic content was set, output, stored and managed was going through dramatic changes. To celebrate and explore this abundance of communications technology, Gottschall prepared his “Vision ’80s” supplement to U&lc in Volume Seven Number Two.

“Vision ’80s” was a major undertaking that pumped the journal up from 80 to 180 pages. In the supplement, Gottschall presented a cornucopia of technological developments for creating textual content – and predicted its future. In several instances his predictions were right on target; in others, not so much. “Vision ’80s” was a report on the state of the art of creating content – and Gottschall was a great reporter. Reporting and predicting, however, are two very different things. Still, “Vision ’80s” is an excellent view into the future of yesterday.

Along with technology, Gottschall was also interested in the calligraphic arts. Volume Seven Number One, contains a call for entries for a calligraphy competition with the winning entries to be shown in the pages of U&lc – and in an exhibition at the ITC Gallery. While the ITC Gallery is long gone, the winning entries can be seen in Volume Seven Number Four.

ITC also announced four new typeface families in Volume Seven of U&lc. The first weights of the ITC Franklin Gothic™ family were announced in the first issue; which was followed by the ITC Fenice™, ITC Century™ and ITC Isbell™ families.

Click the PDFs below to download Volume Seven of U&lc.

Low Resolution:

Volume 7–1 (Low Res).pdf (15.9 MB)

Volume 7–2 (Low Res).pdf (35.6 MB)

Volume 7–3 (Low Res).pdf (15.9 MB)

Volume 7–4 (Low Res).pdf (18.1 MB)

High Resolution:

Volume 7–1.pdf (70.4 MB)

Volume 7–2.pdf (157.1 MB)

Volume 7–3.pdf (73.7 MB)

Volume 7–4.pdf (85.9 MB)

Allan Haley
Allan Haley is Director of Words & Letters at Monotype Imaging. Here he is responsible for strategic planning and creative implementation of just about everything related to typeface designs.

 


by Chris Roberts

Now when you search for any font on Fonts.com, you can see if there is a “Web Font Option” right in the search results. You can still head over to the Fonts.com Web Fonts portal to see the pure, unadulterated, 100% all web fonts all the time inventory, but this new feature on the Fonts.com master site search adds a bit of additional convenience. When a designer is choosing fonts for a print project, they may need to know if the same font is available for web font use. This feature addresses that need. The image below shows how the web font option is indicated in the search.


by Johnathan Zsittnik

 

Just a couple weeks ago we introduced WebFontsPreview.com – a handy tool for previewing Web fonts on the website of your choice without touching the code. This week we’ve enhanced the utility with a suite of advanced options.

The new features include the ability to select individual text components to display using Web fonts. We’ve also added text layout controls, text effects and given visibility into the resulting style sheet. Here’s a rundown on what’s new:

Select Element: Click this button to select an individual text component. Once selected, you can modify the typeface or layout of the text selection. The original version of the tool (which can be seen in “Simple” mode), made some assumptions about which text elements were headings and which were body copy. The select element tool allows you to change exactly what you want you want and nothing you don’t.

Font size, line height and letter spacing: Use these sliders to adjust the text size, line spacing and letter spacing of a text selection.

Text effects: Apply a variety of text shadow effects ranging from subtle to bold to your selected text with the click of one of these buttons.

Show CSS: Like the results of your experimentation? The Show CSS button will reveal the CSS language necessary to recreate the look on your own.

As a reminder, WebFontsPreview.com employs techniques that will work on most, but not all sites. The tool was designed to make it fun and easy to experiment with Web fonts. These new controls will help you take your explorations even further – all without getting your hands dirty. Go ahead and give it a spin and let us know what you think.

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.



by Chris Roberts

We had an interesting suggestion over on the Fonts.com Web Fonts feedback portal to provide a ranked listing of our most used Web fonts. And because we can…here’s the top 100 for the month of March:

1 ITC Avant Garde Gothic® Book
2 Neue Helvetica® 75 Bold
3 Neue Helvetica® 45 Light
4 Monotype News Gothic Regular
5 Monotype News Gothic Bold
6 Garamond 3 Regular
7 Garamond 3 Italic
8 Neue Helvetica® 87 Condensed Heavy
9 Trade Gothic® Bold
10 Neue Helvetica® 45 Light
11 Neue Helvetica® 75 Bold
12 Trade Gothic® Roman
13 Univers® 57 Condensed
14 Helvetica® Condensed Bold
15 Administer BookItalic
16 DIN Next™ Regular
17 Neue Helvetica® 55 Roman
18 Sackers™ Gothic Medium
19 Sackers™ Gothic Heavy
20 ITC Legacy® Serif Bold Italic
21 Futura® Bold
22 Neue Helvetica® 77 Condensed Bold
23 DIN Next™ Light
24 Neue Helvetica® 67 Condensed Medium
25 VAG Rounded™ Black
26 Trade Gothic® Next Regular
27 Avenir® 35 Light
28 ITC Franklin™ Bold
29 Trade Gothic® Next Condensed Bold
30 Trade Gothic® Bold 2
31 Neue Helvetica® 65 Medium
32 Avenir® 85 Heavy
33 Avenir® 45 Book
34 Avenir® 65 Medium
35 Aachen™ Medium
36 Neue Helvetica® 47 Condensed Light
37 Linotype Univers® 920 Condensed Extra Black
38 Neue Frutiger® Light
39 Aachen™ Bold
40 DIN Next™ Heavy
41 Baskerville Regular
42 Avenir® 55 Roman
43 Neue Frutiger® Regular
44 Helvetica® Rounded Condensed Bold
45 DIN Next™ Medium
46 Neue Frutiger® Medium
47 Rockwell® Bold
48 Neue Helvetica® 86 Heavy Italic
49 Trade Gothic® Light
50 DIN Next™ Bold
51 Neue Helvetica® 85 Heavy
52 Neue Helvetica® 77 Condensed Bold
53 Felbridge™ Regular
54 DIN Next™ Bold
55 Trade Gothic® Condensed Bold #20
56 Eurostile® Next Extended Regular
57 Eurostile® Next Regular
58 Eurostile® Next Extended Bold
59 Neue Helvetica® 55 Roman
60 Eurostile® Next Extended Semibold
61 Neue Helvetica® 77 Condensed Bold Oblique
62 Neue Helvetica® 37 Condensed Thin
63 Eurostile® Next Semi Bold
64 Ocean Sans® SemiBold
65 Neue Helvetica® 57 Condensed
66 ITC Avant Garde Gothic® Medium
67 Trade Gothic® Condensed Bold 20
68 Neue Helvetica® 25 Ultra Light
69 Neue Helvetica® 35 Thin
70 ITC Franklin™ Light
71 Univers® 67 Condensed Bold
72 Neo® Sans Regular
73 Calisto Regular
74 ITC Avant Garde Gothic® Bold
75 Bodoni Book
76 ITC Lubalin Graph® Book
77 ITC Avant Garde Gothic® Book
78 Univers® 67 Condensed Bold
79 Univers® 67 Condensed Bold
80 Helvetica® Condensed Bold
81 Gill Sans® Medium
82 Futura® Medium
83 Helvetica® Condensed
84 Futura® Book
85 ITC Franklin™ Narrow Light
86 ITC Franklin™ Narrow Thin
87 Neo® Sans Medium
88 ITC Franklin™ Narrow Light Italic
89 Neue Helvetica® 97 Condensed Black
90 Trade Gothic® Bold #2
91 Helvetica® Condensed Light
92 Frutiger® 55 Roman
93 DIN Next™ Condensed Medium
94 Trade Gothic® Next Light
95 Avenir® 95 Black
96 Optima® Demi Bold
97 Trade Gothic® Oblique
98 Soho® Gothic Light
99 Abadi® Light
100 Baskerville Italic


by Vikki Quick

Nadine Chahine’s been having one heck-of-a-day. For her, it must be surreal, seeing the typeface she created speak to her from the headlines of An-Nahar, Lebanon’s leading Arabic-language daily newspaper. Nadine is Lebanese. This is the paper she grew up with.

Nadine’s typeface was unveiled today as part of a major redesign of An-Nahar. This is no casual event. An-Nahar is a family run newspaper, first published in 1933 as a platform for expressing various opinions. The founder’s namesake grandson, Gebran Tueni, eventually ran the publication, but unfortunately his life came to a tragic end in 2005. The Gebran2005™ typeface, Nadine’s design, is named after him.

As Nadine designed the face, she realized she was creating a soul, if one were to exist for a typeface. She thought of Gebran and his own very public face – a man with a deep passion for free speech. She thought of An-Nahar and all those years she held it in her hands while growing up. And when she designed the face, she approached it so that every character mattered, as if each had a story to tell in itself.

Nadine’s story, in her own words and pictures, is here.

Nadine Chahine holds the latest edition of the redesigned An-Nahar, which features the Gebran2005 custom typeface she designed for the newspaper.


by Jason Pamental

Web fonts aren’t ‘something around the corner’ – they’re here. For the past year, they’ve been growing in availability, reliability and ease of implementation. They’re already in use in a huge number of major brand websites and cropping up across numerous site creation services and Content Management Systems such as the Drupal®, WordPress® and Joomla® platforms.

While each Web font service handles font specification and inclusion in sites a little bit differently, the ultimate control comes in adding the fonts to the site’s Cascading Style Sheets, or CSS. Why bother with the extra effort? Because your users matter. If you want to provide the best experience for them – with new browsers or old, JavaScript™ settings enabled or not, or desktop, mobile device or even gaming platforms – you must specify what should happen when those fonts you’ve selected don’t load (or simply haven’t loaded yet).

This is where ‘fallbacks’ come in. Web designers have been specifying ‘font stacks’ for years – first in HTML and then in CSS. This practice had more to do with the operating system originally: Mac® platforms had the Helvetica® and Times® fonts, and PCs had the Arial® and Times New Roman® faces. A ‘font stack’ is simply a list, in order of preference, of fonts that will do the trick for the look you’re after. When a user visits your site, if they have the first font listed installed on their system, that’s what displays on the page for them. If not, the browser looks for the next one and uses that, and so on. That was all we had to work with for years: a limited set of about 16 fonts that we could reasonably expect to find on a user’s system. Anything beyond that we had to make as a graphic.

While font availability has improved on individual systems, the proliferation of mobile devices is stymying us again in that each device has a different and MUCH more limited set of fonts. This limits us even further in finding any one font that is available on every OS, platform and device. Thus, knowing a good ‘stack’ of fonts with similar characteristics (i.e. Helvetica, Arial, the Droid™ Sans fonts, etc.) is crucial. Unfortunately, that only gets us to ‘reasonably similar’ but still substantially curtailed in our ability to represent brand identities and provide richer, more distinct and engaging user experiences.

Two steps forward…
The advent of font embedding that works reliably on desktop and mobile devices dramatically changes the landscape of what we can do as designers. There are two key elements central to using Web fonts successfully: handling font fallback and font loading. The CSS ‘font stack’ handles fallbacks and ‘Font Events’ helps us know if the fonts are loading, when they are loaded or if none load at all. Most Web font services, including Fonts.com Web Fonts, support this new technology and it’s quite clever. When the page is loading, a bit of JavaScript adds CSS classes to your page indicating that fonts are loading and a different class is added once they are. While good fallbacks can be relatively easy to accomplish, doing something useful with the Font Events can be a bit trickier. Typical of most new developments on the Web, with every success comes a few new wrinkles with which we must contend. This time it’s much to-do about ‘nothing.’

Since browser vendors are still sorting out what they support and how, font embedding is still a bit of a ‘Wild West’ affair, with various font formats and embedding techniques making it all not quite universal. This is where the ‘nothing’ creeps in. What you will hear most frequently are complaints of ‘FOUT.’ While not related to any specific joint ailments, FOUT (or ‘Flash of Unstyled Text’) occurs when users of the Firefox® browser see text appear in a system default font for a few moments before the font loads and then everything reflows. Of course, that may be preferable to what happens with Safari® implementations and some Internet Explorer® versions, where nothing shows up until the font loads. Generally one or the other happens within a few seconds, so you may feel it’s not a big enough detractor to spend a lot of time on it.

Put in the effort – the ease with which both outcomes can be mitigated makes it really worthwhile. [Here’s where I have to admit to not having done this on all of the sites for which I manage – ‘Do as I say, not as I do!’ quoth the parent…] The trick is to create CSS styles first that reference your font stack ‘sans Web font’ –thereby only showing your fallbacks. Then once the Font Events insert their new CSS classes in your page, when the fonts are loaded you can have your ‘true’ font stack called into play popping your copy into the desired (and now fully loaded) Web font.

…have a good fallback
This combination of a carefully selected set of fallback fonts and judicious use of extra overlapping CSS selectors doesn’t require much work beyond sorting it out the first time both on the part of the designer and that of the developer. It just takes a bit of forethought and practice. The real benefit is once you have this workflow in place you generally don’t have to keep thinking about it. It’s a scenario that can help give a much more seamless and considered user experience and when coupled with a good font service can dramatically improve the whole experience.

While formats and standards are still evolving (plus issues with how well individual fonts render within Web browsers), letting the font service handle those changes will greatly simplify the process. Embed once and let the service ‘serve up the updates’ automatically. Fallbacks and Font Event handling will take care of the times when odd user settings, corporate firewalls or storms brewing in the Bermuda Triangle lay waste to your best chosen font pairings.

With a little effort it can add a wonderful new dimension to your Web design and user experience vocabulary.

In my next article, I’ll go into greater detail about some of the techniques in how you embed fonts, and how to write CSS styles to more closely match fallback fonts with the preferred embedded ones. In the meantime, just jump in with both feet and give it a try. There’s lots to explore and much to gain even without getting into more advanced topics. So go forth and embed your fonts!

Supporting resources:

CSS properties for letter-spacing and word-spacing:
http://www.w3schools.com/Css/css_reference.asp#text

Smashing Magazine article on Web safe fonts and font stacks:
http://www.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

Code Style survey of available desktop fonts across Mac, Windows and Linux® platforms
http://www.codestyle.org/css/font-family/index.shtml

Fonts on the iOS® platform
http://iosfonts.com/

Explorations in Typography
Carolina de Bartolo with Erik Spiekermann
http://explorationsintypography.com/

Slide presentation on Web Typography by Pascal Klein
http://www.slideshare.net/klepas/beautiful-web-typography-5

Of course, have to include Wikipedia:
http://en.wikipedia.org/wiki/Web_typography


by Ed Platz

In a recent blog post I mentioned a handy Firefox® plug-in, the Firebug® Web development tool. It’s a well-known utility for examining Web pages without have to “view source” for the whole page. In case you are new to Web development, here’s a brief introduction for you.

OK, navigate to http://getfirebug.com and click on Install Firebug. Before you click, you might want to watch the “Introduction to Firebug” video. You’ll find that Firebug does way more than allowing you to inspect the page’s CSS and HTML.

Once you’ve got Firebug installed, launch Firefox and navigate to the Web page you want to explore. You can launch Firebug by clicking on the little bug icon at the bottom right or you can hit F12. The controls on the upper right side of the Firebug window allow you to minimize it, view it in its own window vs. attached to the browser window, and exit. On the top left is the Bug Icon Menu which provides access to  many Firebug options and features. The Inspect Button is next to the Bug Icon, and it brings up the Inspector. When you click on it and select a field, you’ll see something like this:

Using the Inspector of Firebug

Not only can you inspect the CSS but you can also see what the computed values are for the selectors – in this case h2’s font-family is ‘Farfel W01 Felt Tip’. Cruise around your page and you’ll be comfortable using the Inspector in no time. BTW, you can also simply right-click a selection and ‘Inspect Element’ is one of the menu items. It will bring up the Inspector without having to launch Firebug first.


by Johnathan Zsittnik

As a self-described “complete destination,” Reno, Nevada’s Grand Sierra Resort offers the largest casino in Nevada, 2,000 guest rooms and suites, fine dining, nightlife and access to local ski destinations. The resort’s website has a majestic feel thanks in part to a golden color palette and prominent use of the Optima® typeface. Hermann Zapf’s classic typeface adds grandeur and elegance to text throughout the site.

“Grand Sierra Resort chose Monotype Imaging because of their superior selection of Web fonts. We’re impressed with the ease of the Fonts.com Web Fonts portal and its flexibility, says Steve James, creative Web designer at Grand Sierra Resort. Using Fonts.com Web Fonts allowed Grand Sierra Resort the opportunity to display a new level of class to our website visitors.”

Thanks guys. Stay classy!

Grand Sierra Resort

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.



by Bill Davis

April 1, 2011 – Today we are pleased to announce the introduction of the four-font Comic Sans® Pro typeface family.

Featuring elements such as speech bubbles and cartoon dingbats, Comic Sans Pro extends the versatility of the original Comic Sans, designed by Vincent Connare for Microsoft in 1994. “Hats off to Monotype Imaging for enlivening Comic Sans and getting it back to its roots as a comic book lettering face. Now everyone can write with more panache – and look even more like a pro using swashes, small caps and other typographic embellishments,” said Connare.

Comic Sans Pro

“Every day, millions of people rely on Comic Sans for countless applications ranging from scrapbooking to school projects,” said Allan Haley, director of words and letters at Monotype Imaging. “Comic Sans is also a favorite in professional environments, used in medical information, instructions, ambulance signage, college exams, corporate mission statements and executive reprimands – even public letters from sports team owners to their fans. Breaking up with your spouse? Why not write a letter in Comic Sans Pro, embellished with a typographic whack!, pow! or bam! Comic Sans is everywhere, and now it’s even better.”

The Comic Sans Pro family includes regular and bold fonts, in addition to two new italic and bold italic fonts drawn by Monotype Imaging’s Terrance Weinzierl. “Our aim is to put the ‘fun’ back in ‘functional.’ We can’t wait to see Comic Sans Pro used in everything from second wedding announcements to warning labels,” said Weinzierl. “Long live Comic Sans!”

A sign using Comic Sans Pro

Comic Sans Pro contains a versatile range of typographic features including swashes, small caps, ornaments, old style figures and stylistic alternates – all supported by the OpenType® font format. In addition, Comic Sans Pro includes a set of ornaments and symbols, including speech bubbles, onomatopoeia and dingbats, pre-sized to work well as bullets.

Based on the OpenType cross-platform format, Comic Sans Pro is available as individual fonts or as a complete four-font family pack. Each font contains more than 1,000 characters. In addition to the OpenType features, the fonts include the WGL Pan-European character set, which supports western and eastern European, Cyrillic, Greek, Turkish and Baltic languages. An OpenType-savvy application is required to access the OpenType advanced typographic features.

Comic Sans Pro fonts be viewed, purchased and downloaded here: http://www.fonts.com/findfonts/detail.htm?productid=824904

To see more details, and a bit more boom, pow, whack: