Typographers, lend me your pain

Dear web typographers and designers, I need your help (and your woes!) A couple of days back, Jason Teague, Director of Web Design for AOL Global Programming and member of the W3C CSS3 Working Group made a request for input from designers around the CSS fonts and CSS web fonts modules. He has volunteered to be an advocate for them, and wants our thoughts and feedback on the way forward. It’s a welcome move, and a veritable bag of snakes he’s opening, so congratulations to Jason for volunteering to take the pain. I think we should help him out.

For my part, I’m planning to respond in detail, supported by a few test cases and examples of current rendering. Wish lists are great, but I think empirical evidence is more useful when identifying current issues and areas for improvement in the recommendations. So, if you’re a web typographer or designer and have come across problems or issues that might be worth cataloging, let me know what they are. I’ll promise to try and put together a test case and convert anecdotes to science if I’m able. Alternatively, you can just throw your thoughts into the comments for Jason’s article.

As an example of what I think might be useful, I’m planning on discussing classic type setting techniques that are either badly supported or absent like old-style versus lining versus small-cap numerals, raised or drop caps, granular glyph weights, ligatures, baseline fixing, etc. I’ll also be mentioning browser-specific hacks I use to achieve better rendering like setting a miniscule opacity value in Firefox on OSX to de-bloat the glyphs and improve larger-size anti-aliasing.

What do you think?

15 Comments

1. By Mike on 2nd May ’08 at 10:45am

Hi Jon,

great idea.

I have already left a comment, about the importance of having a cross browser consensus on base font size definition, but that was more of a ramble. Maybe you could put it more eloquently to reinforce the point?

Maybe this screenshot collection by Owen Briggs is a starting point?

Also this ALA article on font sizing by Richard Rutter makes a good reference I think. I believe Richard is also on the case anyway…

Btw I’m not a typographer but a hobby-enthusiast so apologies if this is way off…

Cheers,

Mike

2. By Pete B on 2nd May ’08 at 11:39am

Font-smoothing looks like the biggie to me – can make a big difference to the look and feel, and sometimes clients complain about the differences cross-browser/platform.

Text-shadow, if it’s not already in there.

Bring back 'font-stretch' – it will be abused – but is occasionally useful for special effects, and, making the professionals look more professional for not abusing it :)

3. By Michael [Boicozine] on 5th May ’08 at 06:37am

Why does the W3C never actually go to well known and respected Graphic Designers and Design Groups (such as Pentagram for an example). This is where they should be seeking advice… from professional bodies with an innate knowledge of the benefits of visual language and how the 'graphic sensibility' can enhance to use experience… rather than issuing forth scatter-shot invitations to maybe comment on random stuff. It’s great to get people involved but where the voice of the design as an industry in all of this?

4. By John Boardley on 5th May ’08 at 11:32am

My principal concern is that there really is too much talk about new features that sum to little more than a jar of eye candy. Having typographic elements render consistently across different browser/platforms is what I’d like to see. I’ve just read (I’ve forgotten where) that we shouldn’t expect "pixel perfect" positioning and sizing, but why not? I expect it, and I want it.

I’m also surprised that it has taken someone to volunteer to raise these issues. We also need to get input from others who have a great track record in web typography, in taking web typography—as it stands—to its limits. I do hope that the advice of Richard Rutter and Shaun Inman has been sought.

I have so much more to write (text-align: justify….); however, I’ll leave that in abeyance and do some more of my own research (would like to see the results of yours, Jon). Oh, and Font-Stretch needn’t be so bad…but more on that later.

5. By Simon Pascal Klein on 6th May ’08 at 04:55am

John Boardley: The ability to set type in a pixel-perfect manner is already available to us using ems. Furthermore it is more of an issue of browser support — even if IE 8 fully supports typographical elements sized in pixels and resizes them correctly we still need to consider the majority of users which for several further years will continue to use IE 6 and 7.

What I’m most looking forward to is ligature and old-style, lining and small cap numerals — as Jon has mentioned.

6. By Damian Cugley on 6th May ’08 at 09:34am

I would like to be able to add and subtract different sorts of length. For example,

width: 12em – 3pt;

This would be useful, for example, when I want to have a column that is 25% of available width, not counting a 10pt gutter. Nowadays you can often get the effect with nested DIV elements, but that adds complexity.

I’d also like to have font-size-adjust implemented, or some other mechanism for matching fonts sizes nicely even when you don’t have control over which fonts will be chosen.

7. By Richard Rutter on 6th May ’08 at 16:40pm

Good post Jon. I’m piecing together a reply to Jason which will mostly revolve around the aspects you mentioned (number case, ligature, etc). These basically boil down to the features (tags) available through OpenType. It will be a crime if CSS 3 fails to take into account what is available through OpenType.

With respect to what some other commenters have said, what Jason is asking for doesn’t really have so much to do *how* browsers render text, their differences and what has or hasn’t been implemented. It’s more to do with what we’re asking browser makers to do (via the CSS specs) – answering the question What additional control over typography should authors and designers have?

8. By Fubiz on 8th May ’08 at 14:03pm

By the way, beautiful template!

9. By Jon 陳 on 9th May ’08 at 08:23am

Thanks Mike. We’re all enthusiasts, that’s what makes it all worthwhile :) What you mean by base font size definition?

Pete, unfortunately, CSS can only effect the quality of glyph rendering in small ways, it’s mostly an OS issue. The text-shadow property has been around since 1998 but only supported by Webkit as far as I am aware.

Hi Michael. I agree but unfortunately the design industry or typographers don’t pay for W3C membership so unless they are invited they won’t be part of the working group. Perhaps it’s something we could suggest to the W3C or raise with our professional associations?

John, properties like font-stretch are something of an issue for me: I can completely see the need. However, most common usage at the moment is for designers to set the font, not the family. E.g. Setting Arial Narrow as part of a stack, rather than setting Arial and then using condensed. What I’m wondering is what the optimal usage is, and then what are the use cases for alternate ways of expressing the same settings. Can this be improved with CSS3?

Hi Damian. Interesting idea. Is the problem with subtracted or extended widths a box model issue? For example, we already have padding and margin to use. (It is implemented unnaturally in my opinion: Padding should not increase the element area.) Be interested in you thoughts.

Thanks Richard. I was thinking in terms of feature tags too, especially the obvious like common ligatures, etc as Simon mentions. I agree it would be criminal if there wasn’t synergy. I’m also thinking that a discussion around defining common typesetting techniques like raised or lowered initials, or even a new property of leading could be interesting.

It may not be entirely pertinent to raise cross platform issues or even leading as part of this debate, but I have a sneaking suspicion I still might as a footnote. :)

10. By Mike on 9th May ’08 at 23:49pm

Hi Jon,

Cheers for your answer. First of, maybe we don’t even need to bother, which would really a shame…

But to answer your question.

Am I right in assuming that font sizing (in EMs) seems to be a cross browser pain when its combined with pixel perfect laying of the layout, no?

There would only one basic definition of a base font size be needed, such as

body { set-font-size:18px /* this would make 1EM = 18px */ }

Then one could style away in EMs…

What’s your take on this?

Are you happy with the current situation regarding font sizing in EMs?

Mike

11. By Jon 陳 on 10th May ’08 at 09:57am

Mike: Font sizing with ems is pretty accurate, especially if you use three decimal places. The browser already sets a default font size of 16px. We use html{ font-size: 100%; } to prompt IE into scaling elements better when using ems. After that everything is pretty straightforward and accurate. You can set the body to 1em. The only issues is how browsers round up or down an em length to calculate the pixels when people adjust their browser font size to < 16px.

12. By Martyn on 16th May ’08 at 16:09pm

Great ideas, I’m defiantly going to attempt to put some of my thoughts forward concerning this issue. I think it is something that really needs to be pursued. Thank you for bringing this to my attention.

13. By David Yeiser on 17th May ’08 at 02:55am

I’m completely ignorant of the difficulty of this task, but I would love to have one more decimal place in em units. That would allow for accurate odd-number sized fonts.

14. By Daniel Burke on 22nd Aug ’08 at 14:11pm

Any initiative to move the application of typography on the web forward should be applauded. Despite all the comments posted on this particular initiative so far I think one of the greatest voids in CSS implementation (among other aspects of type on the web) is the dearth of clearly presented documentation on CSS. In the last few years CSS has moved from fairly simple code into more complex realms but put yourself in the position of a novice and re-read the books, the free online documentation and anything else you can find – Jon, THAT needs your help!

15. By Jon 陳 on 22nd Aug ’08 at 19:59pm

Absolutely, David, I’ve even said the same, myself.

Daniel, thanks for the interesting comment. Your timing is judicious. Please feel free to send me an email with more detail about what modules specifically you think need help.

SkillSwap Goes Typographic — Mon, 9th Mar 2009 {8}

Right. I’m blitzing this. Two posts in one day. It’s unheard…

Seven Things — Mon, 9th Mar 2009 {10}

Meme is a funny word. I remember interrogating the hive mind of Google to…

Growing OmniTI — Sun, 21st Dec 2008 {23}

’Twas the week before Christmas, and all was hectic in the…

PHP Advent Seasoning — Tue, 16th Dec 2008 {9}

Ladies and gentlefolk, I give you the two-thousand and eight PHP Advent…

Remarks from the log

By 7 in Complex Type: CSS Fix, ClearType Miss:

Thumbs up on the css styled logo.

By Mircea Piturca in SkillSwap Goes Typographic:

So as I. Hopefully they will do something like this in Europe. I got so many questions to ask like what safe web font…

By Sam in SkillSwap Goes Typographic:

Thanks for the book recommendation Mircea, I will check it out as I wasn’t sure about Vertical Rhythm either. I…

By mario oyunları in Display Type & the Raster Wars:

i am using firefox 3 its better than ie6 and ie7 on xp

By Chris Seidl in Seven Things:

Oh geez, how did I miss that? Anyway, funny post. :)

By Chris Seidl in Seven Things:

The word meme was, I believe, originally coined by Richard Dawkins in his first book, The Selfish Gene. The intent…

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 Mike on 2nd May ’08 at 10:45am

Hi Jon,

great idea.

I have already left a comment, about the importance of having a cross browser consensus on base font size definition, but that was more of a ramble. Maybe you could put it more eloquently to reinforce the point?

Maybe this screenshot collection by Owen Briggs is a starting point?

Also this ALA article on font sizing by Richard Rutter makes a good reference I think. I believe Richard is also on the case anyway…

Btw I’m not a typographer but a hobby-enthusiast so apologies if this is way off…

Cheers,

Mike
2. By Pete B on 2nd May ’08 at 11:39am

Font-smoothing looks like the biggie to me – can make a big difference to the look and feel, and sometimes clients complain about the differences cross-browser/platform.

Text-shadow, if it’s not already in there.

Bring back 'font-stretch' – it will be abused – but is occasionally useful for special effects, and, making the professionals look more professional for not abusing it :)
3. By Michael [Boicozine] on 5th May ’08 at 06:37am

Why does the W3C never actually go to well known and respected Graphic Designers and Design Groups (such as Pentagram for an example). This is where they should be seeking advice… from professional bodies with an innate knowledge of the benefits of visual language and how the 'graphic sensibility' can enhance to use experience… rather than issuing forth scatter-shot invitations to maybe comment on random stuff. It’s great to get people involved but where the voice of the design as an industry in all of this?
4. By John Boardley on 5th May ’08 at 11:32am

My principal concern is that there really is too much talk about new features that sum to little more than a jar of eye candy. Having typographic elements render consistently across different browser/platforms is what I’d like to see. I’ve just read (I’ve forgotten where) that we shouldn’t expect "pixel perfect" positioning and sizing, but why not? I expect it, and I want it.

I’m also surprised that it has taken someone to volunteer to raise these issues. We also need to get input from others who have a great track record in web typography, in taking web typography—as it stands—to its limits. I do hope that the advice of Richard Rutter and Shaun Inman has been sought.

I have so much more to write (text-align: justify….); however, I’ll leave that in abeyance and do some more of my own research (would like to see the results of yours, Jon). Oh, and Font-Stretch needn’t be so bad…but more on that later.
5. By Simon Pascal Klein on 6th May ’08 at 04:55am

John Boardley: The ability to set type in a pixel-perfect manner is already available to us using ems. Furthermore it is more of an issue of browser support — even if IE 8 fully supports typographical elements sized in pixels and resizes them correctly we still need to consider the majority of users which for several further years will continue to use IE 6 and 7.

What I’m most looking forward to is ligature and old-style, lining and small cap numerals — as Jon has mentioned.
6. By Damian Cugley on 6th May ’08 at 09:34am

I would like to be able to add and subtract different sorts of length. For example,

width: 12em – 3pt;

This would be useful, for example, when I want to have a column that is 25% of available width, not counting a 10pt gutter. Nowadays you can often get the effect with nested DIV elements, but that adds complexity.

I’d also like to have font-size-adjust implemented, or some other mechanism for matching fonts sizes nicely even when you don’t have control over which fonts will be chosen.
7. By Richard Rutter on 6th May ’08 at 16:40pm

Good post Jon. I’m piecing together a reply to Jason which will mostly revolve around the aspects you mentioned (number case, ligature, etc). These basically boil down to the features (tags) available through OpenType. It will be a crime if CSS 3 fails to take into account what is available through OpenType.

With respect to what some other commenters have said, what Jason is asking for doesn’t really have so much to do *how* browsers render text, their differences and what has or hasn’t been implemented. It’s more to do with what we’re asking browser makers to do (via the CSS specs) – answering the question What additional control over typography should authors and designers have?
8. By Fubiz on 8th May ’08 at 14:03pm

By the way, beautiful template!
9. By Jon 陳 on 9th May ’08 at 08:23am

Thanks Mike. We’re all enthusiasts, that’s what makes it all worthwhile :) What you mean by base font size definition?

Pete, unfortunately, CSS can only effect the quality of glyph rendering in small ways, it’s mostly an OS issue. The text-shadow property has been around since 1998 but only supported by Webkit as far as I am aware.

Hi Michael. I agree but unfortunately the design industry or typographers don’t pay for W3C membership so unless they are invited they won’t be part of the working group. Perhaps it’s something we could suggest to the W3C or raise with our professional associations?

John, properties like font-stretch are something of an issue for me: I can completely see the need. However, most common usage at the moment is for designers to set the font, not the family. E.g. Setting Arial Narrow as part of a stack, rather than setting Arial and then using condensed. What I’m wondering is what the optimal usage is, and then what are the use cases for alternate ways of expressing the same settings. Can this be improved with CSS3?

Hi Damian. Interesting idea. Is the problem with subtracted or extended widths a box model issue? For example, we already have padding and margin to use. (It is implemented unnaturally in my opinion: Padding should not increase the element area.) Be interested in you thoughts.

Thanks Richard. I was thinking in terms of feature tags too, especially the obvious like common ligatures, etc as Simon mentions. I agree it would be criminal if there wasn’t synergy. I’m also thinking that a discussion around defining common typesetting techniques like raised or lowered initials, or even a new property of leading could be interesting.

It may not be entirely pertinent to raise cross platform issues or even leading as part of this debate, but I have a sneaking suspicion I still might as a footnote. :)
10. By Mike on 9th May ’08 at 23:49pm

Hi Jon,

Cheers for your answer. First of, maybe we don’t even need to bother, which would really a shame…

But to answer your question.

Am I right in assuming that font sizing (in EMs) seems to be a cross browser pain when its combined with pixel perfect laying of the layout, no?

There would only one basic definition of a base font size be needed, such as

body { set-font-size:18px /* this would make 1EM = 18px */ }

Then one could style away in EMs…

What’s your take on this?

Are you happy with the current situation regarding font sizing in EMs?

Mike
11. By Jon 陳 on 10th May ’08 at 09:57am

Mike: Font sizing with ems is pretty accurate, especially if you use three decimal places. The browser already sets a default font size of 16px. We use html{ font-size: 100%; } to prompt IE into scaling elements better when using ems. After that everything is pretty straightforward and accurate. You can set the body to 1em. The only issues is how browsers round up or down an em length to calculate the pixels when people adjust their browser font size to < 16px.
12. By Martyn on 16th May ’08 at 16:09pm

Great ideas, I’m defiantly going to attempt to put some of my thoughts forward concerning this issue. I think it is something that really needs to be pursued. Thank you for bringing this to my attention.
13. By David Yeiser on 17th May ’08 at 02:55am

I’m completely ignorant of the difficulty of this task, but I would love to have one more decimal place in em units. That would allow for accurate odd-number sized fonts.
14. By Daniel Burke on 22nd Aug ’08 at 14:11pm

Any initiative to move the application of typography on the web forward should be applauded. Despite all the comments posted on this particular initiative so far I think one of the greatest voids in CSS implementation (among other aspects of type on the web) is the dearth of clearly presented documentation on CSS. In the last few years CSS has moved from fairly simple code into more complex realms but put yourself in the position of a novice and re-read the books, the free online documentation and anything else you can find – Jon, THAT needs your help!
15. By Jon 陳 on 22nd Aug ’08 at 19:59pm

Absolutely, David, I’ve even said the same, myself.

Daniel, thanks for the interesting comment. Your timing is judicious. Please feel free to send me an email with more detail about what modules specifically you think need help.

By 7 in Complex Type: CSS Fix, ClearType Miss:

Thumbs up on the css styled logo.
By Mircea Piturca in SkillSwap Goes Typographic:

So as I. Hopefully they will do something like this in Europe. I got so many questions to ask like what safe web font…
By Sam in SkillSwap Goes Typographic:

Thanks for the book recommendation Mircea, I will check it out as I wasn’t sure about Vertical Rhythm either. I…
By mario oyunları in Display Type & the Raster Wars:

i am using firefox 3 its better than ie6 and ie7 on xp
By Chris Seidl in Seven Things:

Oh geez, how did I miss that? Anyway, funny post. :)
By Chris Seidl in Seven Things:

The word meme was, I believe, originally coined by Richard Dawkins in his first book, The Selfish Gene. The intent…

Typographers, lend me your pain

Share

Browse More Articles

15 Comments

1. By Mike on 2nd May ’08 at 10:45am

2. By Pete B on 2nd May ’08 at 11:39am

3. By Michael [Boicozine] on 5th May ’08 at 06:37am

4. By John Boardley on 5th May ’08 at 11:32am

5. By Simon Pascal Klein on 6th May ’08 at 04:55am

6. By Damian Cugley on 6th May ’08 at 09:34am

7. By Richard Rutter on 6th May ’08 at 16:40pm

8. By Fubiz on 8th May ’08 at 14:03pm

9. By Jon 陳 on 9th May ’08 at 08:23am

10. By Mike on 9th May ’08 at 23:49pm

11. By Jon 陳 on 10th May ’08 at 09:57am

12. By Martyn on 16th May ’08 at 16:09pm

13. By David Yeiser on 17th May ’08 at 02:55am

14. By Daniel Burke on 22nd Aug ’08 at 14:11pm

15. By Jon 陳 on 22nd Aug ’08 at 19:59pm

Post a Comment

Lately in the Log

SkillSwap Goes Typographic — Mon, 9th Mar 2009 {8}

Seven Things — Mon, 9th Mar 2009 {10}

Growing OmniTI — Sun, 21st Dec 2008 {23}

PHP Advent Seasoning — Tue, 16th Dec 2008 {9}

Remarks from the log

By 7 in Complex Type: CSS Fix, ClearType Miss:

By Mircea Piturca in SkillSwap Goes Typographic:

By Sam in SkillSwap Goes Typographic:

By mario oyunları in Display Type & the Raster Wars:

By Chris Seidl in Seven Things:

By Chris Seidl in Seven Things:

Footnotes

Typographers, lend me your pain

Share

Browse More Articles

15 Comments

1. By Mike on 2nd May ’08 at 10:45am

2. By Pete B on 2nd May ’08 at 11:39am

3. By Michael [Boicozine] on 5th May ’08 at 06:37am

4. By John Boardley on 5th May ’08 at 11:32am

5. By Simon Pascal Klein on 6th May ’08 at 04:55am

6. By Damian Cugley on 6th May ’08 at 09:34am

7. By Richard Rutter on 6th May ’08 at 16:40pm

8. By Fubiz on 8th May ’08 at 14:03pm

9. By Jon 陳 on 9th May ’08 at 08:23am

10. By Mike on 9th May ’08 at 23:49pm

11. By Jon 陳 on 10th May ’08 at 09:57am

12. By Martyn on 16th May ’08 at 16:09pm

13. By David Yeiser on 17th May ’08 at 02:55am

14. By Daniel Burke on 22nd Aug ’08 at 14:11pm

15. By Jon 陳 on 22nd Aug ’08 at 19:59pm

Post a Comment

Lately in the Log

SkillSwap Goes Typographic — Mon, 9th Mar 2009 {8}

Seven Things — Mon, 9th Mar 2009 {10}

Growing OmniTI — Sun, 21st Dec 2008 {23}

PHP Advent Seasoning — Tue, 16th Dec 2008 {9}

Remarks from the log

By 7 in Complex Type: CSS Fix, ClearType Miss:

By Mircea Piturca in SkillSwap Goes Typographic:

By Sam in SkillSwap Goes Typographic:

By mario oyunları in Display Type & the Raster Wars:

By Chris Seidl in Seven Things:

By Chris Seidl in Seven Things:

People and XFN

Footnotes