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

by Chris Roberts

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

Futura® Bold
Neue Helvetica® 55 Roman
Neue Helvetica® 35 Thin
Neue Helvetica® 75 Bold
Neue Helvetica® 45 Light
Univers® 57 Condensed
Avenir® 85 Heavy
Futura® Bold Condensed Oblique
Garamond 3 Regular
Garamond 3 Italic
Bauer Bodoni® Black Italic
Avenir® 35 Light
DIN 1451 Engschrift
Sackers™ Gothic Heavy
Sackers™ Gothic Medium
Trade Gothic® Bold
Avenir® 65 Medium
Helvetica® Condensed Bold
Linotype Univers® 620 Condensed Bold
Neue Helvetica® 25 Ultra Light
Futura® Medium
Trade Gothic® Condensed Bold 20
Avenir® 95 Black
Linotype Univers® 420 Condensed
Linotype Didot® Roman
Linotype Didot® Bold
Avenir® 55 Roman
Neue Helvetica® 65 Medium
Univers® 47 Condensed Light Oblique, Extended
DIN Next™ Condensed Bold
Linotype Univers® 320 Condensed Light, Extended
Futura® Book
Linotype Didot® Italic
Neue Helvetica® 67 Condensed Medium
Neue Helvetica® 77 Condensed Bold
Trade Gothic® Roman
Laurentian™ Semi Bold Italic
Neue Helvetica® 63 Extended Medium
DIN Next™ Bold
Trade Gothic® Bold 2
Futura® Bold Condensed
Avenir® 45 Book
Futura® Medium Condensed
Neue Helvetica® 53 Extended, Extended
Neue Helvetica® 73 Extended Bold, Extended
Trade Gothic® Condensed 18
Futura® Heavy
PMN Caecilia® 85 Heavy
PMN Caecilia® 75 Bold
ITC Avant Garde Gothic® Book
Neue Helvetica® 57 Condensed
Trade Gothic® Condensed Bold #20, Extended
Neue Frutiger® Book
Neue Frutiger® Bold
PMN Caecilia® 76 Bold Italic
Neue Helvetica® 47 Condensed Light
DIN Next™ Regular
Neue Helvetica® 45 Light, Extended
Neue Frutiger® Light
VAG Rounded™ Bold
Monotype Grotesque® Condensed
Helvetica® Bold
DIN Next™ Condensed Regular, Extended
Neue Helvetica® 55 Roman, Extended
Trade Gothic® Bold, Extended
Neue Helvetica® 37 Condensed Thin
Trade Gothic® Next Regular
Futura® Book, Extended
Univers® 67 Condensed Bold Oblique
Helvetica® Bold, Extended
Avenir® 55 Roman, Extended
Rockwell® Bold
ITC Avant Garde Gothic® Medium
Trade Gothic® Extended Bold
VAG Rounded™ Light
Futura® Bold, Extended
Trade Gothic® Condensed #18, Extended
Neue Helvetica® 65 Medium, Extended
Felbridge™ Regular
Neue Helvetica® 46 Light Italic
Figural™ Book
Frutiger® 65 Bold
Neue Frutiger® Regular
Univers® 55 Roman
Baskerville Regular, Extended
Helvetica® Bold Italic
VAG Rounded™ Black
ITC Avant Garde Gothic® Bold
Gill Sans® Book
Neue Frutiger® Bold Italic
Frutiger® 45 Light
Univers® 45 Light
Frutiger® 45 Light, Extended
Avenir® Next Demi
Eurostile® LT Bold
Frutiger® 65 Bold, Extended
Neuzeit® Office Bold
Eurostile® LT Roman
Neuzeit® Office Regular, Extended
Trade Gothic® Bold #2, Extended


by Bill Davis

This week our Web font development team achieved another impressive milestone. We now have over 20,000 fonts available through Fonts.com Web Fonts!

20,000 Web fonts from Fonts.comAll our Web font releases go through an exhaustive process to ensure that all Web fonts render properly in all browsers on different platforms. We manually review every font, and use a series of proprietary hinting tools to make sure the on-screen rendering meets our quality standards.

This newest release features a wide range of type styles from over 20 different foundries:

This newest release provides Fonts.com Web fonts customers with a broad array of display, script and ornamental fonts, in addition to symbol and picture fonts. You can view all our new Web fonts at http://webfonts.fonts.com.


by Johnathan Zsittnik

The notion of browser-based Web designs has gained considerable momentum over the past year. I sat down with Chris Armstrong to discuss the many benefits of starting in the browser that have many Web designers rethinking their workflow.

Chris Armstrong of TypecastJZ: What are the problems you see with the traditional Web design workflow?

CA: The traditional Web design workflow tends to give too much priority to flat comps like those done in Photoshop. It assumes that a flat comp can communicate the right design effectively but it doesn’t show you the whole picture. Applications like Photoshop and Fireworks are great for ideation and exploration, but we really need to test those ideas and work within the realistic constraints of the browser. You can get something that looks good but it’s only when you prototype that those awkward questions like, “What happens when that H1 goes onto two lines?” are asked.

JZ: What projects have you worked on where these problems were particularly apparent?

CA: I recall one project where we delivered pixel perfect comps, but when the client saw the prototype, he wasn’t happy that they weren’t as tight as the comp. Our developer was doing a great job, but he had 101 things to think about and the subtle typographic details that really hold the design together got lost in translation. It was a
lot of work to go back and add that finesse afterward. That project led us to determine we needed to get the typographic foundation right at the beginning and build from there so that we always have a basic level of quality. –And the designer needs to be the person who does this.

JZ: How does designing in the browser address these issues?

CA: Designing in the browser makes it easier to test your design decisions against different types of content, and see how a site is going to adapt to different device sizes. Because it’s composed of HTML and CSS – the raw materials of the Web – you know that if you can get it to work well here, it’s likely to work in the wild. Designing in the browser also forces you to consider the edge cases, and cater for them to avoid nasty surprises – things like the font not rendering well in a Windows environment.

JZ: How has this approach impacted the way you work with your clients?

CA: It allows us to work more closely with our clients to evolve their content. Showing them how a design renders in the browser helps us have the right conversations early in the process. It helps the client understand the constraints of the medium and give more informed feedback.

JZ: Do you still see a role for Photoshop and other drawing applications in the design workflow?

Absolutely. Applications like Photoshop and Fireworks are great for sketching and ideation. Designers are so comfortable with them; they’re like using pen and paper. But we need to spend less time ideating and more time testing and iterating those ideas against real content, within the realistic constraints of the browser environment.

JZ: What led to you developing your own application (Typecast) for designing in the browser?

CA: We got tired of waiting for someone else to do it.

JZ: You’re just about ready to debut Typecast to a broader audience. What’s next for the application?

CA: At the moment we’re focusing on getting the basics right – setting hierarchy, color, contrast. But, in the future we want to do all we can to make it easy to create a complete set of elements, to create good vertical rhythm and help with things like swapping between pixels and ems, and introduce effects. The goal is to provide the tools you need to provide a complete design system for your site.

JZ: Do you have a favorite typeface or one in particular that you’ve been using frequently as of late?

CA: I’m loving Avenir. I just love the elegance of it.

Typecast is a tool for designing in the browser with Web fonts and real content. It includes many of the most popular typeface families from our Fonts.com Web Fonts service and is currently in private beta. Apply for an early look at Typecast on Typecastapp.com.

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 October 2011

Futura® Bold
Neue Helvetica® 35 Thin
Neue Helvetica® 55 Roman
Avenir® 55 Roman
Avenir® 85 Heavy
Univers® 57 Condensed
Neue Helvetica® 75 Bold
Garamond 3 Regular
Garamond 3 Italic
Avenir® 35 Light
Neue Helvetica® 45 Light
Bauer Bodoni® Black Italic
Helvetica® Condensed Bold
Sackers™ Gothic Heavy
Avenir® 65 Medium
Sackers™ Gothic Medium
Avenir® 95 Black, Extended
DIN 1451 Engschrift
Neue Helvetica® 25 Ultra Light
Futura® Medium
Trade Gothic® Condensed Bold 20
Avenir® 95 Black
Linotype Univers® 620 Condensed Bold
Trade Gothic® Bold
Neue Helvetica® 77 Condensed Bold
Linotype Univers® 420 Condensed
Futura® Book
Linotype Didot® Bold
Linotype Didot® Roman
Linotype Didot® Italic
Linotype Univers® 320 Condensed Light, Extended
DIN Next™ Condensed Bold
Univers® 47 Condensed Light Oblique, Extended
Neue Helvetica® 67 Condensed Medium
Trade Gothic® Roman
Futura® Bold Condensed Oblique
Neue Helvetica® 65 Medium
Avenir® 45 Book
Futura® Bold Condensed
Trade Gothic® Condensed 18
Futura® Medium Condensed
DIN Next™ Bold
Futura® Heavy
Trade Gothic® Bold 2
PMN Caecilia® 75 Bold
PMN Caecilia® 85 Heavy
Laurentian™ Semi Bold Italic
Neue Helvetica® 45 Light, Extended
Monotype Grotesque® Condensed
ITC Avant Garde Gothic® Book
PMN Caecilia® 76 Bold Italic
Trade Gothic® Bold, Extended
Neue Helvetica® 47 Condensed Light
Trade Gothic® Condensed Bold #20, Extended
Trade Gothic® Extended Bold
Neue Frutiger® Book
VAG Rounded™ Bold
Neue Frutiger® Bold
Neue Frutiger® Light
Neue Helvetica® 55 Roman, Extended
Neue Helvetica® 57 Condensed
Helvetica® Bold
DIN Next™ Regular
Administer BookItalic
Neue Helvetica® 87 Condensed Heavy
Neue Helvetica® 37 Condensed Thin
Helvetica® Bold, Extended
Rockwell® Bold
Avenir® 55 Roman
Univers® 67 Condensed Bold Oblique
DIN Next™ Condensed, Extended
Trade Gothic® Next Regular
ITC Avant Garde Gothic® Medium
Neue Helvetica® 63 Extended Medium
Neue Helvetica® 53 Extended, Extended
Felbridge™ Regular
Neue Helvetica® 73 Extended Bold, Extended
VAG Rounded™ Light
Gill Sans® Book
Trade Gothic® Next Condensed Bold
Trade Gothic® Bold #2, Extended
Neuzeit® Office Bold
Neuzeit® Office Regular, Extended
Frutiger® 65 Bold
ITC Avant Garde Gothic® Bold
Futura® Book, Extended
VAG Rounded™ Black
Helvetica® Bold Italic
Frutiger® 55 Roman
Rockwell® Regular
Neue Frutiger® Regular
ITC Lubalin Graph® Book
Avenir® Next Demi
Trade Gothic® Condensed #18, Extended
Neue Helvetica® 65 Medium, Extended
Cochin® Roman
Neo® Sans Regular, Extended
Eurostile® Next Regular
Linotype Univers® 520 Condensed Medium
Frutiger® 45 Light, Extended


by Matt Brinkerhoff

The dust has settled and the winners of the 2011 Web Font Awards have been chosen. Our panel of expert judges – composed of Dan Rhatigan, Jason Pamental and Josh Clark – pulled no punches and subjected our three finalists to the critique of a lifetime! Here’s how the judges ranked the winners.

3rd Place: SAM | Mamus Creative

SAM | Mamus Creative

While some may criticize the usage of a font so similar to other Web-safe options out there, MAMUS Creative managed to differentiate its entry by choosing less common weights of the Helvetica® face served by Fonts.com Web Fonts, creating an experience that reflects the high-end nature of SAM’s offerings. SAM-NYC.com designer John Mamus has shown us that sometimes the smallest alterations can have a large impact on the final product.

“Here at the MAMUS studio, we are absolutely thrilled to have proper fonts at our disposal. It has already changed how we work. In fact, every new Web initiative we are working on makes use of Web fonts. What’s more, we can now align the brand typographical usage to match in print, Web, broadcast and beyond. It is an excellent time to be a creative person.”

 

2nd Place: Portfolio of Debbie Millman | Armin Vit

Debbie Millman | Armin Vit

Our judges were impressed by the use of the Neue Haas Grotesk™ design, also served by Fonts.com Web Fonts, to create a bold but accessible look for DebbieMillman.com portfolio site of writer/educator Debbie Millman. Our judges also praised the layout, which held up well on mobile platforms. The man behind UnderConsideration and last year’s Judges’ Choice runner-up Armin Vit returns with another award-winning project.

“It was so exciting to control such a beautiful typeface through CSS and it rendered so nicely. Plus, of course, the artwork just came through behind it perfectly. This also led quite by accident to a very well proportioned mobile version of the site. The backgrounds were [acting up] on the iPad® and iPhone® devices, so I just stripped them away and the type by itself looked great. I couldn’t have pulled this off with Arial® — no offense.”

None taken, Armin.

 

1st Place: Fork Unstable Media | Fork Unstable Media

Fork Unstable Media | Fork

Our panel loved Fork.de’s innovative Web design techniques, but it was its dedication to using Web fonts wherever possible that helped propel them to the top of the contest. You won’t find a single piece of traditional Web-safe or rasterized text on Fork.de. Self-hosting the Malabar™ Pro typeface from the Linotype® collection, FORK Unstable Media has truly taken its use of Web fonts to the next level.

Roman Hilmer, Creative Director at Fork on why Malabar was selected: “Karin came across Malabar at just the right time. We wanted a serif typeface that fit with our “antique” oracle concept but also brought in something new. It needed to look like it was carved in stone, but also be a bit of a showoff, and naturally work on the Web. Right away we all knew we wanted to use it as a Web font.”

Congratulations to all of the winners and many thanks to our media partners, sponsors, entrants and the entire community for your contributions to the 2011 Web Font Awards!

Matt Brinkerhoff
Matt Brinkerhoff holds a bachelor’s degree in E-Business from Champlain College and has experience in user experience, multivariate testing, design and Web development. Through his work as a freelance designer, Matt developed an affinity for typography years before joining the team.



by Johnathan Zsittnik

FOWD NYThe Future of Web Design conference returns to New York City next week, and we’re excited to once again be a part of this informative and inspiring event. The schedule is packed with sessions covering HTML5, CSS, creativity and other topics from some of the most respected voices in Web design, including our own Dan Rhatigan who will be participating in three sessions. We’re also pleased to be joined by Chris Armstrong, part of the team behind the much anticipated Typecast application. Chris will help us explore how browser-based design can lead to better sites and better typography.

Type on Screen: Choosing and Using It Well, by Dan Rhatigan
Monday, November 7 at 2:00 p.m.
At last there is now incredible potential to consider a full range of typeface choices for web design, e-books, and other screen devices. However, these choices bring with them a new array of issues to be considered by developers and designers alike. We will look at a number of factors that should influence not only which fonts will work best for you, but also how you can then use those fonts effectively.

The Web Font Awards Ceremony with panelists Dan Rhatigan, Jason Pamental and Josh Clark
Monday, November 7 at 3:50 p.m.
The Web Font Awards is the first ceremony to celebrate the newfound typographic freedom that Web designers are experiencing across the globe. Presented by Monotype Imaging with support from Carsonified, the Web Font Awards is a design competition for websites using Web fonts. Join us for a quick recap of top entries and a spirited debate from our panelists who will determine this year’s Judges’ Choice winners!

Better Sites with Better Type: Designed in the Browser, by Chris Armstrong of Design by Front and Dan Rhatigan
Tuesday, November 8 at 1:20 p.m.
The Web is a living medium, and at its heart is compelling content. Putting content first and designing with HTML and CSS can help you produce better designs that are easier to maintain. Learn how to create a strong typographic foundation using Web fonts and how the small adjustments that make typography blossom are better made within the browser.

If attending, be sure to say hi to the team at the Fonts.com booth for a look at what’s new with our Fonts.com Web Fonts service or a sneak peak at how you can design with Web fonts using Typecast.

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 Johnathan Zsittnik

We’re happy to report that two of the most popular features of our Fonts.com Web Fonts service are available to a broader range of users. Beginning today, all of our annual subscriptions include desktop downloads and the ability to self-host. Both features were previously exclusive to our Professional plans.

Unique to Fonts.com Web Fonts, desktop downloads are installable versions of your Web fonts that can be used for creating Web site mockups. Annual Standard subscriptions include five desktop downloads every 30 days, while our Professional plans include 50 every 30 days.

Our self-hosting option allows you to serve fonts from your own environment. Simply build your Fonts.com Web fonts project as you normally would and we’ll provide you with the fonts and CSS you’ll need to deploy fonts from your own server.

Our desktop download and self-hosting features are designed to make it as easy as possible to introduce Web fonts into your workflow. Try them out with a Professional subscription or now through any of our annual subscriptions and let us know you think.

If you’ve been on the site, you may have noticed that we’ve also touched up our font search. Search results are now being served up by family. We hope this helps you find the right font a little quicker, even if you’re not certain what you’re looking for.

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 September 2011:

Avenir® 55 Roman
Futura® Bold
Avenir® 95 Black, Ext.
Neue Helvetica® 55 Roman
Neue Helvetica® 35 Thin
Avenir® 85 Heavy
Univers® 57 Condensed
Neue Helvetica® 75 Bold
Neue Helvetica® 77 Condensed Bold
Garamond 3 Regular
Garamond 3 Italic
Bauer Bodoni® Black Italic
Sackers™ Gothic Heavy
Sackers™ Gothic Medium
Avenir® 65 Medium
Trade Gothic® Condensed Bold #20, Ext.
Avenir® 35 Light
Neue Helvetica® 45 Light
Neue Helvetica® 87 Condensed Heavy
Trade Gothic® Condensed Bold 20
Trade Gothic® Bold
Helvetica® Condensed Bold
Neue Helvetica® 25 Ultra Light
Futura Medium
Neue Helvetica® 57 Condensed
Administer BookItalic
Avenir® 95 Black
Linotype Univers® 620 Condensed Bold
Linotype Didot® Bold
Linotype Didot® Roman
Linotype Univers® 420 Condensed
Linotype Didot® Italic
Neue Helvetica® 67 Condensed Medium
Linotype Univers® 320 Condensed Light, Ext.
Futura® Book
Univers® 47 Condensed Light Oblique, Ext.
Trade Gothic® Roman
Avenir® 45 Book
Futura® Heavy
Futura® Bold Condensed
Futura® Medium Condensed
PMN Caecilia® 75 Bold
PMN Caecilia® 85 Heavy
Neue Helvetica® 45 Light, Ext.
Trade Gothic® Bold 2
PMN Caecilia® 76 Bold Italic
ITC Avant Garde Gothic® Book
Neue Helvetica® 65 Medium
Monotype Grotesque® Condensed
Neue Helvetica® 37 Condensed Thin
Neue Helvetica® 47 Condensed Light
Neue Frutiger® Light
Trade Gothic® Bold, Ext.
Neue Frutiger® Bold
Neue Frutiger® Book
ITC Legacy® Serif Bold Italic
Neue Helvetica® 55 Roman, Ext.
VAG Rounded™ Bold
Rockwell® Bold
Trade Gothic® Condensed 18
Univers® 67 Condensed Bold Oblique
Avenir® 55 Roman, Ext.
Trade Gothic® Extended Bold
Felbridge™ Regular
Neue Helvetica® 77 Condensed Bold, Ext.
Cochin® Roman
Neuzeit® Office Bold
Neuzeit® Office Regular, Ext.
VAG Rounded™ Black
ITC Avant Garde Gothic® Medium
Neue Helvetica® 63 Extended Medium
Neue Helvetica® 53 Extended, Ext.
Frutiger® 65 Bold
Neue Helvetica® 73 Extended Bold, Ext.
DIN Next™ Bold
Frutiger® 55 Roman
Trade Gothic® Bold #2, Ext.
DIN Next™ Regular
ITC Avant Garde Gothic® Bold
VAG Rounded™ Light
Trade Gothic Next Regular
Helvetica® Bold, Ext.
Helvetica® Bold
Trade Gothic® Condensed #18, Ext.
Neue Helvetica® 65 Medium, Ext.
DIN 1451 Engschrift
DIN Next™ Condensed Bold
Frutiger® 45 Light, Ext.
Neo Sans Regular, Ext.
ITC Avant Garde Gothic® Demi
Palatino® Sans Arabic Regular
Avenir® Next Demi
Trade Gothic Next Condensed Bold
Eurostile® Next Regular
Eurostile® Next Extended Regular
Trade Gothic® Light
Eurostile® Next Extended Bold
Eurostile® Next Extended Semibold
Eurostile® Next Semi Bold, Ext.
Gill Sans® Book


by Johnathan Zsittnik

At first take, it may be surprising to hear that a website of a government agency is an early adopter of Web fonts. But when you consider the FCC’s goal of promoting innovation in communication services and facilities, it makes sense.

Established in 1934 as an independent U.S. government agency, the Federal Communications Commission regulates interstate and international communications by radio, television, wire, satellite and cable in all 50 states, the District of Columbia and U.S. territories.

The commission’s website features background information on the FCC, a newsroom, reporting tools and a series of resources for working with the FCC. The site’s use of the Trade Gothic® family not only makes the text distinctive, but also keeps text machine readable and sizable, helping FCC.gov achieve elegance and accessibility.

FCC website using Web Fonts

 

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

Fonts.com Web Fonts continues to expand our collection of prestigious and important typefaces. Today we are pleased to announce the addition of 376 Web fonts from the URW++ Font Collection.

URW++ now available at Fonts.com web fontsURW++ is based in Hamburg, Germany and has a rich history in digital typeface manufacturing. The URW++ font collection features an impressive range of original and licensed fonts of historical importance, and a diverse palette of font styles for designers to choose from. This initial set of fonts represents some of the most popular fonts in the URW++ collection:

The Corporate™ A, Corporate™ S and Corporate™ E typeface series was originally designed by Prof. Kurt Weidemann as a set of corporate branding typefaces for Mercedes-Benz (Daimler). This trilogy of fonts covers serif, sans serif and slab serif designs, and includes a wide range of typefaces styles — including small caps options — and extensive language support.
Corporate ASE web fonts
The Nimbus Sans Novus™ family is a versatile sans serif workhorse. It is based on the original drawings from Linotype’s Stempel type foundry.

The URW Garamond™ design is a beautiful take on this classic typeface family. Developed by the URW Studio in 1983, URW Garamond has an extensive range of weights to choose from.

We will continue to add URW fonts in the coming weeks. If there are any URW fonts in particular that you would like to see us offer, please let us know!