Tiny Little Details

Sweet Type

When I saw this chocolate type I had a thought that it would be fun to try and print using it. Just use warmed rice paper and off you go. OK, the type wouldn’t last very long, but each piece would be unique, and edible. Oddly, and just out of interest, it claims the letters are set in “FF FagoMo Bold”, but unless there’s another foundry out there prefixing their font names with FF, I can’t find it on FontFont’s site.

Update: Thanks to Jason and Marc for finding the correct font, seems there’s a typo on the Typolade site. The font is FF Fago Normal Bold.

Triskaidecagon

This print by Steed Griffin caught my eye on NOTCOT. I could quite full my flat with prints like this, and yes, you can buy them from his Etsy store. Mmm. Black and red:

Deruluft

I love this timetable cover for Deruluft - the double bird motif is really quite lovely. The use of the motif in their brand imagery apparently starts out strong (good) and then falls out of favour entirely between 1933 and 1935 (strange) - even in the 1932 brochure it’s reduced to a small image on the flag, then finally being nicely refined and promoted to the central image on the 1936 timetable.

The type is interesting as a monoline form too - the serifs are enormous, and the one on the ‘a’ is just strange, especially given how close it comes to the ‘T’. I really like the numbers though - the balance between the 9 and the 6 in the year is particularly pleasing.

The airline was a joint venture between Germany and the Soviet Union, which didn’t survive the changing political situation between the two countries:

Deruluft’s route network remained fairly intact until the airline discontinued operations in March 1937. By then, relations between Nazi Germany and the Soviet Union had deteriorated to a point where a joint venture was politically impossible. Deutsche Lufthansa took over the route through the Baltic countries, but a service to Moscow was reopened only after the unexpected German-Soviet nonaggression pact of August 1939 had temporarily brought the two countries closer to each other.timetableimages.com

Of course, I had to trace the cover. Mind, much of the appeal of the original is down to the artifacts produced from the printing process, which I didn’t replicate here. I gather there are now filters for Photoshop to create them though.

Original image via ffffound.

Iconic Birds

I saw this nice wine bottle design on The Dieline, and had to draw the little bird illustrations on them for myself. Just, because, you know. The bottle designs were done by the design director of Zeus Jones, Brad Surcey, and there’s more good stuff on the agency’s site.

Vexed Punctuation

Coudal linked to this interesting article on Art Lebedev about some common problems with typesetting punctuation, such as centering, tracking and bolding. I agree wholeheartedly with all of them, though I’m interested at the solution to the problem of how to punctuate smileys. I may be an old traditionalist here, but I think if you’ve got smileys in your text, you’re not going to be typesetting it. If you have to then you may as well set the smiley in Wingdings and treat it as a normal glyph, rather than leave it as two punctuation marks. Still, when typing in plain text and you’re prone to using smileys, here’s an idea of how to use punctuation with them.

Notice on the Art Lebedev site that the paragraphs are numbered? That’s interesting, no?

The Beta Label As Poor Excuse

Steve sent me a link to the all-new official site for the Prime Minister of the UK, which, incredibly, is in beta. Get that: The official online presence for the leader of (allegedly) the fifth richest country in the world is a crummy beta site with dodgy kerning, inconsistent use of typefaces, colours, rounded corners, spacing, and, well everything apart from general crumminess. Look at the masthead. It’s in Clarendon, Times New Roman Bold and Georgia. The typographic soup continues with the addition of Arial for body text (and oddly, some headlines too), and on a graphic, Copperplate. There are boxes with rounded corners at the top but not the bottom, containing images that also have rounded corners but where the curvature doesn’t match the container (and appears to be damaged by JPEG artifacting on most images). The site is a mess.


The masthead at the time of writing. Click the image to see a broader view of the home page.

The idea of adding features to the site such as YouTube, Twitter and Flickr feeds is a good one, and yes, these things can be a bit messy to integrate at first, but it’s not hard to get those things up and running in any design. The hard bits, especially for a site as prominent as this, is to ensure security, that the background infrastructure can handle the traffic and (importantly) all your content is written and entered into the site. Is this a site that got designed and implemented by several groups who never communicated? It looks like there may have been a design done at pitch stage, but largely ignored throughout development. A good, consistent design is vital for any site, and sticking to it is a must throughout all stages of development.

Still. All these things can be fixed. The design can be clarified, the layout can be rationalised, attention can be paid to consistency and quality, the HTML and CSS can be cleaned up, but it beggars the question, why did they launch an unfinished site and call it a beta? This is not what betas are about. This is arguably one of the most important sites representing the UK and should be implemented to the highest of standards, and yet they launched a crap blog and tried to cover their arses by calling it a beta. Very poor show indeed.

Hong Kong Patterns

I’ve had a link saved to these pictures for quite a while, and of course they’ve been linked from countless sites over the years, but hey, they’re still worth linking to again.

The thing that I’ve noticed about them is the effect of the small thumbnails all together. You click them and in a way some of the mystery is dispelled, as the smaller size allows you to see the overall pattern. They could be microchip designs or supermarket shelves, so I put them together at a couple of sizes below. To see the details there’s an original size one too.

Guilloches

Banknote patterns fascinate me. I can get lost for hours in all the details, seeing how the patterns fit together, how the lettering works, the tiny security ‘flaws’ - they’re amazing. Central to banknote designs are Guilloche patterns, which can be created mechanically with a geometric lathe, or more likely these days, mathematically. The mathematical process attracted me immediately as I don’t have a geometric lathe and nor do I have anywhere to put one. I do, however, have a computer, and at the point I first started playing with the designs (mid-2004) Illustrator and Photoshop had gained the ability to be scripted. So off I went, using the hypotrochoid equations on Mathworld to create rather rough and ready patterns - scripting at this point didn’t have a very usable set of functions for creating beziers, so I had to use crummy line segments. The process took ages and served just to prove to me that I could do it, but the results were too poor to go much further.

Then, a couple of years later I discovered Grapher on the Mac. Aha! Now here was a program that could create the patterns I was after and export to EPS. Well, kind of. It could create the patterns, most of the time, and export to EPS, though not always. I got a couple of patterns out of it and had a look round for other options. Again, not much - not much that I could afford, that is.


The basic hypertrochoid equation. This makes a nice rosette.

Then we get to now. I give Grapher another go, and at last, I can create and export patterns:


There are still some extremely frustrating limitations though. First of these is the resolution of drawing the graph. I’m sure for most graphs the default resolution is fine, but when creating these patterns you need tiny increments. Tiny tiny ones. If the line is going from one side of the graph to the other and back again a thousand times in a couple of radians, you don’t want the graph program to start dropping line segments, or corners, or anything really. Grapher does allow you to increase the resolution, but it’s not sticky - change anything in the equation and it pops right back to the default. Every. Single. Time. The same thing seems to happen with the line thickness too - I wanted all the designs to be at 0.1, but it kept changing it back to 1.0. Frustrating! There are a couple of other UI things I’d change, like having an option to keep axes at 1:1 ratio to each other, even when you resize the window.

Another, deeply irritating frustration with the whole process is to do with Illustrator. Try and open an exported EPS in it, and you get “An unknown error occurred”. Photoshop can accept the EPSs as placed objects, and InkScape can (eventually) open them, so Grapher seems to be outputting valid EPS files. I suspect that the number of lines in the graph is causing the premier vector editing app in the industry to fall over. Oh dear.

Still, after all this, I can still get the patterns made, and get them into an image editing program, which is quite something. Now I just need to find the magic numbers to create just the right patterns I want.


This beast creates the pattern above. The m is not strictly necessary for this one, but varying it is good for experimentation.

Note: I know there are programs devoted to creating these patterns - Excentro being apparently one of the most popular, but I’d rather use the software tools I already own first. I played a bit with Excentro and it certainly makes some things a hell of a lot easier - but I’ll hold off buying it for now until I’ve got an actual project I can use it for.

Note 2 (27th August 2010): I have since bought Excentro and have used it on several projects, including this one for Wired, and I can confirm it is an excellent tool. The UI is a little palette-heavy (it can feel a bit crowded) but is perfectly usable and extraordinarily powerful.

Fontpark

Coudal Partners linked to this rather nice toy by Morisawa & Company. My Japanese knowledge is rather woeful, so I don’t have very much more information than; it’s pretty, it’s fun, it has a very nice interface, and it appears to be promoting the sheer loveliness of Morisawa’s fonts, so please buy some. I was told by a Korean colleague that there are relatively few fonts available for East Asian languages compared to Western ones because of the sheer number of glyphs that need to be designed, so I would guess a new one would elicit at least a moderate fanfare. Maybe. Anyway, have a play - here are a few screenshots:



Watch the Baseline

I just followed a link to this interesting demo of the latest webkit wonders on Shaun Inman’s site. I’m excited of course by the possibilities that the transitions and effects could provide - from more responsive UIs to having vertical labels on a graph or spreadsheet without graphics or flash, for example - but, and there’s always a but in things like this, that baseline is seriously wonky. Oddly, Photoshop has this problem too - you can’t just rotate a chunk of text and have it maintain a smooth, straight baseline, so you end up converting text to outlines instead and having to start afresh with each content edit. Annoying!

Update: Shaun Inman got in touch directly and pointed me at the Safari Version 4 Developer Preview, which fixes the baseline issue, as you can see here.