What did typography look like in the original “Jetsons” television series?

Having designed a type font inspired by “The Jetsons,” it’s a fair question to ask what the typography of the original “Jetsons” television series looked like.

Answer: Not like Jetsonville. Not at all.

For a show with such amazingly futuristic architecture, the lettering seen on “The Jetsons” was pretty unremarkable. It’s pretty consistent with lettering that would have been seen elsewhere in 1962, when the show premiered on television.

Maybe the creators and animators felt the lettering had to be unremarkable, so that it could be read quickly. Or maybe they didn’t want the lettering to compete with the architecture.

Here are some examples of lettering from the original “Jetsons” television series.

What makes Jetsonville “quirky”?

Some of the keywords associated with Jetsonville are “quirky,” “playful,” and “fun.” What exactly is it that makes Jetsonville quirky and playful and fun?

Most normal typefaces have a directional stress. It may be vertical, or it may be angled, usually to the right. You can draw parallel lines between each letter, or through the middle of each letter, to see the stress. And the repetition of the stress gives a typeface its rhythm.

This stress derives from calligraphy, when handwriting was done with a pen dipped in ink. This is what gives letters based on calligraphy their thicks and thins and the direction of the letters’ stress.

The design of Jetsonville, on the other hand, is not based on calligraphy. Instead, it is based on architecture—specifically, an arch. And that arch is based on engineering, and that engineering is based on mathematics. That gives Jetsonville a very different feel from a calligraphic typeface.

Jetsonville is based on an arch, and that arch does indeed have thicks and thins. (I am contemplating a version of Jetsonville, called Jetsonville Wire, that does not have thicks and thins—all the strokes are a uniform weight.) The original arch that Jetsonville is built from was created with an oval Illustrator brush oriented vertically. The brush was moved in the shape of the arch, and that is what gives the arch its thicks and thins.

However, Jetsonville then plays with this idea of directional stress. It plays with it by rotating the arches in different directions for different letterforms. So, looking at a line of characters in Jetsonville, there are different directional stresses in different letters going on at the same time. The A and M, for example, have the thickest part of the arch at the top of the letter form. The B and D, however, have the thickest part of the arch on the right, and the C and K have the thickest part of the arch at the left. V and W have the thickest part of the arch at the bottom. J and L have the thickest part of the arch at the lower left and lower right.The stress, and the rhythm, are all over the place. 

Some people may find it unsettling. But I hope more people find it quirky, and playful, and fun.

At any rate, it’s different than a “usual” type font.

2018: Jetsonville development sketches from Design in Context

From the vault: Six sketch sheets I made in 2018 during the initial concepting and development of Jetsonville.

Notice the name at the top of this sheet: “Jetsonian.” I seem to remember that I was thinking of calling this new font “Jetsonian Gothic,” but I only wrote “Jetsonian.”

Here you can see the various futuristic graphic devices I was considering for the font: antennas, plain or with floating rings or springs; shapes on stilts to match the buildings in “The Jetsons”; “Forward Look” motion, inspired either by Chrysler or by Nike; triangular collars as worn by Jane Jetson; three horizontal lines; bullet shapes; Saturn shapes; trapezoidal screen shapes, with or without fins; kidney shapes; and the eventual shape I chose, parabolic arches.

This second sketch shows that I was at one time thinking of using Univers as my starting point. I was thinking about what letters would descend from other letters, and how the basic shapes of the letters, either round or square, could be distorted to be more futuristic.

This third sketch shows more experimentation, such as adding antennas to A, B, G, I, J and P; adding Saturn rings to O and Q; and using arches to construct A, B, D, E, F, K, L, M, R, S, W, X, Y and Z. The shapes of those letters in this sketch are very similar to the shapes of these uppercase letters in the finished font. No antennas, though, made it into the finished Jetsonville.

Fourth sketch: More character development and the start of formulating some design rules for the font.

This fifth sketch expands on the design rules for Jetsonville. On this sketch I start making notes about possible production processes (Illustrator or FontForge?). I also mapped out the method of creating the primal arch that I ended up using: drawing a parabolic arch in Illustrator and stroking it with an very thin oval brush with a vertical stress. (This primal arch is documented in the project’s website.) 

This sixth sketch shows not only the capital letters but also ideas for numerals, punctuation and other special characters. The designs shown here are very close to the finished Jetsonville font. And this sketch also shows that by this time I had arrived at the font’s appellation as “a fan font” and at the font’s final name—Jetsonville.

6.3 External feedback from Subject Matter Expert

I recently received some very helpful feedback and critique from Chank Diesel, the subject matter expert for this project. Click here for the “External feedback from Subject Matter Expert” slide deck.

From “Design in Context”: Jetsonville proposed design process

The idea for the Jetsonville font arose in 2018 during the “Design in Context” class at Minneapolis College of Art & Design (MCAD), one of the classes at the start of this academic degree program.

Here, from my archives, is my original proposal for the design of Jetsonville. With all the style variations I proposed in this document, I was nothing if not ambitious.

Wed., 9/26/2018

Jetsonville proposed design process

1. Find a parabolic arch from The Jetsons or an actual building from the same time period (late 1950 to early 1960). This will be the outside of the letterform stroke.

2. Find or construct a compatible arch for the inside of the letterform stroke.

3. Put two arches together as a unit from which letters will be constructed. End upright arch stroke (i.e. opening downward) with blunt horizontal cutoff.

4. This parabolic form can now be used to construct letterforms. 

• Form is intended to be duplicated and the resulting forms joined together to create letterforms.
• Form can be rotated 90 degrees.
• Form can be mirrored.
• Forms can be overlapped if desired. (Try it and see if it works.)
• Forms should not be stretched or compressed if possible.
• Created letterforms should fit into a traditional square. Letterforms should have a consistent height and a maximum width of the square.
• If the above square-proportioned letterforms are not feasible, the square could be extended horizontally to 125% or 130% to produce an extended or expanded typeface.

This will produce Jetsonville.

5. Blunt ends could be parabolically rounded to produce Jetsonville Rounded.

6. Either Jetsonville or Jetsonville Rounded could be obliqued to produce Jetsonville Oblique or Jetsonville Rounded Oblique. Letterforms would remain the same except for the slant; the oblique form would not be a true italic in that no letterforms would be drawn dramatically differently.

7. Either Jetsonville or Jetsonville Rounded could be outlined or inlined to produce Jetsonville Open or Jetsonville Rounded open. These typefaces could be used with black outline and white fill, or the outline could be one color and the fill could be another color.

8. Either Jetsonville or Jetsonville Rounded could have shading applied to make the letterforms appear three-dimensional. This would create Jetsonville Shaded and Jetsonville Rounded Shaded.

9. Either Jetsonville or Jetsonville Rounded could be distorted using an envelope or warp grid to produce as-yet-unnamed typeface variations. 

• The envelope would be a quadrilateral polygon, but the sides would each be a different length and each corner angle would be different.
• The baseline created by the envelope or grid could remain horizontal.
• Or the envelope or grid could result in the left side of the letterforms dipping below the baseline and the right side of the letterforms being on the implied horizontal baseline. Thus, almost every letterform would have a descender. This would not be too disruptive as current typesetting practices are well acquainted with the concept of descenders in type characters.

10. A range of different weights of Jetsonville could be produced by varying the stroke weight of the parabolic form used to construct the letter forms.

11. In all variations of the typeface it is important to keep the strokes weights, and therefore the typographic color of the letterforms, consistent.

Jetsonville character lineage chart (uppercase & numbers)

More sausage-making: A student in my cohort, who describes herself as a typography aficionado, asked if I was going to prepare a chart showing how all the various Jetsonville characters are related. That chart, for uppercase characters and numbers, is shown above.

One supposed typographic truism is that to design a font one first designs certain base characters, and then other characters are variations of those base characters. Jetsonville is probably unlike most other type fonts in that it has one base character—the arch—except the arch really isn’t a “character” as such (although it is available as an OpenType alternate glyph).

So, we take the base arch, add a crossbar, and we have “A”.

We turn the base arch upside-down and we have “V”. Widen the bottom of the arch for “U”, close the top of the widened arch for “O”, and add a tail to create “Q”.

Shorten the “V” arch and add a vertical stroke under the arch to create “Y”.

Rotate the “V” arch 90 degrees, flatten it and mirror it to make “0” (zero). Flatten the zero and stack another flattened zero on top of it to create “8”. Take the same flattened zero and add an angled stroke above it for “6” or add an angled stroke below it for “9”.

Rotate the base arch 90 degrees counter-clockwise to create “C”. Add another, smaller arch, opened up to about a 90-degree angle, to create “G”. Add a vertical stroke to the “C” to create “K”. Flatten the “C” and mirror it to create “X”.

Rotate the base arch 90 degrees clockwise and add a vertical stroke to create “D”. Compress the height of the arch by half (actually slightly less than half so the two arches overlap) to create “B”. Remove the vertical stroke for “3”. Mirror the “3” for “E”. Take the top half of top arch of the “E” and add a tapered vertical stroke and a thinner horizontal stroke to create “F”.

Remove the vertical stroke from the “B” and rotate the two arches 90 degrees counter-clockwise to create “M”. Rotate “M” 180 degrees to create “W”.

Take the bottom arch of the “E”, flip it horizontally, adjust the top edge of the arch so that it’s horizontal, and add a vertical and horizontal stroke to create “5”.

Remove the bottom horizontal arch from “B” to create “P”. Add back the bottom arch from “B”, but mirrored, and blend the two arches to create “R”. Remove the vertical stroke from “R” and mirror what’s left to create “S”. Mirror “S” and adjust the top and bottom of the character to create “Z”. Rotate  “Z” 90 degrees counter-clockwise and adjust to create “N”.

Rotate the base arch 180 degrees, flatten it, and add a dot derived from two arches, mirrored and filled in, to create “I”. Remove the dot and add a crossbar to create “T”. Lower the crossbar and add another “I” form to create “H”.

Remove the dot from “I” and add a diagonal stroke at the top to create “1”.

Open up the base arch to create “J”. Flip “J” slightly and adjust to create “L”. Rotate “L” 180 degrees and angle the vertical part of the arch to create “7”. Add a horizontal stroke on the baseline to create “2”.

Finally, make “L” half-height, angle the ascender and add a vertical stroke to create “4”.

And presto! Uppercase characters and numbers are ready to go!

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.