sanchothefat.com » CSS

dubnobasswithmytypeman

rob — Fri, 12 Mar 2010 03:18:31 +0000

Fun little typographical experiment to try and approximate the design work on Underworld’s album dubnosbasswithmyheadman and the accompanying book by tomato. The style is to create all the patterns and shapes using nothing but type and high contrast over-faxed and photocopied backgrounds (hat tip to Jake Smith for that finishing touch).

Typographic Tidbit #1

rob — Fri, 05 Mar 2010 01:25:48 +0000

I’m no expert – yet – but quite a lot of posts on the web about typography are related to CSS techniques and currently font-embedding. Very few tell us about the best practices for setting specific elements of the text we are working with. To paraphrase Robert Bringhurst typography should reflect the natural language as it is spoken. There are some acronyms that we pronounce as a word like Nato or laser and they should therefore be written as words. For acronyms in which we pronounce the letters such as CD or DNA they should be written as capital letters. That’s all well and good however from Erik Spiekerman‘s typographic tips over on the FontFeed blog:

NEVER use CAPITAL letters to accentuate words in running copy. They STICK OUT far too much spoiling the LOOK of the column or page. Use italics instead. If you have to set words in capitals, use proper small caps with or without initial capitals.

For acronyms where each letter is pronounced – the letters are still capitalised. As Erik states this is where small caps come into play. They allow you to have capital letters with the same x-height as your regular letter text, thus not sticking out and ruining your lovely paragraph.

This tidbit of CSS is a must in all of my style sheets from now on:

abbr { font-variant: small-caps; text-transform: lowercase; }

Cross Browser CSS Image Replacement on Inputs

rob — Mon, 01 Mar 2010 00:35:19 +0000

Disclaimer: I know image replacement isn’t ideal but sometimes we have to do it, plus it does offer up the opportunity for rollover effects using sprite backgrounds without javascript (at least in IE7+).

Here’s a quick solution to the problem of using regular CSS image replacement on inputs. The text-indent method fails in IE so we need a slightly different approach.

HTML:

CSS:

input.submit {
  display: inline-block;
  background: url(submit.png) no-repeat left top;
  width: 120px; // match width of background image
  height: 40px; // match height of background image
  text-indent: -9999px;
}

Because IE screws this up by not acknowledging the text-indent rule we need to take another approach. If text-indent is the horizontal approach to hiding text for small objects it made sense to try hiding the text vertically using line-height.

CSS take 2:

input.submit {
  display: block;
  background: url(submit.png) no-repeat left top;
  width: 120px;
  height: 40px;
  line-height: 100px; // must be at least the font-size plus the button height
  overflow: hidden; // only show what is within the desired dimensions
}

So there you go. The downside is that you have to use display: block; on the input. Usually this won’t be much of an issue however if you have multiple submit buttons or links next to the buttons then you’ll have to get your float on.