fonts.com blog
Posts Tagged ‘css’

by Ryan Arruda

Geek Squad are technology professionals who help clients with all their electronic conundrums. Whether through home visits, by telephone, or even remotely, Geek Squad agents are available 24/7 to assist with the digital computing needs of consumers.

The Geek Squad UK website uses the DIN Next typeface extensively, achieving balanced hierarchy by employing both heavy, bold, and regular weights. The typeface presents both authority and affability, much in line with the image of the Geek Squad agents. The judiciously rounded curves of DIN Next nicely hint at the technological foundation of Geek Squad’s services.

Who ever thought that a squad of geeks would be so typographically hip?Geek Squad website using Web fonts

 


by Chris Roberts

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

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


by Jason Cranford Teague

Last year, 2011, was the year that Web typography finally came of age as Web fonts have grown in popularity. The history of Web design has been full of inspiration and innovation, but little of that has been around typography, in large part due to the lack of font choices available. To be sure, typography is about far more than just the font, but when you only have five fonts to choose from for most of your work, imagine a culinary world where you could only choose from five ingredients.

Web designers are finally coming out of the type coma of the last 15 years and using a variety of typefaces in their compositions. With the wide adoption of the @font-face CSS rule and the rise of Web font service bureaus, there are now close to 50,000 fonts available for your designs that will work on virtually all Web browsers – yes, even the Internet Explorer® platform. IE has supported Web fonts since version 4.

We’ve entered into a renaissance of the visual appearance of pages all over the Web. Designers are now experimenting with new ways of displaying text that were previously impossible or only achievable through the use of text in images.

2011 was a period of intense experimentation – some more successful than others – but there are some clear trends emerging in how Web typography will evolve and how it will differentiate itself from print typography.

1. Typographic Voice Diversity

Kitchen Sink Studios website using Web fonts

Kitchen Sink Studios uses five different typefaces in their home page, but it works to create a unique voice, showing off their services.

 

Type is to text what voice is to speech. The fonts you choose have a dramatic impact on the tone and emotion of the message you are presenting. As the famed book designer Richard Bringhurst put it, “When the type is poorly chosen, what the words say linguistically and what the letters imply visually are dishonest, disharmonious, out of tune.” Now that we are no longer limited to the “Fatal Five” families – the Arial®, Georgia®, Trebuchet® MS, Times®, and Verdana® faces – we are free to explore, mix and match a wider variety of typographic voices.

Some worry that this will lead to an explosion of fonts in designs, with inexperienced designers mixing a smorgasbord of typefaces, creating a cacophony of voices rather than a chorus. Time will tell, but at least the era of monotone typographic voices is finally at an end.

2. Larger Font Sizes

Information Architects website

Information Architects website, informationarchitects.jp speaks softly, but carries a big font.

Text on the Web has been too small for far too long. For a variety of reasons  including the “above the fold” myth and the belief that small type looks more sophisticated, most type on the Web is set on the screen at 12px or lower. However, as a clever yet simple experiment by Information Architects has shown, 12-point printed type is visually the same size as 16-pixel screen type

I start all my projects with a base font size 100 percent, which uses the browser’s default size, generally 16px unless otherwise set by the user. I then use sizes set using the em unit to scale text larger or smaller as needed.  Smaller text – like footer text and notes – can go as low as .625em (~10px assuming the base size is 16px), but body copy should be a minimum of .875em (14px) to 1em (16px) and headers start at one em and go to two em, three em, and even four em or larger. If you need help converting to PXs or PTs, PXtoEM.com is a great resource.

The transition to larger text may seem awkward at first – I’ve actually had to convince clients that the text is not too large – but once you adjust, small text will begin to feel cramped and amateurish.

3. Slab Serifs Fonts

Slab Serif Fonts

German Website Pixelbäker uses the popular Museo Slab™ slab serif font (Exljbris).

 

One important concern for Web typography is legibility, making sure that characters are as easy as possible to discern. There are a lot of factors that go into making a legible font, but two of the most important are consistent strokes and either thick serifs or no serifs at all. Thinner serifs tend to get fuzzy at the edges, as they are blurred for anti-aliasing. For this reason – as well as general style reasons – we are seeing a  lot of slab serif fonts being used in Web designs over the last year.

EgyptianSlate

Egyptian Slate (Monotype), already popular in print, base become a popular slab serif Web font.

Slab serif fonts have serifs that are square and of generally uniform width, thus with little or no tapering at the ends. These fonts can have a strong typographic voice. Often feeling heavy and constructed, but because of this they are clear, stand out on a page and are easy to apply typographic effects to using text shadows, especially the letterpress effect.

4. Letterpress and Other Text Shadow Based Effects

Facio Design Website

British Design Firm Facio Designs Blog uses a paper texture background with a light letterpress effect.

A long time coming, text shadows are now available to Web typographers using CSS. Even better, since you can add multiple shadows to a single text block, there are a variety of new effects that are quickly becoming common on the Web, most notably the letterpress effect.

Letterpress effect

The letterpress effect up-close

The letterpress effect is achieved by placing text on a contrasting, but not 100 percent contrast background color (i.e. not 100 percent black or 100 percent white), and then offsetting a text shadow with a color lighter than the background down and to the right and a darker drop shadow up and to the left. The offset should be only slight – one to three pixels depending on the text size – to avoid having the corners show a gap. Smaller type will not need any blur, but larger type may need a slight blur added to soften the effect slightly.

Text Effects

I put together a list of some interesting text-shadow effects

 

Aside from straightforward text shadow effects, letterpress is the effect I see most frequently, but there are many others, all achieved through the judicious application of text shadows.

5. Color Contrast

Contrast Rebellion

Contrast Rebellion is a site with a cause: fight low contrast text.

There’s debate in the design community about the need for contrast in type – whether it’s acceptable for the font color to be closer to the background color. Several argue that this is bad design, harming legibly and readability. However, many designers believe in reducing contrast in text, feeling that it adds an understated sophistication to the appearance, also allowing them to better guide the viewer’s eye by mixing contrast on the page.

Recent studies support the notion that decreasing legibility can actually increase viewer focus and cognition. The logic goes something like this: if you force the viewer to take more time to read something by decreasing the legibility, then they are forced to pay more attention and retain the information longer. This argument is something of a mixed bag, however, since some of the studies have used the Comic Sans® face to prove the point.

Designers intuitively know that perfect contrast can be visually dull. Black text on white background is much like making everything bold; everything is important so nothing stands out. You need contrast to engage the viewer’s eye and help them prioritize what they are looking at, and one way to do that is with different color contrasts.

Still, there’s a point at which low contrast goes from forcing readers to focus to just becoming unreadable. Colour Text Legibility is a great resource for testing foreground and background combinations, and will alert you based on the W3C’s guidelines for color readability and Web accessibility guidelines to ensure you do not stray too far.

6. Mixing Font Weights

Aspen Ideas Festival Website

The Aspen Ideas Festival mixes different weights of the Futura® typeface (Neufville).

A lot of Web designers I meet think that “bold” is the font weight, but bold is actually a font weight. Although certainly the most common, bold is not the only weight available for fonts. There are also thin, light, medium, heavy, black and many others. For example, the Neue Helvetica® design includes weights ranging from ultra light to black.

Neue Helvetica Type System

The Neue Helvetica font family with weights ranging from ultra light to black

Additionally, many fonts use a base 100 number scale to indicate weight, with 100 being the lightest, up to the heaviest at 1000.

CSS, though, only has limited capabilities to directly access these weights. The font weight includes values for regular, bold, as well as 100, 200, 300, 400, 500, 600, 700, 800, 900, and 1000. However, if you use the @font-face rule, you can still use any of the font weights available by simply assigning each weight its own font-weight value or, alternatively, a unique font name for each weight.

7. More Space

Future of Car Sharing Website

The Future of Car Sharing site uses a lot of space and a horizontal scroll.

Along with larger font sizes, there is a trend toward more white or negative space in Web designs. This is partially in response to the realization that the above-the-fold rule was actually a myth (people do scroll and expect to, as explained in 2007 by Melissa Tarquini) as well the fact that larger monitors have become ubiquitous over the last several years.

More space in designs is a very good thing, allowing for easier scanning and cleaner, less cluttered designs. Many designers have started playing around with layouts that really only work on screens that scroll, and this trend will only continue as we begin to master the new powers that @font-face and CSS3 provide.

8. Responsive Typography

Boston Globe Website

The Boston Globe reformats its layout and typography to fit desktop screens, tablets, and smartphones.

Although desktop monitors have gotten larger, the display screens on which we expect our design to be viewed are getting smaller, as more people view the Web through tablet devices and smartphones. The good news is that rather than returning to tight designs for our Web pages, we can create designs that “respond” to the device on which they are displayed.

Responsive Design (sometimes called “Reactive Design”) is a development methodology which forgoes the one-size-fits-all philosophy of the past, and instead leverages CSS media queries and the JavaScript™ language to deliver designs that are tailored to the capabilities of the user’s device. This means not only resizing images and interface elements but also tweaking the typography of designs so they scale up or down as needed. This applies to font sizes as well as column widths, line height and even justification in some instances.

Although it might seem like a pain at first to have to consider your designs as scalable, it will soon be a necessity. It is predicted that by 2015, mobile use of the Web will surpass desktop use and desktop use will begin to decline.

In addition to mobile, there are future screen types to consider. Although the fabled WebTV seems to be always just on the horizon, there is some very real movement in that arena with Google and Apple working hard to find the right formula. It may not be too much longer until you need to consider how your designs will look in a 62″ HDTV.

9. Handwritten Fonts

Lilac Creative Website

Lilac Creative uses the Coral™ Regular handwriting font (Scholtz Fonts) to give the site a friendly appeal.

Handwriting fonts are another design type that’s becoming increasingly popular. Despite how many feel about Comic Sans – the most notorious handwriting font of them all – type that looks as if it were written by hand gives a friendly, open, and approachable feel.

Handwritten Font

JasonSpeaking01 is my own homegrown handwriting font I created using the iFontMaker™ app. Download it free and let me know what you think.

In addition to the numerous commercial and free fonts available, it’s also now relatively easy to make your own handwriting font, using the iPad® app, iFontMaker, vLetter’s custom handwriting font service or other options.

10. Dingbats Instead of Images

Although the Webdings® font is one of the Microsoft® core Web fonts preinstalled on virtually every computer in existence, using this font for icons in Web pages has never caught on. There is a simple reason for this: the font will not display in the Firefox® browser. The reason has to do with how the font is encoded, but the upshot is that you can’t use them.

Frames and Borders Font

The Frames and Borders Font (Outside the Line) contains a variety of images and symbols and is available as a Web font.

However, if you are using @font-face to embed properly encoded fonts, there is a close to 100 percent chance the font will be used. The advantage of using a font for a dingbat, in place of an image is scalability and styles. Whereas image-based icons are a fixed size, fonts can be quickly scaled up or down to any size, altered in color or have other styles changed on the fly without any loss of fidelity.


by Johnathan Zsittnik

Club Nintendo is a rewards program for Nintendo players and enthusiasts. Members earn “coins” that can be exchanged for games, downloads and other goodies by registering products and taking surveys.

The site features many of Nintendo’s most recognizable personalities. Mario certainly takes center stage, but the Avenir® typeface family gets its share of the spotlight. Avenir Black ensures headlines come across loud and clear, while the typeface’s humanistic traits keep text in line with the fun, informal tone of the Nintendo brand.

Take a closer look at Club Nintendo by following this Link… err, this link.

Club Nintendo using Fonts.com 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 Alan Tam

Monotype Imaging’s Fonts.com Web Fonts team and Google have been brainstorming ways to make Web fonts better. Our main focus has been on file size. The idea is simple. Smaller Web fonts are faster Web fonts. Faster is better.

Looking to reduce Web font file sizes, the Google Web Fonts team began working closely with us to discuss the advantages of our patented MicroType® Express (MTX) algorithm. The results led to the joint conclusion that in order to truly maximize the value of this technology, it needs to be adopted by Web browsers and font tools. Thus, we decided that the greatest benefits would be achieved by sharing MTX with the entire Web community. As a result, Monotype Imaging has agreed to make the MTX format, as described in our W3C submissions, available to the public at no cost, subject to the terms of a license which can be found at: http://www.monotypeimaging.com/aboutus/mtx-license.aspx. Further details on the contributed technology can be found at http://www.w3.org/Submission/MTX.

Our ongoing collaboration will lead to a significantly better user experience, including:

  • Page load speed – with smaller font files, Web fonts used in your branded content will load faster than ever!
  • Font rendering quality – smaller font files enable greater screen optimization of Web fonts for noticeably better display quality across a variety of device screens.
  • Font features – smaller fonts enable more room for OpenType® features.
  • Cross platform performance – With Monotype Imaging and Google working with the W3C, the Web community and other browser vendors on adopting Web font compression technology, you will see enhanced performance of your Web font content across browser platforms. In other words, you’ll be able to deliver great experiences to your audiences regardless the browser.

Initially, Monotype Imaging and Google will focus on font creation tools. Currently, Microsoft’s Internet Explorer® browser supports EOT (Embedded OpenType) font files which make use of MTX compression. Open source tools needed to make EOT files can now be extended and improved. Beyond these efforts are several other interesting prospects including the possibility of adoption by additional browsers. Learn more about this collaboration.

We are excited to continue our collaboration with the Google Web Fonts team and to see how the Web community might make use of this technology. More to come!


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