fonts.com blog
Posts Tagged ‘html5’

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

Face it – the explosion of rich multimedia, social networks and mobile applications have left you up in arms in establishing a consistent brand, let alone an identity, across a vast and fragmented digital medium. The abundance of rich video content, the extensive and complex array of mobile apps across mobile OS and marketplaces, and the proliferation of social media and networks (like Facebook and Twitter) have made it increasingly challenging to establish a cohesive and consistent, yet distinctive identity and brand online.

With the introduction of HTML5, organizations are presented with a plethora of new and exciting opportunities to address and tackle the challenges. One of the most simple, prominent and elegant components that will be supported in HTML5 is Web fonts via @font-face with CSS3. Web fonts are already supported in browsers today via @font-face with CSS (to learn more about the history and current implementations of @font-face, click here). Web fonts are by far one of the easiest and most crucial elements that can help organizations achieve a consistent brand online across platforms and devices. If fact, if you distill the essence of a brand or identity down to its most basic level, it starts with the typeface. The type builds the name, the type builds the logo, the type builds the brand and identity.

While delivering a consistent brand across mediums in the non-digital world has been achieved through hundreds of years of technology and development, the same cannot be said for the digital medium – yet. HTML5 will be the first vehicle that will standardize the proliferation of Web fonts via the @font-face CSS across digital mediums, across all devices and platforms. Through @font-face, Web fonts will enable brands to establish and deliver a consistent identity online that extends from the desktop to tablets to mobile devices in various use cases that can include the following:

In addition to broad and consistent reach across devices, the adoption of Web fonts also brings the following benefits to the use cases:

  • Full searchability by Find (ctrl/command-F)
  • Accessibility to assistive technologies like screen readers
  • Text is translatable, through in-browser translation or translation services
  • CSS has full ability to tweak the typographical display: line-height, letter-spacing, text-shadow, text-align, and selectors like ::first-letter and ::first-line

While HTML5 nears final ratification, it can be assured that the surge of innovation will drive accelerated adoption and implementation of the new standard by Web browsers, leading first with mobile and tablet platforms and followed shortly by the desktop. This will be one of the first, if not the first, web standard that will be driven from mobile to desktop as consumer engagement with digital content shifts (or has shifted) more toward tablet and mobile devices than the desktops, creating an even a greater sense of urgency for businesses to develop and extend a consistent brand and identity across the fragmented mobile environment.

Monotype Imaging has been on the forefront of delivering desktop and Web fonts to brands, enabling them to extend their trusted identity consistently across digital and non-digital mediums and across a variety of use cases. Take a look at some of the market leading brands who are already leveraging Web fonts today:

Honda CR-ZHonda CR-Z
Hershey'sHershey’s
HyundaiHyundai
TCBYTCBY
TravelSmartTravelSmart
PoweradePowerade
Coke and PepsiCoke & Pepsi
TobleroneToblerone
McLarenMcLaren
Historic Hotels of AmericaHistoric Hotels of America

And many more!

To learn more about how Web fonts can help your business or to choose the Web fonts best for you, please visit webfonts.fonts.com.


by Alan Tam

Greetings! I thought I’d start my first blog post here at Monotype Imaging with one that shares a unique and exciting opportunity for Web fonts and HTML. It’s a bit of a read, but I wanted to provide some initial background for those who may not be as familiar with HTML before getting to the subject matter.

But before I begin, a quick introduction of myself – I’m the new guy, Alan Tam. I’ve just joined Monotype Imaging as the Director of Product Marketing for Fonts.com Web Fonts. Most recently, I led the product marketing efforts at Adobe where I managed and drove the strategic marketing and launch efforts around Flash® Lite, Flash Player and Adobe AIR® technology for mobile phones, tablets, TVs and other consumer electronic devices.

During my tenure at Adobe, and especially working on the Flash platform team, it was impossible not to be involved and excited with the ongoing debates of Flash and HTML5. However, being in the center of it all gave me a broad perspective and enabled me to fully understand the discussions. It’s important to first understand that the issue is not Flash vs. HTML5, but rather Flash AND HTML5. In fact, Flash has always co-existed with HTML – Flash may not have existed without HTML. Flash has always enabled developers to deliver richer, more engaging experiences on top of HTML. Flash is NOT an HTML5 replacement and HTML5 is NOT a Flash replacement. The introduction of HTML5 is a validation that Flash has delivered the right level of capabilities to evolve the Web all along.

Some of the new elements introduced in HTML5 such as video, audio, offline and canvas support have all been available in Flash technologies for a number of years, but it also includes some capabilities that are not available in Flash as well. With HTML5, the standards are being raised and new capabilities are being introduced that will continue to drive further innovation on of technologies built on top of it like Flash. Flash and HTML will continue to co-exist and developers looking to deliver premium experiences above and beyond what HTML offers will do so with proprietary technologies. It is also important to understand that the HTML5 specification is still in a working draft and has not been ratified by the W3C at the time of this blog post (you can learn more about the current state of the HTML5 specification here: (http://www.w3.org/TR/html5/).

Not only does HTML5 open a whole new spectrum of use cases and application for development across platforms and devices, but it also has garnered tremendous industry support from leading technology , platform and tool providers including Google, Microsoft, Yahoo, Apple and Adobe. HTML5 offers opportunities for developers to explore existing and new applications and use cases using new methodologies and techniques to deliver functionality that was not previously possible with HTML. This is extremely exciting because of the potentially broad reach of HTML5, which includes platforms that do not support Flash today, such as Apple’s iOS® platform.

One potential HTML5 application that I’d like to explore today is digital advertising. Specifically, I’d like to discuss how Web fonts can allow advertisers to create ads that deliver more engaging experiences for a broader audience that spans across multi-screen environments. Some key advantages of using HTML and Web Fonts for digital ads include:

  • More expressive typography. With a virtually unlimited palette of typefaces to choose from, advertisers can pick designs that support the message of their ad.
  • Brand unity: Organizations can keep their communication “on-brand” by implementing their corporate or branded fonts they use in other forms of visual communication.
  • Scalable text is a requirement for location or personalized based ads (unpredictable text) when combined with a branding mandate for a specific font.
  • Search engine friendly ads. Though Flash has made some progress with SEO text and video, these changes remain still in their infancy and have limited support today.
  • Support on iOS apps and devices.
  • Broader set of authoring tools available.
  • HTML5 ads can not be “turned off” by removing the Flash Player plug-in.

We decided to try it out for ourselves and created an experimental HTML5 ad to be deployed on Google’s Ad Network. We took the following approach:

  • Created a Flash-based ad with a simple animation through Google Display Ad Builder utility;
  • Recreated the ad in HTML as close as possible using a combination of HTML, CSS and our Fonts.com Web Fonts service with the Futura® and Gill Sans® typefaces. Fonts were loaded through Google’s WebFont Loader.

Take a look at the two ads we experimented with here:

(The HTML5 ad is on the left and the Flash ad is on the right. You can view the interactive versions here: http://wfp.devbridge.com/html5/ — the above images are viewed through the Google Chrome™ browser ver. 12.0.742.112. Since HTML5 has not passed ratification with the W3C, this sample ad will vary in appearance depending on which browser you choose to view them with.)

Here are the key findings from this experiment:

  • While we are able to replicate some aspects of the original Flash-based ad, neither the appearance nor the animations of the HTML ad are a one-to-one match.
  • The ad actually relies more heavily on CSS3, than it does HTML.
  • Gradients and animations are triggered via CSS3 and usable in HTML5, XHTML or even HTML4.
  • HTML5 and CSS do offer some advanced and unique capabilities for advertisers. For instance, ads built with HTML5, CSS and Web fonts keep ads light, scalable, machine-readable and compatible for mobile platforms. HTML5 and CSS also address specific use cases such as zooming and predictive text input for dynamic ads.
  • We are reminded that HTML5 is inconsistently implemented across browsers today as it has not passed final ratification with the W3C. In fact, analysts like Gartner Group projects that the complete rollout of HTML5 across browsers will not be achieved until 2022 (http://www.scribd.com/doc/56875409/Gartner-html5-and-the-Future-of-Adobe-Flash).
  • HTML5 is not a complete replacement for Flash. Flash is dominant and pervasive for ads and other branding elements because of its richness and consistency across a matrix of operating systems and browsers. HTML5 cannot ensure this level of consistency yet. Furthermore, there are Flash capabilities that can’t yet be replicated in CSS and HTML5. For example, it is not possible to replace all the Flash-based Ad Builder templates with HTML5-based templates.

Although we are in the early stages, HTML5 ads are already being developed and deployed. We are submersing ourselves into HTML5 because we see Web fonts and, our broad collection of widely-used typefaces, in particular as supporting technology that will help HTML5 advertising take off (our existing Web fonts EULA on Fonts.com includes supports HTML5 display ads today).

I’d love to hear what you are doing with HTML5 and Web fonts. Are you working on ads? What are some of the other use cases and applications you see fitting for HTML5 and Web fonts?


by Chris Roberts

Seems like all of the sudden the term “HTML5” is everywhere. It must be incredibly irritating to highly technical people when civilians hijack and misuse their terms. HTML5 seems like it’s well on the way to “Web 2.0″ land. At the risk of further contributing to its over exposure, I’d like to hear and share some views concerning what HTML5 might mean for fonts and the people who love them.

First, a baseline definition from Wikipedia (where else?):

HTML5 is currently being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary rich internet application (RIA) technologies such as Adobe Flash and Microsoft Silverlight. In common usage, HTML5 may also refer to the additional use of CSS3, as both technologies are under development in parallel. source: http://en.wikipedia.org/wiki/HTML5

That last line does a few things for me: 1) supports my observations that the term “HTML5” has already achieved “common usage” (be very afraid), and 2) ropes in CSS3, which gives me my lead-in concerning font usage prospects. I’ll make a basic assumption here, which may be completely wrong (I’m sure someone out there will set me straight), that “Web fonts” will work where HTML5 is supported. CSS3 supports @font-face, which has now been adopted in every major browser, enabling foundries (like my employer, Monotype Imaging) to offer new services like Fonts.com Web Fonts. Combine my “HTML5 supports web fonts” assumption with the support being thrown behind the HTML5 movement by the likes of Apple and Google, and I am hopeful that the further extension of “real fonts” into rich media is set to accelerate. The reference to “real fonts” here is meaningful. I’m contrasting font formats like TTF, EOT, OTF and WOFF, which maintain the full typographic features of a font, to “derivative” formats like SVG and/or SWF. Conversion into “derivative” formats can represent a stumbling block for creative professionals who want to exercise the full capabilities of real fonts within rich media applications. When a real font is converted into one of these derivative formats, many valuable typographic features of the original font file are lost. For example, coded instruction that make the font look more legible at various point sizes when it is scaled up and down are lost (hinting). So, just how far can HTML5 be pushed as a replacement for proprietary rich media formats like Adobe Flash? Check out this demo from Sports Illustrated (Nice call out for “sophisticated typography” at 1:46.)

Last week, Jon von Tetzchner, Opera co-founder, suggested that HTML5 may represent a unified development environment for mobile applications. Considering that there are now reportedly over 4 billion mobile subscribers out there, I’m thinking this should be a good thing for creative professional who want to use “real fonts” in their mobile applications. What do you think?