Pamantasan ng Lungsod ng Maynila

Intramuros, Manila, Philippines

College of Humanities, Arts, and Social Sciences
___________________________________________________________________

In partial fulfillment of the requirements in the subject

Digital Imaging | BAC 3104-2

Written Report
LEGIBILITY

Submitted by:
BAC III-2 | GROUP 7
ALCAPARAZ, Rocelle D.
DALISAY, Patricia Robyn C.
SALEM, Merrie Nicole V.
SORIANO, Reycel Anne B.

Submitted to:
Prof. Alfredo G. Gabot

OCTOBER 2021
 Legibility

I. Definition
Legibility is the measurement of how quickly and accurately a reader is in
distinguishing the design of texts, typeface, or font from one another. It's all about being
able to identify a character in any writing system and in any language.
Characters who are similar to one another appear in all writing systems, creating
difficulty. The degree of confusion is determined by the typeface's design and the scale
at which characters are presented: smaller characters may require more effort to be
properly identified than larger ones.
To further understand, illegibility can be thought of as a circumstance in which
your mind is ready for additional knowledge but must wait for your eyes to make out the
words attempting to convey that information. Or in simpler words, your mind is waiting
for your sight to read the illegible text.
Legibility, on the other hand, is the total opposite. The letters and words are so
distinctive that your eyes must wait for your mind to catch up. It is simple to read legible
texts. In addition, the legible type encourages communication, whereas the illegible one
creates barriers.

II. Examples of bad and good designs

"The term readability doesn't ask simply, can you read it? It asks, Do you want to
read it?" - @typographica

A good design makes a viewer take their time in consuming or appreciating the
visuals because not only is it pleasing in the eyes, it is also easier for the viewer to
interact and understand them.

On the other hand, a bad design leaves a bad impression to the viewers and
won't take the product/visuals seriously

Here are some examples of a good and bad design:

 Good Design

● A good design uses the perfect font which blends and harmonizes with its
background image and it does not overshadow the text, and the text also stands
out because it creates a contrast between the two.

● A good design is when a name/title stands out. It gives a sense of authenticity

and singularity as the font is unnamed yet unique and it catches the viewer's
attention.

● A good design pairs an overused font with a less used font. Seeing the same
typefaces can be very repetitive and boring, so pairing it with a less used font can
make a design feel distinctive and fresh.

● Using the same typefaces in one's work especially when it's trendy is inevitable.
So using a fancier or upgraded version of an overused/popular font typefaces
gives a more refreshing feeling to the work.

Bad Design

● A bad design is when an image uses too many typefaces. It may look appealing
but as you look closely it can be overwhelming and using too many typefaces
can appear inconsistent. There was also no hierarchy not knowing what or which
our eyes would prioritize. Choosing a typefaces is not just about its aesthetic but
it also needs to consider the interaction between these different typefaces.

● Another bad design is when a visual uses fonts that are not suitable for the
theme. They could have used a more appealing or more popular font to create a
more unique look. Using a typeface with a variety of fonts is much better than
using faux italics or fonts which have no italics that the computer cannot read.

● Last example of a bad design is using display faces or fancy faces for body copy.
This design is an eyesore because it is illegible, where the text is either too bold
or too close to each other making it overwhelming to look at.

III. How to make your text legible

Upon doing a design, one should be aware of three properties of the text:
● Is the text large enough?
 ● Is the contrast high enough?
● Is the typeface feasible for the job?
The first two questions, fortunately, have well-established guidelines. The third
principle, however, is more difficult to meet because reading and the impact of
typography on legibility are not sufficiently known enough to provide a simple rule for
selecting a typeface. However, if you follow the recommendations below, you'll be able
to create content and interfaces that are easy to read for all of your users.

1. Find the right typeface

A typographic tool that can increase the overall legibility of a text is the typeface
used. A good typeface should have a visual appeal, on-screen legibility, and be a great
fit for the style of the project.
When selecting a typeface, some designers depend solely on their personal
preference or dubious standards. It is unclear which characteristics make a typeface
easy to read as centuries of research have yielded mixed results. However, one can rely
on the following information by most designers that can help to increase the legibility of
a text.
Sans serif styles were initially recommended for text display on screens because
serifs could not be exhibited on low-resolution monitors without seeming fuzzy. Serif
typefaces have been preferred in print for centuries, as they are thought to be more
legible because the serifs assist the eyes in following the horizontal reading direction.
However, scientific evidence shows that serifs are not clearly superior to sans serifs or
vice versa. So, if you're confident that your text will look good on high-resolution
devices, you can go with either option.
Regular and bold fonts are the most legible for most types (weight between 400
and 700). Both low and very heavy weights (extra bold, black) will usually reduce
legibility significantly.
Only use light/condensed typefaces in circumstances where the text size and
contrast are more than enough. If you choose a typeface largely to achieve an even
texture in your text body, it is unlikely to be as legible as it could be. In challenging
reading situations, a bold font may increase the legibility of typefaces with a lightweight.
 To see if your preferred typeface is legible, you should compare your desired
typeface to the most prevalent typefaces such as Helvetica, Baskerville, and Bodoni.
According to studies, readers who read in familiar typefaces read quicker and are
happier than those who read in new typefaces. As a result, the more your proposed
typeface differs from the most prevalent typefaces in terms of weight, spacing, or letter
design, the more likely your readers will be at a disadvantage. While wide headlines
allow for some artistic license, avoid experimenting with your text body.

2. Avoid very small or very large x-heights

The x-height is the distance between the baseline and the mean line in a
typeface. In general, it is the height of the letter x in any font.
In typefaces, very large x-heights decrease legibility. For example, the letter I can
be barely distinguished from the letter l. Similarly, a very small x-height decreases
legibility. When the body of the letter is too small in comparison to the ascenders and
cap-height, our eyes become distracted.

3. Avoid unfavorable color combinations

The following text and background color combinations may cause poor legibility
and should be avoided:
● Red and green
● Blue and yellow
● Red and blue/purple
Because of the way our eyes operate, most so-called color-blind people cannot
distinguish the difference between red and green, and some cannot tell the difference
between blue and yellow. This is not an issue if the color contrast is great; however, if
the contrast is only moderate, the text may be unreadable for them. Hence, examine
your designs in grayscale to see if all of the texts have enough contrast.
A text with insufficient contrast will be a hassle to read from start to finish (such
as light grey text on white). Over time, too much (such as black lettering on white) might
tire the eyes. According to new research, dyslexic people prefer really light colors over
blank white as a text background since too much contrast makes it harder to read.
 4. Choose the right size
The following are the suggested text sizes provided by UX Studio:
● 14-16 pt for body texts,
● 12-14 pt for secondary texts,
● And keep at least a 2 pt difference between the two.
Keep in mind that for interaction-heavy designs, smaller text sizes are preferable,
whereas text-heavy content necessitates larger ones (16-18 pt body font works ideally
in this case). In general, what works on a desktop or laptop screen may be too small on
a mobile device, so test your designs on a device before committing to them.

IV. Importance of legibility

These are the following key points and why your design must be strict about the text
size, contrast, and good typography.

· It’s possible that you have good eyesight and believe that a small text
size is acceptable. But do you want your design to be just good enough for
the average? What about the readers that have poor eyesight? Or maybe a
typical person? That clearly shows you’re making life difficult for half of your
potential readers.
· Do not assume that users will be able to adjust their text's size. The
majority of readers never change their setting on their gadgets. They will most
likely put up with your design and have a poor experience as a result.
· The majority of people have some sort of visual impairment and it
requires some form of correction, such as glasses. But many of them do
not wear them in their daily routine. Do you want your design to force them to
wear their glasses all of the time?
· Be aware that some people are far-sighted, they instinctively move farther
away, making small text even harder to read.
· When the font is smaller than it should be, reading it requires more
concentration. This extra effort will surely lead to frustration in the long run.
Don't waste an opportunity, do it right for the sake of your future readers.
 You may have the opportunity to work in a big company. Get that because
some opportunities never come twice.

Legibility measures how simple it is to distinguish one letter or word from another, as
well as how easy it is to read blocks of text. It’s objective is to make the type more
readable and interesting, and not to attract attention to itself.

V. Conclusion
In summary, knowing the intended context of the typeface you're considering
choosing is essential. Some typefaces are extremely versatile, coming in a variety of
weights and styles that can be utilized in a number of ways. Others are more restricted
that are designed for a specific purpose while some are not.

Understanding what makes one typeface more legible than another is also
critical. When it comes to selecting a typeface, it all comes down to how you want to
utilize it. Consider the following questions: What size is the text going to be? Is it going
to be a headline or a body text? Is it necessary for it to be dull, or will it be utilized
mostly as eye candy? Will it be used in combination with another font? Is the typeface's
appearance appropriate for the subject matter?

Texts that are most visible to the reader are the most readable and
understandable. In other words, the design, layout, flow, and legibility do not call
attention to themselves. All design should only serve to portray the message, inform
and convey meaning, connect with and relate to your audience, and evoke a positive
feeling about the context of your designs.
References
Arty Factory. (n.d.). Graphic Design Lessons - The Art Of Typography. Retrieved from

https://www.artyfactory.com/graphic_design/the_art_of_typography.html#legibility

Bradley, S. (2011 February 14). The Two Functions Of Type: Readability And Legibility.

Vanseo Design. Retrieved from

https://vanseodesign.com/web-design/display-text-type/

Farley, J. (2010). Typography: Readability & legibility (part 2). Sitepoint. Retrieved from

https://www.sitepoint.com/typography-readability-legibility-part-2/

Jurek Breuninger. (2019). Legibility: how to make text convenient to read - UX

Collective. Medium; UX Collective. Retrieved from

https://uxdesign.cc/legibility-how-to-make-text-convenient-to-read-7f96b84bd8af

Strizver, I. (n.d.). Legibility and Readability: What’s the Difference? Creative PRO.

Retrieved from https://creativepro.com/legibility-and-readability-whats-the-difference/

Toth, N. (2018). Legibility: 7 typographic tools to create readable screens. Ux Studio.

Retrieved from https://uxstudioteam.com/ux-blog/legibility/