I Love Typography

The Making of Vesper

Vesper was developed over the course of almost three years. For this article, I’ve divided the process into two stages: #1 during my studies at the University of Reading; and #2 After Reading. Hopefully through this highly-condensed-yet-still-rather-wordy account of this project you will learn some interesting bits regarding my first major type family, the design process, and the MATD program.

intro

Part 1 – During the University of Reading’s MATD Program

Vesper began as my practical project while attending the MA in Typeface Design (MATD) program at the University of Reading (2006–07).

The course began in October and by November we were all sketching letters and trying to form concepts for our typefaces. Some were off and running quickly, others took some time to find their way. I was the latter. For months I struggled with one horrible idea after another—you would probably be shocked to see many of my early drawings.

My personal breakthrough came in the form of Fiona Ross’ north Indic workshop. This three day event sparked in me a strong interest in Devanagari and non-Latin typography. I decided to add a complementary Devanagari design to my type family and then began intensely practicing Devanagari lettering and calligraphy. These experiments directly inspired many of Vesper’s key stylistic features, as you will see below. Beyond simply influencing this project, my new-found passion for non-Latin typography has become a cornerstone of my interest in type design, research, and Mota Italic. I owe a major ‘Thank You’ to Fiona Ross for this.

latin-deva

The Regular Weight

The majority of development time at Reading was spent working the regular. More than any other weight or style, the regular is used the most and defines the feeling of the whole family. Finding the overall direction for the design was by far the most difficult part—especially defining how elements such as the curves and angles worked. But once I found the right path, progress was slow yet steady—rather uneventful actually. Most of my decisions about basic proportions, extender lengths, cap height, the amount of contrast, etc., were made intuitively. I used my eyes and personal preferences to decide, rather than measuring and comparing my design to other typefaces.

a-iterations

The Devanagari

Beginning a non-Latin script, or a non-native writing system, is a serious enough topic for a whole separate article. But briefly: after my jump-start from Fiona’s workshop, I continued practicing lettering on my own and by making use of the university’s significant typographic non-Latin collections. The two key factors in successfully approaching a complex project such as this were time and access to useful materials. I was able to spend countless hours consulting the libraries and archives in Reading and London where I examined old books, magazines, and newspapers; as well as studying font specimens and many items from Fiona’s personal collection. Reading also has a built-in support environment of advisors and friends who are both helpful and encouraging when starting a project like this.

hindi

Heavy and Italic

Bold weights are generally pretty closely related to the regular weight, but they can still have some variation. Vesper’s heavy is fairly straightforward; it’s a much fatter regular, featuring a higher stroke contrast.

Italics, on the other hand, can be radically different from the upright versions. It’s a challenge to find the right balance for the regular and italic: how similar or distinct should they be, while also neither being too conservative nor too extreme. Taking these challenges into consideration, I made many versions for the italic and spent a good deal of time before adopting the appropriate style and feel.

A common misconception about the MATD program is that students finish with complete typefaces—this could not be further from the truth. In my case, the regular weight was fairly complete; the Devanagari and heavy designs were decent (having a few hundred characters each), but the italic only had a lowercase and a sloped (and barely adjusted) set of capitals.

regular-heavy-italic

One of the tiniest aspects of the heavy and italic that has gotten some attention is the various ‘dots’ (i- & j-dots, period, comma, dieresis, dot accent, quote marks, etc…). They are interesting because as the weights change, the dots rotate and move into new positions. The ‘diamond’ shape is another crossover from Devanagari where its dots (the nukta and anusvara) are traditionally in a similar style. However, I felt the diamond dots were a little too distracting while reading large amounts of text. To counter this effect the dots were rotated to a more neutral, horizontal position in the light and regular weights which tones them down. Then as the emphasis gets dialled up, the dots stand up as well!

i-dots

Part 2 – After Reading

The amount of work to be done or redone after finishing the MATD course was astounding. Over the course of the next two years I redefined the character set (doubling the language support and glyph count), redrew the heavy and italic from scratch, then added additional weights and styles.

Re-Drawing the Heavy and Italic

After some time away from the designs, it was much easier to see some of the issues and evaluate how to change the heavy and italic. During my studies, there were some aspects of these designs that just didn’t seem right, or that I didn’t have the time or expertise to correct. Once I got back to work, it was actually quicker and more precise to simply redraw these two styles from scratch, rather than to adjust the old files. This sample shows some comparison between the old and new versions.

heavy-italic-redesigns

Heavy Italic

Bold/heavy italic is usually fun as a design, but not always such a joy to draw. This master in Vesper was deceptively difficult to get right. The main drawing happened in only a few days; but then the cleaning up, refining and getting all the nodes in just the right places took several extra weeks.

bold-italic

The Light Weights

The light masters were added later, somewhat as an after-thought. The regular weight was always intended to be strong and robust with a dark (printed) color. However, after considering a wider range of potential font users, I decided to include a slightly finer version. The light helps extend the scope of the family for when you need something a little more delicate, and permits a few extra words per page.

light-regular

Contextual Alternates

Throughout this process I learned that good spacing and kerning go a long way to making a design smooth and even, but there will always be difficult combinations. Particularly with serif designs, there will be both dark spots from letters touching; and large white gaps from them being too far apart. This is where Vesper’s most interesting feature comes in: contextual alternates.

contextual-alts-1

I spent a great amount of time looking at all the problematic letter combinations and came up with many alternates to help. There are over a hundred additional characters (including accented versions) that get automatically substituted in certain letter sequences. They are only subtly modified from the default shapes, but they can still make dramatic changes to the text. The key was to adjust the serif lengths and the angles of diagonal strokes in order to separate the individual letters by a fraction. This not only resolves most dark spots caused by collisions, but it also aids in reading by helping to identify each character more easily.

contextual-alts-2

Vesper for the Web

The latest step in Vesper’s development is to make it more useful for on-screen reading. This was not an initial goal of the design, but it has shown to work pretty well. We are at this very moment adding some intricate TT hinting to all the weights—this helps to make it even more clear and comfortable for use on the Web. It ships as .TTF OpenType fonts and is embeddable directly on your server. The updated packages will also include .woff, .eot, and .svg formats for all your embedding needs. These should all be available by the end of the year.

hinting

The Future of Vesper

Please feel free to let us know what you think of Vesper. We have many plans for future expansions, including sans serif versions, optical sizes, and further language support. Feedback from customers, friends, and critics is always appreciated—we are always happy to hear your input!


Tags:                       

  1. I am really enjoying Vesper - it is a beautiful typeface! Can’t wait to get a job it will suit perfectly!

  2. Wow, Rob.
    thanks for this great article with some more details of Vesper.
    I love it.

  3. Amazing. I have always enjoyed the creative process in creating a font or a font family.

  4. John, Rob, this is a good article. Thank you very much for publishing it. I think that this really shows how well the process of documenting a typeface’s development can be shown on a format like this blog’s.

    For me, Rob’s text hits all the right boxes. He describes typeface design as a process filled with revisions, and he thanks people who should be thanked (type isn’t designed in a vacuum). The text leaves me hungry for more information; each of this article’s sections could really be its own article… not just in the “Devanagari” bit, but also in the second-to-last point.

    I know Rob pretty well, so I’m not surprised by his modesty. But I wish that he would toot his Mota Italic horn a bit more. Vesper is a fully-fleged multi-script family with multiple weights and variants. I cannot think of many products on the market that can compete with it, at least in the Devanagari sector. Plus, Vesper is a family it is one that web designers can use online today, in just about any platform that will support web-embedding. Sure, there are already fonts
    offering this, with more every day. But Vesper WEB isn’t a vague promise, just results.

    This is just my opinion, but I think that good TrueType hinting is going to be quite important over the next few years. While I’ve never hinted a typeface myself, I’m pleased to see Rob acting on that front. I have the feeling that a lot of designers are willing to embrace virtually any technology when it comes to designing their own typefaces, but somehow draw a line in the same with TT-hinting. From what I’ve seen on the topic, it doesn’t seem to me like this is something that is an order of magnitude more difficult than say, designing non-Latin scripts, solving OpenType coding problems, or navigating alternative workflows and tools. I hope that Rob comes back to iLT when the “future” is here, and reports back on what he will still learn It is interesting to see where all of this will take him.

    Also, is this the first use of animated GIFs on iLT? I think that they work rather well in showing the before and after effects in type. Neat!

    As for the typeface, I think that it is great. Great? Vesper is very brave. It is bold, and its forms strikes out in new directions. I’ve heard it compared to sculpture. While old metal type was 3-D, I rarely here people talking about type-as-form. Lastly, Vesper was very inspiring to me when I was a student, even though I’m older than its designer. Hmm…

  5. This is a typeface that is especially beautiful at big sizes. There are some great angles and shapes. Top job.

  6. Fantastic typeface! I commend your efforts, I don’t think I’ve got the motivation or patience to spend that amount of time on something.

    I’m glad you’ve got something you’re now happy with.

  7. Rob, thanks for an amazing post. It’s really compelling reading to follow along on your process of designing Vesper. It would be great to see what a sans serif version might look like. It appears a really practical, down-to-earth face and this introduction is all I need to look into it further. Great job.

  8. svat

    Ha, the Devanagari sample says “sexiest Bond girls” (in English), very funny!

    This is beautiful, and it is great to see a Devanagari typeface with an extensive set of conjuncts, and Latin shapes that go so well with it. Great work!

  9. Beautiful font, and I love these process stories!

  10. Wow, this is seriously amazing and dedicated. I’m not a designer by trade, merely a hobbyist, but could see many interesting uses for this font!

  11. ati

    Vesper and this article are just as great as their creator. Chapeau!

  12. Two questions.

    What application is used in the last screenshot? I’m not sure.

    Secondly, do you know that because you’ve linked the screenshot to “http://xxx/” it redirects to xxx.com - A porn site! :)

  13. Amazing article. So useful points

  14. Cristiano

    I am not an expert in typography but I really like this typeface.

    I wish I could use it in typesetting math equations with LaTeX.
    I could write the scientific articles with the best font!

  15. Danny Zevallos

    Hate to bring this up but “Early Feburary 2007” is misspelled.

  16. sabithpocker

    “Sexiest Bond Girls”…. is what is written in Devanagari right?

  17. Hey everyone! Thank you all for the comments.

    Just a few replies:

    @Thomas— I am anxiously awaiting to see what you do with it!

    @Dan— You are too kind, and a great friend.

    @svat & @sabithpocker— You two got it :) That was actually taken from a newspaper headline I have here… I picked up an issue of the Dainik Bhaskar in London a bit after Casino Royal came out (which was around the time I was trying to name the typeface). But trying to sound out the Hindi in the headline made me stumble across the fact it was transliterated English.

    @Neil— The screenshot is from FontLab. Those extra panels are normally hidden unless you are working on TT hinting.

    @Danny— Thanks for catching the typo. I think I spend too much time looking at the letters and not enough actually reading them.

    Thank you again everyone for your interest and support for Vesper and Mota Italic!

  18. Beautiful! Thanks for the look into your thought process—interesting and useful.

  19. Very interesting article. You had to put a lot of work in it just to get the regular! But the result is very beautiful and useful.

  20. This is just beautiful. Great job and article.

  21. Excellent process. Love it! Very nice font.

  22. This offers some excellent insight into the detailed, all-consuming efforts that go into each individual letterform. Fantastic.

    I will be sharing this resource with my class during our introduction to typography and letterform anatomy. I love it!

    Much thanks.

    Windy May

  23. when are you writing on this blog again?

    i can´t wait!

  24. Looks great Rob. Can’t wait to see how it shapes up in a browser window.

    Rich

  25. That’s a very professional and classy font indeed - I’m glad all that time spent creating it paid off for you!

  26. Getting the chance to observe creative process is always interesting and educating at the same time. I’m not a type designer and watching your progress made me realize how much work it must be to create a full font, so I can only imagine the high emotional value to write a text with the very font you handcrafted over such a long period of time. Must be great!

    Thanks a ton for that insight!
    Johannes

  27. Sarang

    It’s a very sad typeface. you ppl are not evening the feel of the script. the people who are appreciating this are non Indic. Indic scripts are very curvy, the strokes are based on handwriting flow and has calligraphic mannerism. Please take a reverse / opposite latin 45% angle and practice Nirnay Sagar.

  28. Where can I Download Vesper ?
    And is it an unicode font. and What is the name of the program shown in screenshot above used to make font.

  29. Ujjwol,

    Being an OpenType font, Vesper is Unicode-encoded. You can license it from the Mota Italic webstore here:
    http://www.motaitalic.com/fonts/vesper/purchase-vesper/

    We created Vesper using FontLab (www.fontlab.com).

    Thanks,
    Sonja

  30. Thanks Sonja Keller for the info.

previous post: Our own alphabet

next post: Twenty-ten type

November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts January Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts december Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts May Fonts April Fonts March 2011 Fonts February 2011 Fonts January 2011 Fonts December 2010 Fonts November 2010 Fonts October 2010 Fonts September 2010 Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February 2010 featured fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts