Advanced Typography - Task 2(A) &(B): Key Artwork & Collateral
26 Apr 2023 - 31 May 2023 (Week 4 - Week 9)
We discussed our logo/ monogram sketches in a group and made refinements. We
were given one week to complete Task 1: Exercises and the blog, then prepare
our finalised logo that reflects our character, personality, and attitude. We
were then asked to prepare to start working on Task 2(B): Collateral after
next class.
We reworked on the poster in Task 1: Exercise 2. Then the following are what
are expected to complete in the next class.
All work above is to be presented in your eportfolio as
1024 x 1024 px @300ppi. If the file size is too big (>3MB) save
the file @150ppi. All assets created is to be used and
presented creatively in your IG.
Initially, I believed that my task was solely to design a monogram or logo
using varying stroke widths, patterns, and curves in the details. However, I
am dissatisfied with my work because it does not fulfill the requirement of
incorporating our identity into the design. It is important for our brand or
company to be easily identifiable through the logo or monogram so that people
can understand what we do and the kind of persona we want to convey.
Message: Structured and Rigid ; Aesthetic and Subtle
After starting on my layout for collateral and layout in Instagram, I found
that the horizontal strokes is still thin that barely can be seen in the
products. Thus, I decided to thicken the strokes from 4.5 px to 14 px. The
placing of my key artwork is to compare and contrast whether my key artwork
was fulfilling the positive and negative space.
1) Animation
I have utilise the technique learned in my previous semester to do my
animation for my key artwork.
%20Key%20Artwork%20Animation.gif)
In this attempt, I extended the duration from 01:20 to 02:00. However, I noticed
that the ending had become somewhat monotonous. Consequently, I applied the
scale property to introduce a bouncing effect. The bouncing effect was increased
by 10% compared to the original scale of 100%, and the keyframes were positioned
closely together.
I decided to stick with the idea from my initial attempt, but solely extend
the duration so that people can focus on my key artwork. Additionally, I made this
refinement because I felt that the previous attempts was too fast. However, I
wanted my key artwork to convey a sense of peacefulness by slowing down the
pace.
I have created several designs by replicating the existing visual identity, which features a diamond-shaped motif. Throughout this attempt, my aim was to establish a connection with nature, resulting in the incorporation of recognisable elements like leaves, fairies, and bees. However, there were some unsuccessful attempts that ended up resembling snowflakes.
During this process, I decided to implement an alternative motif derived from the initial design. Through several iterations, I eventually settled on incorporating icons resembling bees. This choice was made in order to inject some diversity and prevent the repetition of the same artwork throughout the designs.
3) Deploying on Instagram
Description: I aim for my animation to align with my brand objective of simplicity and providing a sense of relaxation. It is important to incorporate crucial elements such as my visual identity and key artwork.
To create an engaging start, I envision the visual identity rotating and the heading subtly shifting in different directions. This concept draws inspiration from the inviting entrances of malls or supermarkets, which symbolize a transition into a new experience.
As the animation progresses, the introduction of my key artwork symbolizes the beginning of a world where individuals are more conscious and caring towards our environment.
Description: The square shape of our box allows for optimal space utilization, reducing waste and minimising excess packaging. This thoughtful design choice promotes the principle of reducing unnecessary material consumption while ensuring that the box remains sturdy and functional for its intended purpose.
Description: The vertical orientation of our business cards
allows for optimal space utilization. This design choice not only allows
us to convey essential information effectively but also reduces the
overall size of the card.
26 Apr 2023 - 31 May 2023 (Week 4 - Week 9)
Vincent Lee // 0359386
Advanced Typography // Bachelor of Design (Hons) in Creative Media // Taylor's
University
Task 2(A) &(B): Key Artwork & Collateral
INSTRUCTIONS
Lectures
All 5 lectures are completed in Task 1: Exercises.
Week 5
Class Summary
Week 6
Class Summary
The class was held online. Mr. Vinod extended the due date for Task 2(A):
Key Artwork because most of us does not meet the benchmark and have wrong
perception towards the instructions and requirements needed for this task.
We were given another week to finalise and digitise, then advise to conduct
research visual identity application on collateral or marketing
paraphernalia. (view
Pentagram
for Inspo.)
Week 7
Class Summary
-
Key Artwork done
-
Image of self captured creatively and in a manner that expresses the mood of your brand
-
Create a colour palette; use "Colour Hunt" identify your palette (a good palette has high, middle and low tones but also has contrast, is complimentary and consist of neutral shades too) https://colorhunt.co/
-
Introduce a primary colour in your key artwork
-
Present your key artwork in colour against a background colour from your colour palette.
-
Create your IG handle (think of creative solutions if the selected name is not available i.e. FIVE @F1V3)
-
Create your Gif animation
-
Expand your key artwork into an visual identity (research the links provided in the MIB and view and analyse the work on PENTAGRAM site). Student samples: https://tan-pei-yun-0345386.blogspot.com/.../advanced... and https://janaanahmed.blogspot.com/.../advanced-typography...
-
Identify your collateral (choose items that suits the mood of your brand). Simulate realistically the use of your key artwork and identity onto the selected collateral.
-
Research IG layout styles
Week 9
Class Summary
Mr. Vinod gave final feedback on Task 2(B): Collateral. Then we need to
present our ideas for Task 3: Design Exploration & Application. We are
advise to listen to each others' presentation and reflects and compare
with our own ideas/ concepts.
Instructions
MIB
<iframe
src="https://drive.google.com/file/d/1-P2VE3RJqBsojEbhURD8r1ojRT46JPGY/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 2(A): Key Artwork
- In the context of this task, the key artwork is a word mark/lettering, but is also an artwork.
- The key artwork can be disassembled into constituent shapes to form vibrant patterns that continue to maintain and expand its visual identity.
- The final key artwork must be an elegant solution, well balanced and composed, not complicated or confusing that leads to a functional and communicable key artwork.
- This key artwork will subsequently be used in Task 2(B) collateral.
1) Sketches
|
| Figure 1.1 - logo sketches attempt 1, Week 4 (26 Apr 2023) |
Message: Rigid
|
| Figure 1.2 - logo sketches attempt 2, Week 5 (03 May 2023) |
Message: Freedom | Wave | Sea
(left)
I found inspiration in utilizing positive and negative space to create my
logo, which resulted in an intriguing design that requires observation and
examination. However, I realized that the design was somewhat ambiguous and
the letter "L" was difficult to discern, except for those who were already
familiar with my initials.
(middle & right)
To address this issue, I shared my progress with my peers and we discussed
the message I intended to convey. We ultimately decided to incorporate a
wave element into my initials, which was inspired by Sketch #4 in Fig 1.1. I
had expressed a preference for using both thick and thin strokes in my
design, as they contrasted well with each other.
|
| Figure 1.3 - key artwork sketches attempt 3, Week 6 (10 May 2023) |
As advised to do key artwork instead of logos, thus I decided to utilise the
existing typefaces and what I have been designed in the past 2 weeks, then
comes out with three key artworks. The first and second representing the
rigidity (stubborn) side of me. While the third one utilise the contrast of
thin and thick strokes, then added the aesthetics and subtle touch.
2) Letterform Refinement
|
| Figure 1.4 - digitising of key artwork, Week 7 (17 May 2023) |
Using guides to determine the height of each letterforms. The top one was
created using Procreate, then expand using Adobe Illustrator. However, I
observed carefully, I found that the vertical and horizontal strokes weren't
straight to their axis.
Thus, I have used rectangle tool to construct my key artwork, this benefits
me to have better control on the width ,height and rotation. Besides, I used
align tools and pathfinder to help me in uniting the shapes into one.
|
| Figure 1.5 - refinement of key artwork, Week 8 (24 May 2023) |
Final Task 2(A): Key Artwork
%20key%20artwork.jpg) | ||
|
 | ||
|
 |
| Figure 1.8 - Final Colourised Word-Mark [JPEG], Week 8 (24 May 2023) |
Task 2(B): Collateral
We are require to design a t-shirt, lapel pin, an animated key artwork, and an
Instagram account (or as instructed in class) to create a brand. Ensure the
output communicates the desired message and mood set by the key artwork and
its function.
Task Requirements
Task Requirements
- Use mock-ups to simulate the printing of the collateral
- If instructed, print the collateral
- Animated Key Artwork: 1024px /1024 px (height and width), Gif format.
|
| Figure 2.1 - Animating Process, Week 8 (24 May 2023) |
%20Key%20Artwork%20Animation.gif)
| Figure 2.2 - Animation Attempt 1 [GIF], Week 8 (28 May 2023) |
I found that the pace of the gif especially when showing my word-mark was
too fast that it was barely could be read.
|
| Figure 2.3 - Bounce: Scale Property, Week 9 (31 May 2023) |
|
| Figure 2.4 - Animation Attempt 2 [GIF], Week 9 (31 May 2023) |
|
| Figure 2.5 - Animation Attempt 3 [GIF], Week 9 (31 May 2023) |
Final Animated GIF
|
| Figure 2.6 - Final Animated Key Artwork [GIF], Week 9 (31 May 2023) |
2) Collateral and Mockups
|
|
|
I decided to go with Green as it was my favourite colour. Other than that,
green has reminds me of health, recycle, vegetables, trees and plants.
|
| Figure 2.8 - Introducing Primary Colour to Key Artwork, Week 8 (24 May 2023) |
By introducing our key artwork alongside our chosen primary color, we can
ascertain whether it harmoniously blends into the canvas or stands out.
Additionally, we need to consider whether our key artwork has the potential
to capture the audience's attention and make a lasting impact with just one
glance.
|
| Figure 2.9 - Collateral and Mockup Designs, Week 8 (24 May 2023) |
As I had chosen green as my primary colour, thus I had decided to raise
awareness of recycling and initiate reuse and reduce of waste as my
brand's moto. We should also include an apparel into our collateral.
|
| Figure 2.10 - Visual Identity and Patterns, Week 9 (31 May 2023) |
I have created several designs by replicating the existing visual identity, which features a diamond-shaped motif. Throughout this attempt, my aim was to establish a connection with nature, resulting in the incorporation of recognisable elements like leaves, fairies, and bees. However, there were some unsuccessful attempts that ended up resembling snowflakes.
|
| Figure 2.11 - Expanding of Visual Identity, Week 9 (31 May 2023) |
During this process, I decided to implement an alternative motif derived from the initial design. Through several iterations, I eventually settled on incorporating icons resembling bees. This choice was made in order to inject some diversity and prevent the repetition of the same artwork throughout the designs.
 |
| Figure 2.12 - AI Workspace, Week 9 (31 May 2023) |
3) Deploying on Instagram
|
||
|
After Photoshop the mockups designs, we will just need to arrange the
layouts that conveyed the intended message. We need to ensure the layouts
are balance too.
Description: As mentioned earlier in the selection of my colour palette, as Green reminds me of recycle and go green, thus the message intended to convey was to raise awareness to the public to not use plastic materials cups for their event or activities.
Description: The book cover was crafted using discarded cardboard and mountboard, while the unused blank paper from unfinished books was repurposed and reused. Interested in making your own book? You can refer to this link to make yourself a book (s).
Description: The industry that typically generates the most paper waste is the printing and publishing industry. This includes newspapers, magazines, books, and other printed materials. As a results, we produce brochure and leaflets for school, companies and agencies using materials that are more environment friendly such as bamboo, sugarcane and seed paper.
|
| Figure 2.14 - Attempt #2: IG Layout, Week 8 (24 May 2023) |
Final Task 2(B): Collateral
- JPEG
|
|
Figure 2.15 - Final Motif, Week 8 (28 May 2023) |
Description: I utilized design elements such as shapes and lines to
craft and strengthen my brand's positioning and identity. However, I
encountered a challenge where these elements seemed disconnected and
lacked coherence with my brand's message and objectives. To address this
issue, I creatively resolved it by incorporating my brand's initial, the
letter V, and inverting it to form a diamond shape. This solution allowed
for a harmonious alignment between the design elements and the essence of
my brand.
|
|
|
Description: As mentioned earlier in the selection of my colour palette, as Green reminds me of recycle and go green, thus the message intended to convey was to raise awareness to the public to not use plastic materials cups for their event or activities.
|
| Figure 2.17 - Final Collateral 2: Book, Week 9 (31 May 2023) |
Description: The book cover was crafted using discarded cardboard and mountboard, while the unused blank paper from unfinished books was repurposed and reused. Interested in making your own book? You can refer to this link to make yourself a book (s).
|
|
|
Description: The industry that typically generates the most paper waste is the printing and publishing industry. This includes newspapers, magazines, books, and other printed materials. As a results, we produce brochure and leaflets for school, companies and agencies using materials that are more environment friendly such as bamboo, sugarcane and seed paper.
|
|
Figure 2.19 - Final Self Captured Image, Week 8 (28 May 2023) |
Description: I captured this self-image using the Noir
effect and subsequently imported it into Adobe Photoshop. To enhance the
image's effect or create a distinctive appearance like the sepia effect,
I employed the Image > Mode > Grayscale > Duotone feature. This
involved combining the grayscale image with a secondary color, typically
a spot color, to achieve the desired result. Read
more about duotone.
|
|
|
Description: I aim for my animation to align with my brand objective of simplicity and providing a sense of relaxation. It is important to incorporate crucial elements such as my visual identity and key artwork.
To create an engaging start, I envision the visual identity rotating and the heading subtly shifting in different directions. This concept draws inspiration from the inviting entrances of malls or supermarkets, which symbolize a transition into a new experience.
As the animation progresses, the introduction of my key artwork symbolizes the beginning of a world where individuals are more conscious and caring towards our environment.
|
| Figure 2.21 - Final Collateral 4: Square (/Packaging) Box, Week 9 (31 May 2023) |
|
|
|
|
|
|
Description: We incorporate recycled materials into the
production of our t-shirts. By utilising recycled polyester fibres made
from post-consumer plastic bottles, we actively participate in the cycle
of reuse and minimise the consumption of new resources. This process
helps to reduce plastic waste, lessening the burden on landfills and
oceans.
In addition to the materials used, we prioritize the longevity and
durability of our t-shirts. By crafting them with high-quality stitching
and finishes, we ensure that they can be worn and enjoyed for a long time,
minimizing the need for frequent replacements and reducing overall textile
waste.
It is crucial to discover something that makes sense and communicates a
message about oneself. To achieve this, we should apply meaning in the
form, and keep the design simple so that the meaning is easily
decipherable. Clarity should always take precedence over complexity when
it comes to creating formal shapes.
The selection of a color palette is crucial as it needs to strike a
balance between complementing and contrasting with each other. This
choice should also align with the desired message for the audience.
Careful consideration should be given to the colors used, as they can
evoke specific emotions or convey particular meanings.
When capturing portraits or images, several factors come into play. Firstly, the background should be clear and uncluttered, ensuring that it doesn't distract from the main subject. Adequate lighting is essential (indirect lightning and other side is dimer) to highlight the subject's features and create a visually appealing composition. Additionally, it's advisable to maintain a distance of approximately 3 feet between the subject and the wall or background to allow for proper depth and perspective in the photograph.
By paying attention to these factors, the resulting portraits or images will be more visually appealing, with a clear focus on the subject while ensuring the background and lighting contribute to the overall aesthetic quality.
Week 9
I discovered that conducting proper and comprehensive research is essential for designers when it comes to designing or creating. This is because a well-executed design has the power to leave a strong impression on the public and significantly contribute to expanding our brand. Additionally, I've noticed that many of us tend to associate complexity with quality and success. However, it is crucial to prioritize the intention of the brand and consider how to effectively convey the message through simple design elements or strategies that foster connections with the public.
The start of the Industrial Revolution was marked by the invention of
typography, which helped mass-produce books. As technology advanced, so
did typography, which affected how designers created their designs. Even
though typography had limitations, designers used their creativity to
make the most of the available technology. From hand-writing to digital
typography, designers need to know about the different technologies to
blend design and production effectively.
HAND COMPOSITION
1450s to 1880s
5. Responsive Design
 |
| Figure 2.24 - IG Profile Screenshot, Week 9 (31 May 2023) |
Visit My Instagram: vince.com.my
|
| Figure 2.25 - Final Task 2: Collateral_JPEG, Week 9 (31 May 2023) |
|
Feedback
1. Does the key artwork symbolically/creatively represent the
person?
2. Is the key artwork readable and legible?
3. Does the key artwork look well crafted
(lines/shapes)?
4. Does the key artwork look like a logo—is it free standing
(w/background)?
5. Is there a good balance between negative and positive
space?
6. Is there unnecessary use of non-objective elements?
Week 5
General Feedback
It's crucial to keep wordmarks and logos basic and refrain from trying
to add too much significance while developing them. Negative and
positive space should be balanced by designers to make the logo clear,
legible, and able to stand alone from the background. Designers can
utilise mind mapping to find their own unique strengths and apply them
to create powerful and meaningful designs. In the end, the word mark
serves as a representation of the designer and must be carefully
constructed and concisely stated.
Specific Feedback
- Fig 1.1 - monogram sketches attempt 1
After reviewing my sketches for the monogram, I realized that there
were some areas that needed improvement. The curvature in Sketch #1
was not as impressive as I had hoped, and the meaning behind it was
not strong enough. Additionally, the thin and thick strokes in most of
the sketches were not consistent, which made them look unpolished. The
gradient effect in Sketch #5 did not enhance the design and seemed
unnecessary. Among all the sketches, Sketch #3 was the most promising
as it resembled a clock and conveyed a sense of timelessness. Sketch
#4 was also elegant and simple, but I received feedback to shorten the
letter V to the x-height.
Week 6
General Feedback
Specific Feedback
- Fig 1.2 - monogram sketches attempt 2
Choose any typeface and modify it then make it look legible. Do at
least 3 letterforms for monogram. Need to rework on it. However, the
monograms in the middle and right are balanced.
Week 7
General Feedback
When capturing portraits or images, several factors come into play. Firstly, the background should be clear and uncluttered, ensuring that it doesn't distract from the main subject. Adequate lighting is essential (indirect lightning and other side is dimer) to highlight the subject's features and create a visually appealing composition. Additionally, it's advisable to maintain a distance of approximately 3 feet between the subject and the wall or background to allow for proper depth and perspective in the photograph.
By paying attention to these factors, the resulting portraits or images will be more visually appealing, with a clear focus on the subject while ensuring the background and lighting contribute to the overall aesthetic quality.
Specific Feedback
- Fig 1.3 - key artwork sketch 1
1. the thin strokes should be thicken more
2. bad selection of colour pallette
3. plan ahead of the tiles and layout of our instagram
4. a simple animation would be great enough
Week 9
General Feedback
We need to consider and think of what our brand stand for. What we
want to sell or how to convey messages through representing of
products. Our profile should be written professionally and represents
the ethos of our brand
Specific Feedback
- Figure 2.13 - Attempt #2: IG Layout
Expand the use of my visual identity (vertical and inverted v).
Duplicating it might get a nice pattern for the book cover.
Week 10
Level: Developing
Reflection
Experience
Over the past few weeks, I found it enjoyable to have the opportunity to delve into more than just Typography and engage in graphic and branding work. However, creating a word mark or logo that truly represented us turned out to be less enjoyable than anticipated, as it felt like I was being asked to design a typeface, which was beyond my capabilities. As expected, my proposals for our key artwork were consistently rejected throughout the weeks. Thankfully, when Mr. Vinod stepped in and provided valuable assistance, pushing us forward, I began to have fun again while working on developing my brand.
Observation
During the process of designing a typeface or developing a brand, I've noticed that many of us fail to genuinely contemplate our brand's purpose. This is often because we lack a written direction or concept, leaving us without a clear message to convey to the public. However, I was fortunate to have a friend who is a student at another art academy, and they encouraged me to push forward and give it my all, especially considering the approaching deadline, which left no room for redoing or rethinking the message of my brand. As a result, I felt a sense of contentment with my progress and the outcomes achieved.
Findings
Further Reading
Reference:
Meggs, P. B., Carter, R., Day, B., Maxa, S., & Sanders, M. (2014).
Typographic Design: Form and
Communication. Wiley.
Chapter 7: The Evolution of Typographic Technology
HAND COMPOSITION
1450s to 1880s
- Hand composition was accomplished by assembling individual pieces of type into lines.
- Type was set letter by letter, line by line, until the desired setting was achieved.
- Additional spaces were created in the line by inserting metal spacing material between words, when it was necessary to justify a line.
- Letter-spacing was achieved by inserting very thin pieces of copper or brass between letters until words appeared to be evenly spaced.
- When additional space between lines was desired, strips of lead were inserted between the lines until the type column was the proper depth. By adding lead, the exact proportion and size of the column could be formed, assuring readability through consistent spacing.
- Tools used: Composing Stick, Type Case and Chase
MACHINE COMPOSITION
1880s to 1960s
1. Linotype
2. Monotype
- This machine cast one character at a time rather than an entire line.
- It was composed of two parts: a keyboard and a type caster.
- When an operator typed at a keyboard, a perforated paper tape was generated.
- This coded tape was used to drive the second part of the system—the type caster.
- Actual casting of type occurred when hot metal was forced into matrices from the matrix case.
- Once the cast characters had cooled, they were placed into a metal tray called a galley, where the lines were assembled.
- The Monotype matrix case held many more characters than a Linotype magazine, and the casting machine was relatively fast, casting 150 characters per minute.
3. Ludlow
- Unlike the Linotype and Monotype, the Ludlow did not have a keyboard but combined both hand and machine production.
- An operator took matrices from a matrix case similar to a handset type case and placed them into a special composing stick, one by one.
- The stick would automatically justify or center lines by inserting blank matrices where necessary.
- Although partially automated, this process was time- consuming. Distributing the matrices back into the type case by hand added to the production time.
- In the case of handset composition, the Ludlow was neither practical nor efficient for setting large volumes of type.
PHOTOTYPESETTING
1950s to 1970s
- Phototypesetting is a cold-type process, for type is set not from molten cast metal, but by exposing film negatives of characters onto photographic paper.
- Two kinds of phototypesetting systems were developed:
- Display phototypesetters, for larger headlines and titles; and
- Keyboard phototypesetters, used to set text type through keyboard input.
- Phototypesetting gradually replaced metal type during the 1960s, as the technology improved rapidly.
DIGITAL TYPESETTING
1970s to present
- Using only electronic rather than mechanical components, computers set and process type at speeds never thought possible.
- The text type from digital typesetters rivals the quality of photo type.
- Every detail of a letter is defined, including horizontal strokes, vertical strokes, and curves.
- The coded characters are stored electronically as digital instructions designating the x and y coordinates of the character on the grid.
- The more dots or lines used to describe a letterform, the higher the resolution.
- Because letters are constructed on a grid, the curved lines consist of a series of stair-stepped contours.
- When more dots are used to represent a curve, the curve appears smoother to the eye.
- The quality of letterforms is determined not only by their design but also by their digital resolution.
1. Scanning and Laser Systems
- Digital-Scanning Systems
- photographic characters were digitally scanned and recorded electronically on a magnetic disk or tape.
- the characters were translated into a grid of extremely high resolution and then transmitted as a set of instructions
- Because the output type is digital, it could be modified automatically to reflect a number of typographic variations.
- For example, it could be made heavier, lighter, slanted, condensed, or expanded at the command of the operator.
- Digital-Laser Systems
- Used a laser beam that scanned photographic paper as it read digital information stored in the typesetter.
- As the paper was scanned, a series of dots forming the characters were exposed to the paper.
- The information controlling the laser included the font, as well as spacing, paragraph configuration, hyphenation, and kerning.
2. Desktop Publishing
- Digital typesetting moved onto the designer’s desktop with the development of more powerful personal computers, software applications, and laser printers.
- Page-design programs were made possible by the development of interpretive programming languages that provide a software interface between page-design programs and output devices.
- Color monitors, faster processors, and more robust file storage methods continued to speed up the design process.
- One file can take many forms and may be sent to a commercial printer, self-published, converted to a template, made into an interactive Portable Document Format (PDF), or used as a prototype for an app, game, or web page.
- Control over the means of production of typography has also given designers the tools to experiment with typographic form, composing it in unconventional or expressive ways by manipulating settings of leading, tracking, rotation, and more.
3. Web
- As the use of the web increased, more sophisticated layout and typeface choices were developed.
- Complex column arrangements, broad typeface choices, layering, and rotation became possible as browsers and coding became vastly more powerful.
- Web typography is meant to be not only read but also engaged.
- This can take the form of links, which allow site users to load new pages or access additional information, or other interface components that allow further interaction with content.
- This act of engagement has grown in importance as websites have moved from presenting relatively static information on screen to encouraging user participation while dynamically assembling the content.
4. Mobile Apps
- With the launch of the App Store in 2008, Apple set in motion the next great advance in on-screen typography.
- Mobile apps are generally developed utilizing a software development kit (SDK) that governs the platform they run on.
- This SDK contains not only programming instructions but also interface, design, and even typography specifications.
- App designers can depart from these guidelines, but on their own these standards establish a typographic cohesion and ready-made hierarchy of information.
- Typography for mobile apps is influenced by a fixed screen size that responds to touch and gestures performed by fingers.
- On-screen design and typography “respond” to the screen size they are being viewed on, fitting content into the frame for each device.
- The advantage of this technique is that a single code base is used for all display sizes, simplifying the coding and unifying the design from device to device.
- Virtually all aspects of typographic layout and design can be varied in response to a specific screen size. Visual and interface elements can also be removed or reordered to best utilize the communication potential of the specific device.
- Responsive design is especially challenging since the designer must plan to display information in a variety of layouts that best suit the screen size.
