The Past and Present of Web Typography

The core four: Geor­gia, Ver­dana, Arial, and Times. Famil­iar to most, as the web safe fonts. All solid choices for max­i­mum com­pat­i­bil­ity. Nearly all of com­put­ers show them accu­rately (as shown below).

Update: Type designer Rod McDon­ald pro­vided cor­rec­tions to my sloppy wiki-research.

Times New Roman

Being in the spot­light for just short of a cen­tury, Times New Roman became ubiq­ui­tous. Designed for the British Times news­pa­per in the early 30’s. It’s pop­u­lar­ity in book pub­lish­ing and wide use paved its way into the dig­i­tal age.

Rod says: Times New Roman was orig­i­nally designed for The Times of Lon­don by the renowned typo­graphic his­to­rian Stan­ley Mori­son who employed Vic­tor Lar­dent to do the final draw­ings. The fonts were pro­duced by the British Mono­type company.

Geor­gia

Matthew Carter is one of this generation’s most pro­lific and best known type design­ers. His work has changed the face of the web. Sub­tle vari­a­tions in x-height, weight, and size makes it bet­ter suited for screen presentation.

Rod says: Accord­ing to Matthew Carter, Geor­gia owes much of its design to the old British Scotch Romans and to his own Miller type­face. Carter made the ser­ifs con­sid­er­ably heav­ier to ensure they would ‘hold up’ at small sizes on screen.

Ver­dana

Another Matthew Carter cre­ation. This time a sans serif. Much like Frutiger. It’s excep­tion­ally easy to read at small sizes.

Rod says: Matthew Carter’s Ver­dana is sim­i­lar in design to Wal­ter Tracy’s 1959 Adsans which was orig­i­nally designed for use at very small sizes in the clas­si­fied sec­tion of news­pa­pers. Another influ­ence on the design was Carter’s 1977 Bell Cen­ten­nial, designed for use in US tele­phone directories.

Arial

The result of Microsoft’s preva­lence, and of the orig­i­nal and ever pop­u­lar, Hel­vetica.

Rod says: Arial was devel­oped by Mono­type for IBM in 1982. The design was based on the old Mono­type Grotesque range and was orig­i­nally called Sono­ran Sans. In 1993 Microsoft asked Mono­type to pro­vide them with a True­Type sans for their new Win­dows 3.1 OS. Mono­type reworked Sono­ran Sans and renamed it Arial. Shortly after its release false sto­ries began to cir­cu­late that Arial was sim­ply a ‘knock-off’ of Helvetica.

Want to use another font?

With pres­sure from design­ers for more choice, devel­op­ers have taken up the cause. As a result, font replace­ment was born. After a web page loads, HTML tags (usu­ally head­ings) are replaced with either vec­tor out­lines or images tak­ing on the dimen­sions, over­lap­ping, and replac­ing the orig­i­nal heading.

The fol­low­ing are essen­tially workarounds as browser tech­nol­ogy is slow to adapt and font foundries are weary of inter­net dis­tri­b­u­tion and piracy. Font replace­ment on a large scale (body text) is unwield­ily by its resource hun­gry nature. But, for head­ings, they work splen­didly to enhance the look of your site. Here are a few of the most well known…

sIFR 2.0 (or sIFR 3beta), The most pop­u­lar font replace­ment. In part, because it’s the only way for the head­ing to remain selectable. You need flash installed in your browser to see any­thing, and it’s noto­ri­ously dif­fi­cult to setup. (requires Javascript and Flash)

FLIR or Facelift Image Replace­ment ( Pro­nounced fleer ) trans­forms type into an image. Because the result con­tains none of the orig­i­nal curve infor­ma­tion, it allows you to bypass most EULA web embed­ding restric­tions. The only draw­backs I’ve encoun­tered have been its lack­lus­ter sup­port for spe­cial char­ac­ters (typog­ra­pher quotes, em dashes, etc.), and loads a bit slower than the oth­ers. (requires Javascript and PHP)

Cufón is a no flash solu­tion, like FLIR, but loads incred­i­bly fast. Fonts are embed­ded into a javascript file where the out­lines are extracted. Because of the pos­si­bil­ity for reverse engi­neer­ing, this method goes against many EULA agree­ments. Check your font’s fine print before using. (requires Javascript)

Typeface.js, much like Cufón, extracts and merges fonts into a javascript file. The main dif­fer­ence is that typeface.js only sup­ports True­Type fonts, and detects file per­mis­sions. So, good luck for any font that isn’t free. (Requires Javascript)

Look­ing for a sim­ple solu­tion? Type­kit uses CSS’s @font-face, host­ing the font files for you (for a small mem­ber­ship charge). Choice is lim­ited, how­ever, as only a select few foundries par­tic­i­pate. Imple­men­ta­tion is as sim­ple as past­ing in a sin­gle line of javascript code. Because the fonts are securely hosted by Type­kit, font steal­ing cheap­skates will have to look elsewhere.

It’s a Step For­ward, but…

In 5 years time, let’s all hope either Microsoft will get its act together with its EOT font for­mat or there’ll be a web Open­type for­mat that every­one agrees upon. But, until that date there’s many a workaround to employ.

Any­thing I missed to men­tion? Some­thing to add? Please share below.