Here’s some CSS:
font: bold 18px 'Lucida Console',Monaco,monospace !important;
!important, see any warts? Me neither, at least at first. (And I’m not talking about using pixels as units. I don’t want to go there.)
I didn’t know this, but the shorthand for font in CSS includes line-height as well as all the font-* stuff you’d expect. I personally prefer longhand font-family, font-size, etc. since I never memorized the shorthand version and it can be finicky (much like background).
The issue above is that using
18px resets line-height to normal. This is problematic because line-height was defined elsewhere, and it’s now been reset which in turn makes things look wack.
Here’s the context for this: I was browsing around geoplatform.gov and I noticed that the + on their zoom-in button on a dataset page looked wrong. There are lots of design/layout/spacing inconsistencies throughout the site but I want to focus on this one. Why this one? Because the out of the box zoom button for a leaflet map looks great and there’s no clear reason to change it. Then again, someone probably had a reason.
Back to the issue at hand. The CSS from the top of post came directly out of their page. The fix is to specify line-height as part of the value for font. Here’s that fix:
font: bold 18px/26px 'Lucida Console',Monaco,monospace !important;
Here’s an annotated .gif showing the difference this makes:
Much better! Another, better fix would be to take that stuff out completely and use the default leaflet look.