-
More hints about cross-platform font goodness.
-
Managing salespeople is a little like managing opera stars (my analogy, not theirs).
-
Disqus steps into the Commenters Rights discussion. Baking this into the code is fine, as long as it remembers that there are two kinds of comments: benign and spam.
-
Interesting to see the rage in the comments at the suggestion that people should actually, you know, drive the speed limit.
-
You have to, have to, have to watch the performance on Dick Cavett. Rarely have I seen the clarinet played like Buster Keaton would have.
-
Long thought lost 1950s BSO broadcast tapes, restored. So why aren’t they on the Internet Archive? Or at least on iTunes?
-
Very interesting. I have to say, though, that as someone who spends most of his time in Bloglines these days, I’d need to get hands on to figure out the incremental benefits.
Day: June 10, 2008
Linkblog down
This is the second day in a row that autoposting from del.icio.us has failed. Must be the weather.
If you miss my trenchant wit, as expressed in 255 character or less soundbites, you can always see my posts directly on del.icio.us.
CSS fixin’: toward a vertical grid
It should be theoretically possible with CSS to design a page where the type falls on a vertical grid. In reality, you rarely see this happen because multi-column sites make matching the grid values across the columns difficult, and browsers, particularly IE, have awkward ways of inserting inconsistent space around some block elements.
But the basic theory is simple enough. Decide the base unit of height of the page, and go through your stylesheet, making sure that everything there is a multiple of the base unit of height. Your tools are line-height, padding-top and padding-bottom. For example, if your base measurement is 20 pixels between lines of type, and you want space between your paragraphs, you might define a style like p { line-height: 20px; padding-bottom: 20px;} or even p { line-height: 20px; padding: 10px 0;} (where the latter splits the padding above and below the paragraph).
Getting it to work right can be a real bitch, though. What if you have a heading that you want to set larger than 20 points? The naïve approach (which I just implemented) might be to implement a rule like this: h3 { font-size: 24px; line-height: 28px; padding: 8px 0 4px;} where the 28 pixels of line height are padded with a total of 12 pixels to make up 40, or two lines. But this only works if all your h3s are less than one line in height; a heading spanning two lines will take up 66 pixels, or a little more than three lines, messing up the grid. The recipe for success is to avoid setting multi-line headings too closely–or perhaps to use smaller font-sizes for headings.
Here, as in all things related to web typography, a valuable resource is The Elements of Typographic Style Applied to the Web, the brilliant adaptation of Robert Bringhurst’s essential typography rulebook to CSS+HTML+ (occasionally) JavaScript. In this case, the sections on vertical motion (Choose a basic leading that suits the typeface, text and measure and Add and delete vertical space in measured intervals) are invaluable, and I’m going through this theme’s stylesheet and working on applying the principles now. So if things look odd, don’t worry, it’s not just you.
I should also point to 8 fonts you probably don’t use in CSS, but should as the inspiration to change my sidebar headers to Gill Sans (though I might pick a different sans in a day or two), and 10 Examples of Beautiful CSS Typography and How They Did It for the specific inspiration to use small, capitalized, letterspaced sans serif for the headings. Both are quite well written posts from the blog at 3.7 Designs.
Woody Allen at the clarinet
Via Matthew Guerrieri, who writes “sometimes a clarinet is just a clarinet,” in reference to Woody asking Dick Cavett to hold his clarinet and then saying, “Don’t hurt it, because it affirms my Freudian totality.” <audience titter> “Should be playing the harmonica.”
What I love about this clip is how the first part makes him look like a stork romancing a tree limb.
The bonus 1965 standup act is also hysterical, though it does make one contemplate a young Woody Allen who looks surprisingly like Peter Sellers.