fonts.com blog
Archive for the ‘Type for Web’ Category
« Older Entries
Newer Entries »

Customer Spotlight: Timberland
19 November 2012

by Ryan Arruda

For over three decades, Timberland has been a premier designer of foot and outdoor wear. Employing over 5,000 people, Timberland products are sold in specialty stores worldwide, including through their own retail locations.

The company’s website features an excellent implementation of display typography: overlaid upon photographs, a rotating carousel of large headlines are set in the bold weight of the ITC Lubalin Graph family, while supporting text employs the Bold Condensed No. 20 weight of the Trade Gothic collection.

Both faces are exceptionally structural in their design, yet quite complementary. ITC Lubalin Graph – with roots in the Herb Lubalin–inspired ITC Avant Garde Gothic family – possesses an overt kindly charm.

Subheadings are set in Trade Gothic Bold Condensed No. 20. Despite being a slightly more stoic typeface, the diminutive use of the family on the Timberland site prevents it from undoing ITC Lubalin Graph’s cheerful disposition.

ITC Lubalin Graph is available in 18 styles, from a delicate extra light weight, to a industrial strength bold. A condensed width featuring the same weights round out this versatile collection. The Trade Gothic family is available 14 styles, and is comprised of  both regular, condensed, and extended widths. In addition to online use, both type families are available for desktop licensing through Fonts.com as well.

Ryan Arruda
Ryan Arruda is the Web Content Strategist at Monotype Imaging. Ryan holds a bachelor’s degree in film studies from Clark University, and an MFA in graphic design from RISD.


Tags: , , , , , , , , , ,
Comments Off | Posted in Type for Print, Type for Web, Uncategorized

Solving the Challenges of Asian Web Fonts
14 November 2012

by Bill Davis

Last month, I was honored to give a presentation at the ATypI Hong Kong 2012 Conference titled “Solving the Challenges of Asian Web Fonts.”

To view my ATypI presentation on Slideshare, click here http://slidesha.re/XUpldI

The Fonts.com Web Fonts service features the widest language support including many non-Latin scripts (Cyrillic, Greek, Thai, Arabic, Hebrew, Armenian and Devanagari) and East Asian fonts (Simplified and Traditional Chinese, Japanese and Korean). Our experience in being the first to support this broad range of languages and scripts has allowed us to gain insights into early adoption of non-Latin and Asian Web fonts by Web designers and developers.

The main benefits of Web fonts, no matter the language or geographic market for your audience, are:

  • Establish typographic consistency
  • Improve user experience
  • Eliminate the use of text as graphics, improve workflow
  • Enhance SEO, accessibility

technology adoption cycle with web fonts

When we surveyed the most visited websites across the globe, we found that 10 to 15 percent are already using Web fonts. But for East Asian languages and scripts, only a handful has started to deploy Web fonts. Why is that?

Consider the two primary challenges for developers of Asian websites:

  • Website design issues
  • Asian Web font file sizes

Most Asian websites are very text intensive, using large amounts of text at small sizes with very little use of white space like most “western” style websites. Web fonts can benefit headlines and replace images. For smaller amounts of text, system fonts have typically been used but now more typographic options are becoming available to designers.

Asian web sites

The second challenge for Asian website designers is how to overcome the huge file sizes. Chinese, Japanese and Korean fonts can range in size from 2MB to 10MB. Linking to multiple font files of this size is not an option for most developers due to latency concerns.

cjk web fonts dynamic subsetting

The best solution is dynamic subsetting – where a small Web font file is built and downloaded on the fly (using the characters only found on each page). Fonts.com Web fonts deploys dynamic subsetting on all its Asian Web fonts, so fonts get downloaded in milliseconds and not minutes. To learn more and see an interactive demo of Dynamic Subsetting, visit http://fontsubsetter.com/.

With all the positive attention that Web fonts are receiving globally, I believe that this is the year non-Latin and Asian Web fonts take off!

Tags: , , , , ,
Comments {1} | Posted in Type for Web

Agmena, a new book type from Jovica Veljovic
8 November 2012

by Allan Haley

Jovica Veljovic was living in the former Yugoslavia when Aaron Burns, the president of ITC, met him in the mid 1980s. Upon seeing the young calligrapher’s work, Burns immediately realized that he was in the presence of exceptional talent and encouraged Veljovic to take up typeface design. The ITC Veljovic typeface family was first of many he drew for ITC.

In his storied career, Veljovic has gone on to develop typefaces for Adobe and Linotype – as well as ITC. Although he spends much of his time today teaching typography and type design near his home in Hamburg, Veljovic has continued to draw new typeface designs. All started out as brush and pencil sketches.

None of Veljovic’s designs were first imagined as constructed outline drawings. It was only after the basic shapes and proportions were finalized in brush form, that Veljovic would construct letters as digital outlines.

Early Sketches for Agmena

“For me, it is important to begin a new typeface by drawing with a brush or pen,” says Veljovic. “This is especially true when I am making a new text typeface. The first text faces grew out of calligraphic writing and I think it is important to maintain this tradition.”

Agmena Swash Italic Sketches

The Agmena family, announced this week, is no exception. The first sketches for the design were roughed-out by Veljovic with a broad-edged brush. These became the basis for more refined drawings, which were then transferred to the computer for yet further development. The end result is a distinctive family of four weights – each with complementary italics – based on calligraphic, Renaissance “old style,” design traits and proportions.

Agmena

The complete Agmena family is available as desktop fonts from Fonts.com, as well for Web use through the Fonts.com Web Fonts Service.

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.


Tags: , , , , , , ,
Comments Off | Posted in Type for Print, Type for Web, Uncategorized

Fonts.com Hero Image Archive
6 November 2012

by Ryan Arruda

One of the goals we had when the new Fonts.com debuted in May was to make visiting the site a truly engaging visual experience. In addition to providing typical type specimens, we wanted to also incorporate expressive typography at the heart of the homepage.

As you’ve probably noticed, each month Fonts.com features four new images on its masthead, all showcasing a different typeface available on the site. These large main graphics – known as hero images – are meant to expressively present the character and nuance of not only our new releases, but best-selling and hidden gem type families.

In addition, another goal of the new site design is to celebrate the type and design community across the spectrum – each month we feature guest designers providing their interpretation of one specific type family. Whether established pros, or up-and-coming young guns, we wanted the opportunity to inspire our customers with typographic compositions from folks creating some of the most well-crafted design work today.

We’re happy to announce that we’ve created an archive of all 28 hero images which have debuted on Fonts.com so far this year. This will be a living collection, constantly updated with information on which typefaces are featured, links to purchase them, as well as links to the sites of the talented designers who we’ve had the pleasure to work with.

The image used as this post’s header was designed by Monotype Imaging’s Creative Director – Dennis Michael Dimos – and is the hero offering for Linotype’s handsome new Agmena family. On the Fonts.com homepage you’ll also find image designs from Nancy Harris Rouemy – who showcased the flowing, graceful flair of the Reina family – as well as John Passafiume, who crafted an amazing drawn version of the stately ITC Edwardian Script collection. Rounding out November’s designs, Alex Perez presents a dimensional treatment of the robust, slab serif Lexia family.

We hope you enjoy and are inspired by all of the hero images we post – keep an eye out for more as we debut four fresh designs each month!

Ryan Arruda
Ryan Arruda is the Web Content Strategist at Monotype Imaging. Ryan holds a bachelor’s degree in film studies from Clark University, and an MFA in graphic design from RISD.


Tags: , , , , , , ,
Comments Off | Posted in Type for Print, Type for Web, Uncategorized

Top 100 Web Fonts for October
1 November 2012

by Ryan Arruda

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for October 2012:

Neue Helvetica
Trade Gothic
Helvetica
Neue Frutiger
Univers
Gill Sans
Avenir Next
Futura
Avenir
Frutiger
DIN Next
ITC Avant Garde Gothic
Linotype Univers
Neo Sans
Trade Gothic Next
PMN Caecilia
Agilita
Arial
New Century Schoolbook
ITC Garamond
Linotype Didot
ITC Franklin Gothic
Monotype News Gothic
Frutiger Next
Century Gothic
Garamond 3
ITC Lubalin Graph
Rockwell
Twentieth Century
Abadi
VAG Rounded
Adelle
Optima
ITC Officina Sans
ITC Century
DIN 1451
News Gothic No.2
Trade Gothic Next Soft Rounded
Bauer Bodoni
Eurostile LT
Soho
ITC Conduit
Neue Helvetica Arabic
Laurentian
Sackers Gothic
Harmonia Sans
Frutiger Serif
Soho Gothic
Biome
Univers Next
Times
ITC Fenice
Museo Sans
Yakout
Neue Helvetica eText
Memo
Eurostile Next
Neue Haas Grotesk
Glypha
Georgia Pro
Calibri
MSung
Futura T
Sassoon Sans
Slate
ITC American Typewriter
Candara
Helvetica World
Clarendon
Albany
Rotis II Sans
Heisei Kaku Gothic
Novecento
Akko
Cachet
ITC Officina Serif
Sabon
Iridium
Monotype Grotesque
Neuzeit Office
News Gothic
Bembo
Monotype Garamond
Plantin
Amasis
ITC Blair
Compacta
ITC Legacy Serif
Aeris
Museo Slab
Basic Commercial
Franklin Gothic
Aachen
Egyptian Slate
Serifa
MHei
Camphor
Bodoni LT
Georgia
Baskerville

Ryan Arruda
Ryan Arruda is the Web Content Strategist at Monotype Imaging. Ryan holds a bachelor’s degree in film studies from Clark University, and an MFA in graphic design from RISD.


Tags: , , , , ,
Comments Off | Posted in Type for Web, Uncategorized

A Warm Welcome to Typecast
30 October 2012

by Johnathan Zsittnik

Today Monotype announced the acquisition of Design By Front, makers of Typecast – a browser-based tool for designing Web pages with Web fonts. Design By Front has been a valued partner of the Fonts.com team and we couldn’t be happier to have them as part of the family.

We welcome a talented group of individuals with intimate knowledge of creative markets and the challenges Web designers face. Over the past year, we’ve worked closely together. We’ve helped integrate our Fonts.com Web Fonts service into Typecast and participated in its private beta. We’ve also collaborated on speaking sessions and interviews about Web typography. This move ensures that these collaborations will continue, and we think you’ll like the outcome.

Typecast TeamTypecast was born out of the desire to make Web fonts easier to use. We’ve shared that aspiration at Fonts.com, yet our focus in achieving this goal has been limited to the usability of our own Web font service. With Typecast in the fold, we can ensure Web fonts are easy and fun to use throughout the entire design process – from ideation to implementation.

Typecast allows designers to work more efficiently with Web fonts. So it only makes sense that we make this powerful tool readily available to Fonts.com Web Fonts subscribers. While we won’t disrupt Typecast’s compatibility with other services, we also intend to make it easier for Typecast users to select our own Web fonts.  We believe this relationship will benefit users of Typecast and Fonts.com Web Fonts. We also hope it will help inspire more designers to choose Web fonts for their next project, resulting in a more beautiful and readable Web.

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.


Tags: , , , , , , ,
Comments Off | Posted in Type for Web

Typecast Enters Public Beta
26 October 2012

by Johnathan Zsittnik

This week we were pleased to see that our friends at Design by Front ushered Typecast, a browser-based tool for designing Web pages with Web fonts, into public beta. We’ve been big fans of Typecast since its introduction into private beta one year ago. With a beautifully and thoughtfully constructed UI, Typecast is a joy to use. More importantly, the application succeeds in its mission of making Web fonts easier to use.

TypecastTypecast allows users to position and manipulate live text directly within the browser. This provides a more accurate preview of how text will appear when part of a website. It also simplifies the design workflow by reducing dependencies on static images when creating website mockups. Users can select Web fonts from several services including Fonts.com Web Fonts for use in their designs.

One of our favorite aspects is the ability to incorporate some of the typographic finer points that have typically been reserved for print design. Web designers can make adjustments to kerning, line spacing, coloring and shadowing or insert OpenType features such as ligatures and small caps with ease.

Typecast is free to use while in beta. We encourage you to give it a shot. The Typecast team is looking for feedback, so be sure to let them 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.


Tags: , , , , ,
Comments Off | Posted in Type for Web

Adobe Fonts Now Available on Fonts.com Web Fonts
25 October 2012

by Johnathan Zsittnik

At Fonts.com, we’ve always prided ourselves on the vast selection of fonts we offer. Today that selection improves with the fonts of one of our closest and longest standing partners. We’re very pleased to announce the release of Adobe fonts to our Fonts.com Web Fonts service.

Adobe Web FontsThis initial batch includes the most recognizable designs from the Adobe Originals collection including the Chaparral, Minion, Myriad and Adobe Caslon families among others. Over the years, these families have served as the typographic foundation for countless brand identities and design projects. Now our customers can easily extend these brands and projects to the Web.

Adobe Garamond Web FontEach of these fonts has been hand-tuned for optimal screen quality by Adobe’s team of type experts, ensuring they’ll look every bit as good on screen as they do in print. More Adobe fonts are on their way. If you’d like to see the release of a particular family prioritized, let us know in the comments section.

Adobe Caslon Web FontYou can browse the selection of Web fonts from the Adobe foundry page by clicking the ‘WEB FONTS’ tab. They are also available in our inventory of hand-tuned fonts adding to a selection of more than a thousand of our highest quality designs. These typefaces are available immediately to all our Standard and Professional plan subscribers. So what are you waiting for? Go ahead and add one to your project.

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.


Tags: , , , , ,
Comments Off | Posted in Type for Print, Type for Web

Customer Spotlight: IHOP
24 October 2012

by Ryan Arruda

First established in 1958 as International House of Pancakes, IHOP is a national restaurant chain known for their food, friendly atmosphere, and iconic blue A-frame buildings. While their namesake pancake dishes and breakfast specialties are perhaps most well-known, IHOP serves all manner of fare in over 1,500 restaurants — with locations in all 50 states.

The IHOP website extensively features the Helvetica Rounded Bold designs. While the Helvetica family consists of typefaces normally heralded as being beautifully neutral, the rounded strokes of its compatriot transform the otherwise unemotional design into one bursting with jovial liveliness. Headlines and subheads are set in the regular width of the typeface, while the site’s top navigation employs the condensed version. The use of white Helvetica Rounded Bold type upon a bright blue background provides the site additional levity – echoing the family friendly atmosphere of its locations, both type and image render the IHOP website warm and inviting.

Fonts.com features six rounded styles of Helvetica — bold, black, and bold condensed, each with a matching oblique. The entire breadth of the Helvetica family is available in 34 styles for Web use through the Fonts.com Web Fonts Service, and for desktop licensing as well.

Ryan Arruda
Ryan Arruda is the Web Content Strategist at Monotype Imaging. Ryan holds a bachelor’s degree in film studies from Clark University, and an MFA in graphic design from RISD.


Tags: , , , , , , ,
Comments {2} | Posted in Type for Print, Type for Web, Uncategorized

Fonts.com Web Fonts and FOUT Control
19 October 2012

by Domenic Barbuzzi


A Brief History

With the start of the Fonts.com Web Fonts service, the FOUT (flash of unstyled text) phenomenon was a wide-spread problem. To remedy this issue we added code to our JavaScript implementation.

Our first method included hiding the visibility of elements on pages that used Web fonts. We then crafted a more efficient and cleaner method of preventing FOUT – we use a single class to hide only the text for elements using Web fonts. We then strip that class’s properties when the Web fonts are ready to display. One thing to note is that the class is left on these elements in the DOM; however, without properties, the class has no meaning and is invisible to visitors, save for those using some manner of developer tools.

Back to the Present

Since the introduction of Web fonts, broadband connections have grown more common, and browsers have matured in handling embedded fonts. So has the Fonts.com Web Fonts service. We have adjusted our JavaScript in two key ways:

  1. FOUT-prevention is disabled by default
  2. Now there are configuration options that can be set before loading our JavaScript in order to turn FOUT-prevention back on and traverse through the DOM to remove the mti_font_element class

The goodies

Below is a sample usage of the FOUT configuration options. To utilize them, simply define the options before including the SCRIPT tag for your Web fonts project. If any of the options are omitted, their default values will be used instead.

<script type="text/javascript">

// create the configuration object
var MTIConfig = {};

// assign the variable to enable FOUT prevention
// default value -> false (prevention disabled)
// true -> enable FOUT prevention
MTIConfig.EnableCustomFOUTHandler = true;

// assign the variable to remove ‘mti_font_element‘
// this is only valid if FOUT prevention is enabled
// default value -> false (class is left on elements)
// true -> remove class when FOUT prevention finishes
MTIConfig.RemoveMTIClass = true;

</script>

 

Tags: , , , , ,
Comments {1} | Posted in Type for Web, Uncategorized

« Older Entries
Newer Entries »