What Does HTML5 Mean for Font Lovers?

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:

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

Tags: , , ,

16 Responses to “What Does HTML5 Mean for Font Lovers?”

  1. […] This post was mentioned on Twitter by, RgDesign. RgDesign said: RT @Fontscom: Blog Post: What does HTML5 mean for font lovers? […]

  2. Joe Clark says:

    You do not need to use HTML5 to use Webfonts. HTML 4 and later and XHTML 1.0 and later work equally well. You need valid code, of course, which barely anybody can manage.

  3. Gen Kanai says:

    Up front, I will state that I work for Mozilla.

    Afaik, Firefox 3.5 was the first browser to support @font-face and Firefox 3.6 ships with WOFF support.

    Mozilla is one of the key organizations driving the WOFF specification. Note that Microsoft, Opera and Google have all stated that they will support WOFF, the company in Cupertino has yet to make a statement on that front (if I have my info correct.)

    It would be great if you could make clear in your blog post that Mozilla and Firefox have been leading the way for new support of fonts on the web.

  4. Correct. Web fonts certainly do not require HTML5. Did not mean to imply that. Good clarification.

  5. Yes. I agree 100%. Moz­illa and Fire­fox have been lead­ing the way for new sup­port of fonts on the web.

  6. Stephen says:

    Is the Futura used for the small type on this page hinted in any way? How about the Rockwell?

  7. Good question Stephen. I’ve asked the font production folks for the specifics. I’ll post the answer when I hear back. As I know you are well aware, there are many caveats regarding the way web fonts look across the various rendering environments. I’ve pointed several people to this thread on to help illustrate the complexity. Looking at that chart makes my head spin.

  8. Miguel Sousa says:

    The lack of hyphenation is still a big problem. Notice the gaping holes throughout the text on the pages. That certainly can’t be called “sophisticated typography”.

  9. Hi Miguel. That was more operator error than anything to do with web fonts. I’m still getting use to the ins and outs of our blog publishing tool. I had some “copy and paste” issues going on as I moved from my word processor to the blog form. I just spent that last hour trying to eradicate a bunch of double spacing issues.

  10. Brian Handscomb Brian Handscomb says:

    I think the Sports Illustrated example demonstrates how “fully justified columns” can suffer from the web’s lack of all the tools and techniques that are available to the print industry, hyphenation being one (though there are options becoming available). Unlike the medium of print there are so many variables that are beyond the control of the web content author, witness the scary chart in the Typophile thread Chris mentioned in one of his comments. This is especially scary when you consider the statement that the chart is “simplified”.

  11. Stephen, regarding your question about the fonts used on this page, they are Rockwell Bold for the headings and Twentieth Century for the body text. At least they are now. As I mentioned above, I goofed up the HTML with a “copy and paste” blunder.

  12. Ian Devlin says:

    It’s incredibly irritating to see HTML5 being used to also mean CSS3. It may be common usage according to Wikipedia, but it’s wrong. Plain wrong.

    What does HTML5 mean for font lovers? Nothing. HTML5 has nothing to do with fonts.

    And as many people seem to be unaware of, @font-face existed in CSS2, but disappeared in CSS2.1. The fact that @font-face is not new should be apparent simply by the fact that Internet Explorer 6 supports it!

  13. Hi Ian. You are right about the history of @font-face going back way before CSS3 or HTML5. However, I disagree about HTML5 having nothing to do with fonts. While you can certainly make a technical case that they are not linked technologies, at a market adoption level I think there is a link. If HTML5 does reduce the need for pro­pri­et­ary rich inter­net applic­a­tion tech­no­lo­gies such as Adobe Flash and Microsoft Sil­ver­light, it will likely increase the use of @font-face.

  14. Ian Devlin says:

    Hi Chris, I see your point, and I suppose in the minds of some non-technical people there is a correlation between the two technologies.

    I also realise that I came across a bit “shouty” which wasn’t my intention at all!

  15. No worries Ian. I’m grateful for your comments. This is a multifaceted subject, and there are several varied and valid viewpoints. I think it’s interesting how terms like HTML5 can transcend their objective meaning.

  16. Brian Handscomb Brian Handscomb says:

    Proving the point about “full justification”, it seems the “reader” feature of the newly released Safari 5 implements full justification in the dynamically generated code (very HTML5 like DocType at the start), and on my Mac at least if using this feature to view this very blog article the words “development in parallel” are VERY badly spaced.

Great type makes sites stand out