Web Directions South typography talk
Published • 15 Oct 2010I just got back from a better part of a week up in Sydney for the annual Web Directions South. I was invited to present on setting standards-friendly web type. The talk focused on the options currently available for setting type on the web with a strong focus on webfonts (part one) and a supplementary section on then styling the selected type (lots of micro-typography; part two).
Slide 6.
The talk
There is a lot to be written (or said) about typography, and when we work with the web as a medium a lot of extra technical stuff also gets tacked on, so I had plenty of material to cover (I ended up with 112 slides) in a slot of 40-odd minutes including time for questions. However: 1. I wanted to ensure that the talk included the bulk of the stuff you need to get going with webfonts (prime aim of the talk); 2. that’s not all though — now that you’ve got the type you want, styling that type comes next (the fun stuff); 3. I realise the slides are rather text heavy — I prefer reading along with presentations rather than just listening (half the stuff seems to just enter one ear and exit straight out the other for me) so I wanted to offer that option to those who like to read; 4. and finally, the nice upside of which is that anyone can grab the slides of the presentation later and use them as a downloadable resource.
You can grab a high-quality PDF copy of the presentation slides (16.1 MB). The talk is also available on SlideShare. Web Directions kindly recorded the audio of the talk and has made it available as a MP3. Alternatively you can also download an OGG Vorbis copy of the audio recording.
Part 1: Getting a typeface on the web
Options for getting fonts onto the web:
* installed fonts (mostly web-safe);
* Flash (e.g. sIFR) and other JS replacement techniques;
* Cufón et al.;
* webfonts: EOT/EOT Lite via @font-face;
* webfonts: OT/TTF via @font-face;
* webfonts: WOFF via @font-face;
* webfonts: SVG via @font-face;
* and hosting and licensing services.
Part 2: Setting that type all pretty
Webfonts aren’t the holy grail of web typography problems; remember:
Typography is not picking a ‘cool’ font.
…and further, also note that most fonts available from type foundries are not optimised for screen usage; they’re chiefly designed for print. Having said all this, part two focuses on styling the type you have selected. Main topics covered: * limiting your palette of type families; * using a combination of families, styles, and weights; * using tracking and small-caps for acronyms and tabular data; * sizing type in relative terms — in ems or percentages — and sticking it to a scale; * being careful when mixing different typefaces; * using the proper glyphs, e.g. proper punctuation; * playing with alternate styles for ampersands; * marking paragraphs; * setting and sizing horizontal flow via measures (line lengths); * setting and sizing vertical flow via leading (line heights); * playing with hanging punctuation; * treating text as part of the UI; * and setting it all in and/or around a good and organised grid.
I enjoyed presenting and through it revisiting web typography which I have not much had much time to devote to in these past months. If you have any feedback, thoughts, or otherwise with regards to the presentation or the slides drop me a line.
Oh, I also wanted to thank David Gleason for taking a snap of me on-stage. I really like Instagram’s styling. Cute.
I feel both disgruntled and happy at myself for not having written an entry in almost a year. On the one hand there is a resentful ‘how slack have I been? Why have I not updated!?’ sentiment on my mind. Meanwhile, another part of me feels reasonably content that my time has been consumed aptly; pursuing uni studies, other personal interests, and the obligatory pinch of turbulence (family and otherwise) here and there that made this an interesting year of personal development. I hope to write more frequently in the future.