The
Palm
Civet

Posts tagged typography

November 19
@font-face kit generator

with both articles in the latest edition of a list apart concerning web typogrpahy and the recent release of much-hyped typekit, the smell of new type freedom is in the air.

unfortunately, @font-face support is still fragmented by different syntax and file formats across the browsers. tim brown has an excellent post on how to properly hit all your bases, but doing such requires 4 different font formats. conveniently, he links to font squirrel’s @font-face kit generator, a handy tool for transcribing a .ttf or .otf font into .eot, .svg, and .woff versions.
September 30
textorize

another excellent option in using the font of your choice in your designs. textorize is a ruby script that creates png’s of text in any font for osx users. its ‘shining star’ feature is that it takes advantage of osx’s sub-pixel anti-aliasing when creating png’s. that’s something photoshop still can’t even do! it does have its shortcomings though: it needs a background color and there are the implied accessibility issues of turning text into images. that said, it is still an excellent option in certain situations.
September 21
thin text in safari with snow leopard

a quick tip to negate safari in snow leopard’s sub pixel rendering with css =>


body { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px)
    {body{-webkit-text-stroke:0 black;}}

{via}
July 14
museo and sans

i have used the free, museo and museo sans on a couple projects now, but seeing tim brown’s wonderful piece of propaganda makes me wish i could discover them all over again.

both are extremely readable and full of personality; a perfect trial subject for cufon and the growingly supported @font-face css attribute.
June 9
versal letters with css

turn the first letter of any chunk of text into a versal letter fit for the most legendary of medieval scrolls with just a little css and a background image.

{via}
June 7

avoiding typographic widows with jquery

here is a quick jquery clip for avoiding typographic widows, or in more words, ensuring good typesetting practice by preventing the last word in an element from ending up on a line by itself. this is most useful for things like headlines and article titles.

just insert the elements you want to unwidowize (is that even a word?) into the array that the regular expression replacement function will run through.


$(document).ready(function(){
	$('a.link, h2 a').each(function(){
		$(this).html($(this).text().replace(/ (\w+)$/,' $1'));
	});
});

{via}

May 28
inconsolata

a beautiful, free monospaced font. hint: grab the .otf version for @font-face use in css.

compiling and sharing code, ideas, and tools for making better websites and applications.

by justin talbott {email me}

what is a palm civet?