BearPanther.com

CSS font property shorthand does what?

Introduction

user

bear


LATEST POSTS

Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014

Blog

CSS font property shorthand does what?

Posted on .

Here’s some CSS:

font: bold 18px 'Lucida Console',Monaco,monospace !important;

Besides the !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:
css-font

Much better! Another, better fix would be to take that stuff out completely and use the default leaflet look.

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...