Posts tagged Typography
a neat tool from the fontshop for dynamically test-driving different fonts on live sites.
wizard david desandro has created a typeface built from the css styling of <span> elements.
not sure if this of practical use, but it is a very interesting idea. perhaps the next magic trick involves adding some javascript motion?
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.
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.
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}
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.
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}
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}
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}
