Fork, clone or download: ufoJS on gitHub.

The Project

I was am tired of platform bound font editors, myself using Linux almost exclusively. Thus, beeing a web-developer most of my time, I naturally liked the idea of doing a font editor in the browser. So, last year I started porting parts of the Python libraries FontTools and RoboFab to JavaScript in my spare time. With the first goal of rendering the path data of UFO — Unified Font Object .glif files in a browser. Now, most of the ported code is based around the pen APIs and I can show you something.

Look at it.

On the left side you can see the example application included from the project folder using an iframe object to include it here. It discovers the available glyphs by reading the contents.plist file of an UFO font and renders the path data of the selected .glif file using SVG. The font you can see is the DemoFont.ufo taken from the RoboFab package.

Technical

The library can be used in Gecko and Webkit browsers and in NodeJS. The latter has some external dependencies. The Browser dependent parts are yet only in the sample application but use dojo as well.

Loading

For Module loading I am using an AMD (Asyncronous Module Definition) Loader. This nicely helps to organize code, is standardized and loads the stuff fast. In the browser facing code I'm using bdload. For nodeJs r.js of the requireJS project is utilized.

Testing

Check out the Test Page. This is done using the D.O.H: Dojo Objective Harness and this is the only thing you can run with nodeJS as well.

There’s an update at the bottom of this page.

...............................###.....##......................... ......##......................###......##......................... .....###......................##.................................. ..####..###.##..##.##.##.###..#####..###...###...####.###.##..###. .##.###..##.##.##.###..##.###.###.##..##..##.##.##.###.##.##.##.## ##...##..###..##...##..##..##.##..##..##.##....##...##.###..#####. ###.##...##...##...##..##..##.##..##..##.##....##...##.##...##.... .######..##...###.###..##.##..##..##..##.###.#.###.##..##...##..#. .....###.##....###.###.####...##..###.###.####..####...##....####. ##....##...............##......................................... ###..##................##......................................... .#####.................##.........................................

What to Do

Download the Fonts

Download the fonts package and enjoy writing with them:
graphicoreBitmapFont.tar.bz2 graphicoreBitmapFont.zip
all downloads

Obtain the Code

Have an eye on the code and then make everything better and more—or just use it: graphicoreBMFB. It’s written in Python and uses the great FontForge Python module to create outline fonts. You’ll need that, too.

Join Me

If you like this project or if the ideas keep on bubbling up from your subconsciousness leave me a message. If there’s enough interest in cooperation I’ll set up a central site for that.

Get Serious

If you need a custom typeface or special format that makes reading on your special matrix of special things pleasing, I’m your guy. Furthermore I’m good in internet issues and printed matter. If you value my work we might fit together. More information about my offer.

Donate

if you can afford it and appreciate what I’ve done.

The Styles and the Names

Each family of the graphicore Bitmap Font has its own characteristics. Because there is no system in the development of these characteristics I decided to number them—of course, I started counting at zero. Furthermore, it is easy to add new variants to the collection when new generators evolve. The drawback is that the name doesn’t describe what the font looks like.

The styles differ in their corner radius and where the corners are rounded. In the first three families all corners of each “pixel” are handled the same. The corner radius of the third family makes the pixels to circles and the family therefore to a “dot matrix”.

In the latter styles an algorithm decides where to draw rounded cornes. Number Three and Four have rounded corners where they should be. Five and Six add corners outside of the pixels, where actually is no content in the matrix. Seven and Eight got “outer” and “inner” rounded corners.

The Weights

I did twelve different weights for each family. Weight means that the aperture of the pixel-elements differs between the fonts, while the center doesn’t move.

Within the range of Thin to Regular the underlying grid becomes clearly visible, because of the gap that emerges between the items. Medium is the weight where the elements match exactly the grids width. The weights beyond Medium grow above the boundaries of the grid units and make the font bold. Finally, with Extra-Black, one pixel is more than double of the size of a grid unit and Ultra-Black goes even one step further. The families with “outer” rounded corners initially receive no weights lighter than Medium, because I’m not pleased with the outcome now.

To write on a screen at 8 px the Regular or the Book fonts are best suited, because the pixels are a little bit smaller than a grid unit thus preventing rounding errors. Medium should as well work good and be crisp. The bolder weights have their use cases at display sizes.

All-in-One

Because it looks so great I stacked all the fonts of a family combined on a pile. The bolder fonts become the outlines of lighter ones, that creates an All-in-One family overview.

the relaunch of my website is done. I will present my works here. I think the website is pretty much self-explanatory, so I will focus more the not so obvious things.

I decided to let the archive be empty at the beginning. So, dont't be surprised. That's because I want to take some time to process the projects appropriately. The page will evolve in a natural manner. After all a designer identifies himself with the documentation of his works—thus his portfolio.

There will be no comment feature. But I'm always excited about your emails and if its inevitable I'll let myself be carried away to fix it. The concern here is the presentation of my work and not the discussion about it. As well I don't want to moderate, what would be unavoidable with comments.

Announcement

As a birthday present of graphicore.de, as next action I'll publish the pixel font of the graphicore logo alongside with the code that built it, that I built, under a free license. The font now has ca. 220 glyphs and covers our western languages. The code is rather for tinkerers. Coming back pays off!

I have to answer this here. Because I built the Content Management System myself. Those who aren't up for the technics may leave now.

Markup

Graphicore.de validates here as XHTML 1.0 Strict. That's important to me. Granted, the content-type is text/html, but I have still the advantage of a strict syntax and its possible for me to use other XML tools on my output. An example in this case is the Atom-Feed.

Style

Progressive enhancement: I insisted on using some of the new CSS3 properties. Including gradients, pseudo elements, and naturally @font-fontface. It was important to me that the display works even in browsers that don't support these features. The better the browser the better the display, quite simple.

With 1000px the page is rather wide relative to our screen technology. In addition all contents load among one another and are therefore visible at the same time and directly compareable to each other. To keep the coherency of the layout I set up both a layout grid as well as a baseline grid. The execution is rather primitive compared to the available CSS-Frameworks. But in exchange it fits into 130 generous lines and meets my requirements. The baselinegrid works in all modern browsers ;)

Here it is: the grid is a 24px high and 99px wide image that gets repeated over and over again. When I wrote the CSS I had the image occasionally in the background to check against it. click here to see it in action(JavaScript must be enabled).

Dynamic

I implemented the concept of unobtrusive JavaScript. That means the page works without JavaScript. However, if JavaScript is available the entertainment factor rises.

For the dynamic behavior of the website with JavaScript I used the Dojo Toolkit for the first time. The handling of Dojo is similarly sleek as the handling of jQuery. I'm very satisfied with Dojo.

graphicore cache

One thing I'm particularly proud of is my way of caching Ajax-Requests. A request gets always loaded in between the previous request and the main-menu. Before a request is made, if the result is loaded already, the page directly jumps to that location—the content is not loaded again.
If nobody made that before, I'd like to call it "graphicore cache" ;)

Backend

I will make it shorter than the denseness of topic propably demands. But this post must come to an end, too. I built the backend using Zend Framework, Doctrine ORM and HTMLPurifier. Besides that one and a half Libraries that I cobbled together are employed.

i18n

One reason for me to build the backend myself was the rather bad support of existing solutions for internationalization. It's possible for me to localize all areas of the website and so I did.

Content Management

The site is running a custom made content management system. I made it with PHP5, Zend Framework, Doctrine ORM and HTMLPurifier. Cinecita.org is the technical predecessor of graphicore.de.

Internationalisation

English and Spanish where necessary. The most ready-to-use CMSs have mean support for Internationalisation. This CMS was planned from the beginneng with multiple languages in mind. Translation is the only thing to do, but if one translation is missing an available one is taken as fallback. Technically the number of languages is not limited.

Blog

The site has a totally integrated blog with built in ATOM and RSS newsfeed. Some parts of the website are altered by the staff of CineCita while they are on tour. They can use a WYSIWYG-editor and don’t have to mess around with HTML so much.

An Interactive Map

is providing a quick overview on the CineCita tour plan and lets the user navigate through the tourstops. The results of the workshops held by CineCita will be availabe there.

Animations

are transporting Emotions. You have to see this on the life site. The header is animated everywhere and when a submenu is loaded the little girl in the upper right corner is opening the curtain. No Flash was used at all, we tested how far we could go without it. Frontend tools where jQuery, jQuery Tools and of course XHTML 1.0 Strict

Ajax

Progressive enhancement ensures that the page works good without Javascript. However — when Javascript is running — the contents are cached and the page-frame must not be requested every time. This keeps the feeling of the page intact and improves the control over the animated curtain.

The Media Data is Outsourced

Videos

are the core media of CineCita. At workshops videos are produced by local girls and women. The videos are delivered by the good and scaleable services of Vimeo or YouTube.

The Embedded Slideshows

are loading image albums from Googles Picasa and displaying them in the article. The CineCita people are using this feature a lot in their blog articles to show the wonderful places they visit on their journey.

The code It is a very modified version of pwi - Picasa Webalbum Integrator. Best Thing: the heavy lifting of massive image delivery is done by Google.

The Graphic Design

is by 10hoch16.de.

The Project

The reality has landed in the toy shop. The collected cruelty of the world packet into puppet form. Now, the very little ones can learn through play in what a world they live in.

This project points with unique toys on relevant social topics. More Information on that is linked directly with the Products.

The Technique

The whole site is static, but generated by a PHP script. We have decided so because the site had to be very portable—it had to work from a thumb drive. At the same time the most advantages of a dynamic solution are kept—one can make updates fast and centrally.

I have made the realization of the website. Therefor I used PHP5, HTML, CSS and JavaScript. The site validates as XHTML 1.0 Strict.

Concept and Graphics

The design of the content and graphics of Toytoytoys was made by Zehn hoch Sechzehn.

• www.amnesty.de
• www.unicef.de
• www.kindersoldaten.de
• www.unhcr.de
• www.vielfalt-tut-gut.de
• www.greenpeace.de
• www.helpedia.de
• www.caritas-international.de
• www.nacoa.de
• www.fruehehilfen.de

The exhibition concerned with the topic basement — more precise, the discovery and interpretation of different semantic dimensions of basement rooms — and took place in the basement and thus the advertising had to invite to the basement. An audacious basement staircase visualizes the step into the underworld.

The poster advertising in Marburg was applied double-staged. First the stairs should hang resplendent alone, a few days later the information was added. In the meantime the people had taken with them numerous posters — which I take for a compliment.

The story of the project is at the abraum blog.

The Abraum-logo is made by Christina Willkomm.

Building the bridge from basement to White Cube the catalog was a plainly designed, quadratic booklet. It explanatorily led the visitors through the exhibits.

Concept

The Idea is to send people in their city with a distinct task—the search for wild animals. As a result they have to perceive their environment in a different manner – as habitat for wild animals. This was inspired by the situationist praxis of Dérive, see also psychogeography. The »Handbuch der wildwachsenden Großstadtpflanzen« by Helmut Völter takes a similar line, too.

The Book is my »Diplom« thesis. I have conceived, written and designed it. I was supervised by Alexander Branczyk and prof Jay Rutherford. Summer term 2008, Faculty Design, Bauhaus-University Weimar.

Content

The Book is introducing in general tactics of tracking down wild metropolitans at the beginning. Later, the peculiarities of the animal species themselves are scrutinised. In the rear part of the book the habitats in the city are gone into. Concluding a list of all wild mamals that occur in the city is to be found.

Additional Spice

is given to the idea of the field trip, because the reader has to snap the appropriate animal pictures himself. Merely the pages are prepared so that images on standard 4 × 6 inch photo paper can be inserted.

In order that the book doesn’t diverge—in its capacity as photo album—extra material had to be brought into the spine as a placeholder. The spine is broad enough to take all pictures.

Details

There is a matching cross-reference between the animals and their habitats, so one doesn’t lose the way in the book. A running head had to be there, too. The design of the pages complies with a layout grid and the baseline grid.

The chance of the attendance at a design competition of postage stamps one seldom gets. I sent a fancy layout even though the advisory council for art of the German ministry of finance often favors conventional design. The layout wasn't chosen—I still like it.

The typeface is FF Seria by Martin Majoor. The design was supervised by professor Jay Rutherford at the Bauhaus-University Weimar in the summer term 2007.

The documentation of our works is at die-turbine.de. There it’s full of thrilling media and cool ideas.

Turbine is

• Beni von Alemann
• Anne Gorke
• Julian Wagner
• Kari Wolf
• Uli Schöberl
• Tanja Sannwald
• Jens Ole Mayer
• Piet Machat
• Max Lisewski
• Simon Kiepe
• Daniel Klapsing
• Thomas Gnahm
• Lasse Fister

that would make it possible to write in an elegant floral garment on the walls of your home. As illustration of that idea we’ve made this image back then in 2005.

The font is Warnock Pro Regular. The floral filling of the characters was fitted in elaborate manual work.

The small g has become one of the most beautiful chars.

The subliminal message is read prettiest in defoliated state: »argwohn«. That’s German for “suspicion”.

In the finished artwork the type steps back but is denser overgrown than the it surrounding similar pattern. So the wallpaper is less obtrusive—in turn more homelike. The original design is 5,58 meter to 2,56 meter in size.

The Typete was exhibited in the course of Aldi Huxley, schöne neue Warenwelt (brave new product-world) at the Design Mai Youngsters 2005 and at the Rundgang 2005 of the Bauhaus-Universiy Weimar.

It originated 2005 in the projekt »Schnellmodus International«. It was supervised by Alexander Branczyk and designed by Tanja Sannwald, Johanna Schiegnitz, Daniel Graf and Lasse Fister.

The Typete attended the 2005 competition “New Walls, Please!” and appeared commendatory alluded in the catalog of the competition.