How to get similar style as JQuery UI website itself

Question

I use jQuery UI and the "Smooth Default" CSS theme. However, everything looks bigger in my website compared to the jQuery UI website. For example, take the buttons here: http://jqueryui.com/button/

In my website they look much bigger with more padding and larger font. Do you know how I can imitate the jQuery UI website?

Answer 1

If you inspect the jQuery UI website using your browser's web inspector, you can see that in the <iframe> containing the buttons you mention, the following CSS is applied:

body {
    font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    /* This is making the text smaller */
    font-size: 62.5%;
}

In other words, they modified the CSS font-size property to make the text display smaller.