Week 7: The unofficial Jetsonville Oblique

I just did something a good typographer is never, ever, ever supposed to do. I created an italic version of Jetsonville—well, actually an oblique version—simply by slanting the roman version of the font by 12 degrees.

This is simply never done, and for very good reasons. With the advent of digital typesetters and digital fonts, it suddenly became possible to create a fake-italic version of a font by slanting the letters. The standard slant that I am familiar with is 12 degrees, but of course with digital fonts the letters can be slanted to whatever degree you want.

But what usually happens is that the font looks like exactly what it is: roman font characters that have been slanted, and therefore distorted. Round characters look strangely squashed. Slanted lines are suddenly uncomplementary widths depending on which way they slant. Slanting a roman to create fake italics does violence to the letterforms.

Another problem with slanting roman characters to create fake italics is that an italic version of a font usually has at least several, and often many, characters (often including “a”, “n”, and “u”, to name just three) that are completely different from the roman version of the font. This applies more to serif fonts, however; many sans-serif fonts do not exhibit these differences—and their slanted versions are therefore called “oblique” rather than “italic”. But even an oblique version cannot be simply slanted without distorting the letterforms in an unattractive way.

Nevertheless, I wanted to get an idea of what a Jetsonville Oblique would look like. So I slanted the letterforms (most of them, anyway) 12 degrees and saved the characters as a new version of Jetsonville. Looking at it, I see distortion problems—but they are less objectionable than I thought they would be. I can offer a possible reason for this: The design of Jetsonville is already so quirky and eccentric that the distortions introduced by slanting the letterforms are not as noticeable as they would be on a “normally” designed font.

I did not slant all the characters in the unofficial Jetsonville Oblique because there are certain characters that, even in an italic font, are not slanted. Slanted © and ® characters, for example, would look strange and awful, so even in an italic font they are left as roman characters.

Up to now only one other person besides the font’s creator has seen this version of Jetsonville, and he did not see the entire character set. But his comment on it (“That, my friend, is pretty tasty”) encouraged me to go ahead and create the entire Jetsonville Oblique font as a further trial balloon.

Enough explanation—shown below is the unofficial Jetsonville Oblique. 

6.A New component, third pass

It’s the end of week 6. During this past week I have received feedback from both my test users and my subject matter expert. Based on their feedback I have made some revisions to certain characters in the font.

But before I get into the modifications I have made to a few of Jetsonville’s characters, this week I also have created a first draft of the Jetsonville project webpage, to which I will post a link here. There’s still more to do on the website, but I think I’ve gotten a good start on it. Take a look.

Now, here’s the current version of the Jetsonville font incorporating changes based on feedback:

In the illustration above, modified characters are shown in red, and the previous versions of some of these characters are shown in a line at the bottom of the graphic. Here are the details on the modifications:

Lowercase “a”: I have had people tell me they liked the previous “a”, and I thought it was fun and cute. However, I also received some feedback that people wished it were more legible and easier to read. 

Well, that was version number 17 of the lowercase “a” for Jetsonville. I have spent a good deal of this week brainstorming and experimenting on more legible versions of “a” that will still fit with the rest of the font’s characters. I almost went with version 22, but then I had some more ideas. The version you see here is version 54. It’s not as eccentric as the previous “a”, and it’s not as fun. It doesn’t slant, and I thought the slant of the previous “a” added a nice motion and rhythm to the font. But I think the new “a” definitely makes for easier reading and I think it fits with the rest of the characters. So here it is.

Of course, changing the lowercase “a” meant I also then had to change all the accented characters and ligature characters that use the lowercase “a” as well. I changed them to match version 22, and then I changed them again to match version 54.

Lowercase “e”: I received feedback from more than one source that the lowercase “e” looked too wide among the rest of the letters. So I made it slightly narrower, and you know what? They were right! I think the “e” looks much better now at a slightly narrower width. (The new “a” above is the same slightly narrower width, and I think that’s one of the reasons the new “a” works better, too.)

How did I determine how much to narrow both of these characters? Previously they both used the same arch as the lowercase “c” and “d”, and they were the same width as these two letters. I narrowed the “a” and “e” so they are now the width of the arch in the lowercase “d”—up to the left edge of the vertical stem that is the ascender. As far as I’m concerned, that narrowing makes all the difference in the world as far as both typographic color and readability are concerned.

Lowercase “f”: One reviewer said they thought that the lowercase “f” looked unfinished or cut off. That was very perceptive of them, because the previous “f” was derived from the left half of the uppercase “A”. So, yes, it was “cut off.”

After I finished experimenting with the lowercase “a”, I spent a fair amount of time this week coming up with other versions of a lowercase “f”. You will notice that there are two “f” characters shown above. The first is slightly taller and slightly heavier than the second, and at this point I am not sure which works better. They are close enough that I don’t think I will include an alternate glyph in the finished font, but I need to use them both for a while to see which I think works better with the rest of the characters.

The previous “f” character was version 7. The two “f” characters shown above are versions 23 and 30.

Because of the design of these new “f” characters, there is no need for ligature characters for ff, fi, fl, ffi and ffl. The hook at the top of the “f” does not extend any further than the bar, and that is the design feature that the f-ligatures were designed to deal with. So no f-ligatures. To me, as a typographer, that is not a great loss, because I often track type to set it more tightly than normal. Because ligatures are a fixed character, tracking doesn’t alter the spacing between the various parts of the ligature. So when I tighten the tracking on a block of type, the ligatures suddenly look too loose and ruin the typographic color of a paragraph. No ligatures means I won’t have that problem.

Commercial-at sign: I received feedback from more than one source asking for a more conventional “@” sign. The usual design of the “@” sign is a lowercase “a” with a tail that whips and circles around the rest of the “a” in a counter-clockwise direction. The original “@” that I designed for Jetsonville had the tail whipping around in a clockwise direction, which I liked because it was unconventional. But, based on feedback, the tail of the “a” now whips around in the conventional counter-clockwise direction. The “a” that is part of the “@” sign is now also not the same as the rest of the “a”-based characters in the font—another change that I hope will make this new “@” more conventional, while still being distinctive.

Punctuation: I received feedback that the period, and all the other punctuation characters with dots, were too big. The only dots that weren’t too big were the dots over the “i” and “I”. So I made all the punctuation with dots the same size as the dots over the “i” characters. I think the new-size punctuation does look more comfortable and less attention-getting, so that was good feedback to get. I also, based on feedback I received, added a bit of space between the two dots on the open and close quote marks.

Lowercase “j”: One user asked if I could try a version of the lowercase “j” with the same hooked tail as the lowercase “g” and “y”. So I tried it. I didn’t like it. Part of what I like about the “i” and “j” pair in Jetsonville is that they look like siblings. With the hook on the “j”, that sibling relationship was lost. Originally I made the “i” and “j” similar as an homage to Futura, where the “j” also does not have a hook. So, for now, the “j” will stay as it was.

These character changes based on feedback will require me to regenerate the motion graphic I posted last week, because I don’t want the motion graphic showing outdated characters. But that’s a project for next week.

Other projects for next week: Keep working on the webpage, finishing it if possible; and, now that the font is pretty much done, work on the type specimen images.

4.3 User/Target Audience Feedback (yes, it’s out of order)

In addition to receiving feedback on the design of the Jetsonville font from other members of my capstone project cohort, I reached out to three members of the Twin Cities graphic-design community and requested feedback on Jetsonville.

Users from whom I received feedback

• Mike H., creative director, artist, designer of user experience and information architecture

• Heidi M., graphic designer, adjunct faculty at MCAD (instructor for the Design in Context class where Jetsonville got its start)

• Andrew B., graphic designer, photographer, graphic production artist

All three qualify as potential users of this font and members of the font’s target audience.

Connection method

E-mail. 

Content shared and questions asked

I sent each of these users a work-in-progress version of the Jetsonville OpenType-format font file and a list of questions:

1. Did the font install properly?

2. Did you encounter any usability problems?

3. What do you like about the design of the font?

4. What do you see that could be improved?

5. How do you see this font being used (for example, what types of projects or to create what kind of feeling/attitude)?

Feedback received

1. Did the font install properly?

Yes for everyone.

2. Did you encounter any usability problems?

No one encountered any usability problems.

3. What do you like about the design of the font?

Mike H: “My first impression of the design was that I liked the way the tapered curves played against the rigid, straight verticals. As I began to work with it, I felt like this is a great space-age font, but the more I worked with it the more a few other things bubbled up. It seems like there are hints of a deeper history, almost Mesopotamic cuneiform juxtaposed with a more distant, human-as-alien future. Don't get me wrong. I think it has great application as a retro-futurist/mid-century font. I just felt like it actually has more uses than that, which is kind of neat. I don't often see that in this type of display font.” Mike also commented, “That capital 'O' is really great as well.”

Heidi M.: “Jetsonville looks SO beautiful. It was really fun to work with and I found very few issues. Great job with all the punctuation—I love the commas and apostrophes. Overall, this is looking fantastic.” 

Andrew B: “Very readable. The default tracking and kerning appears good. Good decorative font. Probably a bit much for body text.”

4. What do you see that could be improved?

Mike H: “This feels like a font that will really sing when developed into the extremities of ultra-thin and bold. The dynamic in the way the lower-case 'a' is designed less vertically is really nice! I'd be curious to see what hints of that might do for the other letters, especially the lowercase, but maybe also the uppercase. But, that I fear might also destroy the expanded use I mentioned previously.”

Heidi M:

“• Are there any fun ligatures you could bring into play?

“• Your word spacing seems a bit tight in your capital alphabet. It's great for lowercase.

“• There are two lowercase letters that I'm struggling with—the ‘a’ and the ‘e.’ On the ‘a,’ it feels like the finial arm at the top is a bit closed in and close to the bowl. I'm tempted to tell you to extend the arm up a bit, but I can see how thoughtfully it lines up with the details in specific letter pairings (like a ‘z’). I love the overall shape, but I think legibility would improve if something was tweaked slightly. With the ‘e,’ if feels very horizontal when placed next to more vertical letters like ‘t’ and ‘h,’ which is important to note, since ‘the’ will be used often. There’s also quite a bit of negative space both above and below the curve, making pairings with a ‘p’ a bit awkward. I tried plugging in your capital ‘E’ as a lowercase letter, and that seemed to work better for me. 

“• I wonder if you could bring in a bit more character to the slashes and dashes by incorporating a bit of the tapering. I know you're using both straight and tapered lines throughout, so maybe this is where an alternative glyph could come in handy.

“• I have no doubt that you've spent many, many hours exploring options and details, so take this with a grain of salt.”

Andrew B: 

“• I can’t tell if I like repeating the shapes or not. 

“• A few of the special characters are too similar to letters: E and &, S and $, a and @.

“• The lower case ‘c’ and ‘e’ are too similar. There are many words where these will appear together (like necessary and pieces).

“• It might help to vary the characters a little bit more.

“• How would lower case ‘j’ look with a curved descender, like ‘y’?”

5. How do you see this font being used (for example, what types of projects or to create what kind of feeling/attitude)?

Mike H: “I can see this font being used to bridge the past and the future—a hopeful nostalgia. Of course, it would lend itself to drive-in movie theaters, diners, and book design, but there is something of a deeper past and more distant future (in time, space, and even evolution). In this I think it is strongest. Humanity as a race that spans eons.”

Mike H. also provided some feedback that I did not request (but was very glad and grateful to receive!), in the form of four usage examples he created:

Actions I am taking based on this feedback

Based on both this feedback and feedback from other students in my capstone cohort:

• I have already started exploring changes to the lowercase “a”,  “e” and “j” characters.

• I have already designed some default ligatures and have started exploring some ideas for other discretionary ligatures.

• I have already opened up the word spacing but might open it up further.

• I have already explored tapering of the dashes and slashes but might revisit that topic.

6.3 Capstone self-assessment

I have been asked to write a self-assessment of my progress so far on my capstone project. I will respond below to six requirements for capstone projects in the Master of Arts in Graphic and Web Design (MAGWD) program at Minneapolis College of Art & Design (MCAD).

 

Topic, resources, means of creation, and proposed components for messaging will be discussed and examined at a level of rigor appropriate for completion of the master's degree.

If one of the marks of “rigor” in an academic context is “academically, intellectually, and personally challenging” (source: “The Glossary of Education Reform,” www.edglossary.org/rigor/), my experience of this capstone project fits that description very well. During this capstone project I have been challenged—I think we all have been challenged—academically, intellectually, and personally.

“The Glossary of Education Reform” further states that “rigorous” assignments “encourage students to think critically, creatively, and more flexibly.” In completing the Jetsonville font I have used critical thinking and creativity, and I have certainly gotten some good practice at being flexible in my thinking!

One final point: “The Glossary of Educational Reform” describes a rigorous learning environment as one that is “stimulating, engaging, and supportive.” I think all three of these qualities apply very well to the capstone process as currently constituted—I have felt stimulated, engaged and supported throughout this process.

The project will be program-encompassing and representative of the Master of Arts in Graphic and Web Design.

I chose the completion of the Jetsonville font as my capstone project because it was the best example I could find of a project that would encapsulate what I have learned throughout both the Post-Baccalaureate Certificate program and the Master of Arts in Graphic and Web Design program.

In this project I am using concrete skills taught in various courses in this program including motion design, programming for the Web and, of course, typography. But beyond these concrete skills, I am using skills picked up in this program that are harder to pin down, such as a more finely developed sense of good design. This design sense, for example, not only lets me judge which of two letterforms will work better in the Jetsonville font, but also lets me analyze and understand why one letterform works and one doesn’t.

Research and collected data must be accurate and verifiable, with sources listed and accessible.

The Google Documents Research Archive Listing has been a fantastic tool for keeping track of my research. I have collected 27 research links so far, and the document is accessible anywhere in the world by anyone with the link from my progress platform.

Consistent documentation of process to further articulate intentions of what you’re making. 

As a writer, I thought that a blogging setup would be the best solution for this project’s progress platform. Now that I am more than halfway through this project, I think I made the right choice here. So far in six weeks I have made thirteen posts (this post will be the fourteenth), so that’s more than two posts a week.

But, having said that, there is still a lot more that I could write about this project, and that I want to write about this project.

In addition to other exhibition offerings and presentations, the final project, along with its process, will be accessible and discoverable for viewing as an online gallery.

A week ago I posted a website plan in my progress platform. It had forty-one pages. I have started figuring out some coding methods I want to use in constructing it, but I have not yet actually started construction. That will be one of my tasks for the next few weeks.

The project should allow for community engagement and partnership. 

Community engagement: I have received good feedback from three use testers, all of whom are accomplished members of the Twin Cities design community.

Partnership/Mentor/Subject Matter Expert: I have been in contact several times with Chank Diesel, a noted and distinguished Twin Cities typeface designer. I have submitted a version of the Jetsonville font to him, along with a list of questions about font distribution and marketing, and am awaiting his feedback on the Jetsonville font and his answers to my questions.

5.A New Component, Second Pass

It’s the end of Week 5, and the Jetsonville font is mostly finished (except for the Jetbats, which are still in the works).

Here is the current state of the Jetsonville font:

Please note that the new characters this week include three ligature characters: ff, fi and ffi. There are no ligatures for fl or ffl. I tried many designs for these two ligatures, and none of them worked as well as just the letters f and l. (A word like “souffle” will use the double-f ligature followed by an l.) The design of the f and l characters in Jetsonville is not conducive to ligatures—unlike the f and l characters in most fonts, where fl and ffl  ligatures are often a nice addition.

In the next few weeks I still may add some alternate alphabetic characters. But for now the Jetsonville font is complete enough that I can turn my attention to some of the other deliverables of this project.

For example, here is the current state of the motion-graphic type specimen for Jetsonville. To my mind, it’s pretty much done, actually. I started out to do an animatic (a preliminary version) and before I knew it I had created the actual video:

The video is also available on Vimeo here:

https://vimeo.com/435544850

A few notes about the video:

• The music track came first. It is a compilation of both the music that was used for the Jetsons opening and the music that was used for the closing credits (music composed by Hoyt Curtin). The intercutting was done using Adobe After Effects.
• Oh, there is also some non-Jetsons music for a few seconds at the beginning. This music, too, has space-age connotations. And notice the similarity between the melodic line of the opening music and the melodic line of the Jetsons theme.
• The voice track was created using text-to-speech software (LOVO Studio). It’s not as good as I would like it to be, but I think it’s better than I would have been able to do had I tried to voice the narration myself.
• The opening visual was taken from the opening of “The Jetsons.” In the original opening the zooming-in-to-Earth visual suddenly explodes into colored triangles that then disappear to show a blue sky with the Jetson’s flying car zooming through it. I updated the animated shatter to a more 21st-century After Effects shatter effect.
• The Jetsonville letters zooming in and out and around the sky were created using the Apple Keynote application, which has some amazing built-in special effects. The footage from Keynote was then imported into After Effects and the video was finalized in After Effects.
• The transition at the end of the video, where the blue sky is closed off by two sliding doors, one from the left followed by one from the right, is a nod to the end of the original Jetsons opening sequence.
• In 2018, during the “Design in Context” class for which the uppercase characters of Jetsonville were originally designed, I created another video to show off the Jetsonville characters. That video was also primarily created using Keynote. But it was much longer, because every one of the uppercase characters had a chance to frolic onscreen and be admired. But that video never received a soundtrack, and it was over 2-1/2 minutes long. With all the lowercase characters, numbers, punctuation and other special characters that are now part of the Jetsonville font, a video where every character gets to take a bow would be way too long. So the new video has a soundtrack and narration, shows the characters in groups, and is just over a minute long. That length will make this new video much more usable for my final capstone presentation.

Next steps, and request for feedback

Now that the Jetsonville motion graphic is pretty much done, the next things on my horizon are the website and the type specimen images. I have ideas for both of these, so it’s just a matter of putting something together based on my ideas.

How does this all seem to be working so far? Does anybody see something that isn’t working or that could be improved? If so, please let me know during our next meeting on Tuesday evening, and thanks!

5.3 Capstone Page Progress

Shown below are wireframes for my capstone project website summary page. This single-page website, through which the user will scroll (and scroll, and scroll), is intended to be a summary of the idea and process of this project that will live on and document the project after it has been completed.

I intend to use parallax scrolling, HTML5 animations, and a midcentury pastel color scheme, along with the Jetsonville blue-sky motif for certain segments of the website.

For Illustrator mavens: My blinding flash of the obvious

I am now at the point where I am ready to start creating accents and accented characters for Jetsonville. These characters are being created in Adobe Illustrator and then imported into FontSelf to create an actual OpenType-format font.

So far I have been building every character in its own Illustrator file and then importing the outline into FontSelf. I have already created several alternate characters, such as the o-e ligature, by duplicating the Illustrator file for lowercase o, opening the Illustrator file for lowercase e and copying the outline of the character, and then pasting the outline for the e into the duplicated file containing the lowercase o. After adjusting the two letter outlines so that they fit nicely, I saved the duplicated file with a new name and imported the o-e ligature into FontSelf.

Yesterday morning, as I contemplated starting to make the 56 accented uppercase and lowercase characters that the font needs, I had a “blinding flash of the obvious” concerning this process: There is no need to duplicate and rename all these files. I can simply add the accents to the existing letter files as new layers. Then I turn layers on and off to create the outlines I need and import the outlines into FontSelf.

Well, duh. Of course that would be simpler. This also means that if I fine-tune the outline of the base character, I only have to make the change once, and then turn layers on and off to import all the new character outlines into FontSelf. If I made the accented characters the way I was formerly planning to, I would have to open each file for each accented character and apply the same changes I applied to the base character. That would be a lot more work than using layers.

I could wonder why it took me so long to figure this out, but I would rather be grateful that I did figure it out before I started the process of creating all the accented characters.