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.

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

Typography on Streets of Thailand

I found pretty much everything written in Thai appealing. I suppose it's partly because I cannot read them at all and thus they appear exotic, but still, the curly-ness and small circles that come at the end of each Thai characters definitely adds cute factor.
You can also see that a decent amount of design you see on the streets are purely typographic, i.e. no use of images, which I massively approve. Yes I am comparing it to Japan, where they believe so much of so many things need cute-faced characters. Blimey.

タイは、タイポグラフィがイケてる国でした。
こう見ると日本は、街中に「可愛いキャラクター」やら「イラスト」やら「写真」が多すぎる。もっと文字のみで勝負すればいいのにね。

Thai characters often but not always end with little circles and I wondered whether or not those circles have some sort of serif-like functionality. I tried to decipher it by reading Wikipedia page on Thai alphabet and on the Japanese page said that apart from letters ก and ธ, there are always small circles (dots). That being said, depending on typefaces, those circle are simplified. Also some typefaces mimics forms of latin alphabets.
Interesting.

タイ文字は可愛かった！「読めない」からこそ、かっこよく映るというのもあるとは思うのですが、ヒンデゥー語やアラビア語っぽくはあるものの、タイ語の方が丸っこくて可愛い。ちなみに、話言語も柔らかくて可愛い。

そんなタイ文字によく付いている小さな丸の意味を調べてみたところ、

ほとんどの文字（子音では「ก」と「ธ」を除く）に小さい丸があるのが特徴的であるが、字体によっては丸が省略されたり、ラテン文字に似せたデザインもある。44の子音字からなり、大文字・小文字の区別はない。

（Wikipediaより）
だそうです。ふーん。


It seems though when it is handwritten, those circles are omitted:
ちなみに、手書き文字になると、丸は書かないみたい。ふーん。セリフに近い感覚ですな。

I even found vehicle registration plates appealing. I mean, so many shapes and styles! The way numbers and letters are embossed are so cool. Some people even framed their plates, for decorative purpose I suppose, so clearly Thai people also think that registration plate is a cool aspect of the vehicle too, right?
ナンバープレートもかっこよさげ。

I don't know if it's a traditional Thai thing or a Chinese influence but there were frequent usage of color red and that certainly brightened up already sunny streets of Thailand. Everything Royal Family related seemed to have decorative gold too. Colorful and fun all the way.

It does make me feel that such rawness seen everywhere in Thailand is so strong and appealing, what the hell am I doing as a designer. When we think we are sophisticating things, are we at the same time making things boring? Designers tend to believe that we are solving external problem, but it is also true to say that at the end of the day, design is always a product of designers' egoism.

華僑の影響か、赤の使用が多い点も、赤を見ると牛のように興奮するわたしとしては好感でした。

タイのこういうラフな感じこそがカッコいいというのは、デザイナーとしては、結構考えさせられる点でもあります。常にそうだとは思いませんが、洗練していく過程で、世界をつまらなくしていることは多いと思います。デザインは「人のため」なんていいつつも、結局のところデザインなんぞ、デザイナーのエゴの産物であるという自覚は必要なのかもしれません。なんてことを、ぼんやりと考えてみたり。


Lastly, this is a cool balcony we found in Phi Phi Don:

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

• a pen (bold marker is recommended)
• paper
• a scanner
• Adobe Illustrator 
• TypeTool
• a printer (optional) 

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...

Ikko Tanaka and On Type

I rushed to a last minute visit to the exhibition of a Japanese graphic designer Ikko Tanaka.
You may not know his name but his works are know internationally; he worked with Issey Miyake and he was the first art director for Muji.
His works coincide with the times when Japan was on the rise; full of vivid colors and optimism. His works resembled the paper cut works of Matisse for their colors and simplicity. The use of his colors are indeed very colorful but underlying principle of his work is the notion of subtraction, which led to the concept of Muji.

Above is the screenshot of google image search for Ikko Tanaka.

Not much point promoting the exhibition at the 21_21 Design Sight as it ends tomorrow, but it certainly was a joyful visit.

He designed this typeface Kocho, which was inspired by Tanaka's favorite typeface Bodoni.

It is a beautiful typeface, and it may be my favorite Japanese typeface of all. Even if you don't know how to read Japanese, Bodoni reference is clear; the high contrast of thick and the thins in the strokes. But then again, that is only mainly true for Kanji (Chinese) characters. Hiragana and Katakana are not Bodoni-like at all.
This made me think about how weird Hiragana and Katakana are like. Is it so that Hiragana and Katakana cannot have contrast within the strokes? It's interesting to look at Japanese characters now.


Since we are in the talks of typefaces, I recently came across fonts that Kate Moross sales online. They are rather lovely.

Bellow is her typeface FIN and you can purchase them here.


What else? I'm totally in love with the works of Louise Fili.
I don't want to repeatedly say beautiful but Fili's works are simply gorgeous. Warm but very sophisticated typography and lettering. I adore her logo for herself on her website.
Please visit her website to see more of her beautiful creations: louisefili.com
Her new book, Elegantissima: The Design and Typography of Louise Fili looks so delicious I would love to own a copy.

Last but not least, I'll briefly mention Marion Deuchars. Her works are recognizable for most Londoners as they are literally everywhere in London. Cass Art is the widely known one among many others.
Since people's handwriting has been an interest of mine in past few months and she is an illustrator that embraces the quality of handwriting very well; they seem to tell some personality.
Her website is mariondeuchars.com and you can find more works there.

Degree Show Signage WIP

Signage for the degree show is slowly but surely taking shapes.
Above is sexy Boo promoting Illustration pathway.
Bellow are the initial tests:

While Duarte is mainly responsible for the digital side and Esa for print, I have been in charge of signage for the degree show.
It is a rather slow process. We have already used 1.2km (!) of yarn so far and still counting. This signage idea could not have been executed by myself and is really a collaborative effort of people involved in this show. Thank you everyone who worked on it, I am especially grateful because I know everyone's all so very busy preparing for your own space for the show.
The signage is created by: JT, Alessia, Lillian, Boo, Clare, Kate, Kristina, Matt, Pietro, Duarte, Nathalie, Sara and Renata, Together, we are Cool Calm Collective.

It turned out, this is such a nice collaborative outcome to finish the course with. It involves a lot of people that I've never worked with before.
Still in a process of finishing up, but getting positive feedbacks around, we are pretty excited about it.


実際の空間（メタルのグリッド）とアイデンティティー（プリントとウェブに使われている黒い線）を繋ぐ、標識や看板のシステム。アイディアとしてはとてもエキサイティングなのだけれど、やり始めて自分ひとりでは絶対に終わらせることが出来ないということを悟り、Facebookで助けを求めたら、あまり親しくない友達までも助けてくれて、かなり感動。既に１.２キロメートル（！）もの毛糸を使い切り、ゆっくりではあるものの、卒展までには間に合いそうなので、一安心。

When you work in a pair, one needs to play a chicken in a cage role.

Yava for James Leevo

My Yava font was used for a German musician, James Leevo's album Home. Quite different feel from the implementation by vintage fashion Discode Vintage.
When I first put Yava font online, I wasn't expecting any of this to happen and it's quite exciting other creatives using my font.

Here is the trailer for his album Home:

Latest information can be found on James Leevo facebook page.

Yava for Discord Vintage

My font Yava has been used for the logo of an Australian vintage store Discord Vintage!

It's very nice of them to let me know about it, because this definitely got me excited! I know it's quite a hard typeface to use onscreen but they understood its limitations and I'm very happy with how they used Yava!
People using your font is quite a surprising experience. I'm happy and also secretly relieved to see something lovely coming out.
I'm especially liking their title for their Tumblr site.

Thank you Tee and Kym for featuring me on your newsletter and Tumblr too.
You can visit their Etsy site here for their lovely vintage clothes.

And you can download my Yava font for free from Da Font website. Number of downloads are 7000 and still counting....

Typo London 2011: Bitch, I Don't Know Your Life!!

All day long conference on the subject of typography.
It was overall a good day of learning (I've only attended the Saturday session), though I'm not sure the quality of those lectures have met the expectation that came with quite expensive tickets? There were many cases that the speaker didn't really talk about typography too.

My favorite speaker was probably Karin von Omteda. She's got a background in biology and she analyzes typefaces in a scientific way, but presents very fascinating visuals as outcomes.

Photo from her website's Type Diversity Poster page.

Apparently her work is in the current issue of Grafik magazine too.

By the way, "Bitch, I don't know your life!!" is apparently Chip Kidd's new mantra. I wasn't personally too found of his work, but he definitely had the funniest and most entertaining lecture of all. I don't usually read graphic novels, but I'd like to read his "Batman: Death by Design" once it's out.

Not just particularly about this conference but in general, it's quite interesting how I sometimes like what a designer (or an artist) says but not necessary like his work. Or I sometimes like his work but find him quite shallow in his speech. It's easy to be fooled that just because I liked a designer's lecture and found of what he's said, doesn't necessary mean that I find his design work amazing. Many times they go hand in hand, not necessary always.
It's maybe like, just because you get along as friends doesn't necessary mean you like each others' works, and vice versa?



３日間。朝の９時から夜の８時半まで。全日通しのチケットは７８０ポンド（約９万円・・・もちろん払ってません。運良く先生からタダでチケットが手に入ったので参加）。気合いの入ったタイポグラフィーのコンファレンス。でも、意外とタイポグラフィーに特化していなかったような・・・。

デザイナーのレクチャー（アイディア、思想）が好きということと、彼の作品が好きということは、まったくの別の話。思想が好きだと、作品も好きな気がしてしまうけれど、必ずしもそうではない。逆に、あまり考えが深くないデザイナーの作品にすごく惹かれてしまう場合もある。今回のコンファレンスは、作品がすごく好きなデザイナーのレクチャーが割とつまらなくて、すごく面白いレクチャーをしたデザイナーの作品を退屈だと感じるケースが多かった。

Yava Font Gets 5000+ Downloads

My Yava Font got 5,399 downloads!
I've completely forgotten about the fact I've put it on DaFont website, and when I accidentally came across my font, it already reached that many amounts of downloads. 5000+ downloads in 3 months seem quite impressive to me.

I didn't blogged about it nor advertised it, because I actually started working on a modified version, which I was planning of making available but still haven't got around finishing. The Beta version that is available on DaFont website has very thin strokes and needs to be used in quite a large point size. Since my Beta version seem to be quite successful, I may try charging a fee once the version with slightly thicker strokes is finished. Will see.

Meanwhile, Yava font Beta (PC and Mac) is available for free at DaFont website.


私の作ったフォントYavaが、気づいた頃には５０００ダウンロードを超えていて、びっくり。特にあまり考えずに、タダでダウンロード出来るように公表したのだけれど、結果としてダウンロードしてくれる人が５０００人いたということは嬉しい。
タダで自身の音楽を公開しているミュージシャンとかもこういう気持ちなのかな、と想像。

いずれ、もうちょっと太めで使いやすいバージョンをリリース出来たらいいな。とりあえずそれまでは DaFontのウェブサイトで無料バージョンがダウンロード出来ます。（PC、Mac共に対応。）

Richard Kindersley Studio Visit

Carving on stones sound like something from ancient times, but if we think about it, it still happens all the time. Richard Kindersley is a designer who specializes in typography and carving. We were lucky to have a chance to visit his studio last week.
What he does certainly has got a lot to do with craftsmanship, but at the same time he is a problem solver and a challenger, so what he does is 'design' without a doubt. He shared a lot of interesting stories with us but one thing that stuck with me is how he emphasized the importance of constantly pushing yourself to do new things. Clients come to you because they liked what you did in the past. They ask and expect things to be done in a similar way as how you have previously done. That, however, means that you are stuck with the same way of doing things. It's important for you to keep on trying something new as your personal projects, so that when client comes, you can show them not just your past but also your future.

「石に文字を掘る」なんて昔話みたいだけれど、当たり前だけれど今でもこうやって手作業で行っていて、そのような文字を石に掘るデザインを多く手がけるのがRichard Kindersley。彼率いるデザイン事務所に見学に行く機会を得れたのだけれど、これが意外とおもしろかった。割りと職人的な行為なのに、そこにあるのはれっきとしたデザイナーの姿勢で、新しいこと、おもしろいことにチャレンジし続けるかっこいいおじいちゃんデザイナーでした。
考えてみたこともない職業の話を色々聞けて、なるほどと関心しまくり。例えば、建物に掘る場合だと、例えイギリスの冬みたいな最低の気候（雨、湿気）でも、毎日現場に通って、少しずつ文字を掘らなければいけないとか。英語の文字の綴りを間違えた失敗談とか（石を彫るとなると、間違いを正すのは至難・・・）。ロンドンは空気が汚染されているから、深めに掘らないと、すぐに石が削れて文字が読みにくくなるとか。