12/06/2024- 24/07/2024 (Week 8-Week 14 )
Lizzie Tanaka (0362065)
Advanced Typography | BDCM | Taylor's University
Task 3: Type Exploration & Application
LECTURE
INSTRUCTIONS
On task 3, we were asked to design a typeface that would solve a problem or
simply just a result of our exploration.
a. Proposal
For the proposal, I have thought about a rather simple problem that I've
noticed over the past few years. In the past, a family member of mine had
asked me to rebrand the entire identity and social media of their travel
agency. I had struggled a lot back then because they wanted a 'fun' and
'different' look from the usual design.
Since then, I've noticed that most travel agencies' Instagram lacks the
'fun' in their design. And I've realized that it's the typeface that I think
feels to 'corporate' and has absolutely no fun in it. These posts uses very
simple sans-serif, and while they are readable and caters to more audience,
I think a 'fun' type can still be readable and clear.
Fig 1.1 Case Study of the Problem
(W8 13/06/2024)
As a solution, I had an idea to create a simple, sans-serif type with
'imperfect' strokes that will feel more friendly and fun. I decided to do
research on existing typefaces and see if any inspires me.
.png)
Fig 1.2 Moodboard
(W8 13/06/2024)
Firstly, I wanted my letterforms to have wider width, I think it makes the
whole type look more unconventional rather than the regular width sans-serif
(Hamburg Hand). The scratchy font set is what I'd like the 'unfinished'
edges to look like. The design music festival poster uses a wider typeface
that I'd also want my type to have. This goes the same for the Oh No Type's
Compadre. Maria Connected font by Three Dots Type was a reference to the
rounded edges my type will have.
Consistent points:
- A wider letterform width
- Equal stroke width
- Uneven strokes > hand-drawn feel
> The attempt on idea 1A
From my further reading this week, I learned that most type designers
settle on making the uppercase 'H' and 'O' and lowercase 'n' and 'o' since
it sets the width and height for most letters. I sketched an extra
alphabet just because I wanted to see how it'll look like.
In the digitalization process, I tried to equalize the height and width of
each letterforms, using baseline and caplines. To achieve the unfinished
look, I went in with pencil tool and manually draw over the anchor
points.
.png)
Fig 1.3 Idea 1A Attempt
(W8 13/06/2024)
IDEA 1B: REVERSE CONTRAST ALTERNATIVE
After finishing the first attempt, somehow I thought it looked too plain,
I felt like it needed more character. I found an idea to do an alternative
of this idea; a reverse contrast type. This version is inspired
from the Maria Connected typeface.
Consistent points:
- Heavier strokes placed on the bottom area of the type
- Rough edges > hand-drawn feel
> The attempt on idea 1B
The idea came randomly when I was thinking of other type exploration
ideas. I was using gouache to make the letterforms since I had thought of
an exploration to make type that was derived from paint (?). I scratched
out this idea but I saw that the 4 letterforms I had painted seemed like
it had potential.
I digitized it and made sure to equalize the width and height. Since this
is pretty random, I didn't paint the lowercase letterforms yet. Being
completely honest, I liked this result way more than the idea 1A.
.png)
Fig 1.4 Idea 1B Attempt
(W8 13/06/2024)
Access the proposal slide here:
Fig 1.5 Proposal (Week 8)
(W8 13/06/2024)
On week 9, I presented my proposal to Mr. Vinod and he suggested me a few
things. First, he told me that it's good to offset my typeface to another
typeface since the direction of my typeface will be a playful and display
type, thus it cannot be used for smaller texts. He suggested me to start
collecting imageries I want to include surrounding Indonesia since I have to
imagine how my type will look against these pictures later on.
Type Design
Then, I began my sketch for the rest of the letters.
Fig 2.1 Uppercase sketch
(Week 10 24/06/2024)
Fig 2.2 Lowercase sketch
(Week 10 24/06/2024)
Uppercase Letters
After my sketch looks structured, I digitized the uppercase first.
I began to refine the uppercase letterforms. I made sure to use guides to
ensure consistent width of each letterform. During the process, I noticed that
I had forgotten to sketch my letter 'V', the sketch seen above is the one with
'V'.
.png)
Fig 2.3 First digitization and attempt on refining
(Week 10 24/06/2024)
Above is the one I showed for feedback. I felt like most of them were somewhat
equal in stroke width but there are issues on letters like the counters on
A,B,D. The stroke thickness is a bit thinner on letters likes J,K,L,X,Y,Z.
Letter 'G' is the one I was confused on so I left it like that to ask for
feedback. I purposely didn't digitize the 'H' because I thought my letters
would end up like that.
Week 11
I showed Mr. Vinod my current progress of the uppercase letterforms. He said
that a few letters were already good; E F J K L V W. C is almost
good but needs to be wider.
Top part of B needs to be less extended. The bottom part of Z is always
thicker than the top and the top right part is less extended
He suggested I do the H first since I used my proposal attempt at first and
work on my problematic letters: S, M, N, Q, A, D, G. Also pointed out
that my uppercase should be good first before working on my lowercase.
During the process, I changed a few letters.
After a few tweaking, this is my final result on the uppercase.
Fig 2.4 After refining
(Week 11 03/07/2024)
.png)
Fig 2.5 Changes on week 11
(Week 11 03/07/2024)
After all the changes, Mr. Vinod told me I could start to refine the lowercase
letters.
Lowercase letters
I started by roughly tracing my sketch (I added the 'h' on the sketch I've
shown above) with pen tool. The first set before refinement is messy and I
was just trying to get the shape right. After I've obtained the right shape
that I want, I started to refine the letters again which was basically
standardizing the width. I wanted my letters to be bold and thick so I added
the weight and tried to make it as consistent as possible.
Overall I think the second set of refinement was quite okay, the width is
somewhat similar.
.png)
Fig 2.6 Lowercase digitization
(Week 11 05/07/2024)
Week 12
During class, I did more refinements. I tried to thicken some of the strokes
but as the picture below shows, not all the letters are standardized in their
stroke width. I moved to a new AI file because the first one was full and
started standardizing their width.
Fig 2.7 Week 12 refinements
(Week 12 10/07/2024)
Here is what I ended up with. It looked better and It was way more
standardized than the previous one. Since I was happy with this, I started the
numbers.
Fig 2.8 Week 12 refinements
(Week 12 10/07/2024)
Numbers
Fig 2.9 Numbers progress
(Week 12 09/07/2024)
Digitizing the numbers took far less time than digitizing the letters
and I felt like I got the hang of it quicker. I digitized this in a
separate file from the uppercase and lowercase, which proved to be a
mistake because I couldn't compare the width side by side. This first
attempt was way too thick.
I thought that I was done with the numbers so I moved to the
punctuation. I only sketched a few of the punctuations, especially the
more complicated ones such as the at symbol, the question mark. For
most of the punctuations, I used the period dot as a basis; the colon,
semi-colon, exclamation mark, dash, apostrophe, quotation mark,
etc.
Fig 2.10 Punctuation progress
(Week 12 09/07/2024)
By this point, I thought I was done but this is where my issue
appeared. I just started comparing the uppercase and lowercase side by
side and I noticed the uppercase was a lot thicker. So I basically had
to redo the whole standardizing process for the lowercase. Mr Vinod
also commented that I should've put them side by side so that I could
see the stroke width comparison.
Due to the time crunch, I forgot I had to take screenshots during the
process of standardizing. Below is the comparison of the before and
after the refinements.
.png)
Fig 2.11 Standardizing width part two
(Week 12 10/07/2024)
Here, I thought that it was good enough and I can start the
customization process. My customization process involved using the
pencil tool to manually round sharp corners and add a bit of imperfect
strokes on some parts of the letters to get the hand-drawn feel. I set
my pencil tool's fidelity to a bit above accurate. Accurate fidelity
would make it too rough but a smoother fidelity would change the shape
drastically.
Fig 2.12 Pencil tool fidelity options
(Week 12 10/07/2024)
I tried it on a few letters first up until 'G'. I felt like the
texture is too rough that it looks unequal from a far distance. The
strokes look uneven when zoomed out. I decided to rework on the
letters and made sure to make very subtle texture.
.png)
Fig 2.13 First attempts on exporting to FontLab
(Week 12 10/07/2024)
It was on this FontLab process that I started to notice an issue; the
width of some letters are not equal. Thus I had to adjust each letter
one by one and import them to FontLab and repeat the process. I started
with my lowercase first. Below is the very messy situation of my
artboard during the importing process.
Fig 2.14 Importing and standardizing weight process
(Week 12 12/07/2024)
To make sure each letter looked equal to all the letters, I kept on
typing random sentences and words to see how a letter looked when placed
among other letters.
Fig 2.15 FontLab process
(Week 12 12/07/2024)
During the importing process, there were a few minor changes I did to
some letters, numbers and punctuations. I feel like some minor mistakes
were only seen once I get to see the letter alongside other letters. I
also added some more punctuations by the end. Since this is for a travel
agency, I thought of punctuations that would be used in the posts, such
as brackets, asterisk, and more.
Changes during FontLab importing:
- The period dot, was too small when compared to the letters so I had
change it to be bigger. This period is the one used in a lot of the
punctuations.
- The question mark looked weird without the extension at the bottom so
I added a short one.
- The exclamation mark, as I noticed, was not simply a straight line. I
decreased the weight a little as it goes down.
- The ampersand was inspired by a font I found in FontShare, called
Panchang, which had this style of ampersand instead of the usual one. I
based this with my '3', extended the mid section and combining it using
pencil tool.
- Number '2' looked like it was smaller so I had extended the base
stroke slightly.
- The plus minus sign had a more 'squished' plus sign so it would fit in
the measurements.
.png)
Fig 2.16 Changes in punctuation and number
(Week 12 12/07/2024)
- The 'R' and 'P' I noticed, looked weird since the counter was too thin
and narrow compared to the other letters. I extended the top part
downwards by a little to make space for slightly bit more counter.
- The 'b' as I realized had a slightly unequal counter. The top part of
the 'b' curve was looking thinner as I zoomed out. I noticed that
letters that derived from 'b' also had it: 'p' and 'q'. I used my 'd'
because I liked it the most and I felt like it had the most equal weight
as a basis for these three letters. The counter is initially not exactly
centered.
- 'M' was too narrow when placed against the other letters so I had
extended it a bit.
- 't' and 'f' mistakes were in the bar. The bar in 't' was too low, I
followed the guide in the FontLab when we import our letters. The bar in
'f' was too high that when I had tried to thicken the stroke, the arch
overlapped with the bar. I saw as well in the FontLab that the bar
should be lower.
Fig 2.17 Changes in letters
(Week 12 12/07/2024)
Below is the final, neat, file of the imported font.
Fig 2.18 Final imported letterforms
(Week 12 12/07/2024)
Sidebearing Process
After I finally imported every letterform to FontLab, I started working
on the sidebearings using the chart Mr Vinod provided.
.png)
Fig 2.19 Side bearings chart
(Week 13 15/07/2024)
To set the sidebearings, I manually inputed the numbers in each letter.
i set my default size to be 45 in both uppercase and lowercase, I used
this as a basis to set the other sidebearings.
.png)
Fig 2.20 Setting 'H' 'O' and 'n' 'o' first
(Week 13 15/07/2024)
For the numerals and the punctuation, I didn't find any guide so for the
numbers, I set each sidebearing with the counters considered. If the
side didn't have any counter, I set it around 20, if the side has a
counter the sidebearing is a bit narrower, I put it around 11-13.
For the punctuations, I did a little research and found that on some
punctuations, the sidebearings on either side is a bit larger. I decided
to set the size to around 50-51 on each side. Considering the
punctuation, such as colon and semi-colons would need more space on the
left side since that is where the letters come before, I'd set it a bit
larger. The right side is still around 50-51 because users are supposed
to give space after anyway. Here's a compilation of my trials and
testers in making sure the side-bearings are good to go.
.png)
Fig 2.21 Testing the side bearings
(Week 13 15/07/2024)
Once the font is ready, I exported as .ttf. I named the font 'Jokka'
based on a recommendation my friend told me that it literally meant
'walk' in Bugis language and is also usually used to say 'vacation'
'holiday.'
Fig 2.22 Final font characters
(Week 13 15/07/2024)
Try the font here:
Download the font:
Font Presentation
Since I had generated my font before class, in class, I focused on finishing
my font presentation. I chose this color palette since I wanted my design to
be vibrant and bright, an attempt to represent the fun in 'traveling'. I want my text to be largely scaled since it is a display type that I intend to use for big titles and headings. I decided to look for examples that other type designers and foundry have done through Instagram.
.png)
Fig 3.1 References and color palette
(Week 13 17/07/2024)
I made sure to put numbers and letters together in some designs to show how they look like alongside each other. The fourth picture in the first attempt is primarily to showcase the punctuations alongside numbers and letters.
Fig 3.2 First attempt
(Week 13 17/07/2024)
My struggle was on the fifth design, I didn't like it so I created a new artboard and did another attempt. On my font presentation, I made sure to display numbers alongside a
letter, and showcase my punctuations. I wanted to show how all caps, all
lowercase, and both uppercase and lowercase would look like.
Fig 3.3 Second attempt
(Week 13 17/07/2024)
In my second attempt, I followed Mr. Vinod's suggestion on the four letter grid and I changed my fifth design. I used a repetition of "never stop exploring" text for the background, lowered the opacity and put a phrase related to travel on top. I liked this one better than the sixth design.
Fig 3.4 Final design
(Week 13 17/07/2024)
Revisions
While I was doing my font application, I did my designs with a different color palette. I wanted my presentation and application to look and feel cohesive so I changed the color palette.
Fig 3.5 Final font presentation
(Week 13 19/07/2024)
Font Application
For the font application, I had selected these mockups:
a. Instagram layout
b. Instagram story
c. Posters
d. Billboard
e. Booklet
My mockups were mostly sourced from Behance, some are from other sites that provide free mockups such as MockupTree, all of them are free. All the photos used are downloaded for free via Unsplash.
a. Instagram layout
I decided to do the Instagram posts first. In my mockup, there are 6 visible
posts and three slightly visible posts. I only did the 6. With 6 posts, I
wanted to include:
- Package promotions
- Discount offers
- Hotel offers
- Travel tips/guide/itineraries
I did a little research on Instagram and noticed that these were some of the
more common posts used in a travel agency's Instagram. I started by collecting
6 pictures from Unsplash.
Fig 4.1 Progress on IG Feeds
(Week 13 17/07/2024)
I finished fig 4.1 in class and Mr. Vinod suggested that the posts can have varying design, doesn't have to be too similar to each other but still maintain the feel of it. Initially, I wanted to stick to a color palette that was mostly green and blue. However, it proved to be quite difficult when I'm searching for city destinations. I decided to tolerate a bit of yellows and shades of them here and there. I decided to put a more 'yellow-ish' picture in the middle of the more 'green and blue-ish' colored picture. The Korea post is to replace the Japan post in fig 4.1.
Fig 4.2 Changes in design
(Week 13 18/07/2024)
The first design of fig 4.2 is the initial theme I was going to go with for the travel tips posts. However, I didn't end up liking it after I applied it to the other two posts. I decided to tweak the design until I found the one I liked. Once I liked the final design, I implemented it to the other tips posts. I also couldn't figure a design layout I liked for the hotel offer post, so I decided to change the post to a travel tip post.
Fig 4.3 After changes in Korea post
(Week 13 18/07/2024)
I was also unsure of the Japan discount post so I had it changed a bit.
Fig 4.4 Changes in Japan's post
(Week 13 18/07/2024)
Fig 4.5 Half posts
(Week 13 18/07/2024)
There are nine posts shown in total, three of them are only shown halfway. I only designed the upper half of the posts due to time-crunch. After I was done with the designs, I put them inside the mockup that I've downloaded.
Fig 4.6 Mockup progress in Photoshop
(Week 13 18/07/2024)
I used a mockup plugin in Figma to put the IG layout into a phone mockup. The process is quicker than having to find a mockup I liked and putting it in Photoshop. I felt like it looked quite decent but I felt like the IG mockup is a little outdated and I wanted to show the posts in detail.
Fig 4.7 Mockup progress in Figma
(Week 13 18/07/2024)
I found a new mockup that I preferred and decided to use this one instead. I only needed three posts so I picked my favorite and reused the other three to be redesigned for my IG stories.
Fig 4.8 New mockup for IG feeds
(Week 14 21/07/2024)
b. Instagram stories
For my Instagram
stories design, I reused the Instagram square posts that I didn't include in
my mockup to save time. I attempted to include the hotel offer again but I didn't end up liking it either. I made a new design and replaced it with a package deal, similar to Japan IG post, just different format and destination.
Fig 4.9 IG Stories design
(Week 13 18/07/2024)
The original mockup had the two IG posts in the scene while I only wanted this mockup to show my IG stories thus why I modified the scene.
Fig 4.10 Mockup for IG Stories
(Week 14 21/07/2024)
Fig 4.11 New mockup for IG Stories
(Week 14 21/07/2024)
c. Posters
I debated on whether I should do a single poster or a few ones to showcase
more. I began by designing one poster first. I wanted my poster to show destinations alongside a huge picture to attract viewers at one glance. I put four destinations of Labuan Bajo within the picture in ovals. I added texture by using displace filter to the pictures and the titles, mimicking a printed texture. I added another paper texture on top of my design and set the layer mode to multiply and lowered the opacity so that it doesn't change the overall color and tone of my design.
Fig 4.12 Poster design process
(Week 14 21/07/2024)
I felt like the image I used in the first attempt isn't too bright and has a different feel and tone compared to the others images I used. I changed the picture so it looked more vibrant and slightly darkened the text color since on the first attempt, it looked a little faded and washed. While I liked this version, I was still unsure of it. I felt like one poster looked lonely and empty.
Fig 4.13 Poster mockup; first attempt
(Week 14 21/07/2024)
I chose to use another mockup that consisted of three posters. To make it feel cohesive, I used the same layout, and alternated the colors. I also added textures for more depth on my posters. These posters were designed in Photoshop, in the .psb file of the mockup.
Fig 4.14 Poster mockup: second attempt
(Week 14 21/07/2024)
After getting the designs done, I changed the color of the walls and the floors since it looked too cool-toned and it feels lonely. Since the final file couldn't exceed 1024px in height and width, I later cropped it so that it looked like the scene was focused on the Phuket poster.
Fig 4.15 Poster mockup; final
(Week 14 21/07/2024)
d. Billboard
As for my billboard, I used a more persuasive title instead of just the name
of the place. I wanted my billboard design to be simple, straightforward, and
easy to read. I only included a large sized photo to attract viewers, a
persuasive title, and an Instagram handle.
On my first mockup, I found that the billboard had round edges which looked weird when my sharp-edged design is put inside. My text was also purposely placed near to the edge and it looked ugly and messy.
Fig 4.16 Billboard mockup; first attempt
(Week 14 21/07/2024)
I decided to change my mockup and found this mockup which has sharp edges. I used the same layout and added other details such as the "2024 Summer Destination" and the IG handle. Instead of "travel with us!" which I thought looked weird since there was no other details about why the viewers should travel with us, I used "Maldives this summer?" I felt like this phrase sounded better and more straightforward.
Fig 4.17 Billboard mockup; final
(Week 14 21/07/2024)
e. Booklet
At first I wanted to do a brochure or leaflet for this last application but I felt like a mini guidebook or booklet would help people a lot during travels. This application took quite long to do because I couldn't settle on a mockup that I liked, nothing was what I had in mind. I couldn't find a mini booklet mockup I liked in Behance so I settled with a book mockup.
I did not like my first attempt and the mockup. It made my picture look very low quality. I was debating on the title as well and the picture that I should use. I feel like the paper material of the cover made it look weird, it seems like it washed out my color choices.
Fig 4.18 Book mockup; first attempt
(Week 14 21/07/2024)
On my second mockup, I settled on this design and used the Labuan Bajo picture I didn't end up using in the poster mockup. I liked this layout as it was neat and it filled up each space accordingly. Similar to the Labuan Bajo poster, I added the detail of what would be discussed in the book in ovals within the image.
Fig 4.19 Book mockup; second mockup
(Week 14 21/07/2024)
Despite liking this second mockup, I can't help but feel like the mockup isn't what I had in mind. I went to Google to search booklet mockups since it'll probably have a wider variety of choices rather than Behance. Fortunately, I found this mockup which had the book exactly like what I imagined. I used the same design on the booklet but differentiate it for the notepad behind. I used a left-aligned title which was also not as complete as the booklet title. Similar to the posters, I applied texture using the displace filter.
Fig 4.20 Book mockup; third attempt process
(Week 14 21/07/2024)
Looking at it, I felt like the image made the scene feel 'sad' and 'nostalgic'. The image is edited that way from the original creator in Unsplash. Since I wanted my mockup scenes to feel bright and vibrant to showcase 'fun' and 'travel', I changed the picture.
I also changed the color of the pen so it'll look more cohesive with my color palette. I thought that the background color is also a bit too dark and dull, so I brightened it up.
Fig 4.21 Book mockup; final
(Week 14 21/07/2024)
After all my applications are done, I had to crop some of them to the instructed size. The images are in 2000x2000px to retain quality.
Final Result
Fig 5.1 Font Presentation 1
(Week 14 21/07/2024)
Fig 5.2 Font Presentation 2
(Week 14 21/07/2024)
Fig 5.3 Font Presentation 3
(Week 14 21/07/2024)
Fig 5.4 Font Presentation 4
(Week 14 21/07/2024)
Fig 5.5 Font Presentation 5
(Week 14 21/07/2024)
Fig 5.6 Font Application 1
(Week 14 21/07/2024)
Fig 5.7 Font Application 2
(Week 14 21/07/2024)
Fig 5.8 Font Application 3
(Week 14 21/07/2024)
Fig 5.9 Font Application 4
(Week 14 21/07/2024)
Fig 5.10 Font Application 5
(Week 14 21/07/2024)
Fig 5.11 Font Presentation PDF
(Week 14 21/07/2024)
Fig 5.12 Font Application PDF
(Week 14 21/07/2024)
Try the font here:
Download the font:
FEEDBACKS
Week 8 - ILW
Week 9:
General: - 'Rough' sketch shouldn't be too rough that it's unclear what we want to create.
Specific:
- It's good that the typeface is offsetted to another typeface since my typeface is playful and a display so it cannot be used for smaller texts
- Start collecting imageries that I want about Indonesia because I have to see how my typeface looks against the pictures.
- Okay with both, just need to choose one
Week 10:
Did not join feedback session, public holiday.
Week 11
General:
- Make sure the letters are in correct size before importing to fontlab so
the process will be easier, no need to resize.
Specific:
- Problematic letters: S, M, N, Q, A, D, G.
- Uppercase should be good first before working on lowercase
- Good letters: E F J K L V W.
- C: almost good, needs to be wider
- B: top part needs to be less extended
- Z: bottom part always thicker than the top. top right part is less
extended
- do H first and work on problematic letters
G: the shape doesnt finish off like a circle, it stops curving and
then continue the stroke
S: shape is already good needs to be thicker (stroke + outline stroke
+ merge)
X: the strokes are not parallel to each other (diagonal ones)
A: a bit slanted on the counter
Week 12
General:
- Font presentation; use limited colors, and highlight your font.
- Font presentation; use limited colors, and highlight your font.
- Font should be generated by next week.
Specific:
Specific:
- Should've done the uppercase and lowercase side by side so I could
compare and ensure the stroke thickness is the same.
Week 13
General:
- Make sure to finish all the work by next week
Specific:
- Make sure none of your design in font presentation looks out of
place with the sizing.
- Make variations of your Instagram post, don't make it all the same.
Try other variations but maintain the feel of the post.
REFLECTIONS:
Experience:
By far, this is the most tedious and time-consuming task I've had. I underestimated just how much time I'd be spending refining my letterforms. The idea came easily to me because it is an issue that I've noticed for quite a while and I had an end-product visualized as well.
The refining process was probably the most difficult. I was met with a lot of issues right after I thought everything was going well. Designing the font presentation and application was way better and a much more enjoyable process for me. It did take quite some time to settle on a design I liked but overall, it was quite a fun process for me. Moreover, my time management was not as good as I wished it to be so sometimes I'd struggle to catch up on weekly progress before class.
In the end, I have really, once again, developed a sense of huge appreciation to every font I see. Knowing that the more 'basic' the font is, the more time is probably put into optically refining it makes me appreciate it. This project, even though is the most complicated one for me, gives me the most satisfaction and pride after finishing it.
Observations:
Throughout the past few weeks, I observed that I tend to downplay small, minor mistakes and feeling like it won't affect my process, only to find it become the root of my issues thus extending my process.
I've also observed that time management played a huge role in this project. Unfortunately, I have to admit that my time management in this project isn't the best, so I was staying up at nights to catch up before class.
Findings:
I find that designing a typeface is really not as simple and easy as it seems from the end result. It takes a great deal of patience and attention to detail to achieve a satisfactory result. I've also found that just the smallest mistake in one letter can really ruin the viewer's reading experience. In my experience, I would underestimate the impact it had on the overall font but once I paid more attention, it did seem to be a very visible mistake.
FURTHER READING
Week 8
Fig 6.1 Type 01
For week 8, to support the start of task 3, I read from this website by Type 01 about important tips on type design from a type
designer, Mark Bloom.
1. A great designer is a product of hard work and long hours of
practice.
No one is great from day one, people needs to be willing to learn and
trust the process.
2. Have clear direction of your project, have a brief, dig deeper
and find how your type can stand out with its characteristics. Mark
highlights the process in which he found that type needs to have a
balance.
3. Start with the fundamentals and break the rules once you
understand them.
Mark starts with control characters. H. O. n. o. He usually forms the
word 'Hamburgefonstiv.' In relations with breaking the rules, he
mentioned it doesn't always work like this and often experiments.
4. A typeface must look good AND be functional.
Mark likes to add alternates to alphabets to add for variation.
5. Marketing your typeface is equally as important.
Week 9
I read about understanding letterforms from this book:
Fig 6.2 A Type Primer
Kane, J. (2011). A Type Primer. Laurence King Publishing
Understanding letterforms:
- The letter 'A' seems symmetrical but none of them are symmetrical. Each stem that connects the stroke to the serif are unique arcs.
- Univers: Also looks very symmetrical but the width of the left stroke is thinner.. Designers do this to create letterforms that will look harmonious.
- Helvetica vs Univers: lowercase 'a' also looks very similar but the way the letter finishes is different.
Week 10
Fig 6.3 A Type Primer
Kane, J. (2011). A Type Primer. Laurence King Publishing
I read the same book from last week. This time I read about maintaining x-height as well as forms and counterforms on pg. 56-61.
Maintaining x-height
- X-height is the size of lowercase letterforms.
- Curved strokes should go beyond the median or the baseline to appear optically the same size.
Form/counterform
- When letters are joined together and form a word, the space between them are called counterform.
- This is important when working on lowercase letters such as 'r' which doesn't have no counters.
- How well we set the type and the counters influence how well the words will look together.
- Exam letters closely to understand form and counterform.
Week 11
Again, I read a few more pages from the same book. This time, I read aobut tracking, kerning, and letterspacing on pg. 90-93.
Fig 6.4 A Type Primer
Kane, J. (2011). A Type Primer. Laurence King Publishing
Tracking: kerning and letterspacing
- Kerning is important on letterforms with angled strokes, so that the spacing looks optically consistent.
- Kerning is now known as the automatic space adjusted between letters.
- Letterspacing is not kerning. Letterspacing refers to adding space between letters. Tracking is the addition and the removal of space between letters. .
- On display size, it's usually better to tighten the tracking a bit.
- Tracking is crucial in maintaining the ease of reading.
- Letterspacing is usually done in uppercase letters by designers.
On this week, I chose to read a section about sans-serif from this book:
Fig 6.5 Typography Referenced
Jason Tselentis, Allan Haley, Richard Poulin, Tony Seddon, Gerry Leonidas, Ina Saltz, Kathryn Henderson, Tyler Alterman. (2012). Typography Referenced: A Comprehensive Visual Guide to the Language, History and Practice of Typography.
Fig 6.6 Sans Serif Grotesque
Sans-serif grotesque
- First commercially popular sans serif typefaces
- Includes: Helvetica, Franklin Gothic, Univers, News Gothic, etc
- Contrast in stroke weight is seen
- Slight squared quality to the curves.
- Modern sans serif designs are derived from these first ones. Stroke contrast is less apparent, squareness of strokes are also lessened.
- Strokes are more monotoned.
Sans Serif Humanist
- Includes: Frutiger, Gill Sans, Goudy Sans, etc
- Based on Roman inscriptional letters.
- Most have contrast in their stroke weight which are apparent
- Closely match the characteristics and proportions of serifs.
- Have a strong calligraphic influence.
Week 13
I read another section that describes Sans Serif Geometric on pg. 62.
Fig 6.7 Sans Serif Geometric
Sans Serif Geometric:
- Includes: Futura, Avant Garde, Kabel, Avenir, etc
- Heavily influenced by simple geometric shapes.
- Strokes are monolines and seems perfectly geometric
- Tend to be less readable than grotesques.
Week 14
I read another section on Sans Serif Square from the same book.
Fig 6.8 Sans Serif Square
pg. 63
Sans Serif Square
- Includes: Phenix American, Neo Sans, Cachet
- Generally based on grotesque characteristics and proportions.
- Definite and sometimes even dramatic squaring of curved strokes.
- More latitude in character spacing
- Usually limited to display design.
Comments
Post a Comment