Design Festival Podcast #1: Setting Standards-Friendly Web Type

Hey everyone,

So I’m happy today to launch the new Design Festival podcast, starting actually with a video “webinar”. We’re going to be alternating between just audio episodes (interviews, discussions, …) and video webinars of talks and the like.

[vimeo 23249056 540 450]

DesignFestival Podcast Episode #1 – Simon Pascal Klein on Webtypopgrahy from SitePoint on Vimeo.

Today’s episode is the first part of a talk on web typography I’ve given in various forms, most notably at Web Directions South 2010: Setting standards-​​friendly web type.

It covers getting type onto the web by looking in-depth at the various options we have at getting fonts and custom fonts onto the web, inc. notes on optimizations like subsetting, compression, and caching.

Download this Episode

You can download this episode as a standalone MP4 file. Here’s the link:

• DesignFestival Podcast #1: Setting Standards-Friendly Web Type (MP4, 31:25, 63.1 MB)

Subscribe to the Podcast

The DesignFestival Podcast is on iTunes! Add the DesignFestival Podcast to your iTunes player. Or, if you don’t use iTunes, you can subscribe to the feed directly.

Episode Summary

Here are the topics covered in this episode:

• What is Typography?
• “web-safe” fonts
• webfonts: EOT/EOT Lite
• webfonts: TT/OT
• webfonts: WOFF
• webfonts: SVG
• font hosting & licensing services
• optimizations: subsetting, compression, caching

Audio Transcript

Hi, and welcome to the first webinar in the Design Festival Webinar series. This first talk is primarily focused on web typography. And it was originally given at the Web Directions South Conference here in Australia back in 2010. The slides are a bit different. The talk has been updated since. So, for those of you who were there or those of you who have since downloaded the PDF slides, there are a few small changes. So, let’s get straight into it.

Setting Standards-friendly Web Type (with a good emphasis on standards).

I’ll quickly run through who I am. My name is Simon Pascal Klein. I’m one of those Bachelor of Arts students. I am a graphic and web designer and incurably, a typophile. And I suppose the missing fourth point on that list at the moment is that I am one of the core writers and editors at the DesignFestival.com at the Design Festival team.

So, typophiles. Typophiles are – well, essentially just big, giant type geeks. And considering you’re listening to this, you might well be one of them. So, I suppose if you are, put your hand up and make yourself known or give us a shout.

Next, before proceeding, I like to start things with a definition. I think definitions avoid misconceptions and they can give us a light at the end of the tunnel in some shape or form.

Typography is the art of creating and setting type with the purpose of honoring the text that we’re setting. The first part of that seems probably quite easy, but the second part is the really important bit, which is that we need to be aware of the contextual nature of what we’re working with. So, are we working with a comic? Or are we working with a page-turner, thriller novel?

This talk was originally separated into two parts; the first part focusing on getting a typeface on the web and the second part on setting that type all pretty. The second part of the talk will be covered at a later stage, so this webinar only covers the first part. So, stay tuned.
Let’s then get straight into it with part one.

Why do we do this? What is the reason? Why should we bother? Well, let’s go with the premise. The Internet is absolutely full of information and much of it is textual. And really, a large part of it is still a pain to read. Typography can bring aesthetic order to text, to information and it helps your users really navigate. And I suppose perhaps the reason why you might be here is that there’s been a recent renewed interest in typography.

Typography is central to aesthetics. It’s central to accessibility, to the legibility and to the readability (which are two slightly distinct, however interrelated parts). And a lot of the new typesetting techniques that have been published about and written about on various web design journals, magazines, blogs and such have been admired for their ingenuity (particularly the new ones). And of course, we also have a growing availability of web fonts on the web.

So, in other words, it just makes textual stuff look pretty, which is always a good thing. And the bottom-line is that web experiences that feature good typography are much easier to read and pleasurable to use.

Let’s go through a few assumptions that exist about type on the web, web fonts and web typography. I suppose the first one is that it sucks, or it might be boring; that it’s limited to sans serif only for readability (this is quite an old one); that we only have access to web safe fonts and that’s it; that there’s limited control; that if we want to do anything fancy, we’ll need to resort to Flash and other non-standard technologies. And I suppose the last one is that there are so many options and, “How do I just do it? This might be too hard.” And thankfully, that’s not quite the case.

There are, however, some problems and pitfalls that we do need to watch out for. So, the assumptions allow us to investigate potential problems and fix them.

The first one is (and this is of a personal, real, important note) is that more fonts don’t equal instant good typography. Many of the new web fonts aren’t optimized or even designed for web use. So, that’s something to keep in mind. I suppose is this a problem or is this not a problem, growing availability of web fonts. And the first two points highlight some issues there.

There’s a variety of differences in implementation. There has been – to some degree there still is, but largely finished by now – struggle between open and closed technologies. So, the open-source standardized stuff and the proprietary – think of Flash, that sort of stuff. And on a technical level, subsetting and compression becomes your responsibility if you’re not using a hosting service (and there’s more on that later).

The next question is how do we do it? And the answer there is there are a whole variety of options. They vary in technical complexity and stylistic versatility. And well, many of them are standards-based and you can use them now, which is great!
So, let’s get straight into the options that we have for setting type on the web (or fonts on the web rather).

The first option is installed fonts. So, these are mostly the web-safe fonts. The second option that I’m going to be running through is SIFR or Scalable Inman Flash Replacement and other Javascript- and Flash-replacement technologies. There’s cufón. And then, we have your web fonts, which are the EOT or EOT Lite via the @font-face declaration. Next, also using web fonts is Open Type and True Type via @font-face. Then we have WOFF. We have SVG fonts. And finally, we have listing and licensing services.

So, the first one. It’s really quite old and really quite simple. You essentially call upon a font directly in your font stack declaration. So, you might go:

font-family: Baskeville, Times, ‘Times New Roman’…

And then, you have a final declaration, which is your de facto system font that will be defined by your operating system. You can have another font stack. So, Helvetica or this sans serif font stack.

So, what are font stacks? Font stacks are – well, essentially you want to put them into an order. They have a hierarchy. First is your desired then quite simply, I suppose comes the fallback. And finally, we have a generic, which is system-defined by our operating system. Quite simple. I suppose anyone who has worked in CSS should be quite aware of all that.

Next up, Scalable Inman Flash Replacement. It’s a Flash-replacement technology that works in unison with Javascript and replaces type from a Flash file. It’s not really a feasible solution long-term, so I suppose in other words, don’t use it because there are a lot of better options available. It does do subsetting. It’s non-standard and relies on Flash- and Javascript-replacement. It is, however, high-performance. So, there is a high page load time and it’s not really feasible for your body copy (so, for the bulk of the text on your page, the paragraphs and such).

Next up (and this is roughly in historical timeline), it’s cufón and Javascript implementations. So, these were the first Javascript-only implementations. In particular, cufón stored font paths into VML paths and store them in JSON. And then, rendered them (the font paths) using Javascript.

There are a couple of concerns. It’s not particularly accessible, but it does work in most browsers. And this started a whole debate. And type foundries were particularly skeptical because it’s not a service. There’s a limited palette of typefaces. And there was this concern that people could access the fonts that were put up and extract the font data and essentially, pirate the fonts. So, that’s not one I particularly like using. And finally, I suppose the converter, particularly in regards to cufón was proprietary and it often is.

Then we had web fonts. This was developed by Microsoft. It’s the embedded open type version of Microsoft’s implementation of web fonts for the web via CSS. And this has been around for actually a long, long time. But EOT and EOT Lite (or both of them rather) only had support in Internet Explorer. You can restrict the use of the font assets to a list of trusted roots, so to a list of trusted domain names and subdomain names and so forth so that other people couldn’t just link to your font assets and then, use that font.

It uses web fonts, and it’s been described as ‘DRM-icing on an open type cake’. Again, there’s a couple of concerns and things to think about. Firstly, it’s non-standard. It’s a proprietary solution. It requires a proprietary converter to create these font assets. And the proposal was rejected by the W3C. And it’s thus far only supported in Internet Explorer.

Secondly, we have Open Type and True Type implementation of web fonts. This also uses the web font CSS declaration and links directly via the source declaration to an open type TTF file, which is downloaded then used to render the type. Feasible.

Thoughts: the files can easily be downloaded. You basically just look into the CSS and you grab the open type/true type file and you can save it. And then, you could do whatever you’d like with it on the desktop. So, the concern here is that people could easily get access to fonts that foundries make their money off, essentially, and download it from the web and not have to pay for it just because that website has decided to host a particular font that is proprietary and will cost a fair bit of money. You could easily get access to it.

It has a fairly good range of support – Safari 3.1 and up, Firefox 3.5 and up, Opera 10 up, Chrome 4, IE9 has the development version (and now, this version has support for it) and Android 2.2 plus. And I suppose importantly is that subsetting and compression comes down to the author. And again, there’ll be more on that later. So, if those two terms are foreign to you now, don’t worry. They’ll be covered shortly.

So, let’s go through a few examples of fonts or web pages being rendered using True Type and Open Type font assets. Everything on this page here is quite literally just text. There are no images. All the fonts, everything is pure text. You can select it and it’s basically just text, but it’s been rendered using the downloaded Open Type and True Type fonts.

Let’s go through a few others. Sorry, they’ll be coming shortly.

Next up is WOFF, which is the web open font file. It also works directly with web fonts and you again just directly refer to it in the source declaration. And the WOFF file is essentially just compressed font data with a bit of XML bundle and it’s built using this SFNT – which I think by memory it’s standard font data – to WOFF.

Besides being awesome, CRS (which is cross-object resource sharing) is available by http response headers. This means that you can limit – quite similarly to the way that EOT does it – limits the trusted, the allowed domains or subdomains that are permitted to access and render that data.

You can extract the raw data, but there is an additional amount of effort involved. It has a good range of support, as well. I believe Safari or Webkit in general – no, Webkit is already in there. I believe Safari will also be adding if it hasn’t already (I do need to check that out). And again, the development version of IE9 had it, so it is definitely in there. And finally, subsetting and compression again comes down to the author.

Finally, in the web fonts domain, we have SVG (scalable vector graphic) fonts. Also again, directly referenced by the source declaration in the @font-face declaration in the CSS.

A couple of thoughts: can be easily downloaded, fairly good range of support. Interestingly here, this is the only one that the iPhone supports. As of version 1+, I have to look into more recent versions. Again, subsetting and compression comes down to the author.

Finally in our list, we have web hosting and licensing services have sprung up to offer a huge library of free and commercial plans for getting fonts onto your website. And a few of the ones that we’ll go through: Typekit, Kernest. There’s also Font Deck and a couple of others.

These foundry initiatives are Javascript based, but not exclusively. They provide hosting, viapaid subscription. So essentially, you select the typefaces of the font that you like. You pay for your plan or for the one-off fee of getting those fonts. You eject a small amount of code into your website, reload and that’s it.

Sorry, there are a couple of flaws here. This is deemed ‘the solution’ and has been or has become and has now probably become rather the solution particularly if you don’t want to host your own stuff. It’s largely standards-based. It has a really good range of browser support. It’s fairly easy because a lot of the stuff is managed by the host. Subsetting and/or compression is done server-side (so by whoever your service provider is).

So, this is the Typekit website. It’s a bit dated, but this was the website back then. And everything you see here on the page – bar, I think just a few of the screenshots and the logos – are all just plain text. So, this big intro text that says ‘the easiest way to use real fonts on your website’ is literally plain text. And it’s set in Bello by the Dutch-type foundry I believe and called Underwear.

Looking into the Typekit interface, again, this is a bit dated, so things have changed I believe. So essentially, you can look at your sample. You can even put in your own text to see what it’s like. You can read about the font. And then, you select the styles that you want and so forth. You can see here that styles and subsets is currently not in that version of the screenshot, but I believe this has been added since.

So, let’s have a look at couple of web pages that use Typekit. Everything here is pretty much just plain text – quite beautiful! And it’s all selectable and quite accessible. So, a screen reader will be able to read this. Again, pretty much all plain text particularly that pixels creativity and Lorem Ipsum – very, very pretty.

This is Font Deck’s website. It’s a bit dated. I should update the screenshots. Sorry, this is the presentation originally from 2010, but just about everything is still largely up-to-date.

This is Typotheque’s website. And you would pretty much jump in, you select a font, you look at the price calculator. You select which license type you want whether you want a web-only version or you want a publishing, downloadable version (which is much more expensive) or you can get the two together, I believe. Or rather, when you buy the download version, you get a free web version license.

So here, you have a one-user license for Brioni and it’s at the price of €18. And this is Typotheque’s fonts in action including Cyrillic and Arabic from right to left. Again, all plain text and CSS. In fact, the only image I believe on the page is the beta preview in the top right and that little sort of pie chart graph, graphic. Everything else is plain text all done in CSS and good semantic markup.

This is the old version of the Typotheque website. This has been updated since, but they have a great view, as well. So, if you’re interested in all the major service providers, all provide extra good information about how they work, how broad the range of support is and so forth. It’s still outdated from the screenshots. So, you can select the license. You give it a domain that you want to apply it to and you select the styles that you want, which languages you want whether you want any additional open type features like small capitals. And that’s it.

So, this is a page on my website from, actually one of my University essays from a while back set in – I don’t remember what typeface this is, but it’s from Typotheque. However, let’s get into some of the technical details.

First off, one of the things I like to do when using @font-face because this is a CSS declaration – and you’re going to be doing a fair bit of stuff in CSS – this is to reset. So, why do we reset? Well, all the browsers have their own default for various xHTML and HTML elements. And this makes it a painful cross-browser consistency.

I know this is a contentious issue to some. To me, this is a practice that I’ve been using for quite a while. And there are concerns when you’re resetting. There are problems that can arise, but for me it works quite well. So, this is my personal recommendation. If you don’t want to use it, you don’t have to do. But I find it makes my life a lot easier.

So, if you Google ‘CSS reset stylesheet’, you should come up with a whole bunch. This one above is from the Yahoo interface library, let’s get into the bulletproof font declarations.

First up, we begin our declaration. We give our font-family a name so that we can reference it with the font-family later on. We give it a source. So, we say, “you can find our EOT file…” and there’s a specific order to this because different browsers (notably Internet Explorer) have problems. So first up, you need to give it the open type variant. Then, we need to give it a local variant. And there are two declarations here. So, this is if the font is already available locally.

Next up, we give the web open font file. So, you can list numerous fonts here (which is great, it makes life easy), then comes the OTF or TTF files. And finally, we do the SVG files. And you’ll notice there’s a hash in the ID. That’s because the SVG files are quite literally XML files and you need to reference where the actual data starts in the file.

There are a bunch of problems that occur, or pitfalls and issues that can arise. So, first up, it’s important to note we’re essentially dealing with separate font files of the same type face or the same font family for various font styles. So, for example, you can have a font called foobar and there’s foobar Regular, foobar Italic, foobar Bold and foobar Small Caps and so forth. This can become an issue. So, for example, think of elements such as the HTML <strong> and <em> (emphasis) element which are styled with setting the font in bold and italic respectively.

If we declare the italic via @font-face as we would to get the style to our design, what would happen is the italic is digitally italicized, so it’s doubly italicized. So, it grabs the italics that we’ve referenced, but then, it thinks that this is the normal variant and will italicize it by the font rendering engine. So, the result is all these things. So, we have small capitals that are doubly small (so they’re ultra-tiny). And you can see here it takes the italic and then, slants it. It digitally italicizes it. It’s quite disgusting. And it’ll probably mess up the styling in the intended design of a lot of your work.

If we avoid or overwrite the various declarations such as emphasis, font style normal and for whatever reason, our defined/preferred @font-face font isn’t available, we actually then rob the other fonts in the font stack from their styling. So, imagine if you’re preferred reference font file isn’t available and you’ve overwritten the font style for things like bold or strong or italics or <em> HTML properties, what will happen is those elements won’t get styled. So, this can become a pretty serious issue.

So, we overcome both of these issues by setting the font styles within the @font-face declaration. So, we need to say if we’re pulling the italic of the typeface that this is the italic. And quite literally, the way we do that is by saying, “By the way, this is italic. The font style of this typeface is italic.”

Like I said earlier, you would notice the source declarations that were local. Why do we have two local declarations? This is because some browsers refer to fonts using their postscript names. So, if you need to look for the postscript name of your typeface, you could find it in FontBook under the Mac, this way. So, just open up the FontBook which will be installed on your Mac by default.

There is also a properties extension for Windows. Basically, once you install it, you right-click, go to properties on the font file and click on the names tab and you’ll see all the information. And that download link is at: http://bit.ly/ms-font-prop (and links will all be made available later on, as well) and there are of course some more tools on free desktops.

When using @font-face for self-hosted files, we need to take into account two particular technical issues: one of them is subsetting and the other one is compression. So, I mentioned these earlier and I’ll go into them in detail now.

Subsetting – well, it quite literally allows us to remove knowingly unused glyphs from the font file, so we’re cutting back the file size. For example, if we know we won’t ever need the Greek characters on our website, we can remove them and thus, reduce the font file size because otherwise, the usable download the font file with Greek characters (which would never be used). And we reduce the page load size that way.

Subsetting can be done in a font editor. Font editors can be ridiculously expensive. So, I would recommend just grabbing Font Forge. It’s a great open source font editor. And you open up your font, select your character blocks that are unused and you delete them. But make sure of course you keep an original back up because chances are, you might use that font for something else and you do need your Greek characters.

Save yourself the headache. I would skip using the WEFT, the proprietary Microsoft converter and use TTF2EOT instead. Why? Because WEFT will use monotypes proprietary compression algorithm and GZip is exceptionally better. WEFT only works on Windows XP and there has been issues in running it in a virtual machine on other operating systems. So, it’s particular in some way. And TTF 2 EOT, it doesn’t compress, so I’ll instead recommend using GZip compression on the server side.
And there are of course online front-ends to both these tools. So, you don’t have to grab the command line tools to do this. So, there are websites that will do this for you and some of these are TTF2EOT on Sebastion Kippe’s website. There’s also the exceptionally awesome Font

Squirrel font face generator. I would absolutely highly recommend that to anyone working with web fonts online.
So, this is a screenshot of what the generator looks like. So, you quite literally click the add fonts button and you upload a font file. It’ll tell you how many glyphs there are, how large it is. And then, you can either go by the easy mode or the expert mode. And you can get it to generate a whole batch of different font formats for you for downloading and then, linking on your website.

You can do hinting. You can remove kerning if you want to. You can do basic subsetting or custom subsetting (so that is cutting out languages and character ranges that you won’t need). You can use a variety of different – it’ll give you the code for the CSS. So, there’s a variety of different methods. And yeah, so there’s a whole bunch of different great options and these will do it all for you.

So, compression. For compression, well let’s use Mod_GZip. This is using the Apache web server in the .HTaccess file. So, quite literally, we’ll basically call if module and the GZip module. And we’ll basically say, “Yup! Turn it on.” And more importantly, we basically give it a number of file types and we go, “We want HTML. We want CSS. We want Javascript” and whatever else we want in there. And then at the end, you need to go OTF, EOT, SVG, WOFF or whatever.

And because Microsoft is particular and just to make sure it all works, we have a particular vendor-specific notation to reference the Microsoft font object file. So, there’s EOT and EOT-lite files.

So, those are the things you need to reference.

You can also use Mod Deflate instead of Mod GZip in .HTaccess. Also again, really quite simple. You basically just go, “Here are a bunch of files, make sure you compress them.” And that’s it! Nice and simple. And do not be surprised to see reductions of 40%-50%. So, this is absolutely worth doing. Now, if you have a font file that’s a hundred kilobytes big (which is quite big), don’t be surprised to see that reduced down to 50% of that size. So, 50k or something. So, it’s certainly worth doing. This is of course if you’re hosting your own stuff. If you’re using a service, then you wouldn’t have to worry about much of this at all.

Finally, let’s cache the assets, as well. This way, we basically tell the browser, “If you’re visiting this web page again, don’t bother re-downloading the font file because the content is going to change, but the font is not going to change.” Here, we basically say, “If the files match, set the cache for those files to a specific amount” and I believe in this case that setting was for a month. Let’s hit back to that so you can see it properly. Yeah, so the max age is a month (I believe it’s in seconds).

Where can we find fonts? There’s a variety of good places to go online to find free web fonts. First off, I’d recommend the Open Font Library, which is a great library of open source fonts. There’s the League of Movable Type, which to some degree also links in some of these open source fonts. So, these are fonts that not only are free for you to download and use for whatever purposes you need them for, but also to make edits, to expand if you so desired to.

And then, there’s Font Squirrel, which is also awesome. And there’s a list of web fonts otherwise at that bit.ly address. It’s at the webfont.info wiki. Of course, there’s all the various services, but I won’t list them here because I’ll probably miss one or two and I don’t want to seem like I’m giving undue support for various commercial services. So, the ones I’ve mentioned in this talk are purely the ones that I’ve come across and used, but there’s a range of others.

And that’s it for now. So, the second part of this talk will come at a later stage. Thank you for joining me for the first webinar. I hope it’s been interesting and maybe helped you learn a thing or two. A lot of the material in this webinar, I’ve covered recently on the Design Festival website. And if you’d like to see more on typography and web typography, jump online to DesignFestival.com.