Showing posts with label family typeface. Show all posts
Showing posts with label family typeface. Show all posts

Thursday, March 14, 2013

Hello World! Processing with Handwritten Fonts

This post will be a record of some fun I've been having with Processing, using fonts from Family Typeface project.
Fort those who don't know what Processing is, it is:
Processing is an open source programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks.
(via Wikipedia)

Processing.js uses JavaScript to allow Processing to be viewed on Web browsers. HOWEVER dealing with font files with Processing.js seems to get complicated (alsoko: Using custom fonts with processing.js) so I'm skipping that for now. I'm just gonna demonstrate it using screengrabs here. Any Processing.js font use tip is appreciated. The alsoko link above was a good read actually, tells useful things like it's better to use a .ttf files (of which I wasn't doing).

Any how, here are few directions that I've been trying:



1) Outputting using all fonts

When you have so many fonts, manually changing them is a pain in ass. Hence employing an automated process becomes greatly helpful.
Displaying “Hello!” in sequence of otf files turned out to be surprisingly easy.
What, on the other hand, turned out to be difficult was creating line breaks when each column reaches the height. I cheated by doing math myself and manually specifying the values for when to line break. That's sort of ridiculous and the code gets ugly as you can see bellow. Naturally, I need to find a better way of doing this, but this whole process of testing and figuring out things by myself is a part of the learning curve so it's all good (and fun).


2) Random font

Everytime you click the window, different font is being used:
It shades slowly so different typefaces overlap.
This code is pretty straight:


3) Type and random font

A variation from the idea above–when screen is being clicked, it changes the font. Difference is that instead of having a preset text, users can type in whatever text they want to display.
I used Andreas Schlegel's Control IP5 library for the textfield.
This has a lot of potential, me thinks.



For now things are basic but I'm hoping to build from those ideas. If this develops into some cool collision of analogue and digital, that would be super exciting.

プログラミングって数学ですねー。少なくともわたしのやろうとしている範囲の表現では、高度な数学を知っていることよりも、中学レベルの数学を「完璧」に出来るということが重要な気がします。なかなか自分の思ったようにいかないのが悔しいけれど、証明問題を解く感覚に似ていて楽しい。中高のとき、証明問題を解くの好きだったことを思い出します。
そういう意味では、本性的に向いている気もするし、細かい集中力に欠けていたりしてあまり向いていない気もしたり。どちらにせよ、もっとコードを使って表現出来るようになりたいです。

Tuesday, March 5, 2013

How to Create A Font Using Your Own Handwriting

Back in December, I had an opportunity to speak at the Pecha Kucha Tokyo event #98. My thank you goes to Mr. Jean Snow for inviting me there.
What is Pecha Kucha? Here's extract from their website:
PechaKucha 20x20 is a simple presentation format where you show 20 images, each for 20 seconds. The images advance automatically and you talk along to the images.
PechaKucha Nights are informal and fun gatherings where creative people get together and share their ideas, works, thoughts, holiday snaps -- just about anything, really -- in the PechaKucha 20x20 format.
I've been to few events in London and they are trailer-like-fun way of sitting through multiple presentations. Though regular events in Tokyo has a nice vibe and is a great place to socialize. Presenters as well as audience have a good balance of English and Japanese speakers, and that's a bit of a bonus for people like me.

Here's some photos from the night. Photography by amazing Michael Holmes:



And here's the presentation I did on my Family Typeface project:



For one thing I sound so nervous and now I am too embarrassed to watch that video above. I mean, really. I wanted to try this informal way of presenting (the spirit of Pecha Kucha i.e. chit chat) but my topic went all over the place and it seems I'm still too rookie to do a presentation without a good practice beforehand. And no, drinking before the presentation didn't really help. That being said, It was fun nonetheless, and I particularly enjoyed informal chit chat afterwards with audience.

What I ultimately wanted to say in the presentation (and I wasn't so clear there) was that I've been thinking lately about aim-less / client-less / design-for-sake-of-design creation is great for your soul. I love problem-solving aspect of graphic design, but I think graphic designers can also be motivated like how illustrators or photographers do their self-initiated work.

I think, by nature, graphic designers are problem seeker. I've been using the term problem seeker after hearing Christopher Simmons using it because it feels spot on. At the pecha kucha presentation I used terms like problem solver and consultant, but problem seeker seem expresses what I really wanted to say.

You have problem seeking side to graphic design on one hand, but it just is so much fun to do work for the sake of having fun. That was one of my biggest finding from this idea-driven brief-less project, making handwritten typefaces. My then tutor Joshua Trees at Central Saint Martins really encouraged me on this when I was in college.

In any case, since my pecha kucha was just an introductory one, and I don't think it was clear enough to make people create their own fonts, I'm going to go over how to create your own handwritten font here on this blog. I'm sure there are many other different ways to do this, but it doesn't hurt to know how I do it.

In many ways, it may seem as a cheat-way of creating a typeface. I hope I don't upset any typographers...


How to create font using your own handwriting

What you need
TypeTool is the software that people usually wouldn't have. It's a font-generating software. It's got some flaws, but generally speaking it is easy to use and do what it needs to do. It's probably not a cheap purchase if you want to create one font, but it's worth buying if you are planning to make several fonts in the future. As far as I know, this is as cheap as the font-generating software goes.

I use CS5 of Illustrator, but nothing too complicated is being done here; we are just vectorizing the scanned paper. I am assuming any version should be able to do it...?


Step 1) Write down letters

Write out all the letters you'd like to have.
I print out a form (I might make it available online if there's any need for this) to fill in because I've done it for quite many people. Though essentially, all you have to do is write out all the letters you want to have on a piece of paper.
Then scan the paper into your computer.
The scan quality doesn't matter so much, as long as the contrast between written letters and paper are clear. Format doesn't really matter too, as long as it can be read in Adobe Illustrator.

Just as a reference I give you my scan settings:
  • resolution: 200dpi
  • color mode: grayscale
  • dimension: approx. 1600 × 2300
  • file format: JPEG


Step 2) Vectorize letters on Adobe Illustrator 

Open Adobe Illustrator, drag and drop the scanned image directly onto a new artboard.
Make sure the image is selected, then click Live Trace. This prepares to vectorize your image.


Then, set Preset to Simple Trace. And click Expand.
The beauty of Simple Trace is not only it vectorizes the image but also it deletes any 'white bit'. So you are left with clean black-only vectors. You can change Threshold to the value you prefer too.
You can manually delete or modify any bits you don't fancy.



Step 3) Copy and paste each letter into TypeTool

Open TypeTool. Each box corresponds to specific letter. Double clicking the box pops Glyph window (shown at the right window of the image bellow). Copy (Ctrl + C / Cmd + C) each letter from Adobe Illustrator then paste (Ctrl + V / Cmd + V) on to each Glyph window in TypeTool.

Tip1: When you are copying in Illustrator, you probably have to double click the letter first as the whole vector is probably grouped.
Tip2: If you can't see any letter even when you paste it into TypeTool, Zoom out the window. It's something that TypeTool does: it doesn't paste at the center of the screen.



Step 4) Sort out tracking

Let's work on the spaces between each letters.
Go to Window > New Metrics Window.
Select Text Mode (the symbol that looks like I ), type out letters.
Select Metrics Mode (the symbol that looks like | M | ), you can select and by dragging and the each end of the letter, you can adjust the space that particular letter has.



Step 5) Name your font

Go to File > Font Info.
Here, you can name your font. This name is how appears as the name of font when one installs the font into the computer.



Step 6) Generate font

Go to File > Generate Font.
Here you can generate font that's ready to use. OTF is recommended, but you can also choose other font formats like TTF.

CONGRATULATIONS you just created a font using your own handwriting!

(The example above was done using Hyunho's handwriting. Check out his website here.)



I'm not a pro of TypeTool or designing typeface in general, but if you have any question by all means, drop me an email to info@shihoyokoyama.com I'll try my best to answer questions...


Friday, November 23, 2012

The Art of Handwriting

It's been quite a while but my degree show project was featured in the blog of Blueprint magazine... in August. Yeah this has been a while.

そういえば・・・な話なのですが、英国の建築雑誌Blueprintのブログに作品が8月に載りました。卒業生特集。

http://www.blueprintmagazine.co.uk/index.php/architecture/best-of-student-shows-2012/

I'm pleased that my work somehow made it to the eyes of prestigious architecture magazine. Maybe my pseudo-intellectual affection for architecture has finally paid off. That was worth it.

スクリーンショット、殺風景すぎる・・・。クールなサイトだなあ。
建築好きとしては、建築の雑誌に気に入ってくれて嬉しいです。この雑誌ちゃんと読んだことないけど、賢そうな雑誌です。

- - -

Also, I was fortunate enough to expand this project into larger community of people. i.e. even to the people who don't attend graphic design shows. Thank you to the publisher Pan Macmillan for running this campaign with me.

そんでもって、出版社Pan MacmillanとPhilip Hensherの新しい本、"The Missing Ink"のキャンペーンをやったりしました。
http://www.panmacmillan.com/missingink

The new book by Philip Hensher The Missing Ink is for handwriting lovers. The book explores the history and different stories/aspects around handwriting. Because the subject is handwriting, which is rather a hart-warming subject, the book makes a perfect gift option for Christmas. Available in Kindle too, which is definitely a big plus (making international gifts easier). A bit of a biased promotion aside, and even though I felt some bits more interesting than other, you can show off knowledge such as how much Hitler hated writing by hand, just like how I've been doing.

Well the only thing I can say is, I hope Mr. Hensher didn't mind my photo being featured rather large next to his book for the campaign site. It's a complete honor really.

You can see the handwriting of people who have participated here:
http://storify.com/zoldie/the-missing-ink
It's just great communicating with people like this way, especially since graphic designers don't usually get to see the faces of our audience and don't have opportunity to hear their reactions.

自分の顔がキャンペーンサイトに大きく載ってびびった。Hensherさんの本なのに、わたしがこんなに目立ってよかったのでしょうか。

キャンペーンは(たぶん)もう締め切っているものの、わたしは今これを納品している最中。頑張ってます。

キャンペーンを通じて色んな人が、ツイッターを通じて、自分の手書き文字を送ってくれて、なかなか面白かったです。わたしは、こういう作品を通じた交流が好きだなあと、手書きフォントプロジェクトの一連を通じて思ってます。

みんなの手書き文字の記録はこちらから見れます。
http://storify.com/zoldie/the-missing-ink

- - -

Some great feedbacks include like this one here by Gwyneth Holland:
こんなブログにも取り上げていただき、嬉しい限りです。
http://howthingsaredone.wordpress.com/2012/10/19/penmanship/

ちなみに、このプロジェクトが賞を取ったと書いてありますが、わたしの知る限りではなにも取ってません。もしわたしの知らないところで取っていたとしたら、誰か教えてください(もしくは、賞ください)。

- - -

To those who participated at my space in degree show, the project is very slowly progressing. I'm possibly one third done? If you send me an email with your name (and preferably which day you attended if you remember), I can work on yours first.

Note* I am not creating any more handwriting fonts unless you have taken part at the degree show.

- - -

I just realized I haven't really blogged about this project in full detail. I guess I've been thinking I should finish it before writing about it, but it's taking more time to complete than I have initially anticipated back in June. I'll really try to write about it sometime though. It has been one of the most exciting project I have ever done, and one of my favorite projects ever.