OpenType

Font
Variations

Digital Typography Revolution has just been announced

Hubert Mietkiewicz MA Visual Communication

Royal College of Art

London, 2017

Words 10 789

Tutor Adriana Cerne

Abstract 3

Substantial cognitive skills such reading, writing and learning are

dismantled and deformed to suit the nonlinear experience of a

digital text that is developed on and transmitted by singular medium

— device’s screen. The textuality within digital media urges for new

ways of information reproduction, dissemination and consumption.

Methods that, simultaneously are dealing with the burden of

information overload and the limitations inherited from previous

typographic media.

The advent of new typographic standard — OpenType Font Variations

appears as a necessary consequence and a natural drive towards a

redeinition of digital typography.

The relevance of this study is to speculate about conceptual

possibilities that arise, not realistic promises and the implicit

theoretical understanding of the processes that are collaterally

intertwined.
4 Thanks Contents 5

To beloved Natalia for mental support and serving Abstract

best dinners and desserts in the world.

Introduction
To IDM music genre and iced coffee for being with Research questions
me for the last 2 weeks of hard work on that essay.

1 Traditional Typography

→ What is typography?

→ Why typography matters?

→ What deines successful typography?

2 Digital Typography and User Interface

→ Digital Typography and Web fonts

→ Introduction to User Interface and User Experience Design

Digital Typography is an Interface

→ Introduction to OpenType Font Variations

→ Promises versus reality

3 Digital writing and reading

→ How do we read?

→ How do we write?
6 7

4 Conceptual possibilities of OpenType Font Variations

→ Idea #1 New Typography Accessibility

→ Idea #2 TrueTone & TrueText

→ Idea #3 Habitual Reading Enhancer

→ Idea #4 Extended Reading Experience

→ Idea #5 Typographic Buddy

5 Conclusions

Images

Bibliography
8 Introduction 9

Substantial cognitive skills such reading, writing and learning are

“The world of electronic communication is one of
textual overload, where the amount of writing dismantled and deformed to suit the nonlinear experience of a

largely exceeds the reader’s ability to fully digital text that is developed on and transmitted by singular medium

take it in”1 – device’s screen. The textuality within digital media urges for new

Roger Chartier ways of information reproduction, dissemination and consumption.

Methods that, simultaneously are dealing with the burden of

information overload and the limitations inherited from previous

typographic media.

The advent of new typographic standard – OpenType Font Variations

appears as a necessary consequence and a natural drive towards a

In loose interpretation, the proliferation of digital media and the redeinition of digital typography. Its functionality essentially offers

omnipresent technological innovations by allegedly improving our letterforms that are more customisable to the purpose, capable of

capacities, performance and opportunities, disconnect us from dynamic transformation upon context they are placed in and a new

experiencing these to real, inclusive capabilities. In other words, kind of typographic accessibility that engenders satisfaction of its user

because of the absorption in technology and digital interfaces, being in the irst place.

fully immersed in physical experience is lattened only to the elemental

– scratching the surface stimulations. Nearly ive hundred years of As OpenType Font Variations are still in their infancy, we are in

typographic communication shaped the underlying theory which the position empowering us to build the landscape for people to

constitutes our ways of perceiving the reality and on-going, prevalent accept and embrace the typographic revolution that is yet to come.

digital revolution is consequently shifting and reconstructing them at Transition, however, should occur gradually and resonate as inviting

the very moment. rather than off-putting.

The ecosystem overarching OpenType Font Variations is in constant

1 Hoeks, Henk, and Ewan Lentjes, eds., ฀The฀ Triumph of Typography: Culture,
Communication, New Media (Arnhem: ArtEZ Press, 2015) pp 203 - Roger Chartier lux and does not allow for its commercial implementation and release
10 11

of typesetting or type drawing tools. Therefore, the relevance of

2
It is then in the hands of those who are engaged enough to engender

this study is to speculate about conceptual possibilities that arise, not the revolution of not only digital typography and media, but all the

realistic promises and the implicit theoretical understanding of the existent communication and cognition and what follows, surrounding

processes that are collaterally intertwined. us reality. At the same time, keeping in mind that technology was

brought to life to serve us with the unconditional support, and it is the

Without being a typographic authority, I have allowed myself for true harmony that we really crave, which instead of restricting us from

speculation about future of typography by investigation of its history, full physical experience, is bringing us much closer to its quintessence.

importance within our society and impact it draws on the modern

modes of communication. Naturally, I have covered the only fraction

of typographic history, semiotics and technical details with the

intention to invite the nonexpert reader into the typographic universe

without overwhelming them with computing gimmicks and confusing

deinitions.

Consequently, this essay confronts traditional means of typographic

communication with just announced inventions that undoubtedly

beneit the urge for better lexibility, responsiveness, accessibility and

productivity. Technology is (nearly) there, possibilities, ambitions and

spirit are present as well.

2 said Dan Rhatigan during TYPO Lab Berlin in April 2017

12 Research questions 13

1 How nearly ive hundred years of typographic design history

affected the contemporary communication, cognitive processes and

information reproduction?

2 Why reading from screen still feels abnormal and how the

introduction of socially engaged writing and reading paired with digital

typography revolution can drive a positive change?

3 How digital typography and user interface intertwine and

inluence one another?

4 What are the conceptual possibilities that lourished with the

arrival of new typographic technology – OpenType Font Variations?

14 Traditional Typography What is typography? 15

Written word was known to humanity long before the coinage

of the term of typesetting or typography. The irst evidence of writing

systems stems from circa 3200 B.C. in which Sumerian scribes in

the ancient city-state of Uruk, southern Mesopotamia , were using 1

cuneiform writing pressed on wet clay tablets. Combinations of these

marks depicted syllables that could be laid out together to form

words. Joshua J. Mark, writer and co-founder of Ancient History

2

Encyclopedia, sums that “the Sumerians irst invented writing as

a means of long-distance communication which was necessitated

by trade” across his extensive articles on writing. Consequently,

3

1 present day Iraq

2 Editors, The, “The World’s Oldest Writing,” Archaeology Magazine <http://www.
archaeology.org/issues/213-1605/features/4326-cuneiform-the-world-s-oldest-writing>
[accessed 22 June 2017]
3 “Writing,” Ancient History Encyclopedia <http://www.ancient.eu/writing/>
[accessed 22 June 2017]
16 17

they have been the irst civilisation recognising that typography or a

mark making in that case, might have an economic function beyond

decoration.However, people of Phoenicia civilisation – Phoenicians,

that stretched between present day Syria to Northern Israel, are the

ones that are credited with creating the irst alphabet around 1000

B.C, the same one that was later used by Greeks.

Later, the period of Middle Ages was the time where the hand-written

and well-illustrated manuscripts lourished, nonetheless calligraphy

itself has been used in ancient China already, around 200 BC. The

introduction of calligraphy together with page layout and lettering

occupied production of celebratory documents and books, including

calligraphy illustrated versions of Bible. The process although was

tedious, required a lot of time and craftsmanship which made the

Fig.1 Cuneiform Tablet with Pheonician writing inscripited
books and knowledge inaccessible and expensive. Script style in which

scribes or monks written and copied the books was initially classiied

as “Uncial” , and then blackletter . Due to the tool limits imposed on

4 5

their bearers and exiguous awareness about reading processes, they

did not account legibility as a signiicant element of writing.

The irst machine that used movable type printing system was invented

in China, around 1000 AC. However, it was Johannes Gutenberg, that

4 Uncial is script that uses capital letters only and was commonly used from 4th to 8th
century
5 Gothic script that often is referred to as German script, as it was used for German
language until 20th century
18 19

over 400 years later, invents his moveable printing press that changed developed in 1949 by two Frenchmen, René Higonnet, and Louis

the way how we perceive books and printing today. Gutenberg Moyroud. Phototypesetting used photosensitive paper, photographic

perfected printing process and for the irst time used the alloy mixture process and personal computers to set the columns of text.

of lead, tin and antimony to create types that melted at relatively low Phototypesetting did not stay for long as just over 35 years later; irst

temperatures and allowed for more economical casting and recycling desktop publishing software became available along with the release

of matrices that already worn out. Together with print press getting of irst personal computers — namely Apple Macintosh, and the

prominent, type classiication was deined, and the convention of software Aldus PageMaker and then QuarkXPress.

reading from top left to bottom right and writing in straight lines was

permanently reinforced in Europe. The introduction of personal computers with preinstalled fonts and

available software that enable its user to typeset, self-publish and

Over 100 years later, in France, Claude Garamont, designs Garamond even design a typeface gradually revolutionised not only advertising
6

typeface that is recognised as the irst old-style serif typeface, and and publishing industry but also largely opened the profession of

despite being nearly 500 years old now, its digitised version is still graphic design. Jack Post, the lecturer at Maastricht University,

being used. Garamont worked as an engraver of punches that later emphasise the importance of digital revolution:

served as mould masters in the process of casting new metal types.

“As long as the text was laid out digitally but

The process of the Gutenbergian press was improved at the end of printed on paper, digital technology continued to

19th century by Mergenthaler Linotype Company by introducing their merge seamlessly with the traditional production

“hot metal typesetting” that used the keyboard to typeset. Linotype’s process. But even since the has been distributed

invention dominated the printing industry with new machines digitally and read from a screen, the digital

that were more automated, worked more eiciently and partially revolution has proven to be as radical as the

contributed to rising popularity of daily newspapers. revolution that was triggered by the introduction

of movable type.”7 Jack Post

After nearly 100 years, however, Linotype machines were replaced by 6 (Aldus Freehand software released in 1988)
7 Hoeks, Henk, The triumph of typography: culture. communication. new media
offset printing and more importantly by phototypesetting machines (Lannoo Publishers, 2015) pp 150 - Jack Post
20 21

In 1989, Apple released TrueType outline font standard, that two Basic typographic principles

years later was implemented for the irst time in Macintosh System

7. TrueType is digital font format and in the late 1980s was designed Nevertheless, typography, despite being a complex ield with a few

to be the main competitor of Adobe’s PostScript Type 1. It became a thousand years of history, may be eiciently explained in few simple

leading font technology due to a high degree of precision, scalability, words. According to Matthew Butterick, the typeface designer,

eiciency, size savings and support of hinting. 8

lawyer and the author of “Practical Typography” , typography is
9

everything that can be placed under the umbrella deinition of: “visual

OpenType, however, is the font format that was announced in 1996 component of the written word.” However, this deinition seems to be

by Microsoft and Adobe, which retains the structure of TrueType too broad to be valuable tackling the research issues of contemporary

but is built to supersede it. OpenType is more robust, can contain typography. Extended deinition proposed by Erik Spiekermann,

either TrueType or PostScript font outlines, has better multilingual renowned information architect and type designer, extends Butterick’s

support, has numerous “OpenType features” (that no one is using) thought and states

and has extended character storage capacities (up to 65,000 letter

outlines). OpenType is the most advanced font format available, and ”[Typography is…] the arrangement of

its new release from November 2016 – 1.8 introduces OpenType Font prefabricated elements on a page. These elements

Variations technology. Version 1.8.1 was released in January 2017. may include images, words, sentences and—above

all—the space between those elements. Ideally,

Except for the font kinds mentioned above, there is also Web Open this arrangement visualises and thus reinforces

Font Format (WOFF) that is another format developed in 2009 the hierarchy of the message.”10

specially to handle web fonts, however it is essentially TrueType and Erik Spiekermann

OpenType with better compression and extra storage for metadata.

9 Matthew Butterick, “What Is Typography? | Butterick’s Practical Typography”,

Practicaltypography.Com <http://practicaltypography.com/what-is-typography.html>
[accessed 30 March 2017].
8 “Hinting, or screen optimising, is the process by which TrueType or PostScript fonts 10 Matthew Butterick, “Foreword | Butterick’s Practical Typography”,
are adjusted for maximum readability on computer monitors.” “Font hinting,” Typotheque Practicaltypography.Com, 2017 <http://practicaltypography.com/foreword.html> [accessed
<https://www.typotheque.com/articles/hinting> [accessed 22 June 2017] 30 March 2017].
22 23

Interpretation suggested by Spiekermann seems more concise and

allows for locating it better in the context of actual type design, recent

technological development, relation to its history and speculation

about near future. Spiekermann recognises that typography does

not relate to text or letterforms merely, but to layout, white space

and general visual reception and tone that typography is capable of

expressing through their application.

There are four main categories of typefaces: serifs, sans-serifs,

scripts, and display fonts and every single of them have characteristics

that transmit semantic notions that are preconceived by us for the

reason of the historical and cultural baggage they are carrying.

Fig.2 Font classiication

As an example, according to studies compiled by Snap Agency in 11

2016 serif fonts tend to be most trustworthy, rather traditional

and stable while sans-serif are perceived as more modern and

straightforward. Scripts fonts are likely to demonstrate femininity,

personality or humanity. Display fonts, however, are rather associated

as being more unconventional, quirky or experimental.

Fig.3 Boogie School font, designed by OrType — serif version

The majority of the commercially produced typefaces are part of

larger type families. A type family is a group of typefaces relating

to one another, most commonly through the similar design choices,

aesthetics and similar parameters such baseline, x-height, cap height,

11 “Persuasive Typography - What font is more trustworthy?,” Snap Agency, 2017 <https://www.
snapagency.com/blog/persuasive-typography-what-font-trustworthy> [accessed 22 June 2017]

Fig.4 SansSerif version of Boogie School, specimen available online

24 25

ascender, descender and so on. These terms are illustrated by the of verbal language have affected the perception of expression and

letterform deconstruction discussed below. information transmission. Early forms of typography by lying at the

core of language and embodying communication allowed civilisations

Some type families include typefaces in different constructions, for to develop and societies to grow. Every piece of either printed or

example, Boogie School typeface designed by Or Type foundry have 12

digitally displayed (text) media is carrying values and meanings that

both serif and sans serif version. Despite being contrasting styles, they could not be legible, read, understood or processed without the use

work together well as they share similar parameters. of typographic components. Hence, it structured the methods how we

communicate, learn and even think. We use it every day as a building

Except for the letterform construction, the typographic design also block of our reality, and it affects our lives directly.

constitutes to how these letters relate one to another and are laid

out in the paragraphs on the page. These parameters include line

spacing , line length , letter contrast and letter spacing & kerning .
13 14 15 16 17

In summary, standardised type formats, the proliferation of advanced

digital type designing and setting tools, along with the advent of the

Internet changed digital text permanently. Typography is no longer

practised in publishing and advertising merely but forms the messages

we exchange between ourselves that require a more sophisticated

typographic application.

Therefore, through ages typography being a visual interpretation

12 “Or Type,” Or Type <https://ortype.is/specimen/boogie_school> [accessed 22 June

2017]
13 Simply, distance between line of text in paragraphs
14 Number of words making a line of text
15 The difference between the thinnest and the thickest part of the letterform
16 Amount of white space between letters
17 Optical correction that adjust letter spacing applying to pair of letters
26 Why typography matters? 27

Fig.5 Typography anatomy

One of the examples illustrating the importance of typography

is a redesign of 1940s typeface Highway Gothic that was used on

highway signs in the U.S, for the favour of Clearview, engineered

by Meeker Associates in 2004 . Clearview was designed to improve

18

visibility and legibility issues that were occurring when the relective

material of sign was causing that letters such e, a and s appeared

as lowercase or illegible. Clearview font comprised opened up

letterforms and mixed lowercase and uppercase styles creating a

typeface that is perfectly comprehensible no matter of time of the day

and driving speed.

18 “Design for Public Safety | Meeker & Associates,” Design for Public Safety | Meeker &
Associates <http://www.meekerdesigns.com/typography-and-legibility/> [accessed 22 June
2017]
28 29

Typography also is a vital instrument allowing not only for shaping

great irst impressions but for attracting and retaining the attention

of people that read or interact with it. Butterick says that written text

without a reader is just a “random string of a characters” , thereby 19

writers and designers should treat reader’s attention as valuable,

Fig.6 Difference between Clearview and Highway Gothic inite resource and not forget that typography and text are created

principally for the readers, not for writers or designers.

For instance, in the process such job recruitment, recruiters spend up

to few seconds browsing through resumes and applications seeking for

those that stand up. Documents shown below include same credentials

(except for the name), but the different application of typography.

Butterick argues that even for a literate person not skilled visually, the

impression of resume that demonstrates clarity and professionalism

are decisive while job hunting.

Fig.7 Highway Gothic font in road enviroment

Paul Watzlawick’s irst axiom of communication resonates “one cannot

not communicate” , hence because both good or bad typography

20

communicates according meanings it would be fatal mistake to

disregard it in that case.

19 Matthew Butterick, “Why Does Typography Matter? | Butterick’s Practical

Typography”, Practicaltypography.Com <http://practicaltypography.com/why-does-
typography-matter.html> [accessed 31 March 2017].
20 “Watzlawick’s Five Axioms,” Watzlawick’s Five Axioms <http://www.wanterfall.com/
Communication-Watzlawick%27s-Axioms.htm> [accessed 22 June 2017]

Fig.8 Clearview
30 31

Fig.9 Resume with poor use of typography. (author Matthew Butterick) Fig.10 Resume design that considers principles of typography and demonstrate good habits
32 What deines good, 33
successful typography?

In summary, typography is deeply ingrained into our society, “In the new computer age, the proliferation of
history and cognitive processes that in many cases their right and typefaces and type manipulations represents a
wrong application may have a tremendous impact on the life of the new level of visual pollution threatening our
individual. It affects matters from nearly all level of importance culture. Out of thousands of typefaces, all we
starting with well-designed and coherent signage that improves safety, need are a few basic ones, and trash the rest.” 21

through an effective and impressive resume to building fondness to Massimo Vignelli

reading amongst younger generations that can affect their future

life. It is of immense importance to acknowledge these facts, not

only by designers or writers but by all the people using typography

whatsoever.

Said Massimo Vignelli on the poster advertising The Master

Series exhibition in March 1991. Since the beginning of typographic

history, type designers were boldly proposing that the typeface they

designed is an “ideal” one. No matter how hard they were trying there

is no “one-size-its-all” solution to solve complex design problems. It

is possible to assess which typeface is the most legible in print or is

more detailed comparing one to another. Although when comes to

digital text and reading, there are much more variables that need to be

considered. Largely for the reason that type designers cannot predict

the purpose typeface will be used for. Therefore, the successful

typography is dependent on many factors that are discussed below,

most of them are components or prompts for another;

21 “Eye Magazine,” Eye Magazine | Feature | The rules of typography according to

crackpots/Exp <http://www.eyemagazine.com/feature/article/the-rules-of-typography-
according-to-crackpotsexp> [accessed 22 June 2017]
Cited in Eye Magazine
34 35

1 Selection of right typeface for the given purpose is almost devices, various format and ageing population (more readers with

the most substantial aspect of making a typography successful. For poor acuity). Undoubtedly and most importantly, type legibility is an

instance, bold, display Google font named “Eczar” will be tiresome

22
ultimate benchmark that grounds every other “good typography”

to for the reader and therefore will not function well as a body aspect as text that is not legible, as result of mistake or negligence

text in small paragraphs. It follows that text will not maintain fails to communicate. Typographic pieces, however, that are rather
reader’s attention which might devastate content absorption abstract or artistic and do not adopt rules of grammar, syntax or
(and reading experience) and for instance, discourage readers
language are assessed by principles that are in likeness to those which
to visit the website where it would be applied. To illustrate the
govern ine art critique.
point, these two sentences were set in Eczar Bold, however,

much worse decisions could be made.

3 Conveyance of the message. It is signiicant for the designer or

writer to understand the goal of the text. When this fact is recognised
2 Legibility (individual letterforms) & readability (cluster of words
and well considered, then extra effort can be made to use type in a
and sentences) Soie Beier, former Royal College of Art PhD Student,
way that reinforces and supports the meaning of the text, or purpose
currently research assistant professor at the School of Design under
of design most eiciently and appropriately.
The Royal Danish Academy of Fine Arts published numerous in-

depth studies exploring the notion of legibility. One of them was her
4 Ease of use and invisibility.
PhD Thesis at RCA (2009) in which she has deined legibility as an
23

inluence of familiarity on reading and familiarity as “the collective

“Good typography often goes unnoticed, melting
inluence of previous exposure and the level of common letter
into the background. Bad typography, on th e
features” . Beier concludes that legibility primarily relies on reading
24

other hand, jumps out like a scary clown, making

circumstances and cognitive performance. She also implies that it
a project look amateur, artless, or confusing.”25
is essential to understand that legibility means in the era of mobile
Young Sun Compton
22 “Google Fonts,” Google Fonts (Google) <https://fonts.google.com/specimen/Eczar>
[accessed 22 June 2017]
23 Soie Beier, “Typeface Legibility: Towards Deining Familiarity” (unpublished PhD,
Royal College of Art, 2009).
24 “Soie Beier,” Soie Beiers RSS <http://soiebeier.dk/?p=272> [accessed 22 June 25 Lupton, Ellen, Type on screen: a guide for designers, developers, writers, and
2017] students (New York: Princeton Architectural Press, 2014) Citation from Young Sun Compton
36 37

Hence, good typography allows the user to forget about mechanics of

reading and is not tiring to use. In short, the longer attention of the

user on the text is maintained the bigger beneit for everyone involved

in the circle of communication.

Beatrice Warde introduced the concept of invisible typography during

her lecture “The Crystal Goblet” delivered to The British Typography

Guild in the early thirties. She formulated a metaphor of typography

as a window located between reader and the words. She argued that

reader should not look at the glass but through the window.

5 Usage of research established typographic rules, such right

point size for print and screen that according to the Butterick should 26

be 10–12 point for former and 15–25 pixels for latter, line spacing

that works best as 120–145% of the point size. Line length that ideally

should count 45–90 characters per line or 2–3 lowercase alphabets.

While type size about 12 pt is claimed to the best for print, for reading

on a screen is too small.

26 Matthew Butterick, “Typography In Ten Minutes | Butterick’S Practical Typography”,

Practicaltypography.Com, 2017 <http://practicaltypography.com/typography-in-ten-minutes.
html> [accessed 31 March 2017].
38 Digital Typography, Web fonts Digital Typography and Web fonts 39
and User Interface

“All text needs legible typefaces. But especially

at interfaces, our eyes need fonts that cooperate

rather than resist”27

Tobias Frere-Jones

Web fonts

The days where web and user interface designers used system

typefaces as they were limited by fonts availability and poor web

browsers rendering are gone. Web versions of legendary type families

28

such FF Din or Univers by Adrian Frutiger are available, and they

function as well, if not better as in print. According to HTTP Archive,

the web traic analyser tool, as of June 2017 , 68% of all websites in
29

the world uses custom fonts. As of today, Google Fonts offers 819

open-source font families that are specially designed for websites and

27 “The best UI typeface goes unnoticed,” Thomas Byttebier <https://thomasbyttebier.be/blog/

the-best-ui-typeface-goes-unnoticed> [accessed 22 June 2017]
28 Within web design, rendering is the process of translating code into interactive web
elements and graphics
29 “Trends,” HTTP Archive - Trends <http://httparchive.org/trends.
php?s=All&minlabel=Jun%2B1%2B2016&maxlabel=Jun%2B1%2B2017#perFonts>
[accessed 22 June 2017]
40 41

can be used and modiied for free. As of June 2017, MyFonts , the 30

biggest online font library, counts 25,973 web fonts, not considering In the current state of the technology behind digital typography,

most of free, but decent fonts and small foundries that are not in the letterforms are limited to certain ixed proportions, shapes,

database. conigurations, widths, styles that are stored in the font ile format

(TrueType or OpenType). It means that every font family including

In theory, typefaces from Google Fonts database and the majority of different styles require numerous separates iles (Regular, Italic, Bold

commercially produced, web-safe fonts are made to be displayed on and so on), that need to be loaded or downloaded to user’s computer

the web. Thus their compression, hinting and implementation should or mobile device. That fact restrains numerous possibilities in the

be optimised for the purpose. Unfortunately, it is not. Typefaces that web and digital design. For instance, it makes the websites slower,

are hinted are a rare ind, numbers and symbols differ from the rest of increases the cost of maintaining the servers, limits the accessibility,

typeface, and often they act unpredictably on different devices. functionality and lexibility.

For example, some web fonts in conjunction with bad implementation 31

It follows that the main challenges that web developers and web

or slow servers might cause the issue known to web developers and designers are facing when implementing typography in the web

some users as “Flash of Invisible Text”. This issue is characterised as or digital products are the ile size, scalability and combability of

the time when the typeface is loading, and all texts on the website are rendering them. Downloading obviously, happens as a background

an invisible or a lashy conversion from default browser typeface to a process, and is invisible to the user, however, often it can ruin the

custom font that is implemented in the web design. The issue occurs experience of the web. Usually, font iles are small and downloading

in the irst few seconds when visiting the website, largely for the irst them is not an issue, especially, in the oice or home environment,

time and in some cases, may even cause a shift of content or layout, where Internet connection is fast and stable, the process of

being unsettling for the users. In the worst case, the behaviour might downloading and displaying fonts is seamless and most users do not

lead to text that is permanently invisible until web page refresh or realise that it is conducted.

browser reset.

30 “Search Results for: *,” * « MyFonts <http://www.myfonts.com/search/*/>

[accessed 22 June 2017]
31 Using heavy in sizes typefaces or too many styles that are needed
42 43

However, the situation changes dramatically when the same website is

browsed on the portable devices, connected to the Internet via mobile

data connections, or in the places where Internet bandwidth is limited,

for example, when travelling abroad. In these cases, when font ile or

the whole website is loading too slow, users are given with the loading

animations, “please wait” messages or Facebook’s loading dummy that

according to the Google Analytics Data , are the reason of why over
32

50% of all mobile site visits are abandoned. The Same study shows

that only 3 seconds are enough to discourage a visitor from browsing,

so to maintain interest and attention among users of the web, websites

need to load fast, work lawlessly and engage readers with content

that amuses both visually and intellectually.

Fig.11 Example of website in two versions; mobile and desktop

Fig.12 Comparison of poor and good rendering in the web browser.

From the left: Mozzila Firefox, on the right Google Chrome.

32 “Kissmetrics Blog,” How Loading Time Affects Your Bottom Line <https://blog.
kissmetrics.com/loading-time/> [accessed 22 June 2017]
44 Introduction to User Interface 45
and User Experience Design

interactions, from static visuals, wireframes and mock-ups into fully

“While myriad screen sizes and resolutions can
functioning and responsive to user’s input application.
rattle the user experience, designers employ

a range of techniques to maintain a pleasant

User Interface Design is a complement of User Experience Design
reading environment in a future-friendly way”33
(UXD) that focuses on simply enhancing the user’s satisfaction with
Young Sun Compton
the interaction. It uses a conglomeration of tasks that focuses on

optimisation and making the product more enjoyable to use. It is often

described as a philosophy that fundamental principle is to put the

end-user needs at the centre of the design. UXD is also responsible for

the process of research, prototyping, testing and so on. It is a cognitive

science occupation that, in theory, is non-digital. Nonetheless, it is

active and deined largely within digital industries since it developed

User Interface is a visual part, presentation of the software
along personal computer boom in the early 1990s. As it is a scientiic
that enables the user to communicate and interact with the device -
process, it could be applied nearly to every other industry that focuses
computer. It is used for visual guidance to the application’s functions
on the interaction between a potential or active customer and a
using interactive elements across all platforms and devices. Emil
company.
Lamprecht explains that User Interface is also responsible for

“transference of a product’s development, research, content and

layout into an attractive, guiding and responsive experience for users.”

Therefore, User Interface Design is a computing profession occupied

largely by the development of digital products and translation of

brand’s traits into a useable, visual software. User Interface Designers

work closely with developers and coders, that can program the

33 Lupton, Ellen, Type on screen: a guide for designers, developers, writers, and
students (New York: Princeton Architectural Press, 2014) Citation from Young Sun Compton
46 Digital Typography is an Interface 47

“When it comes to successful UI design, there is “Grammar rules force a speaker, a writer or

no room for poor typography. Text that scales typographer to articulate words in a structured

well and is lexible enough to be used in a manner. This is why text communicates meaning

variety of circumstances is key to the luidity of with more precision than images”35

uses’ viewing experience with your design.”34 Matthias Hillner

Nurit Bahat

Similarly, to the printed matter, typography in the interface and

web design provides an essential communication and interaction

channel through which each user experience interactive text or

interface to its full capabilities. To emphasise, digital typography

commences cognitive processes including learning, reading, writing,

higher reasoning, memorising that would not be possible without its

participation.

Typography within User Interface and Experience Design

functions as a preeminent vehicle of communication and clarity.

Some User Experience Evangelists even say that typography, in fact,

is a user interface. For a reason being, graphical elements of the

interface namely icons, buttons, sliders, images are intended to make

the user interface more engaging and intuitive. They are not, however,

suicient enough in their appearance to indulge users immersively in

the experience of using more complex interfaces.

34 “Improving UI Design Through Better Typography,” Awwwards - Website Awards - Fig.13 This is how my facebook wall looks without typography
Best Web Design Trends <https://www.awwwards.com/improving-ui-design-through-better-
typography.html> [accessed 22 June 2017] 35 Hillner, Matthias, Virtual typography (Lausanne: Ava, 2009) pp 118-123 pp 8-9
48 49

As possible interactions between human and computer are growing in Why designers and creators serving as shapers of substance are left to

importance and quantity, the user of the text-interface is becoming a struggle with such basic matter and major building block of reality that

design partner as his decisions and preferences directly impacts the is typography?

way how the interface is designed. Hence readers employ a new role

of - interface shapers. To answer those urgent questions, in September 2016, at ATypI

conference in Warsaw, OpenType Font Variations, digital typography

Sorin Pintilie in her pre font variations article from January 2016 revolution has been announced.

“Generative Typography” concludes:

“Basically, as you write, the typeface changes

in real-time to match the style of your writing.

No superluous, visual interface. Your writing

is the interface. You want a more ragged look,

write more raggedly. If you’re looking for a soft

look, tone down your voice. The system is there

only if you need it, acting as your own aesthetic

assistant, if you will.”36

Sorin Pintilie

Thereupon, in conjunction with growing omnipresence of interfaces

and devices that use them and web fonts being not satisfactory,

lexible or eicient enough, questions arises, what kind of mediation

has to be formed to facilitate a visible for average users improvement?

36 Pintilie, Sorin, “Generative typography – Sorin Pintilie – Medium,” Medium (Medium, Fig.14 ATypI Conference in Warsaw, 2016
2014) <https://medium.com/@sorpeen/generative-typography-e55d64fa096b> [accessed
22 June 2017]
50 Introduction to OpenType 51
Font Variations

designer prepared it. Moreover, many typefaces are not meant to be

shown small, or very large, for instance on Apple Watch, or at the

50x50m projection on the building.

Bianca Berning, font engineer, in her article “Typographic Potential

of Variable Fonts” explains how OpenType Font Variations differ

38

from traditional font formats. She says that at the moment, typefaces

function on the base of coordinates, in other words, vector shapes or 39

points, that are stored in the font ile deine the glyph outline. 40

Every single weight of the font then needs separate coordinates that

are stored in separate iles and separately downloaded and displayed.

A collaborative effort of four creative and computing giants of For example, if the website uses nondefault font, such Roboto

the current age: Apple, Adobe, Google and Microsoft is coming across Italic, Bold and Regular, they would need to be downloaded in the

with new solution. This gathering of eternal ‘frenemies’ is meant to background when browsing the website. These three weights only,

revolutionise the digital typography and introduce the letterforms that make up of 476 KB.

are more dynamic, lexible, lighter in size and capable of being more

interactive to user’s or data’s input. They called it: OpenType Font Berning continues that “to differentiate semantic elements within a

Variations. 37
text and to achieve hierarchy and introduce clarity to the information

in written text we need different styles and weights of a typeface

Whereas responsive typography and web fonts are commonly used family”. Thus, web designers often use more than one typeface to

in the user interface; they are far from being perfect as they require make content not only more attractive but also clearer and with more

exact instructions at many steps, their rendering is unstable and distinguishable hierarchy. It means that three weights of Roboto fonts

varies dependently on the web browsers, operating systems and how

38 “Typographic Potential of Variable Fonts,” Alphabettes, 2017 <http://www.
alphabettes.org/responsive-variable-fonts/> [accessed 22 June 2017]
37 In this essay named as variable fonts, variable typography or variations, not to be 39 Vector - Bezier curves are used in vector graphics to create smooth paths
mistaken with responsive, interactive, digital or web typography. 40 Letterforms outlines saved in font format ile
52 53

for body text (476 KB) and two weights of Elephant font (100 KB) font

for headlines build up to 576 KB of data that needs to be downloaded.

Most common example are the separate fonts for headlines, for body

text and for small text such image captions and dates. It is worth to

mention that often typefaces used on the desktop do not work that

successfully on mobile, as a result of nonpredictable screen size, Fig.15 New Yorke Times website, June 2017

resolution, pixel density and the way how mobile web browsers render

particular typeface.

International companies occupied in journalism such online articles

or news, often have their website available in different languages,

formats and sizes, might beneit from reduced font ile sizes and larger

customizability. The example demonstrated below.

New York Times, American daily newspaper ranked 18th in the world

by circulation, undoubtedly needs a website that relects its acclaim Fig.16 Photo of New Yorker Times website on my mobile phone. Web
browser: Google Chorme. Mobile: Xiaomi Redmi Note 4

and content. Digital version of NYT is the 127th in the global ranking

of most visited websites and currently is available in 3 languages: As of June 2017, New York Times website uses four typefaces; their

English, Chinese and Spanish. Also, it supports most of the digital breakdown follows: NYT Cheltenham is used throughout the website,

formats and web browsers. but its main function are headlines. It appears in four weights: Light,

Regular, Bold and Bold Italic. Then, the body text is displayed in

Georgia Regular. Captions, navigation and meta information are 41

set in NYT Franklin, Regular and Bold. For more impactful headlines

and names of categories, NYT Karnak is used. It sums up to seven

41 Captions, dates, tags et al

54 55

weights that require download upon visiting the website. (Georgia is

preinstalled) Chinese version uses largely Arial and Georgia but with

alternated web page layout, whereas Spanish one is utilising same

typeface selection and layout, but different content. OpenType Font

Variations propose to reduce the number of font iles needed as all the

weights of one typeface could be embedded in one ile.

For company such New York Times, it could mean economic growth,

not because of the money savings from server maintenance but

because the step between devices, screen and resolutions would be

more gradual as it would be achievable with ine tuning implemented

in variable typography. Hence, for users and readers, it would mean

Fig.17 Vector points — coordinates of letter “T” and its possible interpolation
enhanced reading experience, faster loading website and greater

personalisation of text within the content-absorbing environment.

Differences between the web and variable fonts

The most exciting functionality introduced in OpenType Font

Variations can be concluded in one clear sentence: “One OpenType

variable font ile can contain the equivalent of multiple individual

fonts” . It does not mean, however, that they are similar to classic
42

.zip or .rar compressed formats . Font Variations allow for the new
43

42 “Typographic Potential of Variable Fonts,” Alphabettes, 2017 <http://www.

alphabettes.org/responsive-variable-fonts/> [accessed 22 June 2017] Bianca Berning
43 .zip and .rar are the ile formats that may contain one or more iles inside and are losslessly
compressed

Fig.18 Illustration of interpolation, intermediate design, between light and black.

56 57

deinition of information storage and bring new taxonomies how this Axis Praxis created by Laurence Penney is variable fonts playground

information can be retrieved, displayed or manipulated. where the user can manipulate fonts that are “variations ready” and

experience how they function in reality. Examples above demonstrate

Thereby, OpenType Font Variations allow drawing parallels between typeface AmstelvarAlpha with modiied optical sizing, weight, grade,

coordinates above using the instructions that are altogether stored in contrast et al. (illustration next page)

just one ile. Therefore, user, designer, developer or writer can access

these coordinates and instructions and change, for instance, the Whereas typefaces could be designed with immense precision and

weight of the font using the slider in the typesetting software. craftsmanship before, and then even subtly manipulated by optical

sizing, typeface design never reached that level of interactivity and

Variable fonts also enable typographers or users for interpolation lexibility before. OpenType Font Variations technology equip its

between extremes and intermediate designs. For instance, attribute users with access to ine, micro grading options that will be available

such font weight can be interpolated between ultra-thin to ultra-bold dynamically and above all, automatically instructed by separate

and is dependent to the designer to decide where to stop between software or context that facilitates their behaviour.

those. In that case, weights and style can be created that are non-

existent, but entirely customised for the purpose intended, albeit “The end result will be richly expressive

working more eiciently than traditionally deined weight. What is typography customized in accordance with the

more, the functionality of variable fonts is not limited only to free aesthetic intentions of the designer of the

manipulation of font weights, but it can affect every single part of typeface itself—no more ill-informed modiications

glyph construction. using the brute force of vector editors”44

Dan Rhatigan

To demonstrate the above, the designer might decide that on the

screens larger than 5 inches but smaller than 8 inches, x-height

parameter should be increased by 10 pixels, spacing by 25 pixels as

it would increase legibility of particular typeface on particular screen

44 says Dan Rhatigan in an interview with Khoi Vinh. “Dan Rhatigan on Variable Fonts and
the Future of Typography,” Subtraction.com, 2017 <https://www.subtraction.com/2017/06/08/dan-
and resolution (context). rhatigan-on-variable-fonts-and-the-future-of-typography/> [accessed 22 June 2017]
58 59

Fig.19 Axis-Praxis website and use of Amstelvar Alpha in original state. Fig.20 AmstelvarAlpha with modiied ParaWeight, Serif Rise, Width, Weight, X-Height and Optical Size. There is a
possibility of seing how fonts transform when one’s clicks on parameter button
60 61

Additionally, it seems that optical size may be supported by variable

fonts and have a great comeback. Optical size is a variation of one

typeface that alters the spacing, proportions, weight and other

parameters for optimal legibility. It was used as long as Gutenberg’s

matrices but technology did not allow for its practical implementation.

Marianna Paszkowska during TYPO Lab 2017 presented an 45

example of how font variations can alter optical sizing to enhance

the readability dynamically. The demo was developed by Volker

46

Ronneberger, Bernd Volmer, Johannes Abendroth as is available to

experiment with . 47

45 “TYPO Talks » Blog Archiv » Typographic Wonderland,” TYPO Design Talks

<https://www.typotalks.com/videos/typographic-wonderland/> [accessed 22 June 2017]
46 “FF Clifford Variable Font,” FF Clifford Variable Font <https://www.fontshop.com/
variablefonts/#/home> [accessed 22 June 2017]
47 font variations as of June 2017 require developer versions of browsers – Google
Chrome Canary on Windows and Safari WebKit Nightly on MacOS.
62 Promises versus reality 63

He compares it to the global use of network latency giving an example

of YouTube and Netlix that altogether are using 48% of Global

Internet Bandwidth (2015) and says that it could matter 20 years

51

ago, but not now. Looking at the font iles from that perspective, they

seem to be almost non-existent in global usage of network latency.

However, he gives examples from Western countries where the

Internet is cheap and fast, without considering that some regions of

the world are still not developed in that matters. His statements were

met with instant critique, for instance, Nick Heer comments that
52

loading the article with Buttericks’ claims (“The Scorpion Express”)

Matthew Butterick looks closely at variable fonts in his article “The cost him $0.13 as he pays $65 for 2GB of mobile transfer.

Scorpion Express” in September 2016 and argues that similarly to

48

its precedent TrueType GX or Multiple Master is expendable for

49
Thereby, initial, exemplary proposition made by Microsoft in

numerous reasons. One of them is the fact that this new technology
50
OpenType Font Variations speciication, in September 2016 of

will allegedly impose a new cost on type designers, will not bring reducing Segoe UI font family ile size from 656 KB to 199 KB can

obvious improvement for users and will beneit an only small group of make a difference. Especially when using mobile Internet which tends

wealthy corporate sponsors. He further argues that the ile size and to be slower, more expensive and less accessible, however, used more

performance advantages that are meant to be introduced in OpenType and more often recently. 53

Font Variations are not realistic.

48 “The scorpion express | Butterick’s Practical Typography,” The scorpion express

| Butterick’s Practical Typography <http://practicaltypography.com/the-scorpion-express. 51 Matt Rosoff, “Netlix And Youtube Are America’s Biggest Bandwidth Hogs”, Business
html> [accessed 22 June 2017] Insider, 2015 <http://uk.businessinsider.com/which-services-use-the-most-bandwidth-2015-
49 Apple’s TrueType GX and Adobe’s Multiple Master where the prototypes of variable 12?r=US&IR=T> [accessed 31 March 2017].
fonts, developed in 1990s. They did not receive endorsement due to lack of practical use and 52 Heer, Nick, “Nick Heer (@Nickheer),” Twitter (Twitter, 2017) <https://twitter.com/
limitations imposed by the technology. nickheer?lang=en> [accessed 22 June 2017]
50 Matthew Butterick, “The Scorpion Express | Butterick’S Practical Typography”, 53 Samuel Gibbs, “Mobile Web Browsing Overtakes Desktop For The First Time”, The
Practicaltypography.Com, 2017 <http://practicaltypography.com/the-scorpion-express.html> Guardian, 2017 <https://www.theguardian.com/technology/2016/nov/02/mobile-web-
[accessed 30 March 2017]. browsing-desktop-smartphones-tablets> [accessed 31 March 2017].
64 65

Experiments with dynamic text that changes or follows readers face models that are constantly changing. He argues that designers have

have been done long before the introduction of font variations. enough issues to consider during design process such audience,

For example, Marko Dugonjić, founder of user experience agency communication, branding, budgets, deadlines and the use of

“Creative Nights” and a member of editorial staff at Smashing typography and fonts should be the least complicated part of the job.

Magazine, conducted an experiment with face recognition software He continues that if designers and developers behind OpenType Font

to change text size accordingly to the distance between reader’s face Variations do not play it well, all the potential will be lost. So, it is vital

and screen. Thus, the further user is from the screen; the larger text
54
to make this technology inviting rather than off-putting or distracting,

is displayed. Bianca Berning argues that even if this is possible with and it is entirely dependent not on some “designers and developers

new features included in OpenType Font Variations, the experience of mystic elite”, but all the creative people and typography passionates

reading is uncomfortable. For a reason being, that text constantly

55
which accordingly take responsibility for the future of interface,

relows, line length and kerning varies, so the position of letterforms typography and the people they design for.

changes as well. While this experiment fails to provide text that is

convenient to read; subtle and precise manipulation achieved by ine To summarise, even if at the current stage of development of

tuning of the glyphs parameters might be more successful. OpenType Font Variations appear to be expendable and have a small

impact on digital typography, it will gradually change. Comprehension

During TYPO Berlin 2017 conference, Dan Rhatigan, head of

56
of working with typography that meets the demands of the 21st

Adobe Typekit, says that for 20 years of his experience in designing century is lexible, dynamic and responsive will unfold with time. |

typefaces, teaching and talking about them he noticed that people

rather treat typography as a tool. They want it to be simple, Additionally, Rhatigan adds that functionality of variable fonts will be

straightforward, functional. He sees that designers, writers and so extensive and revolutionary to the degree that even if it will not be

students are already annoyed with the licensing and functional used commercially and by the public, variations will surely ind a niche

within the design or arts industry. Variable fonts are created not only
54 “Responsive Typography Demo,” Responsive Typography Demo <http://webdesign. by Adobe, Apple, Google and Microsoft but by the congregation of
maratz.com/lab/responsivetypography/> [accessed 22 June 2017]
55
56 FontShopTV, “TYPO Labs 2017 | Dan Rhatigan | Variable Fonts: Progress Report,”
creators that share their tools and open-source experiments online.
YouTube (YouTube, 2017) <https://www.youtube.com/watch?v=UOUWDGsT8DE&t=8s>
[accessed 22 June 2017]
66 Digital writing and reading 67

World’s interconnectivity and collaborative platforms such GitHub 57

give the opportunity to people from every part of the world to shape

OpenType Font Variations in a way we need, and readers need them.

Obviously, leading developers work from the oices of Apple, Google,

Microsoft or Adobe but they listen carefully to the creators and

contributors and encourage to experiment, dismantle and play with

the tools available.

57 “Build software better, together,” GitHub <https://github.com/> [accessed 22 June

2017] GitHub is a software buidling collaboration plaftorm.
68 How do we write? 69

“Digital text is mobile, malleable and open. but the entire network of systems and sources. The Internet allows for

Unlike with manuscript or printed text, in the the dissemination of our thoughts and reaching to potential readers

digital world, the reader himself can intervene with ease. There are myriad of platforms and ways to do that, such

in the text by shifting and rearranging.”58 an online blog, publishing platforms like Medium , Twitter or even a
62

Roger Chartier Facebook.

The majority of available sharing platforms are free and have

embedded functions such rate, review, search, excerpt, highlight that

facilitated democratisation of tools and critical thinking and by that

essentially let everyone to be a writer. Abilities of constant sharing,

Writing is substantially the process of creating a “sequence improving, collaboratively thinking and creating transformed the

of letters, words or symbols marked on surface” . Jeff Scheur,

59
process of writing into social activity and certainly gave us the room

teacher, educational entrepreneur during TEDxGunnHighSchool in 60

for deeper, critical relection over the creative process. As a result, our

January 2014 adds that the main reason why we write is to share written work is acknowledged as more collective and characterises

ideas and promote creativity. The advent of personal computers participatory equality rather than the former hierarchical distinction

and Internet changed the way we write and meant that “when a between author and reader. Authority and Authorship evolved

person writes something, there is already an embedded system, or permanently changing the relationship between writer and reader.

mediation, integrated into the process of writing.” states Anna 61

Ridler. Whereas Ridler is right, it is worth to extend that thought and Consequently, we seek for new methods of engagement and

add that person is not only integrated into the system or mediation interaction with readers. Digital editorial and web design give the

options of customised layout, extensive typographic choice and

58 Hoeks, Henk, and Ewan Lentjes, eds., ฀The฀ Triumph of Typography: Culture, certain, immersive experience that might satiate their desire for
Communication, New Media (Arnhem: ArtEZ Press, 2015) pp 203 - Roger Chartier
59 “Oxford Dictionaries” Writing <https://en.oxforddictionaries.com/deinition/ information discovery.
writing/> [accessed 22 June 2017]
60 TEDxTalks, “Why schools need technology to teach writing: Jeff Scheur at
TEDxGunnHighSchool,” YouTube (YouTube, 2014) <https://www.youtube.com/watch?v=_
BhVkubCEtQ> [accessed 22 June 2017] 62 “Medium – Read, write and share stories that matter,” Medium <https://medium.
61 Ridler, Anna, “Do What I mean,” 2016, Royal College of Art com/> [accessed 22 June 2017]
 70 How do we read? 71

Applications such as “iA Writer” imitate blank paper, uses typewriter

63
Words and letters recognition

alike typeface and features the minimal use of formatting options

to create more natural, but highly focused writing environment that Herman Bouma, in 1973 discussed the concept of “word shape” in

is emulating analogue writing. Publishing platforms such Medium, his paper “Visual Interference in the Parafoveal Recognition of Initial

Ghost or Wordpress simpliied the process of content dissemination, and Final Letters of Words” . He discovered that back part of the eye
64

allowing the reader to comment, give feedback, excerpt and share called fovea is responsible for depicting objects in detail. Parafovea is

with the prospective audience. Equally, providing writers with better the area that surrounds fovea and is responsible for peripheral vision.

opportunities for relection over their work, dynamic revision and Bouma for the irst time claimed that while reading, we look at the

constant learning process. Writers, supported by their community, centre of the word and use our peripheral vision to recognise letters.

are entitled to tell stories that are more credible, clear and ultimately Mattias Hillner in Virtual Typography, explains that it means that text

more compelling. is perceived word by word and not letter by letter, and then words are

seen as clusters of letters, similarly to logotypes. As a result, words 65

are not analysed precisely but recognised by its overall shape outline.

Fig.23 Fontshop’s demo website where font variations in conjuction with optical sizing might be tested
Fig.24 Fontshop’s demo website where font variations in conjuction with optical sizing might be tested

63 “IA Writer. Plain. Text.,” IA RSS 20 <https://ia.net/writer/> [accessed 22 June 64 Hillner, Matthias, Virtual typography (Lausanne: Ava, 2009) pp 118-123
2017] 65 Hillner, Matthias, Virtual typography (Lausanne: Ava, 2009) pp 118-123
72 73

In 1989, the parallel letter recognition was developed, and it assumes

that all the letters in a word are registered and analysed at the same

time. Furthermore, foveal recognition discovered by Bouma states that

even if words or letters are out of optical focus, we still recognise and

register them, but not as clear as those in focus.

These two theories are supported by the discovery of saccadic eye

movements that was found out thanks to the advent of eye tracking

technology that offered precise measurement and monitoring of our

eyes’ movements. Saccadic eye movements are the jumps that our

eyes perform while we read, they jump from the word, syllables to
Fig.25 Saccadic eye movement

syllables. They also ixate, for a span of 200-250 milliseconds and

are regressive now and then. Regressive saccades are measured

as ten to ifteen percent of all jumps and are deined by our eyes

jumping backwards, while reader needs to verify the assumptions or

Knowledge about processes and habits of human body, in that case
struggle with understanding the text and double checks the meaning.
— eyes, might function as a foundation for conceptual software or
Meanwhile, forward saccades skip one or more words.
typographic system that considers saccadic eye movements while

reading a digital book. That program would gather data about the

individual eyes movement habits using eye tracking device (or in the

future – front camera or webcam) and morph the letterforms and

change the layout of the text in the advantage of making reading

experience less tiring and text more legible or comprehensible.

74 75

Reading the screen This may be caused by the radical rupture of medium continuity that

digital revolution introduced. Jack Post in “Triumph of Typography”

Jakob Nielsen, the co-founder of Nielsen Norman Group, Danish web explains it as a breach in the traditional relationship between the

consultant and holder of PhD in human–computer interaction granted medium and the suricial inscription during reading and writing

by the Technical University of Denmark , did numerous tests on web

66
processes. As writing is no longer performed to the material surface

usability and readability. In the study, he conducted in 2008, using but to the virtual computer storage where it cannot be perceived with

eye-tracking device showed that only 20% of the online content is senses .68

carefully read and not just skimmed. 67

That follows the idea suggested by Roger Chartier discussing textual

According to the same research, when comes to reading on the continuity within the digital medium which confuses the reader by

screen, people tend to scan and skim the page looking for highlighted the lack of distinguishable genres . Chartiers observes that before
69

keywords, short paragraphs and bullet points. Average of the users the arrival of digital, different kinds of texts were divided into distinct

do not digest content carefully but rashly absorb the information that objects, where nowadays, they are produced and displayed within a

is relevant to them. Therefore, they read word by word only when single medium. Readers are then disturbed by the situation that feels

content lies in their very interest, or when they are enforced to, as, abnormal.

when reading terms of conditions, homework, work documents and

so on. Apparently, web readers do not look for the depth or narrative Therefore, Chartier suggests that considering various forms of text as

of the online content unless required to. They look, however, for equal is a fundamental mistake because reader attributes meaning to

clarity of information and demand instant gratiication in the form of a a text not only basing on the semiotic content of the book but on the

precise answer to their inquiry. physical form in which text is published, disseminated and consumed. 70

68 Hoeks, Henk, and Ewan Lentjes, eds., The Triumph of Typography: Culture,
66 “Jakob Nielsen, Ph.D. and Principal at Nielsen Norman Group,” Jakob Nielsen, Communication, New Media (Arnhem: ArtEZ Press, 2015) pp 162 Jack Post
Ph.D. and Principal at <https://www.nngroup.com/people/jakob-nielsen/> [accessed 22 June 69 Hoeks, Henk, and Ewan Lentjes, eds., The Triumph of Typography: Culture,
2017] Communication, New Media (Arnhem: ArtEZ Press, 2015) pp 204 Roger Chartier
67 “Nielsen Norman Group,” How Users Read on the Web <https://www.nngroup.com/ 70 Hoeks, Henk, and Ewan Lentjes, eds., The Triumph of Typography: Culture,
articles/how-users-read-on-the-web/> [accessed 22 June 2017] Communication, New Media (Arnhem: ArtEZ Press, 2015) pp 206 Roger Chartier
76 77

Young Sun Compton beneits this discourse with the statement that

future of the book is social. Online reading as well as writing evolved

and are no longer linear experiences but complex social activities. 71

Roger extends that readers use keywords and themes to ind fragment

needed, namely an article or passage in a book from which the only

snippet is extracted without acknowledging the overview of the textual

whole. 72

Google Books and Google search engine serves as an excellent

Google Books and selecive reading. Seearch engine highlights the fragment of the digitally available book
example illustrating the idea of selective - multilinear reading with

many references, hyperlinks, images and other text iles embedded

into one corpus. It also transforms the passive reader into a co-author

“who chooses texts, writes, make additions, indexes, annotates,

copies and moves text around, according to his own preferences” . 73

Consequently, the release of the book does not translate into the

termination of the publishing process, but contrary, once the text

is available online, readers inluence its content through sharing,

excerpting, highlighting and unlocking by archiving and rearranging. 74

71 Lupton, Ellen, Type on screen: a guide for designers, developers, writers, and
students (New York: Princeton Architectural Press, 2014) Young Sun Compton pp 79
72 74 Hoeks, Henk, and Ewan Lentjes, eds., The Triumph of Typography: Culture,
Communication, New Media (Arnhem: ArtEZ Press, 2015) pp 204 Roger Chartier
73 Hoeks, Henk, and Ewan Lentjes, eds., The Triumph of Typography: Culture,

Fig.26
Communication, New Media (Arnhem: ArtEZ Press, 2015) pp 163-164 Jack Post
78 Conceptual possibilities 79
of OpenType Font Variations

However, turning to typography, Peter Bil’ak, Slovakian graphic and When comes to speculation about technology and future,

typeface designer, asserts that reading experience of the digital results often end up being dystopian visions where robots and artiicial

text is still substandard as digital book creation tools limit designers intelligence ousted humanity and used us as an energy source. 78

from creating truly engaging digital products. Hence, he continues

that technology is ahead of the vision of the creators. Bil’ak also

75
The concepts bellow are not that extreme but represent conceptual

adds that typography still bears the burden inherited from previous possibilities of OpenType Font Variations paired with peripheral

media. He then gives an example of Neue Haas Grotesk or Helvetica devices, mobile phones sensors or even artiicial intelligence. It is

typefaces that has been just recently updated removing redundant worth to mention that these are prompts and theories that allowed

limitations that have been imposed by phototypesetting technique. 76

with time are feasible to some extent. Concepts are organised

from the easily achievable and realistic to the most futuristic and

With this in mind, it is crucial to realise, that “the power of new hypothetical.

media,however, lies not in the imitation of old media.” Bil’ak’s 77

statement greatly translates into present day circumstances, where If you are a scientist, biologists, physicians, humanist, artist or

we are about to witness another revolution of digital typography. whoever and have a theory how your discipline could be enhanced by

However, this time, we are equipped with extensive knowledge about variable fonts, share these with other communities! Most of the genius

the capacity of onscreen text and tools that allow us for shaping the ideas started from the urgent need for improvement, as they say,

revolution collectively and consciously. necessity is the mother of invention.

73 76 75 wHoeks, Henk, and Ewan Lentjes, eds., The Triumph of Typography:

Culture, Communication, New Media (Arnhem: ArtEZ Press, 2015) pp 321-322 78 Nathan, Ian, “EMPIRE ESSAY: The Matrix,” Empire (Empire, 2016) <http://www.
empireonline.com/movies/empire-essay-matrix/review/> [accessed 22 June 2017]
80 Idea #1: New Typographic 81
Accessibility

adjust these parameters automatically to suit the user. As an example,

letterforms would have opened counters at small sizes, opened

terminals and extended tails to help elderly readers read small text on

the mobile device or laptop. The interface also could vary depending

on the competency of the user to suit users with lower computer

literacy.

OpenType Font Variations have the capacity of helping people with

dyslexia by the subtle animation of how letters are drawn, their

emphasis – standing out from the complete word and few more tweaks

such as distinguished b, q and b (not the mirror images), rounded g as

Each of us has different cognitive capabilities of adapting, in handwriting, increased letter spacing.

learning, memorising, maintaining focus, communicating and so on.

Obviously, we also differ regarding our body responsiveness, acuity, Adjustments would happen automatically according to the preferences

technical precision, muscle endurance and much more. In 2008, UN set in the operating system, web browser or writing software or could

World Population Prospect forecasted that until 2050, the percentage

79
be based on data gathered during the eye-tracking study or visual

of the population after 65 will rise to 16% (for 2017, around 8%). acuity test.

Modern interfaces need to relect that and proceed accordingly.

FontSmith prepared an infographic showing what can be done to make

fonts more accessible . Using variable fonts, text and interfaces might
80

79 “World population projected to reach 9.7 billion by 2050 | UN DESA Department

of Economic and Social Affairs,” United Nations (United Nations) <http://www.un.org/en/
development/desa/news/population/2015-report.html> [accessed 22 June 2017]
80 “A study in typographic accessibility from Fontsmith,” Typograph.Her <http://www.
typographher.com/blog/2016/10/6/a-study-in-typographic-accessibility-from-fontsmith>
[accessed 22 June 2017]
82 Idea #2 TrueTone and TrueText 83

Viewing conditions and the environment has an enormous impact on

legibility and reception of the content. OpenType Font Variations are

capable of dynamic adjustment that would happen dependently on

lighting surrounding the reader, location, time-of-the-day, screen sizes

and resolution or quality of the Internet connection.

Apple’s technology of adjusting the white balance and brightness of

the screen called TrueTone serves as the ideal basis for that example.

The same sensor that is responsible for diagnosing light levels can

control letterforms that would change, for instance, its optical sizing,

contrast or width according to lighting environment. The function

would be paired with changing the screen white balance for the

optimal and natural experience of the text.

Modern smartphones are equipped with plenty of sensors such

accelerometer, barometer, magnetometer, proximity sensor, GPS

or simply a microphone. Most of these can have an innovate usage

coupled with variable fonts.

Fig.27 Infographic designed by FontSmith showcasing signiicant typgraphy accessibility

84 Idea #3: Habitual Reading Enhancer 85

Fig.28 TrueTone technology introduced by Apple that adjust white balance according to surrounding light

Our reading habits are easily discoverable with eye tracking

technology, especially that their availability and kind spectrum

increases. For example, Tobii , a global leader in eye-tracking and

81

assistive technology offers eye-tracking as either peripheral device

that can be added to the computer screen, glasses - Tobii Pro Glasses

2 and also specially designed computer with eye-tracking devices

implemented.

Therefore, using Tobii’s technology while we read, data about our

reading habits such as saccades, regressive saccades, ixations, diicult

wording and (in future) issues with understanding the context would be

gathered and stored. The process would be automated by meticulously

81 “Power to be You,” Tobii Dynavox - Power to be You - Tobii Dynavox <https://www.

tobiidynavox.com/> [accessed 22 June 2017]
86 87

crafted algorithms that recognise reading patterns, existent problems

and areas that need improvement. These patterns and data would be

converted into actions by implementing the adjustment in letterforms,

paragraphs and layout to enhance skills and experience of the reader.

Additional software would take into our account vision and perceptual

span82 (method how our eyes work focusing on a particular object,

word83 to revolutionise digital reading by making it more dynamic and Fig.29 Rob McKaughan explains visual and perceptual span

comfortable. Rob McKaughan during TYPO Berlin 201784 prepared

brilliant visualisation and explanation how that functionality can be

implemented using OpenType Font Variations. He suggests typeface

adjustments that are low-resolution ready and it for peripheral vision:

increased x-height, prominent apertures and low contrast. Then,

McKaughan performed visualisation of the concept pretending to

be reading the text using eye-tracker. In result, reading the text is

surprisingly comfortable and effortless.

Fig.30 Adjusted x-height, opened aperture and increased contrast

82 Rayner, Keith, Timothy J. Slattery, and Nathalie N. Bélanger, “Eye movements, the
perceptual span, and reading speed,” Psychonomic bulletin & review (U.S. National Library of
Medicine, 2010) <https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3075059/> [accessed 22
June 2017]
83 foveal recognition mentioned before
84 FontShopTV, “TYPO Labs 2017 | Peter Constable & Rob McKaughan,” YouTube
(YouTube, 2017) <https://www.youtube.com/watch?v=81cUE3yj70I&t=227s> [accessed 22
June 2017]

Fig.31 Word being in the middle is in the optical focus.

88 Idea #4: VR Extended Reading 89
Experience

How about virtual reality experience that coupled with eye tracking

device visualises the context of text we are currently reading

dynamically, on-the-go? How about reading the Lord of the Rings and

being in the middle of Mordor when Frodo is about to throw the ring

into to red-hot lava? Alternatively, to experience ups and downs of

a real romance, and immerse deeply into the narrative of Pride and

Prejudice? This concept would compromise the detail of description

and language that written text brings with cinematic visuals and

sounds that would revolutionise the reading experience.

For many people accustomed to the tangibility of the book, printed It certainly would not have been that extreme and advanced, but

matter cannot be superseded by electronic, often plastic devices, VR environment that relects the emotional context of the book

or far off screen that does not carry the physicality and atmosphere or chapters by the relevant colour scheme, soundscape or simple

of the touchable object. However, how about reading a “real book” visualisations is entirely possible.

in virtual reality? The scenario would happen inside virtual reality

environment, and the main character would hold a “real book”. To Extended Reading Experience would ind purpose not only in

execute that concept, VR would need fonts that render brilliantly at entertainment but could also be used in education. Reading about

all resolutions and are lexible enough to adapt to constant changes the diicult subject would be so much more comprehensible when

that happen in VR. It is a perfect opportunity for advanced use of illustrated with live examples that stimulate the cognitive processes,

OpenType Font Variations and dynamic typography. memorising and create emotional attachments through practical

However, the most exciting of VR technology is the opportunity of learning.

“travelling without moving” , being in another times and places while

85

in reality not leaving home.

85 Acid-funk-jazz song released by Jamiroquai. “Travelling Without Moving”

90 Idea #5: Typographic buddy 91

impeccable mirror of person that is essentially its parent-protoplast.

Typeface DNA, in other words, vast amounts of data, would be

inheritable and breedable by which type families would be created.

Practical use of them would be akin to present day analogue signage,

online avatar/identity. An essence of individual’s personality, life

and habits, trademark recognisable by others. When used online,

it could also responsively react and illustrate current emotional or

psychological state of his human-prototype. That typographic buddy

would accompany his precursor through all steps of school and life

always morphing as an ideal typeface for the essays, academic writing

Future may bring typeface that evolves along with the human and is and inancial reports. The death of the typeface-friend would happen

self-aware of its purpose and existence. The concept essentially brings together with the passing of the human, pre-empted by jointly written

a combination of science, biology, sociology, computing and typeface will that echoes back the whole journey through the lifetime leaving

design into one super-intelligent algorithm. tangible reminiscence of computer-human harmony.

Various data would be gathered since the early age of the participant

focusing on behaviour patterns while using technology, language,

the category of interests, habits of reading and writing, ethnicity,

gender, technical and cognitive skills, visual acuity, age et al. Almost

every aspect of the life of the human could be stored and analysed.

According to with growth and intellectual development of a person,

typeface would evolve demonstrating every stage of a (life) journey

precisely and with distinguishable manner. The result would be

typeface-robot-machine having own consciousness and being an

92 Conclusions 93

“New media, like most innovations is often This shift resulted in new modes of writing and reading which beneits

accompanied with a promising interpretation. It participatory equality and locate the reader on the creative pedestal,

is widely claimed that new media have contributed next to the writer. Reader, by highlighting, excerpting and sharing,

to spreading democracy. Related to the narrower actively contributes to the digital publication which despite being

context of typographic communication it is often released and theoretically complete, is in constant, revisionary lux. As

claimed, too, that new media have liberated a result of this evolution, new kinds of interactions are urging for new

designers.”86 methods of production and consumption that will satiate demands of

Peter Bil’ak the digital reader.

Font standards and book formats despite being constantly developed

and improved since the late eighties, still bear the burden inherited by

Methods of visible communication and writing prototyped by our their predecessors and restrain the experience of the digital corpus to

ancestors paved the way how we perceive and consume text today. its full capabilities.

Inscriptions to the material surface in the form of stone and later

paper permanently affected how our civilisations and societies What is more, from the beginning of typographic design existence,

developed. creators faced challenges where limitations of technology

compromised their vision. OpenType Font Variations have inherent

Textuality and tangibility that books used to semiotically convey for ability to change that once and for ever introducing a format that has

nearly ive hundred years, confuse the contemporary reader who so little boundaries that choice overload, in fact, might outshine its

is not yet able to recognise them in an information-packed, digital, opportunities.

singular medium amid performing a nonlinear activity that is reading

from a screen. The arrival of new media or inventions is often anticipated in positive,

promising light. This time is not different, however, what elevate our

chances this time is global interconnectivity and simpliied process of

86 Hoeks, Henk, The triumph of typography: culture. communication. new media (Lannoo
Publishers, 2015) pp 319 Peter Bil’ak collective, critical inquiry.
94 95

Scientiic studies that are available for everyone enable creators Further reading

to envision the conceptual possibilities of variable fonts, which are

endless. In conjunction with external software, artiicial intelligence,

automation and peripheral devices such as eye-tracking technology These three books were exceptionally beneicial when writing this

or mobile phone sensors, possibilities of new adaptable, self-aware study. Hence I sincerely recommended these. They provide deep

typography emerge. insight into typographic technicality, semiotics, cultural values and

relations with the digital. These books extend the reading and might

Digital typography revolution has just been announced, and it lies in answer some of the questions arisen after reading this essay.

our hands to not just witness it but actively contribute to the event

that will introduce new quality of interhuman communication.

→ Hoeks, Henk, The triumph of typography: culture. communication.

new media (Lannoo Publishers, 2015)

→ Hillner, Matthias, Virtual typography (Lausanne: Ava, 2009)

→ Lupton, Ellen, Type on screen: a guide for designers, developers,

writers, and students (New York: Princeton Architectural Press, 2014)

Citation from Young Sun Compton

96 Images 97

Fig.1 Cuneiform writing, Omniglot, Date Unnkown [accessed 22 June 2017]

Fig.12 Webbrowser font rendering comparison, Ryan DeBeasi, 2011
Avaiable at <hhttps://userscontent2.emaze.com/images/9da7f618-5722-471f-
ba4d-7d03b8d72ccc/9ea3b92d-d22a-4cf6-b4de-199284a9dae5.png> [accessed Avaiable at <https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.
22 June 2017] com/0217-05_no_hardware.jpg> [accessed 22 June 2017]

Fig.2 Font classiication, Author and Date Unknown Fig.13 My facebook without text, Hubert Mietkiewicz, 2017

Avaiable at <https://untilsundaypost.iles.wordpress.com/2013/04/classiication. Fig.14 ATypI Typography conference Warsaw, Typenetwork, 2016

jpg> [accessed 22 June 2017]
Avaiable at <https://www.typenetwork.com/news/article/atypi-warsaw-2016-day-2-
Fig.3 Boogie School sans serif, Or Type, 2016 the-return-of-the-multiple-master> [accessed 22 June 2017]

Avaiable at <https://ortype.is/specimen/boogie_school> [accessed 22 June 2017] Fig.15 New York Times website screenshot, Hubert Mietkiewicz, 2017

Fig.4 Boogie School sans serif, Or Type, 2016 Fig.16 New York Times website on mobile phone, Hubert Mietkiewicz, 2017

Avaiable at <https://ortype.is/specimen/boogie_school> [accessed 22 June 2017] Fig.17 Vector points, Bianca Berning, 2017

Fig.5 Anatomy of typography, Chris Koch, Date Unnkown Avaiable at <http://www.alphabettes.org/responsive-variable-fonts/> [accessed 22
June 2017]
Avaiable at <https://ckgd.net/wp2/wp-content/uploads/anatomy-of-typography-
design-letter-features-ckgd.jpg> [accessed 22 June 2017] Fig.18 Interpolation from light to bold, Monotype, 2016

Fig.6 Differences between Clearview and Highway Gothic, Mekker Assosciates, Avaiable at <http://www.monotype.com/blog/articles/part-2-from-truetype-gx-to-
2004 variable-fonts/> [accessed 22 June 2017]

Avaiable at <https://pbs.twimg.com/media/CcErxwBWAAAKWHX.png> [accessed Fig.19 Axis Praxis, Amstelvar Alpha, original state. Tool by Laurence Penney.
22 June 2017] modiied by Hubert Mietkiewicz, 2017

Fig.7 Highway Gothic, Mekker Assosciates, 2004 Fig.20 Axis Praxis, Amstelvar Alpha, modiied. Tool by Laurence Penney. modiied
by Hubert Mietkiewicz, 2017
Avaiable at <https://cdn.theatlantic.com/assets/media/img/posts/2016/01/
a03134b81/2a0f1b77a.png> [accessed 22 June 2017> [accessed 22 June 2017] Fig.21 Optical sizes of Century Expanded, comparison by Bianca Berning, 2017
Fig.8 Highway Gothic, Mekker Assosciates, 2004 Avaiable at <http://www.alphabettes.org/responsive-variable-fonts/> [accessed 22
June 2017]
Avaiable at <https://cdn.theatlantic.com/assets/media/img/posts/2016/01/
a03134b81/2a0f1b77a.png> [accessed 22 June 2017> [accessed 22 June 2017] Fig.22 Font Shop font variations demo. Website by FontShop. Screenshot by
Hubert Mietkiewicz, 2017
Fig.9 Poor typography, Matthew Butterick, Practical Typography, Date Unnkown
Avaiable at <https://www.fontshop.com/variablefonts/#/home> [accessed 22 June
Avaiable at <http://practicaltypography.com/why-does-typography-matter.html> 2017]
[accessed 22 June 2017> [accessed 22 June 2017]
Fig.23 iA Writer, iA
Fig.10 Good typography, Matthew Butterick, Practical Typography, Date Unnkown
Avaiable at <http://iawriter.com/> [accessed 22 June 2017]
Avaiable at <http://practicaltypography.com/why-does-typography-matter.html>
[accessed 22 June 2017] Fig.24 Bouma Shape, scan from Virtual Typography, Matthias Hillner, 2009
Fig.11 Responsive website design, Author and Date Unknown
Fig.25 Saccades, scan Detail in Typography, by Jost Hochuli, 2015
Avaiable at <https://typecast.com/images/uploads/modernscale-one-scale.jpg>
Avaiable at <https://media.24ways.org/2012/tan/ig1.jpg> [accessed 22 June 2017]
98 Bibliography 99

Main sources in the form of printed

Fig.26 Google fonts and fragmentary reading, Hubert Mietkiewicz, 2017 matter are provided in Further
Fig.27 Typographic Accessibility, FontSmith, no date reading section, after Conclusion.
Avaiable at <http://www.fontsmith.com/blog/2016/10/05/how-to-measure-
typographic-accessibility-infographic> [accessed 22 June 2017]

Fig.28 Apple TrueTone technology, Apple, 2017 “Or Type,” Or Type <https://ortype.is/specimen/boogie_school>
Avaiable at <https://www.allaboutphones.nl/wp-content/uploads/2017/04/ [accessed 22 June 2017]
appleTrueTone.jpg> [accessed 22 June 2017]
“Design for Public Safety | Meeker & Associates,” Design for Public
Fig.29 Presention of Rob McKaughan from TYPO Lab Berlin 2017, screenshot
Safety | Meeker & Associates <http://www.meekerdesigns.com/
from YouTube.com by Hubert Mietkiewicz, 2017
typography-and-legibility/> [accessed 22 June 2017]
Video avaiable at <https://www.youtube.com/watch?v=81cUE3yj70I&t=227s>
[accessed 22 June 2017] “Watzlawick’s Five Axioms,” Watzlawick’s Five Axioms <http://www.
wanterfall.com/Communication-Watzlawick%27s-Axioms.htm>
Fig.30 Presention of Rob McKaughan from TYPO Lab Berlin 2017, screenshot
from YouTube.com by Hubert Mietkiewicz, 2017
[accessed 22 June 2017]

Video avaiable at <https://www.youtube.com/watch?v=81cUE3yj70I&t=227s> “Google Fonts,” Google Fonts (Google) <https://fonts.google.com/

[accessed 22 June 2017] specimen/Eczar> [accessed 22 June 2017]
Fig.31 Presention of Rob McKaughan from TYPO Lab Berlin 2017, screenshot
from YouTube.com by Hubert Mietkiewicz, 2017
“Responsive Typography Demo,” Responsive Typography Demo
<http://webdesign.maratz.com/lab/responsivetypography/> [accessed
Video avaiable at <https://www.youtube.com/watch?v=81cUE3yj70I&t=227s> 22 June 2017]
[accessed 22 June 2017] “FF Clifford Variable Font,” FF Clifford Variable Font <https://www.
fontshop.com/variablefonts/#/home> [accessed 22 June 2017]

“The scorpion express | Butterick’s Practical Typography,” The

scorpion express | Butterick’s Practical Typography <http://
practicaltypography.com/the-scorpion-express.html> [accessed 22
June 2017]

“A study in typographic accessibility from Fontsmith,” Typograph.

Her <http://www.typographher.com/blog/2016/10/6/a-study-in-
typographic-accessibility-from-fontsmith> [accessed 22 June 2017]

“Build software better, together,” GitHub <https://github.com/>

[accessed 22 June 2017]

“Dan Rhatigan on Variable Fonts and the Future of Typography,”

Subtraction.com, 2017 <https://www.subtraction.com/2017/06/08/
dan-rhatigan-on-variable-fonts-and-the-future-of-typography/>
[accessed 22 June 2017]
100 101

Nathan, Ian, “EMPIRE ESSAY: The Matrix,” Empire (Empire, 2016)

Editors, The, “The World’s Oldest Writing,” Archaeology Magazine <http://www.empireonline.com/movies/empire-essay-matrix/review/>
<http://www.archaeology.org/issues/213-1605/features/4326- [accessed 22 June 2017]
cuneiform-the-world-s-oldest-writing> [accessed 22 June 2017]
“Nielsen Norman Group,” How Users Read on the Web <https://www.
“Eye Magazine,” Eye Magazine | Feature | The rules of typography nngroup.com/articles/how-users-read-on-the-web/> [accessed 22
according to crackpots/Exp <http://www.eyemagazine.com/feature/ June 2017]
article/the-rules-of-typography-according-to-crackpotsexp>
[accessed 22 June 2017] “Persuasive Typography - What font is more trustworthy?,” Snap
Agency, 2017 <https://www.snapagency.com/blog/persuasive-
Cited in Eye Magazine typography-what-font-trustworthy> [accessed 22 June 2017]
“Font hinting,” Typotheque <https://www.typotheque.com/articles/
hinting> [accessed 22 June 2017] Pintilie, Sorin, “Generative typography – Sorin Pintilie – Medium,”
Heer, Nick, “Nick Heer (@Nickheer),” Twitter (Twitter, 2017) Medium (Medium, 2014) <https://medium.com/@sorpeen/
generative-typography-e55d64fa096b> [accessed 22 June 2017]
<https://twitter.com/nickheer?lang=en> [accessed 22 June 2017]
“Power to be You,” Tobii Dynavox - Power to be You - Tobii Dynavox
Hillner, Matthias, Virtual typography (Lausanne: Ava, 2009) <https://www.tobiidynavox.com/> [accessed 22 June 2017]
Hoeks, Henk, The triumph of typography: culture. communication.
new media (Lannoo Publishers, 2015) Rayner, Keith, Timothy J. Slattery, and Nathalie N. Bélanger, “Eye
movements, the perceptual span, and reading speed,” Psychonomic
“IA Writer. Plain. Text.,” IA RSS 20 <https://ia.net/writer/> [accessed bulletin & review (U.S. National Library of Medicine, 2010) <https://
22 June 2017] www.ncbi.nlm.nih.gov/pmc/articles/PMC3075059/> [accessed 22
June 2017]
“Improving UI Design Through Better Typography,” Awwwards -
Website Awards - Best Web Design Trends <https://www.awwwards. Ridler, Anna, “Do What I mean,” 2016, Royal College of Art
com/improving-ui-design-through-better-typography.html> [accessed “Search Results for: *,” * « MyFonts <http://www.myfonts.com/
22 June 2017] search/*/> [accessed 22 June 2017]

“Jakob Nielsen, Ph.D. and Principal at Nielsen Norman Group,” Jakob “Soie Beier,” Soie Beiers RSS <http://soiebeier.dk/?p=272>
Nielsen, Ph.D. and Principal at <https://www.nngroup.com/people/ [accessed 22 June 2017]
jakob-nielsen/> [accessed 22 June 2017] “The best UI typeface goes unnoticed,” Thomas Byttebier <https://
thomasbyttebier.be/blog/the-best-ui-typeface-goes-unnoticed>
“Kissmetrics Blog,” How Loading Time Affects Your Bottom Line [accessed 22 June 2017]
<https://blog.kissmetrics.com/loading-time/> [accessed 22 June
2017] “Trends,” HTTP Archive - Trends <http://httparchive.org/trends.

Lupton, Ellen, Type on screen: a guide for designers, developers,

writers, and students (New York: Princeton Architectural Press, 2014)
“Medium – Read, write and share stories that matter,” Medium
<https://medium.com/> [accessed 22 June 2017]
102 Design 103

Space Mono. Open-source font from Colophon. (headings)

https://www.colophon-foundry.org/goods/spacemono-specimen/

HK Grotesk. Open-source font from Hanken Design Co. (body text)

https://hanken.co/product/hk-grotesk/

Solide Mirage. Open-source font from

velvetyne.fr

http://velvetyne.fr/fonts/solide-mirage/
104