/ log / 2nd May, 2008 /

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.

CSS

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?

Share

Browse More Articles

15 Comments

  1. 1. By Mike on 2nd May ’08 at 03: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. 2. By Pete B on 2nd May ’08 at 04: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. 3. By Michael [Boicozine] on 4th May ’08 at 23:37pm

    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. 4. By John Boardley on 5th May ’08 at 04: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. 5. By Simon Pascal Klein on 5th May ’08 at 21:55pm

    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. 6. By Damian Cugley on 6th May ’08 at 02: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. 7. By Richard Rutter on 6th May ’08 at 09:40am

    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. 8. By Fubiz on 8th May ’08 at 07:03am

    By the way, beautiful template!

  9. Jon 陳’s profile 9. By Jon 陳 on 9th May ’08 at 01: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. 10. By Mike on 9th May ’08 at 16: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. Jon 陳’s profile 11. By Jon 陳 on 10th May ’08 at 02: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. 12. By Martyn on 16th May ’08 at 09:09am

    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. 13. By David Yeiser on 16th May ’08 at 19:55pm

    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. 14. By Daniel Burke on 22nd Aug ’08 at 07:11am

    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. Jon 陳’s profile 15. By Jon 陳 on 22nd Aug ’08 at 12: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.

Post a Comment

Required sections are marked § . Please remember, debate and courtesy are mutually inclusive.

Personal Details and Authentication
Comment

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {66}

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

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {4}

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

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {2}

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

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

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

  6. Ides of March Tue, 15th Mar 2011 {5}

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

Remarks from the log

  1. By OddsRİng Giriş in Ides of March:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

  2. By OddsRing Giriş in Ampersand, the Aftermath:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

  3. By OddsRing Giriş in Design Festival, The Setup, and Upcoming Posts:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

  4. By OddsRing Giriş in We, Who Are Web Designers:

    pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a printer could afford. ucuz…

  5. By Otomatik Rent A Car in Typeface != Font:

    each typeface has its own personality, appropriate to the message it has to convey suit the usual measurements of…

  6. By OddsRing Giriş in Typeface != Font:

    pts to 72pt (an inch high) and sometimes 84pt and 96pt, or as large as a printer could afford. ucuz ukash Type…

People and XFN

Analog folks:

  1. Andrei Zmievski

  2. Chris Shiflett

  3. Jon Gibbins

Friends, colleagues, and authors with interesting voices:

  1. Ben Ramsey

  2. Dan Mall

  3. Denna Jones

  4. Ed Finkler

  5. Elizabeth Naramore

  6. Elliot Jay Stocks

  7. John D. Boardley

  8. Helgi Þormar Þorbjörnsson

  9. Joe Leech

  10. Jos Buivenga

  11. Kester Limb

  12. Nicola Pressi

  13. Patrick H. Lauke

  14. Piotr Fedorczyk

  15. Richard Rutter

  16. Rick Hurst

  17. Sean Coates

  18. Simon Pascal Klein

  19. Terry Chay

Live the questions and one day grow into the answers.