Category Archive

Posts in graphics

October 13th, 2009

@font-face and performance

A usefully comprehensive analysis of how @font-face affects web site loading time (both actual and perceived). The results are somewhat depressing.

Worst-case scenario: If a font file fails to download properly in Internet Explorer, the whole page is unviewable.

It sounds like rather than simply whacking external font requests into the stylesheet, a savvy web developer can improve circumstances by scripting the site to only load external fonts when page content requires it, and sending files compressed whenever possible. Microsoft-specific conditional clauses can help control its display problems. Some of Steve’s recommendations are of limited value to small-scale web developers.

October 6th, 2009

Font Embedding

Ascender Corp‘s website with legal information about embedding fonts in documents and devices. Oddly mum about embedding fonts in PDFs, a technology that’s been available for over a decade. Strongly endorses the EOT font format, although there’s no clear reason why this proprietary format has an advantage against piracy, aside from limiting use of the font to Internet Explorer. Useful information along with some mildly irritating shilling.

October 6th, 2009

BoingBoing

Their new design’s use of BPReplay is a good demonstration of a high-traffic site using @font-face. A happy coincidence as I continue looking for web font resources.

(Edit: And they unplugged it on day 2. BPRelay Bold was getting a lot of hate. In the comments there were some legitimate complaints about it not rendering well at smaller sizes (web fonts rarely have the same hinting advantages as native fonts) and consuming extra bandwidth to load.)

October 5th, 2009

Webfonts.info

Another wiki for web fonts (see the Open Font Library), this features a short list of fonts sorted by licenses compatible with free end user access through @font-face. There is also aggregated news relevant to web fonts and aggregated Twitter feeds.

October 5th, 2009

Open Font Library

Resource for free and open-source font designs, mostly in TTF format. Intended to be both a resource for fonts and a mechanism for allowing font designers to redesign and remix each others’ work. Lack of readily accessible previews and a lot of broken pages currently limits usefulness. End-user will have to generate their own EOT files for use in @font-face stylesheet declarations.

Easily the best part of the site is the wiki, with detailed information on using the @font-face CSS declaration, with additional discussions on Microsoft’s EOT web font format and its problems, and links for more info.

Some of the better designs are also available through other resources, such as Font Squirrel.

October 5th, 2009

Typekit

Archive and server service for @font-face compatible fonts. Currently only invitation recipients can participate or even see what fonts are available. Typekit hosts all fonts, manages access to them, and vets font licensing (unlike Font Squirrel). Nominally free service provides use of one font and requires a promotional banner on your site; tiered fee services allow use of more fonts and access to non-free commercial fonts.

Some fonts available at the free level are common Linux-licensed fonts (DejaVu, Liberation, and Droid) available elsewhere without a linkback or external hosting, making the Typekit hosting agreement somewhat needless. Other fonts are provided only by Typekit and are better values (free or paid).

October 5th, 2009

Font Squirrel

Archive of @font-face compatible fonts. Some have incomplete families, and others appear to be tracings from old Dover clipart books. Also worrisome that the licensing statement for some faces amounts to, “We have no idea if it’s legal to distribute this, but we don’t see anything to the contrary, and gosh darn it we’re not experts at this sort of thing, you know, so don’t blame us if this turns out to be pirated.” (Edit: And more than a couple fonts are incomplete; which might be good enough if you don’t need numerals or common punctuation but they can’t be relied on for arbitrary titling, such as in CMS-generated documents.)

All downloads are at no charge, include general-purpose OTF or TTF files, IE-compatible EOT files, and pregenerated stylesheet snippets.

January 18th, 2009

More new bigger typography

Jason Kottke recently redesigned his popular website, getting rid of the yellows, playing with some funny decoration positioning tricks and changing the typography, making everything considerably larger. The new specified default font size is 16px, roughly the same size as the text you’re reading now and on sites like Wilson Miner’s. Score another one for aging web users whose vision is getting worse with time.

About┬ánamedrops his font of choice: “Whitney by Hoefler & Frere-Jones.” This comes through in the design: Whitney is the first font specified in the stylesheet, followed by Myriad Pro, Helvetica, Helvetica Neue, Arial, and then falling back on whatever the designated sans-serif may be.

The site’s unlikely to look like it does on Jason’s computer for more than a couple thousand people, possibly dozens of whom visit his site regularly. For most Mac users and a rare few Windows users, Myriad Pro will be used, followed by Helvetica (for many Windows users and the Mac users still using versions of OS X more than four years old), Helvetica Neue (It’s a rare computer that would have Helvetica Neue installed but not Helvetica or Myriad), Arial (for the remaining Windows users and the Linux users with the Microsoft Core Fonts package installed).

So he’s using some odd font specification rules: The circumstances under which a computer would have Helvetica Neue but not Helvetica are rare at best, and Verdana strikes me as being a closer match to Whitney than Arial is (although the metrics are probably less alike). Linux is accommodated in the breach, but there was room for him to specify Liberation Sans (for something Helvetica-ish) or Vera Sans (for something Arial-ish).