Editing Research/new digital reading experiences (section)

= Part 1: <br>Can digital typography enhance the enjoyability and ease of reading? =

<span id="introduction"></span>
== INTRODUCTION ==

This project begins with a clear premise: if reading is changing, design must respond. Instead of treating digital media as a threat to long-form text, we investigate how it can actively strengthen it. Focusing on young adults and their mobile reading habits, we approach text as a functional system shaped by content, design, and technology. By working with the book Meditations by Marcus Aurelius, we test how interaction, structure, and typographic behaviour can transform a historically dense text into an accessible and engaging digital reading experience.

<span id="functional-approach"></span>
=== Functional approach ===

Early in our process, we decided that we wanted to focus on enhancing the functionality of text, rather than just the aesthetics. That is not to say that aesthetics was not considered, but more in a ‘form follows function’ kind of way.

<span id="audience-and-devices"></span>
=== Audience and devices ===

Our target group is young adults. At this stage of life, reading plays a critical role in developing analytical skills, supporting independent thinking, and enabling engagement with diverse perspectives and complex ideas. It also contributes to how young adults connect with and interpret the world around them.

However, multiple studies<sup>1</sup> indicate a decline in reading within this age group, particularly in reading for pleasure. The growing integration of images, audio, video, and interactive media into everyday digital experiences has shifted attention away from long-form, sustained reading. Early efforts to digitise texts through dedicated devices such as e-readers have since expanded into the pervasive use of mobile phones, where content is accessed continuously, across contexts, in various formats and in highly personalised ways.

Rather than positioning these environments as obstacles, this project explores how the affordances of contemporary media and mobile devices can be leveraged to support and enhance reading enjoyment. By integrating multimodal elements and user-centred interaction design, we aim to reframe reading as an engaging, accessible, and meaningful experience for young adults within their existing digital habits.

<span id="content-design-technology"></span>
== CONTENT / DESIGN / TECHNOLOGY ==

To make our research relevant, we address three main aspects of making public and the relations between them: The ''content'', the ''design'' and the ''technology''. We aimed for a long-read text, the design - which covers the behavior of text and the typography, and technologies that are relevant for working with text digitally. Following is the extended explanation for each of these choices.

<span id="content"></span>
=== CONTENT ===

The first choice we had to make was regarding the text we will work with. The publishing world has multiple types of content – from fictional novels to poems, culinary and scientific, academic, religious, historical and more. Even though we see relevancies for all types of publications, there will be difference in the digital needs for each type of content. We therefore decided to choose a text that will answer the following requirements:

1. ''Written in short pieces''. Even though we think digital reading could be applied on longer texts as well, we found shorter texts easier for the first prototype. We also referred to research<sup>3</sup> regarding the attention span of young adults, indicating that people read shorter texts.

2. ''Non-linear''. Designing for mobile phones, we wanted to examine the possibility to reconstruct the text and navigate though it differently than in a physically bound object.

3. ''Added value.'' What can we ''do'' with the text? We wanted to create an immediate interaction with the text, to make it clearly different than the passive reading in print.

Our choice fell on the book “Meditations” by Marcus Aurelius.<br>
[[File:Meditations.jpg|250px]] https://classics.mit.edu/Antoninus/meditations.html]
<br>
This nearly 2,000-year-old text continues to resonate with young adults due to its personal tone and its exploration of how to understand the world. It is structured in paragraphs and follows only the order of Aurelius’ thoughts. However, the old language and historically specific meanings can be challenging to understand and are sometimes misinterpreted. We therefore chose to focus the interaction for this text on defining difficult words and providing accurate, modern meanings.


<span id="design"></span>

=== DESIGN ===

<span id="editorial-behaviour-typography"></span>
=== ''Editorial, Behaviour &amp; Typography'' ===

<span id="introduction-1"></span>
=== Introduction ===

Book design always reflects the connection between the story or the content and its visual design. For our research, we focused on the visualisation of text through typographic features and added the aspect of behaviour and usability for a true digital experience. We examined these different elements separately and then combined them into prototypes. Our testing and choice-making process is described in the following paragraphs.

<span id="editorial"></span>
=== Editorial ===

Editorial decisions - who will read the text and what it should achieve - come before typeface choice. Our initial focus was on identifying functions that could enrich the text of Meditations. The examples we explored included:

– Connecting the text with explanatory notes from the book itself<br />
– Adding extra content or context to specific words, sentences, or paragraphs (initially as text, with the potential to expand to other media such as video or sound)<br />
– Supporting skimming by highlighting core words within each paragraph

We chose to test the addition of extra content, as it offered clear added value and served as a natural extension. Our proposals for additional content included:

– Background information about Marcus Aurelius<br />
– Historical context, particularly the period of the Roman Empire<br />
– Explanations of controversial passages<br />
– Reflections on leadership in the text compared to contemporary notions of leadership<br />
– Philosophical ideas, including comparisons with other philosophers

Ultimately, we decided to focus on explaining difficult words from the original text as a first, targeted intervention.

<span id="behaviour"></span>
=== Behaviour ===

The idea of expanding digital text possibilities and creating new forms of publications focused on digital possibilities is not new. There are designers focused more on adjusting typefaces by interacting with it. Good examples are [https://schultzschultz.com/ Mark Schultz] and [https://beatrizl.com/ Beatriz Lozano], both researchers in the field of typography and technology. Their work inquires what can happen with texts when using AR, touch functions and other forms of new media, developing tools and making them accessible for other designers to experiment with and implement in design projects. In our sources you can find an extended list of such examples.
<br>
[[File:LozanoType.png|500px]] [[File:schultz_sorry.gif|250px]]
<br>
Next to experiments focused mainly on type behaviour, there are also projects that embrace multiple digital (we focused on web-based examples, see explanation) functions to create different forms of navigations and interactions with longer texts. One recent example is the bi-medium project [https://postdigitalgraphicdesign.com/ Post Digital Graphic Design], a series of interviews and articles. This publication was created in two media – as a printed book and an online website. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version.<br />
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) and more.

[[File:PDGG2.png|400px]][[File:PDGG6.png|400px]]<br>
[[File:PDGG_m2.PNG|250pxpx]][[File:PDGG_m5.PNG|250pxpx]]

Another mobile-based project that was initiated already in 2016 invited writers to consider writing for a non-printed medium. This attitude resulted in a series of publications under the name [https://docs.google.com/presentation/d/1_mnJdwO2apVzmKau9J4UBW5zRHzuRMecpAh-TMCAzvA/edit?slide=id.p#slide=id.p Editions At Play], creating digitally-oriented stories that used animation, AR, time sensors and more to create playful forms of presenting and experiencing texts.

[[File:The_Truth_Abouts_Cats_n_Dogs.gif|250px]][[File:All_This_Rotting_.gif|250px]]

<span id="visualizing-text-functions"></span>
==== Visualizing text functions ====

The way a text is visualised is closely connected to how it behaves and how readers interact with it. Interactive behaviours can be triggered through actions such as clicking, scrolling, hovering, or timing-based events. A click may open content in a new window or tab, reveal a new layer, expand an accordion, or cause elements to appear or change. Scrolling can be used to progressively reveal additional information or, conversely, to reduce or hide content, while timed interactions allow elements to appear or transform automatically. Hover interactions, while not applicable to mobile devices, can further support changes in appearance and provide additional cues on desktop interfaces.

[[File:opzet_Research_design.jpg|250px]] [[File:opzet_Research_design2.jpg|250px]][[File:opzet_Research_design4.jpg|250px]]<br>
[[File:opzet_Research_design7.jpg|250px]] [[File:opzet_Research_design12.jpg|250px]] [[File:opzet_Research_design14.jpg|250px]]  

To make these interactions intuitive, familiar visual conventions are used to signal possible actions. Clickable elements are often indicated through underlining, background highlights, frames, or subtle animations such as blinking. Links commonly adopt the recognisable blue hyperlink style, while scroll-based interactions may be suggested through arrows or content emerging into view. Closing actions are typically communicated through universally recognised symbols such as an “X” or by allowing users to tap or click outside a layered interface element.

[[File:codepen_marcus_hover.gif|250px]]

<span id="typography"></span>

=== Typography ===

Following the idea that the way text is visualized affects how readers interact with it, we focus on how typography itself can relate to digital behaviors. This led us to an exploration of suitable typefaces who can create flexible, responsive typography that supports interaction while preserving readability.

<span id="section"></span>
===  ===

''Exploring variable fonts''<br />
We started experimenting with variable fonts. A '''variable font''' is a single font file that can behave like many fonts at once. Instead of having separate files for “bold,” “italic,” “light,” etc., a variable font contains '''continuous axes''' (like weight, width, slant, or optical size) that can be adjusted dynamically. This means you can smoothly tweak the font’s appearance anywhere along these axes.

For online use, variable fonts offer several clear advantages. Because a single variable font can replace multiple separate font files, page weight is reduced, and loading times improve. They also enable responsive and flexible typography: weight, width, or contrast can be adjusted on the fly to suit different screen sizes, devices, or user preferences, which improves readability. Designers gain finer control over details, allowing subtle changes, such as slightly heavier headings or narrower text in tight spaces, without switching typefaces, keeping the visual style cohesive. Variable fonts also make dynamic effects and interactivity possible, as type can respond to scrolling, hover states, or animations, creating richer typographic experiences. Finally, using one font file ensures consistency across browsers and devices, reducing the risk of mismatched styles.

In short: variable fonts let you do more with less.


<span id="section-1"></span>

===  ===

<span id="typeface-options"></span>
==== Typeface options ====

We first experimented with ChatGPT to suggest typefaces, but the results were disappointingly generic. It proposed the typeface ‘Trajan’ for ''Marcus Aurelius''. Could it be more cliché?

[[File:MarcusAureliusTypeface.png]]

We decided to rely on our own knowledge and turn to [https://fonts.google.com/ Google Fonts], which offers high-quality typefaces that are free to use. We initially chose [https://fonts.google.com/specimen/Source+Serif+4 ''Source Serif 4''], a variable font available through the platform. Its availability on Google Fonts makes it easily accessible, simple to embed in websites, and well optimized for screen use. However, the result was not ideal: when words were emphasized, the increase in weight also caused them to expand in width. This made the text appear overly busy and ultimately reduced its readability.

We then discovered ‘Uniwidth fonts’, sometimes also called “equal-width”, “duplexed” or “multiplexed” typefaces. Uniwidth typefaces are proportionally-spaced typefaces, but every character occupies the same space across different cuts or weights. What this means in practice is that no matter which weight you set your text in, it will never change its length or cause text to reflow. It addressed the issue by maintaining a consistent width for the words without altering the length of the sentence. This provided a dynamic and visually pleasing effect to the text.

[[File:codepen-non-uniwidth.gif|300px]] [[File:codepen_uniwidth.gif|300px]]

Font chosen: [https://www.recursive.design/ '''''Recursive'''''] Designed by [https://fonts.google.com/?query=Arrow%20Type Arrow Type],  [https://fonts.google.com/?query=Stephen%20Nixon Stephen Nixon.] It proved to be an excellent fit.

<span id="technology"></span>

=== TECHNOLOGY ===

Technology plays an important role in our research, as new developments open new possibilities. We have explored such possibilities in text presentation, which we have discussed before, but new technologies can also contribute to reinterpreting content and consideration of new publishing platforms. By bringing together established technologies and cutting-edge tools, we can contribute to truly new reading experiences.

<span id="publishing"></span>
=== Publishing ===

Our aim was to make our publication easily accessible, so we decided to make it browser based. We have chosen to use HTML for the content of our text, CSS for the design and JavaScript for the interaction. No server-side scripts are used, so that the source code is easy to read and easy to deploy.<br />
These technologies also make it possible to create a workflow where the text can be easily changed or updated without having to update the design.

<span id="reinterpreting-content-with-large-language-models"></span>
=== (Re)Interpreting content with Large Language Models ===

As mentioned earlier, we decided to emphasize parts of the text based on the words’ difficulty level. However, doing this manually can take way too much time. An example of such an intervention could be to find all mentions of colours in a text and then give all these words the colour they are refer to.

In this example of marking mentions of colour, we could quite easily write a script that would find all literal occurrences in the source text of a predefined list of colors and mark them. This sort of intervention has been done before and is not particularly exciting. What we want to try instead is to find many more ''abstract'' or ''conceptual'' elements in the text and mark those. An example of such an intervention would be to mark all emotionally charged parts of a text and design them in a way that matches that emotion. This is impossible to do with a classic script, and a lot of work to do by hand.

However, LLM’s (Large Language Models, e.g. ChatGPT) appear to be a great solution for this, so we decided to try out how we can utilize it. We are using ChatGPT 3.5, since at the time this was the cutting-edge tool.

<span id="process"></span>
=== Process ===
We decided on the following workflow:<br />
First, we make editorial choices based on the source text. An example of such a decision could be changing the text design based on the primary emotion expressed with it.<br />
The next step is to set up the source text as a basic structured HTML file. Subsequently, ChatGPT is given the HTML file and asked to analyze each paragraph, analyze the content to decide on the primary emotion, and add this emotion as a class in the &lt;p&gt; tag.<br />
The last step is to use CSS to target these emotion classes and give them a specific layout.


As our first test, we asked ChatGPT to add the primary ''emotion'' fitting with each paragraph as a class in the HTML. For short passages, this worked perfectly, and its ability to use subtle cues in the text to decide the appropriate emotion is impressive. When we tried to do the whole book at once, or even chapter by chapter, it refused to annotate more than a few paragraphs at a time, being very vague about why it couldn’t process more. However, after a lot of insisting, begging and cajoling it did finally process the whole book in one go.<br />
It’s very strange to work with a tool that seems to have a will of its own. This would make it quite an unreliable tool to use in a production setting.

Our second test was to mark all ''verbs'' in the text and use CSS to style them in a specific way. Again, the annotation in HTML worked impressively. Unfortunately, it also needed a lot of persuading to actually process whole chapters at a time. We created a very basic example that can be viewed here: [https://codepen.io/arjensuijker/pen/yyJEYMN https://codepen.io/arjensuijker/pen/yyJEYMNhttps://codepen.io/arjensuijker/pen/yyJEYMN]

<span id="elective-digital-typography"></span>

== ELECTIVE: DIGITAL TYPOGRAPHY ==

What better way to share and question the outcomes of our research than by involving the students themselves? We designed a 5-days' workshop that set out to find new ways to design text for mobile screens.<br />
Our first question to our students was simple: ''“What kind of texts do you read digitally?”'' One student answered: “Subtitles.” Funny, unexpected, and somehow very true. From that moment, we knew the experiment would be full of surprises.

For the content of the workshop, we chose the cookbook ''[https://archive.nytimes.com/www.nytimes.com/books/first/s/steingarten-everything.html?_r=2&oref=slogin&oref=slogin The Man Who Ate Everything]'' by Jeffrey Steingarten—a mix of text types including recipes, anecdotes, and quirky culinary adventures. Its variety made it perfect for the research: students could take any approach they liked, exploring new ways for visual storytelling.

Other than the change in content, we defined the assignment to follow our own research guidelines, to see how the students will approach the same design challenge and what kind of examples they will create.

<span id="the-assignment"></span>
=== The Assignment  ===

In an era of rapid technological evolution, the design systems and habits surrounding reading experiences have remained relatively static. This project aims to explore how digital typography can revolutionize reading experiences by rethinking design systems and enhancing usability.

Choose a piece of text (at least three paragraphs) from ‘The man who ate everything’.

* Create a design system that enhances the digital reading experience, primarily aimed at smartphones. Think especially about things that are possible on smartphones that are not possible in a printed book.
* Use your chosen text to showcase the design system that you created but be aware that this design system needs to be applicable to the whole book (it’s fine if you mainly focus on specific types of content, such as recipes or diaries).
* Present your design as a mockup, or (even better) as a working prototype on the web.

The students were investigating, experimenting and prototyping for a week, guided by us throughout the whole process.

Results<br />
The outcomes were wonderfully diverse. Some focused on clarity and readability, others on tone and personality. Every interpretation highlighted a new way of thinking about text on a small screen. We laughed and learned, and so did the students.<br />
<br />
Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.

[[File:Daniela_Hmelnicka_Prototype_video.gif|250px]] [[File:OmidNemalhabib_Salt.gif|250px]]  [[File:RenskeElectiveRec.gif|250px]] [[File:Anastasia_Trishankova_screen recording_figma.gif|400px]]

<span id="conclusions"></span>

=== Conclusions ===

Even though AI tools proved to be a little erratic, our workflow and designs are promising. However, our most important conclusion comes from students’ input in our Elective: '''Gen Z actually reads a lot but just prefers their text in formats that don’t really fit the traditional definition of reading.'''<br />
The majority consume most of their text on social media, where it is presented in very different ways than traditional text design. The overall quality of the content is often debatable, and the design doesn’t look very attractive from a classic designers’ point of view, but we felt like there is a lot of unexplored potential there.

One of our main reasons for researching digital reading experiences was to attract new audiences. During the Elective it suddenly became very clear what the audience we defined as our audience actually reads and what we could do to get to it. This finding led us to refine our research question, which we will discuss in more detail in Part 2.

<span id="part-2-immersive-reading"></span>