WEEK 9 - WEEK 11 PROJECT 2; FONT DESIGN

25/10/2017-15/11/2017  Week 9 - Week 11

Ashila Putri Sandi [0332938]

Typography and Hypertextuality

Project 2 Font Design

Lecture/Tutorial (Week 9) :

We didn’t have a tutorial s on this week. Mr. Vinod just gave us a brief about our second project which was Font Design. Thus, we were told to make our own sketches for our font and continue to digitize it at home.

Lecture/Tutorial (Week 10): Letter Spacing, Display Font

On week 10 Mr. Vinod gave us a lecture session about letter spacing and display font. The display font should have a very subtle character differences. The first thing Mr. Vinod told us was kerning. Kerning is when you minus space (alt+left/right arrow). Tracking is when you decrease the space in one paragraph, there are loose tracking and tight tracking. When dealing with reading, even spacing is very important. For example, when you half close your eyes your negative and positive space must be even, and we were told to always keep the distance at 5.

Fig 1.1 Kerning accessed from https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Kerning_EN.svg/1200px-Kerning_EN.svg.png

Fig 1.2 Leading and Tracking accessed from http://www.companyfolders.com/blog/media/2015/07/leading-tracking.jpg

Fig 1.3 Example of Counterform accessed from https://i.pinimg.com/736x/38/da/ea/38daea3fd43f122698adb285d7834bac--positive-and-negative-negative-space.jpg

When designers who design text fonts, they design the letter-space for the purpose of reading. During the 70s the trend was to have a very little letter spacing. Uppercase letterforms are drawn to be able to stand on their own. Next, counter-form is the form in between of the letter and it must look good. When you are looking at a letter, you’ll recognize the shape, not the letter itself. Alignment is an arrangement in a straight line or incorrect relative positions. We should use center alignment sparingly. In books, they don’t use center alignment because your eyes start from the same point where the text started. We still have to do kerning and letter spacing. There are types of alignments:

Fig 1.3 Alignment Example 

Flush left: this format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even grey value 

Centred: center alignment has to be used sparingly. This format imposes symmetry upon the text, assigning equal value to weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature because centered type creates such a strong shape on the page. 

Flush right: This format places emphasis on the end of a line as opposed to its start, it can be useful in situations like captions where the relationship between text and image the same

Justified: Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing the spaces between words and sometimes between letters. If you have any words less than 50-60 in a sentence the justified will have a lot of wholes and it does not match the point size. 

Different typefaces suit different messages. A good typographer has to know which typeface best suits the message. Some typefaces tend to look darker, for example comparing Caslon and Baskerville, Baskerville tends to look darker, you can see it when you half close your eyes. When you choose the typeface you want to do, you need to half close your eyes and picture them. The goal in setting text type is to allow for easy, prolonged reading. At the same time, a field of type should occupy the page as much as the photograph does. A book is well designed when you find that you are compelled to read. If a book is designed properly, the digestion of that information will be better. Leading is the space between the lines or sometimes called line spacing. If your line length is short you need shorter leading and vice versa. A good rule is to keep line length from 35-65 characters. The ideal would be 45-55. Mr. Vinod showed us a lot of stuff of Sussana Licko pictograph. If you find a part of your text that has no middle gray value, then your test is too dark. When you’re typesetting text, enlarge to 400% to see what the form looks like.

Fig 1.4 One of the Pictogram in 'Poppi' by Martin Friedl
accessed from https://i.pinimg.com/originals/02/c3/88/02c38834cf9abf3857c0b48c4e36a4bb.jpg

Mr. Vinod also showed us a few example in the books where the first book shows how people used to write different leading to see how it would look like. After that Mr. Vinod started talking about how back then, people had to learn how to write certain typefaces in order to see how they look like on paper. In comparison to now, everything can be done easily and digitally. Furthermore, Mr. Vinod mentioned about Zuzana Licko. In one of the books, Mr. Vinod showed us, titled 'Poppi' by Martin Friedl, it's also about pictograms that were designed by Martin Friedl back in 2003 for his final project at Stuttgart Academy of Arts.

Instructions
Project 2: Font Design

Work Processes

The first step to design my own font was to figure it out what kind of font wanted to make. Mr. Vinod gave us some options (the 12 typefaces that we had to choose for the first project). I decided to pick Serifa Std and I did some sketches. Turned out, I like Futura Std as well, so I combined both typefaces which were serif and san serif fonts for my references. 

Fig 2.1 Futura Std for reference accessed on http://www.cufonfonts.com/font_preview/19925/futura-std-light/large_preview

Fig 2.2 Serifa Std as reference accessed from https://www.safaribooksonline.com/library/view/adobe-type-library/9780132964371/graphics/f0277_02.jpg

Fig 2.3 Font Sketches

After sketching, what I did was transferred the sketch to Adobe Illustrator and began tracing and making the strokes. Before doing that I had to make sure that the size of the artboard was correct because I made mistake the first time I tried to make the fonts. The size of the artboard must be 1000x1000 points and we must use the guidelines/grids and also the ruler guide. Then, I drew out the fundamental shapes (the strokes and circles). My x-height was 500 points while my descender and ascender heights were both 250 points. My fonts were not too complex, but I still had to maintain the character and the details of it.

Fig 2.4 Digitize Process

Fig 2.5 The FontLab Layout- Transferring fonts

It was only a week to figure out my design and another week for digitizing the fonts (uppercase, lowercase, punctuation). I had trouble making the punctuations, so what I did was making all the letterforms first both upper and lowercase then I tried to figure out how to make perfect punctuation.

The next step was transferring all the letterforms into FontLab. I began moving all the glyphs and set up the font settings’ variables such as x-height, ascender, descender, and cup height. However, I needed to make sure that my fonts were not overlapping and make it more presentable.

After moving all the glyphs individually through FontLab, I started to carry out editing the letter-spacing and kerning on my font.

Final Outcome

Fig 3.1 All the finished letterforms and punctuations

Fig 3.2 Generated Font from FontLab

Feedback

Week 9

Specific Feedback : 

For the second project (Font Design), we were told to digitize our font sketches. Mr. Vinod reminded me to take notes and to read the note before doing the project because I made mistake with the size of the artboard and I didn’t use the guideline and grids while digitizing my fonts.

General Feedback: For the class, Mr. Vinod re-mentioned about the requirements of our blog/e-portfolio. For the first project, we were told to have thumbnails, the jpgs in spreads (with border 0.5 pts), the pdf embedded, a picture of the hardcopy book, and the video of the animation which has to be uploaded on youtube and the Google Drive Link.

Week 10

Specific Feedback: After making our own fonts lowercase, uppercase, and the punctuation Mr. Vinod checked our work one by one and gave us a feedback. For me, Mr. Vinod said I should’ve put the lowercase and the uppercase together on the same file so I could compare the size and manage the characteristic of my fonts. Mr. Vinod said my numbers were too bold and I should have put it together as well as the upper and lowercase. Then, Mr. Vinod also gave a little advice about my fonts, and fix a little problem.

General Feedback: After Mr. Vinod gave us the lecture session. He gave us an explanation of how to use the FontLab and taught us to fix the font that we made in illustration with the direct selection tool. Lastly, he reminded us to print out the complete font for next week and print out the generated font for the hardcopy portfolio.

Week 11

Specific Feedback: Mr. Vinod told me that my uppercase and lowercase font looked off and it was because the thickness was different, so Mr. Vinod told me to rework on that. Moreover, my “2” and “(“ didn’t look good, also my other punctuation like “?” and “&” did not have the same characteristic as the others. Then, Mr. Vinod taught me how to make an at (@). After feedback, I did my rework and gave to Mr. Shamsul and he said I should transfer my font into FontLab.

General Feedback: Mr. Vinod gave us a brief about our last project. We were told to make a poster by using our own fonts. We can choose whatever quotes we like, simple sentence, or just the name of the font. Mr. Vinod also gave us an example of our seniors’ work and told us which one was good. We were required to use Adobe Illustrator for this assignment and later on, we’re going to animate the poster.

Reflections

It was very exciting making my own fonts. Though, It wasn’t as easy as I thought and I did have some troubles making my own font. Nevertheless, my font was simple and wasn't that complex compared to my other friends’ work.

Another struggle that I had actually when creating the letterforms, adjusting and tweaking them to make a difference among other fonts and creating its own characteristic. It was quite easy to make our own fonts by sketching but when it came to digitizing the letterform It was kind of hard for me especially using Adobe Illustrator. 

I learned that making fonts was not as simple and as easy as it looks. Making a great font will need a lot of time and effort. Also, we have to be patient and maintain the character of the font itself.

Further Reading

For this project, I found some interesting book that I borrow from the library and I bought from the bookstore. Both books are really interesting also informative and I gained a lot of information from those books not only about information that related to this project but much useful knowledge about design and typography.

 The Designer's Desktop Manual by Jason Simmons

This book basically is about how to deal with common technical problems and establishing best-practice guidelines alongside a wealth of hints and tips, it unravels the essentials aspects of key areas of print-and-screen-based design. There are some sections in this book, each section contains the technical issues and skills needed for a specific area of design. Including step-by-step projects and also inspirational examples, type, and typography, color, imaging, layout, and printing are all clarified and made usable.

The section that I found very useful and related to this project was the 'Type' section. It says that type is a powerful communication tool and by choosing the right body text and display faces, a designer can suggest certain moods, emotions, or tones. It also teaches and gives some explanation about how to make our own font by using FontLab Studio or Fontographer application.

Type Tricks by Sofie Beier

Type Tricks is a pocket-book filled with tips and tricks or personal guide to type design. This book tells about typographical rules and the underlying structure of the working process in the design of new typefaces. It also contains the characteristic of a font, how to sketch, visual compensation, metrics, and kerning. The most interesting part is the classification by history part, which tells about the history of typefaces and its designer’s figure. From Adobe Jenson (1480) until Helvetica (2000).