SkillSwap Goes Typographic

Right. I’m blitzing this. Two posts in one day. It’s unheard of! I’ve finally managed to put up my slides together from SkillSwap Goes Typographic:

Web Type: 80% Science, 20% Art on SlideShare

Also available as a PDF (8.9MB)

The night was fun and informal — heaps of people thinking, talking, and asking about web typography; a treat! The Clearlefties were great hosts in the day, and a special thank you goes to James Box for looking after and inviting me, and to Natalie Downe for helping James organise a fun, relaxed night. The pub inevitably followed with more type talk, and Señor Richard Rutter generously gave me a bed for the night in his fantastic house. The walk to the office in the next morning along the seafront was also a treat. Almost as good in fact as riding the travellators at Gatwick when changing trains on the way there and back.

Rich’s Facing up to Fonts talk had a lot of very well-researched detail about the technical aspects of web typography. I recommend downloading the slides. Mine had some food for thought and a bit on technical legibility. Between us we seemed to cover quite a lot of ground. Thanks for all the kind feedback both on and offline. Hopefully, I’ll make it back sometime and share a few drinks with the fantastic Brightonians again.

Coming up on Saturday at SxSW, there’ll be more typographic musings from Richard Rutter and nefarious others including myself at Quit Bitchin’ and Get Your Glyph On. I tagged them good in the previous post. If you’re going to be in Austin, say hi!

23 Comments

1. By Leon on 10th Mar ’09 at 14:55pm

Thanks, that’s an entertaining and informative read (still trying to get my head round 16px leading sitting on the 20px baseline every 4th line).

2. By Mircea Piturca on 10th Apr ’09 at 10:59am

Thanx for giving us, the unfortunates that could not go to SxSW, the slides. I also got the mp3 presentation form SxSW site witch is great.

One question, at the “12px fontsize/ 16px line height, (every 4th line resets on the grid)" wouldn’t be better to increase the line height and match the rest of the vertical rhythm? I had done this on a website, do not know if its right or not. A small fontsize with an increased leading may affect legibility.

Thanx again for giving out the slides.

3. By Melinda on 27th Apr ’09 at 14:42pm

Surely you did a good review about this font typing. It will bring a new vision of blogging world. People are looking through the font we type on our web/blog. A great fine artistic font will catch more readers.

4. By Gary on 12th Jun ’09 at 14:38pm

This was an excellent talk and I can’t thank you enough… I attended on a whim, having no real interest in typography, but I came away with a whole new outlook and have completely changed the way I code sites as a result.

Vertical Rhythm FTW!

5. By Mircea Piturca on 18th Jun ’09 at 09:00am

Gary, if you are referring to my post, yea “vertical rhythm" or “vertical motion" is something to keep in mind when designing. Some designers use the leading to create their grid, see Grid Systems in Graphic Design by Josef Muller-Brockmann.

6. By Sam on 25th Jun ’09 at 13:31pm

Thanks for the book recommendation Mircea, I will check it out as I wasn’t sure about Vertical Rhythm either. I wish I could of come to one of these talks, I trying to progress my typography skills and include it a lot more in my designs.

7. By Mircea Piturca on 25th Jun ’09 at 19:47pm

So as I. Hopefully they will do something like this in Europe. I got so many questions to ask like what safe web font have a true Italic besides Georgia or if I can relay on a Palatino Linotype as a web font…

Great web design is really just great typography.

8. By Jon 陳 on 26th Jun ’09 at 08:11am

Hi Mircea. The staggered rhythm in asides keeps the motion consistent while also allowing for smaller type. The line height could be increased. However, with smaller type size and with a smaller measure the lines would seem loose to me.

Our SxSW panel also has a web site courtesy of the dedication of our shepherd, Samantha Warren. If anyone wishes to do a European web type event like SkillSwap, I’d love to see if Richard’s available and come over.

Thanks, Gary! Glad you enjoyed it. Let me know how you get on with implementing. :)

9. By Ian Storm Taylor on 7th Jul ’09 at 03:11am

I figured the most recent blog post would be the most approriate to put this in, and I also happened to very much enjoy the downloadable PDF…

I just wanted to say I just recently found your site (through a variety of sources over and over again) and I love everything about it. Amazing typography and super interesting content. I was especially interested in your posts about the OmniTI transformation!

That is all. Just letting you know yet another person out here is admiring your work.

10. By Joe Warwick on 8th Jul ’09 at 08:30am

Looks like a really great conference, I wish I could of attended! I’ve been drawn into the world of typography and now it is one of my biggest learning curves. Keep up the good work and talks!

11. By Ahmet on 16th Jul ’09 at 20:07pm

Thanks a lot Jon (and thanks to Nicola for italian translation, perfect!)

12. By Veyton on 1st Aug ’09 at 08:46am

Thanks Jon , your topics are realy helpfull and impressive. Your skills are awesome and I love to read your blog. Keep up the cool work !

13. By Timo on 30th Aug ’09 at 17:07pm

@Mircea Piturca:

You can fully rely on both Georgia and Palatino. They are both supported by virtually all modern browsers and look very nice in italic as well.

Nice article by the way…

14. By Mircea Piturca on 30th Aug ’09 at 22:57pm

Thanx Timo,

I use both Georgia and Palatino for italics. Also I like to try “Minion Pro" and “Adobe Caslon Pro” but I do not know how well are them supported.

Indeed a great article.

15. By Chris on 15th Dec ’09 at 00:06am

You really did a good review about this font typing. In my opinion this type of font is more ergonomic for readers, isn’t it?

16. By MJ on 19th Dec ’09 at 11:09am

Hey looks like a very great conference Keep up the good work and talks. Best Regards MJ

17. By Ben on 2nd Nov ’10 at 11:41am

Loving the slides, what a great way to learn

18. By Tom on 17th Nov ’10 at 19:39pm

You may wish to know the link at the top of this page (anchored “SkillSwap Goes Typographic") currently goes through to a strange sedo holding page. Sorry not trying to be a pedant, was just keen to read the content!

19. By Gary on 17th Nov ’10 at 19:48pm

Looks like that domain has changed, you can find the content here:

http://skillswap.org/brighton/typographic/

20. By Tom on 17th Nov ’10 at 20:08pm

Hey that was super quick! Cheers Gary.

21. By Jon 陳 on 19th Nov ’10 at 13:55pm

Thanks for the heads up Tom! Thanks, too, Gary. I’ve updated the link to the new URL.

22. By Gary on 19th Nov ’10 at 20:05pm

Hi Jon,

While you’re here, I have a question…

I’m using a base font size of 12 with a line height of 18. What I’m noticing is that when I up the font size to 14 (1.167em) and keep the line height at 18 (1.286em), the base line of the text doesn’t seem to match up with other 12px text.

The line height of the paragraph is correct, I can use FireBug to see the calculated sizes and highlight the area - I can align other elements to it with no issues, but the text just doesn’t look quite right as the baseline appears one pixel lower…

Am I doing something wrong or is this normal? I could always manually shift the text up one pixel, which looks better - but it’s not… y'know… zen… ;)

23. By Gary on 20th Nov ’10 at 02:15am

I’ve realised this is a silly question. It’s one pixel either side - that it doesn’t look quite 'right' to me, doesn’t mean that it isn’t…. Which begs the question, is it better to be correct, or to trust your eye?

We, Who Are Web Designers — Mon, 19th Sep 2011 {55}

In 2003, my wife Lowri and I went to a christening party. We were friends…

Ampersand, the Aftermath — Wed, 22nd Jun 2011 {1}

The first Ampersand web typography conference took place in Brighton last…

Design Festival, The Setup, and Upcoming Posts — Mon, 20th Jun 2011 {0}

Wow, this has been a busy period. I’m just back from the Ampersand…

Web Design as Narrative Architecture — Wed, 30th Mar 2011 {9}

Stories are everywhere. When they don’t exist we make up the…

Ides of March — Tue, 15th Mar 2011 {4}

My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

2010 in Retrospect — Wed, 29th Dec 2010 {7}

Analog, Mapalong, more tries at trans-Atlantic sleep, Cuba, Fontdeck, and…

Remarks from the log

By Nin Armangué Braun in We, Who Are Web Designers:

This work is about research. It is like being a scientist and being asked about what you’ve discovered. You can…

By Mustafiz Rana in The Paragraph in Web Typography & Design:

Paragraphs and puntuation are discussed in great detail.Thanks for this useful read.

By Ben Peachey in We, Who Are Web Designers:

I usually go with “I’m a Kick-Ass Web Developer”. I even have it on my linkedin profile. Having…

By Tom Cooney in We, Who Are Web Designers:

I work freelance from a small home studio in the middle of rural France. You should see the looks I get when I say…

By Chris Jokinen in We, Who Are Web Designers:

My common response to the, “What do you do”, question has been: I’m a web-based programmer with a…

By Jack in We, Who Are Web Designers:

My god but did I need to read this. I just nearly heard dramatic music fading in, in the background too. Yeah, the…

Footnotes

This simple dish was created with a little xHTML, a dash of CSS and a pinch of PHP. It’s garnished with hAtom, hCalendar, XFN, hCard and rel-tag with a large slice of accessible intent. Hopefully it plays nicely, all the time.

1. By Leon on 10th Mar ’09 at 14:55pm

Thanks, that’s an entertaining and informative read (still trying to get my head round 16px leading sitting on the 20px baseline every 4th line).
2. By Mircea Piturca on 10th Apr ’09 at 10:59am

Thanx for giving us, the unfortunates that could not go to SxSW, the slides. I also got the mp3 presentation form SxSW site witch is great.

One question, at the “12px fontsize/ 16px line height, (every 4th line resets on the grid)" wouldn’t be better to increase the line height and match the rest of the vertical rhythm? I had done this on a website, do not know if its right or not. A small fontsize with an increased leading may affect legibility.

Thanx again for giving out the slides.
3. By Melinda on 27th Apr ’09 at 14:42pm

Surely you did a good review about this font typing. It will bring a new vision of blogging world. People are looking through the font we type on our web/blog. A great fine artistic font will catch more readers.
4. By Gary on 12th Jun ’09 at 14:38pm

This was an excellent talk and I can’t thank you enough… I attended on a whim, having no real interest in typography, but I came away with a whole new outlook and have completely changed the way I code sites as a result.

Vertical Rhythm FTW!
5. By Mircea Piturca on 18th Jun ’09 at 09:00am

Gary, if you are referring to my post, yea “vertical rhythm" or “vertical motion" is something to keep in mind when designing. Some designers use the leading to create their grid, see Grid Systems in Graphic Design by Josef Muller-Brockmann.
6. By Sam on 25th Jun ’09 at 13:31pm

Thanks for the book recommendation Mircea, I will check it out as I wasn’t sure about Vertical Rhythm either. I wish I could of come to one of these talks, I trying to progress my typography skills and include it a lot more in my designs.
7. By Mircea Piturca on 25th Jun ’09 at 19:47pm

So as I. Hopefully they will do something like this in Europe. I got so many questions to ask like what safe web font have a true Italic besides Georgia or if I can relay on a Palatino Linotype as a web font…

Great web design is really just great typography.
8. By Jon 陳 on 26th Jun ’09 at 08:11am

Hi Mircea. The staggered rhythm in asides keeps the motion consistent while also allowing for smaller type. The line height could be increased. However, with smaller type size and with a smaller measure the lines would seem loose to me.

Our SxSW panel also has a web site courtesy of the dedication of our shepherd, Samantha Warren. If anyone wishes to do a European web type event like SkillSwap, I’d love to see if Richard’s available and come over.

Thanks, Gary! Glad you enjoyed it. Let me know how you get on with implementing. :)
9. By Ian Storm Taylor on 7th Jul ’09 at 03:11am

I figured the most recent blog post would be the most approriate to put this in, and I also happened to very much enjoy the downloadable PDF…

I just wanted to say I just recently found your site (through a variety of sources over and over again) and I love everything about it. Amazing typography and super interesting content. I was especially interested in your posts about the OmniTI transformation!

That is all. Just letting you know yet another person out here is admiring your work.
10. By Joe Warwick on 8th Jul ’09 at 08:30am

Looks like a really great conference, I wish I could of attended! I’ve been drawn into the world of typography and now it is one of my biggest learning curves. Keep up the good work and talks!
11. By Ahmet on 16th Jul ’09 at 20:07pm

Thanks a lot Jon (and thanks to Nicola for italian translation, perfect!)
12. By Veyton on 1st Aug ’09 at 08:46am

Thanks Jon , your topics are realy helpfull and impressive. Your skills are awesome and I love to read your blog. Keep up the cool work !
13. By Timo on 30th Aug ’09 at 17:07pm

@Mircea Piturca:

You can fully rely on both Georgia and Palatino. They are both supported by virtually all modern browsers and look very nice in italic as well.

Nice article by the way…
14. By Mircea Piturca on 30th Aug ’09 at 22:57pm

Thanx Timo,

I use both Georgia and Palatino for italics. Also I like to try “Minion Pro" and “Adobe Caslon Pro” but I do not know how well are them supported.

Indeed a great article.
15. By Chris on 15th Dec ’09 at 00:06am

You really did a good review about this font typing. In my opinion this type of font is more ergonomic for readers, isn’t it?
16. By MJ on 19th Dec ’09 at 11:09am

Hey looks like a very great conference Keep up the good work and talks. Best Regards MJ
17. By Ben on 2nd Nov ’10 at 11:41am

Loving the slides, what a great way to learn
18. By Tom on 17th Nov ’10 at 19:39pm

You may wish to know the link at the top of this page (anchored “SkillSwap Goes Typographic") currently goes through to a strange sedo holding page. Sorry not trying to be a pedant, was just keen to read the content!
19. By Gary on 17th Nov ’10 at 19:48pm

Looks like that domain has changed, you can find the content here:

http://skillswap.org/brighton/typographic/
20. By Tom on 17th Nov ’10 at 20:08pm

Hey that was super quick! Cheers Gary.
21. By Jon 陳 on 19th Nov ’10 at 13:55pm

Thanks for the heads up Tom! Thanks, too, Gary. I’ve updated the link to the new URL.
22. By Gary on 19th Nov ’10 at 20:05pm

Hi Jon,

While you’re here, I have a question…

I’m using a base font size of 12 with a line height of 18. What I’m noticing is that when I up the font size to 14 (1.167em) and keep the line height at 18 (1.286em), the base line of the text doesn’t seem to match up with other 12px text.

The line height of the paragraph is correct, I can use FireBug to see the calculated sizes and highlight the area - I can align other elements to it with no issues, but the text just doesn’t look quite right as the baseline appears one pixel lower…

Am I doing something wrong or is this normal? I could always manually shift the text up one pixel, which looks better - but it’s not… y'know… zen… ;)
23. By Gary on 20th Nov ’10 at 02:15am

I’ve realised this is a silly question. It’s one pixel either side - that it doesn’t look quite 'right' to me, doesn’t mean that it isn’t…. Which begs the question, is it better to be correct, or to trust your eye?

By Nin Armangué Braun in We, Who Are Web Designers:

This work is about research. It is like being a scientist and being asked about what you’ve discovered. You can…
By Mustafiz Rana in The Paragraph in Web Typography & Design:

Paragraphs and puntuation are discussed in great detail.Thanks for this useful read.
By Ben Peachey in We, Who Are Web Designers:

I usually go with “I’m a Kick-Ass Web Developer”. I even have it on my linkedin profile. Having…
By Tom Cooney in We, Who Are Web Designers:

I work freelance from a small home studio in the middle of rural France. You should see the looks I get when I say…
By Chris Jokinen in We, Who Are Web Designers:

My common response to the, “What do you do”, question has been: I’m a web-based programmer with a…
By Jack in We, Who Are Web Designers:

My god but did I need to read this. I just nearly heard dramatic music fading in, in the background too. Yeah, the…