12 tipography for the web

www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 1
ERGONOMICS APPLIED TO THE DESIGN OF USABLE WEB
PAGES AND APPS
Roberto DADDA and Paolo NEGRI

Tipography for the web

Typography
the art and technique
of arranging type to
make written
language legible,
readable, and
apealing when
displayed.
Wikipedia

Web design in 95%
typography

Rules?
•There are no rules in
typography
•There are principles,
best practice and
methods that works
most of the times, but
nothing works all of
the time

Typeface vs font
•Typeface: Name of the design in full, style or
famili of styles
•Arial
•Font: format or storage mechanism
•Arial.ttf
Typeface is to font what is a song to an .MP3

Anatomy of a typeface

Serif
• Have serifs (littel feet)
• Good for headigs
• Traditional
Garamond
Times new roman
Libre Baskerville

Sans serif
• Without serifs
• Good for body corps
• Modern
Arial
Lucida consolle
Open sans
Latha

Slab serif
• Thick block like serif
• Best for headings and short amounts of text
• Modern
Rockwell
Courier
Verdana
Thaoma

Display
• Serif or san serif
• Best for heafings and short amount of text
Bauhaus 93
Impact
ALGERIAN
Modern love
STENCIL

Script– Hand writing
• Best for headings and short amount of text
Blackadder TT
Bradley hand
Freestyle script

Atkinson Hyperlegible, a very special font

Legibility
The legibility of a
typeface is a product of
its design, and relates to
the ability to distinguish
one glyph from another
when reading.
It depends from several
factors.

Legibility (1)
x-height: This term refers to the height of the lowercase in proportion
to the caps. The taller the x-height, the more legible the typeface tends
to be.
Both text blocks are set in 18 pt, but the one set in Enclave (right) is more
legible, primarily due to its taller x-height than ITC Golden Type (left), with
its short x-height.

Legibility (2)
Character width: The easiest type designs to read are those that have
an ‘average’ overall width. Very condensed as well as extended designs
are less legible, especially for smaller settings such as text, subheads,
and credits.
When comparing text set in Clearview Text Book Compressed with that set in Clearview Book, one
can see that the version on the right has a greater degree of legibility than the very narrow version
to its left.

Legibility (3)
Weight: Extremely light and heavy weights are more difficult to read,
so if legibility is your goal, stick to something in the middle. Book
weights (also called Regular) are so named as they are most often used
to typeset books for that very reason.
Neither Clearview Text Extra Thin nor the Black weight have the same high degree of legibility for lengthy text that
the Book weight has, as seen in the previous example (on the right). Save these weights for shorter settings, and
when maximum legibility is not a requirement.

Legibility (4)
Design traits: The overall shapes and design traits of a typeface, if too
quirky or fussy, will reduce legibility. While this might be acceptable for
shorter display settings, stick to simpler typeface designs for lengthy
text settings.
Not marble, nor the gilded monuments
Of princes shall outlive this pow'rful rhyme

Legibility (5)
Stroke contrast: Extreme stroke contrast, that is, the ration of thick to
thin strokes, can reduce legibility as well. This is especially true of
modern designs such as Bodoni and Didot whose thin strokes can
appear so thin when reproduced in print or on the web that it can
become challenging to read when used too small or for lots of text.
The extreme stroke contrast of Didot (left) can make it harder to read for small settings, as the thin
strokes can seem to disappear at smaller sizes and at lower resolutions.

Legibility (6)
Counters: The smaller the counters (enclosed or semi-
enclosed negative shapes) of a typeface, the more
challenging it can be to read. This is a factor when using
very heavy weights, and it’s made even worse in smaller
settings. Avoid this by knowing ahead of time how a
particular typeface looks at the intended size and medium.
Aachen Black has very small counters, and should be saved for larger display settings. The upper
example looks fine, but the lower setting loses its legibility as the counters start to get smaller, and in
some environments will appear to fill in.

Legibility (7)
Serifs or lack thereof: While serifs are generally believed to enhance
legibility, this is not always the case.
Not every serif typeface is more readable than a sans serif, as
demonstrated by the fairly ornate ITC Kallos™ (left) compared with
Avenir® Next (right).
The serifs are easily visible in
Legacy® Serif (left), as compared
with Legacy Sans (right), which is
unadorned.

Readibility
Readability is related
to how the type is
arranged or typeset.
Is controlled by the
designer.

Readibility (1)
Type size: When setting text, the smaller the size, the more challenging
it can be to read. This is especially true for seniors, children, and those
with visual impairments. For these reasons, the demographics of your
intended audience should be taken into consideration when deciding
on a size for text.
Consider the demographics of your audience when selecting a type size: smaller type is
harder to read for many, including seniors, children, and visually challenged individuals.

Readibility (2)
Type case: All cap settings for lengthy text are more challenging to read
due to the lack of ascenders and descenders which contribute to
character recognition, so stick to upper and lowercase when readability
is of prime importance.
Consider the demographics of your audience when selecting a type size: smaller type is
harder to read for many, including seniors, children, and visually challenged individuals.

Readibility (3)
Line spacing (aka leading): Tight line spacing impacts readability
negatively. The amount needed to improve readability will depend on
the size and design of a typeface as well as its x-height. Therefore,
when ease of reading is of high importance, make sure there is enough
line spacing to maximize readability, which in general is at least two to
three points for print, and a bit more for smaller digital devices.
Tight line spacing reduces readability, as you can clearly see in this setting of
Expo Serif set in 18/18 point (left) and 18/23 point (right).

Readibility (4)
Line length: When the line length, or column width, is too short, it can
have many hyphenated words, which reduce readability. In addition,
the eyes have to make many ‘returns’ that can cause fatigue and
reduce comprehension. On the other hand, very long lines can cause
confusion when shifting from the end of one line to the beginning of
another. For best readability, stick to ‘average’ line length, which is
usually between 45 and 70 characters.

Readibility (5)
Color, or contrast: Make sure there is enough color contrast between
the type and its background, lest it becomes harder to read. This is
important whether you are using black and white (and tints of the
former) as well as color. When styling type for digital usage, be sure to
allow for variation from one device, platform, and settings to another,
as they can vary dramatically in how they display color and contrast.
High contrast between the type and the
background ensure good readability.
A legible typeface such as ITC Flora can sacrifice readability
when set with tight line spacing (18/18 point), while its
readability improves dramatically when set smaller, but
with more line spacing (16/24) point.

KISS: keep it simple!
One font for heading
One font for body of text. It can be atempting to change and use
several fonts, but no it is NOT a good idea!
There is no maximum or minimum number of fonts to be used in
a web page, but the moro fonts you have the more ugly and
confusing the page may look.
Do NOT use to much fantasy in choosing fonts!

Colors choice

The term readibility doesn’t
ask simply «Can I read it?» or
«How fast can I read it?».
It also asks «Do you want to
read it?»

One of the principles of durable
typography is always legibility; another is
something more than legibility: some
earned or unearned interest that gives its
living energy to the page.”
Robert Bringhurst The Elements of Typographic Style “

The typography bible!
https://readings.design/PDF/the_elements_of_typographic_style.pdf

Usability
Roberto DADDA
roberto@dadda.it
www.dadda.it
Skype, Facebook e Twitter robertodadda

12 tipography for the web

More Related Content

Similar to 12 tipography for the web

More from Roberto Dadda

Recently uploaded

12 tipography for the web