Yahoo UI - Fonts

Posted Thursday 11th May, 2006

This morning I sat down at my computer, started browsing my feeds to see what had appeared over night and discovered CSS Beauty had placed a link to the Yahoo UI’s Fonts CSS file. Having already downloaded the UI, I decided to have a closer look at this particular aspect since I’d missed it in my first pass.

Oh what a shock I got!

The Fonts CSS file is billed as offering cross-browser typographical normalization and control. A nice ideal but I’m not sure I agree with the method adopted.

You see, the first rule in the Fonts CSS file is as follows (I’ve added some carriage returns and indented to make it a little easier to read):

body
{
  font:13px arial,helvetica,clean,sans-serif;
  *font-size:small;
  *font:x-small;
}

This is nasty, in my opinion, for one major reason; it’s using hacks to get around IE’s problem with resizing fonts declared using pixels.

I’m not going to get up on my soap box about this (neither do I wish to pontificate - you never know when you might be wrong), but I’m pretty certain most of us are aware that hacks are a bad method to adopt when trying to solve cross-browser issues. If you’re interested in reading a little more, there’s some informative posts at Vitamin, Digital Web and Muffin Research.

It’s a real shame, in this particular instance, because the Yahoo UI is so good for so many other things.

Another Method

Unfortunately, I’m not sure there is one perfect method for solving this particular problem. In most cases, I personally make a major assumption to solve the issue - that the user has never changed the size of the default fonts in their browser. This is not a great solution but I certainly think it’s better than using hacks.

If this is the case, most browser defaults (at least that I’m aware of) are 16px, which means the following rule sets all font sizes to 10px:

body
{
  font: 62.5%/1.0 "Trebuchet MS", tahoma, verdana, sans-serif;
}

This then means that you can size everything else using percentages and still easily understand what their pixel equivalents would be:

100% = 10px
140% = 14px
160% = 16px
200% = 20px

This allows you to improve your typography easily - a good example would be Mark Boulton’s excellent tutorial on weight and size.

It’s also worth resizing fonts for form elements. This is something the Yahoo Fonts CSS does too. To acheive this, you should use something like this:


select,
input,
textarea
{
  font-size: 99%;
}

I’m using 99% in that rule simply because Safari doesn’t seem to like 100% for some reason.

So using Yahoo’s Fonts CSS is bad?

Not really, it’s just that I prefer the above method. You should definately make up your own mind about it.

In summary, it’s just the Fonts CSS part of the Yahoo UI that I disagree with - the rest of the interface is awesome and I’m a particular fan of their javascript event handling functions. They’ve brought all kinds of new features to the table with the newest release and, if you’re a web developer, you should definately download it and take a look.

However, when it comes to font-size normalisation (English spelling please), don’t just trust their method because it’s not perfect.

But then, neither is mine…

Included in: Accessibility, Browsers, CSS, Development, Typography, Web Standards

Categories:

  1. Accessibility
  2. Agile
  3. Ajax
  4. Apache
  5. API
  6. Architecture
  7. Books
  8. Browsers
  9. CMS
  10. CouchDB
  11. CSS
  12. Design
  13. Development
  14. Django
  15. Email
  16. Events
  17. Gaming
  18. Grammar
  19. Hardware
  20. HTML
  21. HTTP
  22. Humour
  23. Idea
  24. Information Architecture
  25. JavaScript
  26. jQuery
  27. Lean
  28. Life
  29. Linux
  30. Literature
  31. Mac OS X
  32. Management
  33. Meme
  34. Microformats
  35. Monday
  36. MySQL
  37. Networking
  38. News
  39. Personal
  40. Photoshop
  41. PHP
  42. Process
  43. Python
  44. Reference
  45. REST
  46. Science
  47. SEO
  48. Server
  49. Site
  50. Sitepimp
  51. Social
  52. Spelling
  53. Syndication
  54. Testing
  55. The Future
  56. Thoughts
  57. Tools
  58. Tutorial
  59. Tutorials
  60. Typography
  61. UI
  62. UNIX
  63. Virtualisation
  64. Web
  65. Web Standards
  66. Widgets
  67. Wii
  68. Writing
  69. Xbox
  70. XHTML