fonts.com blog
Posts Tagged ‘@font-face’

by Johnathan Zsittnik

Our Fonts.com Web Fonts service has always provided great typefaces. Now it’s even easier to create great typography – thanks to the addition of the Typecast  design tool.

Subscribe or upgrade to a Professional subscription now.

Subscribe-Now


New Professional subscriptions from $40/month

Fonts.com Web Fonts Professional PlanExcellent news: We’ve redefined our Professional subscriptions to make them more affordable, plus we’re including a free Typecast subscription (worth $29 per month) with every Professional plan. From new fonts and our most popular fonts hand-tuned for the Web, to new technology such as OpenType feature support and new services like Typecast, we’re always adding more to our Fonts.com Web Fonts subscriptions and will continue this trend going forward.

Our new Professional plans start at just $40 per month and include 1M pageviews per month, but you can add additional pageviews as needed. Like before, Professional plans also include the self-hosting option and desktop fonts for creating website mockups. If you’re currently subscribed to a Professional plan or a 1M, 1.5M or 2M pageview Standard plan, we’ll upgrade your account automatically to make life easy.

Create better Web typography with less hassle

Just as exciting is the free Typecast subscription you’ll get with your Pro plan. This tool could completely reshape the way you build websites.

3_color palette

Typecast is a powerful, browser-based design app that takes the pain out of designing with Web fonts. It lets you view, pair and compare Web fonts in the browser on full-length text without having to create screenshots, assemble comps or hand-code your CSS. Sliders, drop menus and simple inputs make it easy to set text in precise detail, and because you’re designing in the browser, you’re able see changes in real time and make better, faster decisions about quality, style and rendering.

As you design, standards-compliant HTML and CSS is produced behind the scenes, allowing you to quickly share Web-ready designs with developer colleagues and get more accurate prototypes in return. In the video below, Typecast’s Creative Director Jamie Neely offers you a look at the app in action:

Typecast — Experiment with Type from Typecast on Vimeo.

Typecast + Fonts.com Web Fonts: the perfect type pairing

Best of all, Fonts.com and Typecast work great together. You can design with every one of our 20,000 Web fonts in Typecast. Your Fonts.com account is linked to Typecast, so getting your design’s Web fonts onto your website is simple. When you’re ready to export your designs and start prototyping, Typecast will determine which fonts to serve up and provide an embed code that includes them. Going forward, you can continue to use Typecast to manage the font selections in your projects.

We want to play a part in reshaping typography on the Web, and feel this combination will help you make sound typographic decisions and refinements with the Fonts.com typefaces you know and love. To our new and current subscribers, we hope you enjoy Typecast. We sincerely believe it will help you create far better designs. We also believe it makes Fonts.com Web Fonts a far better offering and remain committed to growing these plans  with additional great services like Typecast as your needs evolve.

Subscribe-Now


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

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!


by Johnathan Zsittnik

Adobe LogoThe best selection of Web fonts is about to get even better. We’ve teamed up with Adobe to offer hundreds of their typefaces, including the most popular designs from the Adobe Originals catalog, through Fonts.com Web Fonts. Adobe fonts are well known for their quality and artistry and have become resources for design professionals. With many of their families being staples at the top of our list of best selling desktop fonts, we’re proud to offer these designs as Web fonts.

The collection includes hundreds of Web fonts including such design mainstays such as the Chaparral, Minion and Myriad families.  Many of these designs have been optimized for on-screen display.

In the coming weeks, the first batch of these designs will appear directly in our selection of Web fonts with additional releases to follow shortly thereafter. These fonts will be available for use by everyone subscribed to a Fonts.com Web Fonts Standard or Professional plan. Stay tuned. As always, more releases from world-class designers and foundries are headed your way.

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

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

Neue Helvetica
Futura
Trade Gothic
Neue Frutiger
Avenir Next
Frutiger
Helvetica
Avenir
Gill Sans
DIN Next
Univers
ITC Avant Garde Gothic
PMN Caecilia
New Century Schoolbook
Neo Sans
Trade Gothic Next
Linotype Univers
Memo
Times
Frutiger Next
Harmonia Sans
Arial
Neue Helvetica Arabic
Garamond 3
DIN 1451
Linotype Didot
ITC Officina Sans
VAG Rounded
Twentieth Century
Slate
Monotype News Gothic
Yakout
Frutiger Serif
Century Gothic
Soho
Bauer Bodoni
Rockwell
Sackers Gothic
ITC Lubalin Graph
Glypha
Calibri
Soho Gothic
Eurostile LT
ITC Garamond
Aachen
Laurentian
MHei
Egyptian Slate
Agilita
Plate Gothic MT
Optima
ITC Franklin Gothic
Heisei Kaku Gothic
Cachet
Plantin
Clearface Gothic MT
Clarendon
Monotype Garamond
Futura T
Akko
ITC American Typewriter
M Hei Simplified Chinese
ITC Conduit
Serifa
ITC Officina Serif
Klint
Abadi
Monotype Grotesque
ITC Stone Informal
ITC Legacy Serif
M Hei Traditional Chinese
News Gothic
Stymie
Neue Helvetica eText
TB Kaku Gothic
FB Cham Blue
Neuzeit Office
Neue Haas Grotesk
Ocean Sans
Amasis
Monotype Modern
Eurostile Next
Camphor
Bell
Adelle
MSung
Baskerville
ITC Franklin
Georgia
Bembo
Gazette
Consolas
Andale Mono
Droid Sans Mono
Museo
Calvert
P22 Underground
Wiesbaden Swing
Rotis Sans Serif
Mitra


by Chris Roberts

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

Neue Helvetica
Trade Gothic
Futura
Frutiger
Gill Sans
Avenir
Helvetica
DIN Next
Univers
ITC Avant Garde Gothic
Neue Frutiger
Avenir Next
New Century Schoolbook
PMN Caecilia
Trade Gothic Next
Linotype Univers
Neo Sans
Times
Neue Helvetica Arabic
DIN 1451
Linotype Didot
Arial
Frutiger Next
Harmonia Sans
Slate
VAG Rounded
Garamond 3
Memo
Yakout
Monotype News Gothic
Soho
Bauer Bodoni
Frutiger Serif
Sackers Gothic
Laurentian
ITC Officina Sans
Rockwell
Gothic
Futura T
Heisei Kaku Gothic
Cachet
Eurostile LT
Glypha
Soho Gothic
ITC Franklin Gothic
Akko
Century Gothic
Egyptian Slate
ITC Lubalin Graph
Plate Gothic MT
Monotype Grotesque
ITC Legacy Serif
Monotype Garamond
Calibri
Optima
Museo
Plantin
Neue Helvetica eText
Adelle
Neue Haas Grotesk
ITC Officina Serif
Clarendon
Aachen
Ocean Sans
News Gothic
ITC Stone Informal
Amasis
ITC Garamond
Consolas
Andale Mono
Droid Sans Mono
Bell
Monotype Modern
Klint
Azbuka
ITC Conduit
ITC American Typewriter
ITC Franklin
Wiesbaden Swing
MYuppy
Baskerville
Impact
Eurostile Next
Georgia
Linotype Feltpen
Camphor
Mitra
Gazette
P22 Underground
ITC Caslon No. 224
Calvert
Bembo
Rotis Sans Serif
Neuzeit Office
Memphis
Serifa
Agilita
Abadi
Janson Text
Loft


by Chris Roberts

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

Neue Helvetica
Trade Gothic
Futura
DIN Next
Frutiger
Gill Sans
Avenir
Helvetica
Univers
ITC Avant Garde Gothic
Neue Frutiger
Futura T
Slate
Trade Gothic Next
New Century Schoolbook
PMN Caecilia
Avenir Next
Neo Sans
DIN 1451
Linotype Didot
ITC Lubalin Graph
Linotype Univers
Frutiger Next
Arial
Garamond 3
VAG Rounded
Neue Helvetica Arabic
Harmonia Sans
Times
Monotype News Gothic
Yakout
Bauer Bodoni
Soho
Heisei Kaku Gothic
Laurentian
Soho Gothic
Gothic
Rockwell
Eurostile LT
Egyptian Slate
Cachet
Glypha
ITC Franklin Gothic
Memo
Century Gothic
Monotype Grotesque
Plantin
Akko
Camphor
Neue Helvetica eText
Sackers Gothic
Plate Gothic MT
News Gothic
ITC Officina Sans
Clarendon
ITC Stone Informal
Monotype Modern
Aachen
Ocean Sans
Amasis
FB Han Gothic
Bell
ITC American Typewriter
Azbuka
Consolas
Andale Mono
MYuppy
Droid Sans Mono
Frutiger Serif
Eurostile Next
Linotype Feltpen
Walbaum
Optima
ITC Garamond
Mitra
Wiesbaden Swing
Baskerville
Neue Haas Grotesk
Adelle
ITC Conduit
Bembo
Monotype Garamond
Impact
ITC Kabel
ITC Franklin
Neuzeit Office
Calibri
Rotis Sans Serif
Gazette
ITC Legacy Serif
Klint
ITC Officina Serif
Abadi
ITC Caslon No. 224
Loft
Museo
Neo Tech
Calvert
P22 Underground
Bodoni LT


by Ryan Arruda

Employing over 168,000 people across the globe, Sony is a worldwide electronics manufacturer, specializing in computer, video, and audio products for both consumer and professional audiences.

The Sony homepage employs the ITC Avant Garde Gothic typeface family, using book and medium weights for its headlines and subheads. This classic geometric sans is quite appropriate for an electronics purveyor, as its inherent structure projects a demeanor of modernity. However, with its large x-height, ITC Avant Garde Gothic remains grounded and relatable, conferring warmth where other geometric faces might offer colder personalities.

Customer Spotlight: Sony

 


by Chris Roberts

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

Neue Helvetica
Trade Gothic
DIN Next
Futura
Frutiger
Avenir
Helvetica
ITC Avant Garde Gothic
Trade Gothic Next
Neue Frutiger
Gill Sans
Univers
New Century Schoolbook
DIN 1451
PMN Caecilia
ITC Lubalin Graph
Neo Sans
Avenir Next
Linotype Didot
Frutiger Next
Monotype News Gothic
Slate
Futura T
VAG Rounded
Linotype Univers
Harmonia Sans
Garamond 3
Camphor
Gothic
Heisei Kaku Gothic
Bauer Bodoni
Soho
Rockwell
Laurentian
Soho Gothic
Eurostile LT
Glypha
News Gothic
Plantin
ITC Franklin Gothic
Sackers Gothic
Egyptian Slate
Clarendon
Century Gothic
Cachet
FB Han Gothic
Ocean Sans
Plate Gothic MT
ITC Officina Sans
Monotype Grotesque
MYuppy
Gill Sans Infant
Charlotte Sans
Neue Helvetica eText
Bell
ITC American Typewriter
Arial
ITC Blair
ITC Franklin
Bembo
Optima
Monotype Modern
Calvert
Eurostile Next
Wiesbaden Swing
Aachen
ITC Garamond
Neuzeit Office
Mitra
Baskerville
Amasis
Abadi
Adelle
Neo Tech
ITC Kabel
Serifa
ITC Conduit
Monotype Garamond
Walbaum
Klint
ITC Officina Serif
Impact
ITC Bailey Sans
URW Franklin Gothic
Bell Centennial
Akko
ITC Stone Sans
ITC Caslon No. 224
Tahoma
Basic Commercial
Museo
Linotype Feltpen
Rotis Sans Serif
Siseriff
Figural
Droid Sans
Mundo Sans
TB Kaku Gothic
Times
Bodoni LT


by Ryan Arruda

With over 11 million daily patrons, Burger King is one of the largest fast food establishments worldwide. The Burger King website features the Trade Gothic typeface family for both display and body text, utilizing Trade Gothic Bold, Trade Gothic Bold Condensed #20, and Trade Gothic Light.

One of the most successful implementations of Trade Gothic on the site are the homepage headlines. Set in Trade Gothic Bold Condensed #20, the use of white typography slightly tempers the inherent assertiveness of the font’s letterforms, lending a confident – yet upbeat – air to the matter-of-fact text. The title case subheads set in Trade Gothic Bold provide contrast with the typographic color of the Trade Gothic Light body text, a nice showcase of this family’s versatility (and deliciousness).

Fonts.com Customer Spotlight: Burger King


by Johnathan Zsittnik

Today we unveil a brand new Fonts.com. If you’re a regular reader of the Fonts.com blog, you’ve probably already noticed a new aesthetic right here. The actual site offers plenty more to take in: In addition to a revamped design, you’ll discover additional ways to browse and search for fonts, fresh approaches to UI, and loads more typographic imagery. Despite all that’s new, the story of this site actually dates back quite a while.

In mid-2010, we took stock of the existing Fonts.com and drew up a lengthy list of areas to improve. Our wishlist included changes to the overall aesthetic, the organization of articles and other content, the way our products were presented and the tools we provide for discovering and trying fonts. In short: it was time to redesign.

We approached Happy Cog to help at the end of 2010. We’re big fans of executive creative director and renowned standards proponent Jeffrey Zeldman. So, the decision to work with his agency was an easy one. Jeffrey, Creative Director Chris Cashdollar and others from the Happy Cog team came out for a kickoff meeting in January of 2011. The Happy Cog team posed challenging questions regarding our vision for the new Fonts.com. ‘Should content focus more on searching or exploration and inspiration.’ While there were no easy answers, the ensuing conversation shaped the direction of the redesign and let us know it was a good fit between agency and client.

We came out of that initial kickoff meeting inspired and charged up with the following objectives and vision for Fonts.com:

  • Create a new Fonts.com home page featuring inspiring executions of fonts, an increased focus on search, and thoughtfully chosen interfaces that balance the most popular purchases, new and promoted products, and original content that is compelling and educational.
  • Integrate the Web font service into the Fonts.com experience.
  • Offer an improved search experience that makes smart choices about what to present and when, using the latest techniques for increasing engagement and conversion including things such as suggestive search and faceted results.
  • Release a re-envisioned font browsing experience, that focuses on font presentation, decreases steps to experimenting and purchasing type.
  • Refine the structure of content types to make it more accessible without getting in the way of getting to font products.
  • Tightly integrate social features.

An intense collaboration ensued, taking us from the objectives stated above, to sitemap, to wireframes, to the creation of the primary visual design elements to page design and eventually to the site we premier today.

With that, let’s take a tour of the new Fonts.com.

Home: Modernized aesthetics; loads of real estate for type

Fonts.com Inspiration

We think you’ll agree – the new Fonts.com homepage makes an impression. Big, bold type showings demonstrate type in use and provide in-depth looks of families. The stage premiers with showcases of Massif – a new design by our own Steve Matteson in addition to showings of the Akko, Gibson and Salvo Sans families. Hero images were designed by Monotype Imaging creative director Dennis Michael Dimos (Massif) as well as external designers Bethany Heck (Akko), Mark Weaver (Gibson) and Naz Hamid (Salvo Sans). Keep an eye on this area as we’ll rotate in fresh new showings from graphic designers and type designers on a regular basis. Beyond the hero images lies a variety of type showcases and discovery tools. Explore rich previews of hot new releases and established designs through the best selling new fonts and featured font sections. The “Find Your Type controls” allow you to search, browse, or identify fonts without ever leaving home. You’ll also find a selection of the latest articles on Fonts.com. We’ve always put out great, informative and educational content, but now the best content is far easier to find.

The decision to incorporate Web fonts for all of the type was an easy one. Picking the typefaces families and optimizing the fonts for the Web took a little more time.

“We really enjoyed working with the type and implementing it through the Fonts.com Web Font service,” said Christopher Cashdollar, creative director at Happy Cog. “We were able to implement a smart, legible and well-structured type system using the Neue Frutiger and Frutiger Serif families. We knew we could trust the integrity of the type because of the level of scrutiny that Monotype Imaging puts into the screen optimization of its fonts.”

Search: Sort, Filter and Discover; Desktop fonts and Web fonts Side by Side
Our new search results pages introduces sorting and filtering options that will help you navigate through our vast inventory and zero in on the design of your choice. Oh yeah, typefaces results are (finally) grouped by family.

As I mentioned, integrating our Web font service into Fonts.com was a primary goal of the redesign. The new search results page is just one place where you can find desktop fonts alongside side of Web fonts. Our search tools will return results for desktop fonts, Web fonts and articles. When you rollover a family that’s available as a Web font, a control will display that will allow you to add it to a project right from the search results page.

Family pages: Try, learn and share

Our new family pages feature a prominent showing. We’ve hand designed showings for many top families and will continue to expand this inventory over time. But we’re also counting on you. Showcase your design skills by designing and submitting images for your favorite typefaces.  Just click the ‘+’ to add your work to our gallery.

These robust new family pages gather all of the family members in one place. Type historians will appreciate the detailed descriptions – available for many of our most popular and newest families. And font enthusiasts of all kinds will enjoy rating and sharing their opinions with the Fonts.com community and through social avenues.

Cart: Quick, convenient shopping

The new Fonts.com features a mini shopping cart that is accessible from the header nav of every page. Click the shopping cart to view or delete products in your cart, without leaving the current page. This is convenient for those working their way through a lengthy shopping list and those with items remaining in their cart from a previous visit to Fonts.com.

Manage Web Fonts: Your new Web font command center

Fonts.com Web Fonts subscribers will notice a dramatically different set of controls for managing their Web fonts projects. Our new Manage Web Fonts page acts as a dashboard, providing virtually everything you need to build, edit, deploy and share Fonts.com Web Fonts projects.

Learn About Fonts & Typography: Even more great, educational content

Fonts.com FontologyLearn About Fonts & Typography is home to the original content we produce. Here you’ll find a new series called Fontology – an ever-expanding academic resource for educational institutions, design students and those with an interest in the typographic arts. This section is also home to the Fonts.com blog which features topical content that will keep you up to speed with the latest from Fonts.com and the type design community. Lastly, our popular series, For Your Typographic Information, lives on within Learn About Fonts & Typography. This longstanding series remain an excellent source for those in search of typographic tips and tricks.

Best Sellers: Insight into typographic trends

If you’re curious to know what’s hot, look no further than our best sellers pages. View the New Best Sellers page for a look at the top new releases or the All Best Sellers page to see the typefaces whose popularity has stood the test of time. For further looks into what’s trending, note that you can sort search results by popularity. You can also access the highest rated typefaces (as determined by your ratings submitted on family pages) through the “Find Your Type controls” on the home page.

Fonts.com Best Selling Fonts

FontGazer: Try thousands of fonts directly in Adobe InDesign
The new Fonts.com isn’t the only thing in beta.  As you may have seen, we recently announced FontGazer – a free InDesign plug-in that allows you to browse, try, and buy fonts from Fonts.com directly from Adobe® InDesign®. Download FontGazer and be sure to let us know what you think by sharing your raves, gripes and feature requests in the FontGazer Feedback Forum.

Fonts.com FontGazer

If you’d like a more interactive tour, you can check out this video. It will give you a more detailed look at many of the features described above, plus many more — including an overview of how to manage your Fonts.com Web Fonts projects on the new site.

The new Fonts.com is out. But that doesn’t mean we’re done. We’re hard at work on additional enhancements that will arrive during and after beta. In the meantime, we want to know what else you’d like to see. We’re not there yet, but you can help us make Fonts.com everything you want it to be. If you notice something that’s missing or that can be improved upon – let us know. See something you like? We want to know. Click the red feedback bar on the side of the site to share your thoughts.

Now get out there on the new Fonts.com, and find your type.

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.