things with bits – frances d'ath

fontographie

Early rising to Kreuzberg and after a time to wake Matthi up in Reichenbergerstr. Breakfast peanutbutter and coffee, talking across queer and politics and Berlin and so to work.

My project for the coming months is for Daniel Schlusser, better known as our man in berlin, though he isn’t. In Berlin, I mean. Theatre director and rather talented to boot, and perhaps other things to write of with him shortly.

A new website. Excitement of jQuery, some ideas for typography. Matthi is a typographer and genius in FontLab and Illustrator, so I ask him how to dismantle a font, remove various bits that make up a letter, all of which have names I don’t know. I thrill for beautiful typography, and it’s what I enjoy possibly the most in design, but actual making of fonts is deeply unfamiliar to me. So this is a story of how I learn about fonts.

The two things I wanted to do were convert a font into an outline (not to be confused, I think, with a outline font), and chops bits off. My approach, as Matthi laughed, was very Photoshop. Much messing around ensued, and without his help, I’d have been doing it for months in my awful untrained way.

So…

Using the serif font, Tenderness from dot colon and opening in FontLab Studio, which to be uncharitable strikes me as an application ported to OSX without much thought towards standard user interface behaviour. Then opening a single letter or glyph in its own window and exporting as .eps. Now for playing.

Opening the .eps file in Illustrator and first hacking away bits (which I haven’t done in my test glyphs as I was more interested in workflow possibilities), and then turning it into an outline. The process is quite simple, once I learnt it, but I wouldn’t have stumbled onto it on my own.

Selecting the entire glyph and then setting the fill color to transparent and stroke to black, gives a one pixel outline. Opening the stroke pane and setting the weight to 6 pixels gives it some width. Then the important bit, selecting from the menu – Object – Path – Outline Stroke makes the vector path the width of the new 6 pixel outline. Saving as .eps again finishes the work in Illustrator.

Copy-Paste, back into the glyph in FontLab, aligning with the original, then shift-selecting to select the original before deleting (fixing up the mess, I called it), and saving the results…

First to export as something useful, .ttf, though it seems to not preview properly in FontExplorer… nonetheless! My first attempts at font stuff. (I’m not sure it will even be used, and there’s more work to do yet…)

Shifting Daniel Jaber into WordPress

Daniel Jaber is the second choreographer and dancer I’ve done a website for. Coming from Dasniya Sommer, I was intent on messing around with jQuery again, and finding something distinctive to build his site around. The initial site, as with Dasniya, was hand-coded, relying on jQueryTools, which I discovered through Flowplayer for much of the interactivity.

Two big problems emerged. Firstly was the pain of updating static HTML. Even though I write my blog posts in this way, and have no difficulty screening out code from in front of my eyes, this way of managing a site is painful. The second big problem was the conflicts between how the content on the page was loaded and both video and images. The plan had always been to put the site into WordPress, and so I did.

The idea for using Daniel as his own background image was a fairly inevitable one, remembering when I first saw him, all piercings, blue mohawk, tattoos. I first tried supersized for this, but found it slightly heavy for just a single image. Lucky then CSS-Tricks had the perfect, all-css answer, which has become one of my favourite bits of code, being fond as I am of huge background images.

First though, I had an idea for the menu, coming from jQueryTools’ accordion tabs, with much eviscerating of CSS and some slowing down of the slide effect. This though, I could never get to work in WordPress. Much messing around in jQuery, dynamically adding classes and divs and removing them from elsewhere, I could even get it to work using an identical sidebar HTML structure to WordPress, but when I tried to use it in WordPress, weirdness ensued. I really wanted to use this though, because it’s the only accordion I’d seen with different times for the sliding effect.

But WordPress has almost everything, and I fell upon jQuery Accordion Menu for Wordpress, which has very similar code, taking a couple of hours at the most to get the CSS right and working rather nice.

Of course when I added the page crossfade eyecandy, it broke again. My fault for using redirectPage.

supernaut still uses the Flash-based sIFR method for using nice fonts, but the last couple of sites I’ve been rather enjoying the combination of open-source fonts and @font-face. Not one of those beautiful new CSS3 adventure like opacity or rounded corners, even Internet Explorer 5 supported this, and lately with a deluge of options for pretty typography, it has become increasingly popular. And far easier to implement that sIFR also. Oh, the title font is Anonymous Pro, which I think is one of the most elegant monospace fonts around (also important that is has Unicode-based character set, important for things like ü and ß).

Being dance, video was always going to be lurking. I wrote about my fun with Flowplayer and WordPress earlier, and still finishing this, with bandwidth check, pseudostreaming and the inevitable full-screen option shuffling this way. I’d rather be doing this all in HTML5 though, and shall come up with a graceful degradation from that to this in my next project.

A bunch of small plugins helped me along the way also. Add From Server let me add video to the WordPress Media Libary after I’d uploaded via FTP – perfect for large file sizes, and modifying allowable upload file types meant I could get the f4v there also.

pageMash made structuring the site and reordering projects as they move from ‘soon’ to ‘now’ to ‘then’ so much nicer than blah-ing around editing the pages themselves, and PHP Execution made it possible to do the Flowplayer video cludge.

Elsewhere, Lightbox Plus for a not-overpowering image gallery, though I am still working on this. DB Cache Reloaded and Hyper Cache for the necessary site caching, as long as I don’t forget to disable them when I’m busy working. PHPEnkoder, based on my favourite Hivelogic anti-spam email encoder. And WordPress File Monitor, which is about the most useful anti-hacking plugins I’ve found.

Oh, and page crossfade! I know it’s a bit Flash 2001, but I really did want to recreate the page fade-out/-in from the original site. (Not so good if JavaScript is turned off though.)