Slenderman

    <figure>
        <a href="http://lab.tylergaw.com/slenderman">
            <img src="https://tylergaw.com/articles/assets/post-image-slenderman-intro.png" alt="Slenderman in use">
        </a>
    </figure>
    <p class="entry-intro">
        Fonts have always felt like a black box to me. The thought of creating
        a new one seemed like a task reserved for a select few with decades
        of experience, a deep knowledge of typography, and cumbersome,
        expensive software. Not me, I thought. I proved myself wrong by
        making my first font,
        <a href="http://lab.tylergaw.com/slenderman">Slenderman</a>.
    </p>
    <h2>Made to Scratch an Itch</h2>
    <p>
        I’m working on a small design project that felt like it needed hand drawn type.
        I could have gone the route of using images, but
        that just doesn’t feel right on the Web these days.
        I want my web type to be scalable and maintainable. Using images for
        type is neither of those. It was clear that I’d need to either find an
        existing font that fit the style I wanted, or create my own.
    </p>
    <p>
        I didn’t look around for existing fonts that fit. I jumped straight
        to creating my own. The project is a personal one so there’s no
        time limit. When I have that choice I love to let projects expand to
        as many different areas as they need to. This same project also led
        me down the path of building <a href="https://tylergaw.com/articles/webvtt-cuemarker">another small tool</a>
        for working with HTML video subtitles.
    </p>
    <h2>The Process</h2>
    <p>
        I knew how I wanted the capital letters to look from the outset. I
        started by just drawing them out on paper. My first thought for the
        lowercase letters was to make them not match the style of the caps,
        but to be a complement to them. I though a cursive handwriting style
        would be a nice contrast to the tall, skinny caps.
    </p>
    <figure>
        <img src="https://tylergaw.com/articles/assets/post-image-slenderman-sketch01.jpg" alt="Initial pen and paper sketches of Slenderman">
        <figcaption>Capital and unused lowercase letter sketches</figcaption>
    </figure>
    <p>
        After drawing the letters, I scanned them and used Illustrator’s
        Live Trace to convert them to vectors. The cursive lowercase letters didn’t
        convert well. They lost a lot of detail, and just kind of turned
        into muck. It was clear they weren’t going to work out so I ditched them.
    </p>
    <p>
        I went back to the pen and paper and drew a new set of lowercase
        letters as well as the numbers, punctuation, and assorted symbols.
        You can see in the drawing that the “@” and “&” are tough to decide on.
        I followed the same scan then Live Trace with these.
    </p>
    <figure>
        <img src="https://tylergaw.com/articles/assets/post-image-slenderman-sketch02.jpg" alt="Initial pen and paper sketches of Slenderman">
        <figcaption>Numbers, punctuation, symbols, and two sets of lowercase letter sketches</figcaption>
    </figure>
    <p>
        With all the characters drawn, scanned, and converted to vector the next
        step was to start refining them. All the charaters needed to have similar
        stroke weights, similar widths and heights, and a handful of other
        defining characteristics to make them feel like a family.
    </p>
    <p>
        I started with the capital letters. They converted to vector really well.
        For them I mostly just needed to make sure each letter was the
        correct width and height. I also needed to remove extra, uneeded
        points that Live Trace had added during conversion.
    </p>
    <figure>
        <img src="https://tylergaw.com/articles/assets/post-image-slenderman-vector-caps.jpg" alt="A few Slenderman capital letters in Illustrator">
        <figcaption>Working with the capital letters in Illustrator</figcaption>
    </figure>
    <p>
        While I was refining each capital letter, I was bringing each into
        <a href="http://glyphsapp.com/glyphs-mini/">Glyphs Mini</a>, my font
        editor of choice. It allows vectors to be pasted in from Illustrator.
        Once the vector is in Glyphs I could set the position and spacing.
        Glyphs also allows characters to be typed out in
        the edit tab to get a real feel for how each one interacts
        with the others. This allows for creating kerning pairs of characters.
    </p>
    <figure>
        <img src="https://tylergaw.com/articles/assets/post-image-slenderman-glyphs01.jpg" alt="Editing Slenderman glyphs using Glyphs Mini">
        <figcaption>Glyphs Mini edit tab</figcaption>
    </figure>
    <p>
        The refining process for the lowercase letters took a lot more work
        than the capitals. For each of the 26 letters, I needed to make the strokes narrower,
        and for a lot of them completely change the shape from what I had
        drawn. This involved manually moving the points that made up each
        letter. It felt a lot like the original vectors were chunks of
        rough granite that I needed to chisel down into their final forms.
        As you can imagine, it’s a long, slow process.
    </p>
    <p>
        I followed the same process for the punctuation, numbers, and symbols.
        While I was refining the numbers, I did get a little overzealous. I
        ended up chipping away a bit too much off each one, leaving them very
        skinny. When they were next to other characters it looked like they
        were from a different family. This required me to go back and make
        each number a bit heavier. Lesson learned; compare each character to
        as many others as you can while you’re tweaking the vectors.
    </p>
    <figure>
        <img src="https://tylergaw.com/articles/assets/post-image-slenderman-glyphs02.jpg" alt="A view of most of the glyphs of Slenderman in Glyphs Mini">
        <figcaption>A bird’s-eye view of Slenderman</figcaption>
    </figure>
    <p>
        Glyphs Mini allows for exporting to the OpenType format. While I was adding characters
        I wanted to get a better feel for how they were working. I would export
        the font, install it and then open up a test Photoshop document. Seeing
        full sentences and different combinations of letters, numbers, and symbols
        is really key to determining if things are working. I could better
        see any issues with spacing and sizing and pick out pairs of
        characters that could use attention to kerning. Also, it’s a really
        great feeling to be able to use a font after spending so much time
        working with it.
    </p>
    <figure>
        <img src="https://tylergaw.com/articles/assets/post-image-slenderman-tester-psd.jpg" alt="Testing Slenderman in Photoshop">
        <figcaption>Testing Slenderman in Photoshop</figcaption>
    </figure>

    <h2>Detail of a Gotcha</h2>
    <p>
        This is very specific to users of Glyphs Mini, but I spent a few hours
        banging my head against the desk before I figured it out
        so I’m going to write about it in the hopes that I’ll save some
        other poor soul’s forehead.
    </p>
    <p>
        Glyphs has components. A component is a Glyph that is made
        up of a base glyph. Example components are right and left double quotes
        and the ellipsis; made up of right and left single quotes and the period,
        respectively. When you open a component to edit, the base
        glyph is grayed out, it seems like it is uneditable. It also only shows
        the base glyph. In the case of double quotes only a single right
        or left quote is shown. For the ellipsis only a single period. For some reason
        Glyphs stacks the base glyphs on top of each other. The base
        glyph needs to be clicked and dragged to reveal the other base glyph(s)
        under it. I found this answer on the
        <a href="http://glyphsapp.com/forums/index.php?action=vthread&forum=1&topic=282">Glyphs forum</a>.
    </p>
    <p>
        Part two of the gotcha took longer to figure out. After I’d separated
        the base glyphs of the compenents, I spaced them, tested them with
        other characters in the edit tab, and exported like normal.
        Then I tried to use right and left double quotes and the ellipsis. Nothing
        would show up. I could tell the glyph exported because I didn’t get
        the usual missing glyph character and neither Photoshop nor TextEdit
        tried to replace it with another font. This seemed like one of those
        what in the hell?!/computer voodoo moments.
    </p>
    <p>
        <b>Cmd + Shift + D</b> was the magic key combo that ended my confusion.
        Components need to be Decomposed before they can be exported properly.
        The option is available under the Glyph menu > Decompose Components.
        Once a component is decomposed it is no longer tied to a base glyph
        so it can be edited like any other glyph and it exports normally.
    </p>

    <h2>Slenderman is Open Source</h2>
    <p>
        I’ve always felt like when I download a font that’s that. The font is
        done and nothing can be added or modified. This might not be the
        reality, but without a knowledge of how fonts are
        made, that’s how I’ve seen things. With Slenderman, I’m not aiming for
        it being “done”. I want to keep iterating and improving on it.
        All of the source files are available on
        <a href="https://github.com/tylergaw/slenderman">GitHub</a>. That means
        anybody can fork the repo and make any changes or additions needed.
        They can make new versions of it that fit their needs, or open Pull
        Requests to have their changes added into the main fork of Slenderman.
        I haven’t seen that before and I’m interested in seeing if anyone
        is interested in working on it.
    </p>

    <h2>What Did I Learn?</h2>
    <p>
        Slenderman does not make me a typographer by any means. It did open up
        the possibilty though. Working on it has given me a greater
        appreciation for the skill and patience required to create the
        beautiful type that we use and often take for granted.
    </p>
    <p>
        <i>Thanks for reading</i>
    </p>