*

Download Google Webfonts as TTF

Google Webfonts is an awesome service – it’s free, it has some great fonts (though there are only a few fonts available) and the implementation is super easy. They also offer a great preview of all fonts, which is pretty helpful to select the right one, but there’s no official way to download the font file to be able to test it in Photoshop or whatever. IMO it is really essential to design with the final typeface and not a placeholder, so here’s a short instruction how to get the TTF files in Safari:

If you don’t have the Web Inspector activated go to “Safari” > “Preferences” > “Advanced” and make sure “Show Develop menu in menu bar” is activated. Once you got this the “Develop” menu will appear next to the “Bookmarks” menu. 

1. Go to the Webfonts Directory and click on one of the fonts. 

2. Click on the “Specimen” tab or if available on “Variants”

3. Hit CMD+Alt+I or go to “Develop” > “Show Web Inspector”

4. Select the “Resources” tab and activate the “Fonts” filter. 

5. Select the font/variant you are looking for from the menu.

6. Switch to the “Headers” tab and copy the “Request URL”.

 

7. Open that URL in Safari. The download of the TTF file will start instantly. 

8. Go to your “Download” folder and install the font.

Disclaimer: This little tutorial is not meant to help you steal those fonts!!! Please stick to the Google Webfonts Terms of Service and just use the font files to test your design before you implement that stuff with the provided code in your website. 

2010-07-15
Tweet this

Cross-browser kerning

I just found a new css wizardry thingy, which actually looks like there’s at least a cross browser solution to have better kerning for the web. Very interesting indeed.

body { text-rendering: optimizeLegibility; }

Cross-browser kerning-pairs & ligatures

Update: just added it to this blog and Zootool.
Noticed any difference? :)

2010-06-29
Tweet this

Gity Icon Replacement

I discovered Gity – an awesome Git app for OS X – some weeks ago and couldn’t use it because I was still running Leopard and Gity needs the snowy version. At least I’ve upgraded and so I downloaded Gity yesterday and gave it a try. All I can say so far is that I really love it. I use the command line every day, but I’m still one of those design nerds who feels more comfortable when I actually see what I do and Gity is just perfect for handling all that freaky git stuff with a nice and shiny UI.

The only thing I’ve been missing so far was a decent icon. (Yeah, I understand that three xxx thing and the Terminal icon stuff, but it just looks ugly.)

I’m in love with the Octocat from Github, so I decided to make a replacement icon out of it. Tadaa here it is:

 

  Download Gity.icns

All credits for the amazing icon illustration go to Simon Oxley. My god, this man is so talented. Too bad he got a flash site :)

2010-06-29
Tweet this

MouseContext

When Lauren Brichter came up with Tweetie for the iPhone (which unfortunately has become the official Twitter app now) he introduced a new UI element which was downright brilliant. To load new tweets, all you got to do is to drag and release the whole table of tweets and a nice indicator at the top appears to show you that new tweets are being loaded. 

This new feature has been so intuitive and obvious that I started to miss it in other applications within the first day of using it and a lot of people I talked to experienced the same. 

After playing with the iPad for some days I have a pretty similar feature which I start to miss. But this time not in other iPad applications but on my Mac in Safari. 

It has become so natural to me to push and hold an image on the iPad for example to get the context menu that I really start to miss the push and hold gesture on my Mac even with the mouse which is pretty insane. 

I started yesterday to recreate that gesture in Safari with Mootools and it seems to work pretty well for me. I don’t know if other users see this as intuitive as I do and I guess you can’t add it to a web app without explaining it, but I think it really can help to add nice functionality to an interface without cluttering it. 

Please check out the Demo over on my server and feel free to download and improve the first version I got on Github. I appreciate any feedback, so don’t hesitate to send me a tweet or a dm.

2010-06-05
Tweet this

iPad app rant

As soon as I got my iPad yesterday I tried to get some decent apps for it. There were a few which are really, really good, but all in all I was shocked how crappy the iPad app store is right now. In general, iPad apps sell at a much higher price than iPhone apps which I understand as long as they offer a much better experience, but most of the apps I saw are nothing more than a rushed try to migrate a poor quality iPhone app to the iPad and to sell it for twice the price. 

I don’t really understand why Apple did not put more effort in starting the iPad app store with more high quality apps like they did when the iPhone app store started. For me this really harms the whole iPad experience. 

The higher prices lead to another problem imho. It was a no-brainer to buy an app for 79 cent without having a demo, but honestly I am not going to buy an app for more than 10$ if I can’t test it, especially when the general quality of apps is that low.

2010-05-28
Tweet this