How to make a set of elements more compact


The way semantic styles thing is generally to use use quite large fonts and lots of padding.
Whilst this gives a nice relaxed feel for a large web page, sometimes you need to pack a large number of controls into a small space, so things need to be miniaturized. I’m struggling to work out how to do this. Whilst some elements can have compact or small/tiny classes this does not seem to apply consistently to all elements. What I was expecting was that you could specify a “small” or “compact” class to some outer div and the sizes of everything inside that adapted (smaller fonts, smaller checkboxes, less padding) as appropriate.
Even if I try to set CSS on certain elements it doesn’t seem to work. For instance if I set a checkbox to be smaller it does look like to does become smaller but it seems like some large icon is still plonked over the top so this has no effect.
What is the best approach here?