TYPOGRAPHY TASK 3A / TYPE DESIGN & COMMUNICATION
31.9.2021 - 28.10.2021 (Week 8 - Week 10)
Luisa Audrey / 0348741 / Bachelor of Design in Creative Media
Typography
Task 3A / Type Design & Communication
LECTURE
DEMO VIDEO TASK 3A TYPEFACE CONSTRUCTION
In this video, Mr. Vinod gave us a tutorial on how to construct a typeface using Adobe Illustrator.
 |
| Fig 1.1 sketches, 28.10.2021 |
Firstly what we have to do is to make sketches. Make at least 5 sketches so we can choose which one is better to be digitalized. After choosing the preferred sketch, the next step is to digitalize it in Adobe Illustrator.
Steps to digitalization:
1. We need to choose the reference or which typeface that looks the most similar to the typeface that we are going to create. The best is to choose from the 10 typefaces given by Mr. Vinod.
 |
| Fig 1.2 10 typefaces as a reference, 28.10.2021 |
2. Deconstructing the letter-form from the typeface that we have chosen. the knowledge that we have gained from here will later be applied in the typeface that we are going to digitalize.
 |
| Fig 1.3 deconstructed "r", 28.10.2021 |
3. We need to pay attention to the basics of Typography by putting on dividers such as ascender, capital line, median, baseline, and descender.
The artboard that we are going to use is 1000 pt x 1000 pt, and the x-height that we are going to use is 500 pt. (not negotiable)
 |
| Fig 1.4 Typography dividers, 28.10.2021 |
INSTRUCTION
<iframe src="https://drive.google.com/file/d/1d0ArruiGDMwb2Jq-jVxMN6PY2xOcseAB/preview" width="640" height="480" allow="autoplay"></iframe>
TASK 3A:
In this task, we are asked to design a typeface limited to a number of western alphabets. The letters that we are going to construct are a i e m p y t g d o b ! , .
Research:
Before I start sketching my typeface, I started by looking at the 10 typefaces and chose which one is the best for me to recreate. Looking through, I really like how the font Bodoni looks. I started deconstructing some letters from the typeface Bodoni.
Bodoni is serif typefaces that are firstly designed by Giambattista Bodoni (1740-1813). Serif typeface is a font that has a decorative stroke that finishes off the end of a letter stem.
 |
| Fig 2.1 Bodoni font, 28.10.2021 |
 |
| Fig 2.2 deconstructed Bodoni "r", 28.10.2021 |
I deconstructed the letter "r" and found it interesting that the tip of the "r" from Bodoni is rather huge compared to the other 9 typefaces.
I also deconstructed 2 other letters from Bodoni which are the letters that I am going to construct.
 |
| Fig 2.3 deconstructed Bodoni "p", 28.10.2021 |
 |
| Fig 2.4 deconstructed Bodoni "m", 28.10.2021 |
Exploration:
After doing some research, I began to sketch my typefaces. I made several sketches:
 |
| Fig 2.5 sketches, 28.10.2021 |
I tried to design various kinds of fonts from the thin one to the thick one. The 3rd-row font is the first font that I created which I was not too satisfied with. At first, I was pretty much confused between the 1st-row and the last row, but in the end, I decided to go with the last row.
Digitalization:
The hardest part for me is probably the digitalization. The first thing that I did was to make the basic dividers. Afterward, I tried to copy the letterform from the sketch into the digitalized version.
 |
| Fig 2.6 first construction, 28.10.2021 |
For the dividers, I used the same heights from Bodoni, since it was the most similar typeface I could find. (counting from the baseline)
Ascender: 709 pt
Capital Height: 627 pt
Median: 500 pt
Baseline: 0 pt
Descender: -211 pt
I made it one by one by tracing until I achieved this:
 |
| Fig 2.7 first attempt digitalization, 28.10.2021 |
This is the first draft that I submitted in the first week and Mr. Vinod told me that the coma needs to be longer. So in the new version, I made the coma slightly longer and more visible.
Not only the coma, but I also change the letter "t". I extended the wing further to the right just for readable and aesthetic purposes.
 |
| Fig 2.8 digitalized version with dividers, 28.10.2021 |
When I was constructing the "g", I made it look a bit different from the original sketch and made the tail look similar to "y" instead. The reason is to create repetition so the typeface looks more harmonious.
 |
| Fig 2.9 digitalized version with anchor and grids, 28.10.2021 |
Here you can see how I construct the letter with separated pieces.
After I managed to make all of the letters, I deconstructed several letters.
 |
| Fig 2.10 deconstracted Solace "p", 28.10.2021 |
 |
| Fig 2.11 deconstructed Solace "e", 28.10.2021 |
 |
| Fig 2.12 deconstructed Solace "m", 28.10.2021 |
Here is the end result of my typeface from Adobe Illustrator:
 |
| Fig 2.13 End result in Adobe Illustrator, 28.10.2021 |
Fontlab Progression:
Now we are moving on to Fontlab. Fontlab is software used to create a font.
So the next thing we are going to do is to transfer the font that we have made in Adobe Illustrator to Fontlab. As we can see from Mr. Vinod's demo video, we need to enable some of the options that have been instructed.
 |
| Fig 2.14 preference from FontLab, 28.10.2021 |
Not only that, but we also need to make sure that we have keyed in the right number for the guides so that we are able to copy and paste the letterform from AI.
 |
| Fig 2.15 family dimensions, 28.10.2021 |
 |
| Fig 2.16 font dimensions, 28.10.2021 |
Here are some details that we need to provide in the FontLab such as ascender, cap-line, median, baseline, and the descender.
This is how it looks after we have copied and pasted the font from AI.
 |
| Fig 2.17 copy and paste Fontlab, 28.10.2021 |
I did the same for the rest of the letterform and this is the end result I got after I did a few spacing and kerning.
 |
| Fig 2.18 spacing & kerning 1, 28.10.2021 |
 |
| Fig 2.19 spacing & kerning 2, 28.10.2021 |
After I did the kerning, I downloaded the font so I can use it to create a poster from it. I decided to name the poster "Solace" as it sounds rather elegant.
Download link:
Final submission:
 |
| Fig 2.20, Adobe Illustrator version, 28.10.2021 |
 |
| Fig 2.21 final kerned white version, 28.10.2021 |
 |
| Fig 2.22 kerned black version, 28.10.2021 |
 |
| Fig 2.23 FINAL RESULT 1, 28.10.2021 |
here is the first poster for my submission, but then Mr. Vinod said that the size of the typeface should be the same from one another, so I made a new one:
 |
| Fig 2.24 FINAL RESULT, 29.10.2021 |
PDF FINAL RESULT
FEEDBACK
Week 9:
General feedback: We need to pay attention to the consistency of the letterform. Also, it is better to create the sketch using the guidelines to create a better result.
Specific feedback: Mr. Vinod said that my coma needs to be longer.
REFLECTION
Experience: Personally I feel like this project is really interesting and fun since we are finally creating something out of the 10 typefaces. At first, I thought it is going to be very difficult, however, I enjoyed the process and the result looks very satisfying. I also managed to make a good font according to some basic typography.
Observation: Throughout the research, I noticed that some fonts don't really have the same curves. They look identical however not the same as we could create so many shapes behind the deconstructing. I also realized that I need to pay attention to the guides to create a good font.
Findings: I found out that using FontLab is actually a lot easier than I thought as long as we know how to copy and paste it from Adobe. I also found that doing sketches with guides is a lot easier to be digitalized rather than doing the ones that aren't using guidelines.
FURTHER READING
 |
| Fig 3.1 Typographic Design Form and Communication |
Typographic Measurements
 |
| Fig 3.1 measurement |
Our measurement system for typography was originally developed for
the handset metal type invented by Johann Gutenberg around 1450.
The rectangular metal block of type has a raised letterform
on top, which was inked to print the image.
Metal type Measurement
 |
| Fig 3.2 measurement 2 |
 |
| fig 3.3 measurement 3 |
The metal type exists in three dimensions, and an understanding of
typographic measurement begins with this early technology. The depth
of the type is measured in points and is called point size or body size.
Spatial Measurement
In addition to measuring type, the designer
also measures and specifies the spatial
intervals between typographic elements.
These intervals are: inter letter-spacing
(traditionally called letterspacing), which
is the interval between letters; interword
spacing, also called word-spacing, which is
the interval between words; and interline
spacing, which is the interval between two
lines of type.
 |
| Fig 3.4 measurement 4 |
1.jpeg)
Comments
Post a Comment