Category Typography

Typesetting for the Web Presentation

I finally got around to uploading a presentation I gave in 2011 on the basics typography and typesetting on the web. Luckily basic typography principles don’t change much. Although, the CSS section could be updated with another few slides added to it. Browsers supports a lot more typography related CSS now.

New Typographic Nav Sneak Peek

Upcoming redesign of the portfolio section of my site. This in the secondary navigation that will scroll you to different sections of the portfolio. The typeface is Futura LT Bold. Faux ligatures were created using custom kerning

Also shared on Forrst. #DribbbleInviteNeeded

Typefaces have friends—they are just choosy.

Futura Medium with Rockwell Roman laid out on a 40px by 40px grid.

Baskerville Roman Italic Ampersand

This is definitely one of my favorite ampersands. I hardly use Baskerville for setting type, but I do like to just use its roman italic ampersand.

Too Much Fun with the WYSIWYG

The manger is having too much fun with the WYSIWYG editor. This really does seem like good branding for a upscale wine store. But at least they resisted Comic Sans.

Nice Simple Typography

Starbucks Napkin

I like wiping my face with nice type. Makes me happy.

starbucks napkin

Analog Devices’ Sign

Not sure why, but I think this is cool. Building sign: Analog Devices

Figure Dashes

I have been using en (–, ) and em (—, ) dashes for a while now. I love HTML entities! I always try to use proper quotations (“, and ”, ) and apostrophes (’, [beware ' doesn’t work in IE6 use &8217;]), but I had never heard of figure dashes before. According to Wikipedia “The figure dash is used when a dash must be used within numbers, for example with telephone numbers: 634‒5789.”. I always use decimals to separate phone numbers. i.e. 909.555.7384, I just like the way it looks better so I had never really thought about it before. My guess would have been to use en dashes, but en dashes are suppose to be used to express ranges not separations.

On a side note I know the iPhone is suppose to turn phone numbers into clickable links so you can dial from a webpage. I wonder how it handles different variations such as: 909.555.7384, 9095557384, 909-555-7384, or 909‒555‒7384 (This one uses figure dashes, notices the longer length of the dash and increased readable of the numbers).

Figure dashes don’t have a HTML name like en and em dashes. You’ll have to use the numeric version which is or ‒. The only caveat is that IE6 doesn’t support this character. I haven’t tested it IE 7 yet, I’ll report back when I do. Also I am going try to do some research into why IE6 doesn’t support the figure dash as well as trying to find a solution(s) to getting it to work in IE6. I’m sure I could write a script that replaces with a normal hyphen for IE, but that seems a bit over kill unless your site is all about telephone numbers.