Formatting, Fonts and Frustrations, Oh My

This is the first of many posts about my experiences in starting a webcomic from scratch. I “published” my first Parkington Park webcomic on 9/1/17 but I’ve since “re-published” it about four times in the past few weeks. Why would anyone do such a thing? Formatting issues.

The Comic Format

Both traditional comics and webcomics handle the “formatting” issue in different ways. As any experienced comic or webcomic creator might tell you, the creator does NOT have the final say in how a comic is seen and read by various people around the world.

The traditional comic writer was always at the mercy of the publication his or her work was featured in. Different newspaper editors would make different decisions based on what needed to be on the pages that day. Would the comic be shrunk down to fit? Would it be flipped into a vertical layout? Would it change from one week to the next?

With webcomics the artist doesn’t have to worry about an over-zealous editor because he or she usually controls his or her own website and, to some extent, how the comic is distributed. But a creator does have to worry about the final delivery method: Comics can be read on desktop computers, laptops, tablets, phones and through different software and user-interfaces include Facebook, Twitter and whatever the next big social media company might be.

Virtual Reality

Third rendition of the Virtual Reality strip. It’s still a three panel strip and it’s still too horizontal for mobile use.

While developing Parkington Park I’ve mostly stuck with a horizontal strip format of 3 or 4 panels. This works great on a wide monitor and with today’s resolutions I was able to create a strip where you could easily see the detail and words. You wouldn’t have to scroll up and down to read the strip and you could quickly jump from one comic to the next with a single click. But I quickly learned that horizontal strips look awfully tiny on the mobile version of Facebook and Twitter, which both force you into a portrait (and thus narrower) vertical screen experience.

So my beautiful horizontal strips were being squished down to fit on the small, narrow, portrait sized screens…and you couldn’t see what was really happening. With a large percentage of any web traffic coming from mobile viewers these days, I thought it would be best to make my comic as mobile-friendly as possible.

First, that meant ditching a strictly horizontal strip and instead making it a little more “square” in shape. By reducing the width and adding some height to my three panel layout I could make the comic appear larger on mobile screens. Most of my comics were written with a three panel story flow in mind, but an odd number of panels doesn’t really work in a square, so I created a four panel square template as well. The new three panel strip is still readable in portrait mode provided there are not a lot of words. When the comic characters begin getting a bit verbose I have to switch it over to a four panel format for readability.

That also meant some re-writing had to be done to fit the words into a 4 panel format. Adding silly things is usually easier than taking them away for me so it might actually be fun to build out some stories.

The template panels were different enough in size that I had to remake each past comic to fit in the new panel sizes. That’s a tedious process and I’ve done it a few times before. The first five comics or so have been put together in Photoshop at least four different times over the course of a few months. While doing that I also re-designed all the meta info on the comic image so that it was actually legible.

After more testing I determined that you could finally see the comic on a mobile phone… But you still couldn’t read what they were saying.

Comic Fonts

More research and more test runs concluded that my font size, which looks fine on a desktop monitor running at 1680×1050 pixels, was actually impossible to see on a mobile phone. So I spent a fair bit of time experimenting with different font faces and sizes and came to the conclusion that font size is sort of a trade-off. Larger fonts are easier to read, but they take up so much space that you’ll have to limit your dialogue. Small fonts are difficult to read but allow you to have long, rambling conversations between the characters.

I like fonts that appear to be hand drawn but aren’t too sloppy or too neat. The general idea comic font in my mind is the lettering by Charles M. Schulz. It was easy to read clearly and contained a lot of warmth. For those who are curious, I started out using Anime Ace 2, then purchased and tried Action Figure BB and finally settled on LetterOMatic. All of these fonts are available from Blambot. If you’re starting a comic they’re a good resource not only for fonts but for a lot of the overall basic mechanics of drawing and designing a comic.

Once I settled on a font I still had to experiment with sizing to see what would be readable on a mobile phone screen. This website, in theory, is mobile friendly and formatted for smartphones, but even then the images are smaller than they should be. I don’t have the patience or CSS knowledge to make everything perfect, but I did enable the ability to pinch-zoom in and out of for your convenience.

When I took an informal survey of other webcomic sites (by visiting them on my iPhone) I found that most were not very mobile-friendly, so maybe Parkington Park is on the cutting edge!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.