Looking for someone with vector (Illustrator) experience for contract job

#1

We (WaniKani) are looking for someone to help us create original vector images of kanji radicals for use on WaniKani. I thought it would make sense to come to the WaniKani community first. You already “get” what radicals are, and maybe it would be nice to see your work appear in something that you and other WK members use on a daily basis.

Here’s our problem:

Currently, radicals are rendered differently depending on the font installed on the user’s computer. This would be fine, except not all of the radicals used on WaniKani actually exist as a type-able element. For those, we created images, but that means there is an inconsistency in how the radicals look. Depending on someone’s system font, most radicals will show up one way, and image-based-radicals will show up another.

In order to fix this, we would like to display all radicals as svg files.

But, if we do this, we can’t just make exact copies of an existing font. They will need to be original and drawn by hand (or mouse, or tablet, etc). Anyways, the important thing is that they’re not just exact tracings or duplicates of something that exists. That’s stealing, after all.

For the most part, we will just use the radicals from our radicals list (though there may be a handful of new radicals added to it).

There are 400+ of these that need to be produced. Some points on what we are looking for:

  • Medium weight: should be scalable whether displayed as small, or large.
  • Simple styling: should be mostly (or all) sans-serif.
  • Consistent sizing: in general, we want the radicals to look like they all belong as part of a set. In most cases, that means two sides of the radical should touch the edges of the canvas, either top and bottom (if radical is taller than it is wide) or right and left (if radical is wider than it is tall).
  • Original: similar to an existing font is okay, but these should not be copies or tracings of another font.

To apply, please submit three completed radicals in .ai or .eps file format for us to view. In your email, please tell us a little bit about yourself, why you would be good for this contract, as well as an estimate on how long you think it would take to complete all ~450 of these. Send that email to jobs+radicals@tofugu.com. Questions to that email, or even here on this thread, are okay too.

We will pay $2,500 for the completed project. Bonus may be applicable for extra speedy completion. This is a contract position.

#2

You say medium weight… Do you mean that like regular people mean it, or like “weight of 500” (where 400 is ‘regular’)

#3

Excellent question: we’re shooting for medium, the weight. If we go too heavy, it looks too chunky at small sizes, and too light looks wimpy at large sizes.

We’d love to have some options to make it slightly lighter or heavier to account for that, but it’s already enough work to generate all ~450 symbols. If the style accommodates it, we can explore using a slight stroke to adjust the weight. (Yes, the typographer in my head just shuddered, but he’s a pragmatic fellow and understands why we’d do that.)

#4

@oldbonsai,

How small do you want to be able to render?

I put together an SVG for the ‘bone’ radical to run some tests.
I used the same line-thickeness-to-height ratio as ‘medium weight (500)’.
You can see how it scaled below.

image

Modern fonts have per-character instructions for adjusting the glyph at small scale, which helps them scale well (see ‘hinting’). I noticed a few Windows fonts that suddenly jump to bitmapped fonts below a certain size for kanji. In the image above, I bitmapped one character manually to show the clarity difference.

You can tell the browser not to anti-alias svg, which is nice for making crisp lines, but it doesn’t tend to work well for fine detail like fonts. You can specifically design the svg so it will crisp up fairly nicely at a specific small size, but then the font may look blockish when scaled up (because all strokes would have to be laid out on an evenly spaced grid).

Anyway… You may be onto something with setting the stroke size. It’s worth an experiment at least.

If you want to play around with the radical above, here’s the svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M393,454.5V205H67V492h39V412H354l.5,39.5s2,21.5-21,21.5H285v39h54.5C368.5,512,393,489.5,393,454.5ZM106,244H353v49H106Zm0,130V331H353v43Z"/>
<path d="M403,139V0H48V139H0v80H39V179H419v40h38V139Zm-38.5-.5h-112v-30h112Zm0-68h-151v68H87.5v-99h277Z"/>
</svg>

You can import it into illustrator, or just save it with a .svg extension and open it in a browser.

#5

One more question:
Do you have specific reasons for going with svg over, say, creating an OTF font? OTF can contain both the vector for scaling, and bitmaps for small sizes.

Of course, the down side is that you’d have to specify a different font specifically for radicals… but it’s the same for svg.

I suppose it’s also harder to find people that can create an OTF than finding people that can use a vector package like illustrator. :slight_smile:

#6

Sharing the information over API, for one. It is easier to share SVG over an API then require a dependency.

#7

Ahh, that’s a good reason :slight_smile:

#8

So do you not want them to look like the existing font displays them? Should they be a little thinner? I’m just wondering if it would look odd to have them look too different, especially when displayed next to kanji (displayed as a font) that are also radicals. I hope that makes sense… ha

#9

The characters are being displayed using default system fonts, which the stylings vary somewhat differently between platforms (OS X [Hiragino], Windows [Yu for latest, Meiryo for older], Linux [a crapshoot]… and then there are the mobile OS…).

I think getting the styling as close to as neutral with the varying fonts (OS X and Windows) would be ideal.

#10

Sounds like it’s time for me to start fooling around in Illustrator.

#11

Haven’t heard if they’ve moved forward with this yet. It will be interesting to see how it will be integrated into the site.

#12