How to scale the jQuery UI font size for just the UI widgets

By | March 3, 2009

This post applies to jQuery UI 1.6rc6 (the preview for jQuery 1.3+), but it probably also works with earlier versions.

If you use themeroller, or simply download the jQuery UI standard code package from the jQuery UI web site, the default font size is set to 1.1em, which, generally speaking, is way too large for most people’s tastes.  I’ve seen a  less than helpful suggestion on how to adjust this, on the examples pages:

<body style="font-size: 62.5%;">

This is pretty bogus, because text inside input boxes doesn’t rescale (at least, not in FireFox,) and it obviously applies to the entire page, when in fact you may want it to just apply to the UI widgets only. You can adjust the scale very easily, though, for all widgets, by  editing the  ui.theme.css file (in the ‘theme’ directory). Just change the font-size property for the .ui-widget selector. The default is 1.1em. I changed mine to 11px.  Like this:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana,
 Arial, sans-serif; font-size: 11px; }

There’s a second line, with more specific selectors:  .ui-widget input, select, textarea and button respectively. You will probably want to change that line too.

16 thoughts on “How to scale the jQuery UI font size for just the UI widgets

  1. faaliyet

    I’ve changed as your solution. That’s fixed now. Many Thanks (:

  2. Deroude

    … or, if you use themeroller and don’t need to / want to / cannot edit your ui.theme.css file, appens “.ui-widget{font-size:11px !important;} to your own style sheet.

  3. Pingback: The jQuery UI CSS Framework – Part 1: Intro and How To Style a Button

  4. Pingback: My only jQuery UI complaint | Marcus McDuffie

  5. Jiyang Xu

    A slightly more convenient way of doing the same thing, w/o touching generated css file, is to override
    the entry after loading the standard css, by including the following in the source or your own css:

    .ui-widget { font-family: Trebuchet MS, Tahoma, Verdana,
    Arial, sans-serif; font-size: 11px; }

  6. juanitogan

    So far, this is what works best for me with both datepickers and dialogs without editing the ui.theme.css (and is the most zoom and ADA friendly):

    div.ui-widget {font-size: 62.5% !important;}

    Without the “div” the percentage is applied twice to inner ui widgets such as dialog buttons making them tiny. The “!important” is not really needed in my situation but is there just in case. As I begin to work it other jQuery UI objects I may find exceptions but, like I said, this works well for me for now.

  7. juanitogan

    Ignore my last post — I was in quirks mode (who knew?) — the content behaves much differently in the dialog in quirks mode and I got way off track. Anyhow, long story short, I eventually decided on the following if you don’t like the default font size in ui.theme.css:

    div.ui-widget {font-size: 1em;}
    div.ui-datepicker {font-size: 70%;}
    div.ui-dialog-buttonpane {font-size: 80%;}
    … and so on…

    This allows full-size content in the dialog with smaller dialog buttons and a small datepicker. This also works well in quirks mode and standards mode.

  8. christie

    I’m not a big CSS guru and that was driving me crazy. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.