Publication Station - User contributions [en-gb]

Research/new digital reading experiences

2026-02-13T14:06:45Z

Arjensuijker: /* Behaviour */

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.



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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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. 
[[File:Meditations.jpeg]] https://classics.mit.edu/Antoninus/meditations.html]
 
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.



=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.
 
[[File:LozanoType.png]][[File:schultz_sorry.gif]]
 
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. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) and more.

[[File:PDGG_m2.PNG]] [[File:PDGG2.png]] 
[[File:PDGG6.png]][[File:PDGG_m5.PNG]]

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|300px|thumb|Caption]][[File:All_This_Rotting_.gif|300px|thumb|"this is a caption"]]


==== 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]] [[File:opzet_Research_design2.jpg]][[File:opzet_Research_design4.jpg]] 
[[File:opzet_Research_design7.jpg]] [[File:opzet_Research_design12.jpg]] [[File:opzet_Research_design14.jpg]]

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]]



=== 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.


=== ===

''Exploring variable fonts'' 
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.



=== ===


==== 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]] [[File:codepen_uniwidth.gif]]

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.



=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN ==
==''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts



=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T14:04:47Z

Arjensuijker: /* Behaviour */

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.



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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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. 
[[File:Meditations.jpeg]] https://classics.mit.edu/Antoninus/meditations.html]
 
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.



=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.
 
[[File:LozanoType.png]][[File:schultz_sorry.gif]]
 
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. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) and more.

[[File:PDGG_m2.PNG]] [[File:PDGG2.png]] 
[[File:PDGG6.png]][[File:PDGG_m5.PNG]]

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|300px|thumb|center|Caption]][[File:All_This_Rotting_.gif|300px|thumb|center|"this is a caption"]]


==== 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]] [[File:opzet_Research_design2.jpg]][[File:opzet_Research_design4.jpg]] 
[[File:opzet_Research_design7.jpg]] [[File:opzet_Research_design12.jpg]] [[File:opzet_Research_design14.jpg]]

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]]



=== 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.


=== ===

''Exploring variable fonts'' 
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.



=== ===


==== 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]] [[File:codepen_uniwidth.gif]]

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.



=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN ==
==''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts



=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T14:04:18Z

Arjensuijker:

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.



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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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. 
[[File:Meditations.jpeg]] https://classics.mit.edu/Antoninus/meditations.html]
 
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.



=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.
 
[[File:LozanoType.png]][[File:schultz_sorry.gif]]
 
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. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) and more.

[[File:PDGG_m2.PNG]] [[File:PDGG2.png]] 
[[File:PDGG6.png]][[File:PDGG_m5.PNG]]

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|300px|thumb|center|Caption]]
[[File:All_This_Rotting_.gif|300px|thumb|center|"this is a caption"]]


==== 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]] [[File:opzet_Research_design2.jpg]][[File:opzet_Research_design4.jpg]] 
[[File:opzet_Research_design7.jpg]] [[File:opzet_Research_design12.jpg]] [[File:opzet_Research_design14.jpg]]

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]]



=== 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.


=== ===

''Exploring variable fonts'' 
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.



=== ===


==== 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]] [[File:codepen_uniwidth.gif]]

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.



=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN ==
==''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts



=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T14:02:50Z

Arjensuijker:

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.



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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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. 
[[File:Meditations.jpeg]] https://classics.mit.edu/Antoninus/meditations.html]
 
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.



=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.
 
[[File:LozanoType.png]][[File:schultz_sorry.gif]]
 
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. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) and more.

[[File:PDGG_m2.PNG]] [[File:PDGG2.png]] 
[[File:PDGG6.png]][[File:PDGG_m5.PNG]]

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|300px|thumb|left|Caption]]
[[File:All_This_Rotting_.gif|300px|thumb|left|"this is a caption"]]


==== 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]] [[File:opzet_Research_design2.jpg]][[File:opzet_Research_design4.jpg]] 
[[File:opzet_Research_design7.jpg]] [[File:opzet_Research_design12.jpg]] [[File:opzet_Research_design14.jpg]]

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]]



=== 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.


=== ===

''Exploring variable fonts'' 
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.



=== ===


==== 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]] [[File:codepen_uniwidth.gif]]

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.



=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN ==
==''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts



=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T14:01:39Z

Arjensuijker:

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.



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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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. 
[[File:Meditations.jpeg]] https://classics.mit.edu/Antoninus/meditations.html]
 
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.



=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.
 
[[File:LozanoType.png]][[File:schultz_sorry.gif]]
 
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. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) and more.

[[File:PDGG_m2.PNG]] [[File:PDGG2.png]] 
[[File:PDGG6.png]][[File:PDGG_m5.PNG]]

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|300px|Caption]]
[[File:All_This_Rotting_.gif|300px|thumb|"this is a caption"]]


==== 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]] [[File:opzet_Research_design2.jpg]][[File:opzet_Research_design4.jpg]] 
[[File:opzet_Research_design7.jpg]] [[File:opzet_Research_design12.jpg]] [[File:opzet_Research_design14.jpg]]

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]]



=== 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.


=== ===

''Exploring variable fonts'' 
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.



=== ===


==== 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]] [[File:codepen_uniwidth.gif]]

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.



=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN ==
==''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts



=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T14:00:04Z

Arjensuijker:

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.



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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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. 
[[File:Meditations.jpeg]] https://classics.mit.edu/Antoninus/meditations.html]
 
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.



=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.
 
[[File:LozanoType.png]][[File:schultz_sorry.gif]]
 
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. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) and more.

[[File:PDGG_m2.PNG]] [[File:PDGG2.png]] 
[[File:PDGG6.png]][[File:PDGG_m5.PNG]]

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|300px|Caption]]
[[File:All_This_Rotting_.gif|300px|frameless|"this is a caption"]]


==== 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]] [[File:opzet_Research_design2.jpg]][[File:opzet_Research_design4.jpg]] 
[[File:opzet_Research_design7.jpg]] [[File:opzet_Research_design12.jpg]] [[File:opzet_Research_design14.jpg]]

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]]



=== 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.


=== ===

''Exploring variable fonts'' 
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.



=== ===


==== 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]] [[File:codepen_uniwidth.gif]]

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.



=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN ==
==''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts



=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T13:56:49Z

Arjensuijker:

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.



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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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. 
[[File:Meditations.jpeg]] https://classics.mit.edu/Antoninus/meditations.html]
 
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.



=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.
 
[[File:LozanoType.png]][[File:schultz_sorry.gif]]
 
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. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) and more.

[[File:PDGG_m2.PNG]] [[File:PDGG2.png]] 
[[File:PDGG6.png]][[File:PDGG_m5.PNG]]

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|300px|Caption]][[File:All_This_Rotting_.gif|300px|"this is a caption"]]


==== 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]] [[File:opzet_Research_design2.jpg]][[File:opzet_Research_design4.jpg]] 
[[File:opzet_Research_design7.jpg]] [[File:opzet_Research_design12.jpg]] [[File:opzet_Research_design14.jpg]]

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]]



=== 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.


=== ===

''Exploring variable fonts'' 
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.



=== ===


==== 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]] [[File:codepen_uniwidth.gif]]

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.



=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN ==
==''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts



=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research: new digital reading experiences

2026-02-13T12:43:07Z

Arjensuijker: Arjensuijker moved page Research: new digital reading experiences to Research/new digital reading experiences

#REDIRECT [[Research/new digital reading experiences]]

Research/new digital reading experiences

2026-02-13T12:43:07Z

Arjensuijker: Arjensuijker moved page Research: new digital reading experiences to Research/new digital reading experiences

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.



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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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. 
[[File:Meditations.jpeg]] https://classics.mit.edu/Antoninus/meditations.html]
 
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.



=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN ==
==''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts



=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T10:44:03Z

Arjensuijker: /* CONTENT */

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of 
Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.


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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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.

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.

[IMAGE+link https://classics.mit.edu/Antoninus/meditations.html]


=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN ==
==''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts



=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T10:43:24Z

Arjensuijker: /* Sources */

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of 
Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.


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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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.

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.

[IMAGE+link https://classics.mit.edu/Antoninus/meditations.html]


=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN 
''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts


=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia [https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ [https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T10:42:09Z

Arjensuijker: /* Sources */

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of 
Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.


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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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.

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.

[IMAGE+link https://classics.mit.edu/Antoninus/meditations.html]


=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN 
''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts


=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN 
https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. 
https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo 
https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ 
https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits 
https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. 
In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. 
https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read 
https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading 
https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time 
https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation 
https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia 
[https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ 
[https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue 
https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University 
https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T10:22:34Z

Arjensuijker: /* Part 2: Immersive Reading */

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of 
Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.


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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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.

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.

[IMAGE+link https://classics.mit.edu/Antoninus/meditations.html]


=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN 
''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts


=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes 
https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN 
https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. 
https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo 
https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ 
https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits 
https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. 
In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. 
https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read 
https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading 
https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time 
https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation 
https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia 
[https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ 
[https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue 
https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University 
https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T10:22:12Z

Arjensuijker: /* Part 1: Can digital typography enhance the enjoyability and ease of reading? */

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of 
Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.


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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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.

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.

[IMAGE+link https://classics.mit.edu/Antoninus/meditations.html]


=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.



= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN 
''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts


=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes 
https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN 
https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. 
https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo 
https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ 
https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits 
https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. 
In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. 
https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read 
https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading 
https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time 
https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation 
https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia 
[https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ 
[https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue 
https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University 
https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T10:20:38Z

Arjensuijker:

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke'','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of 
Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.


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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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.

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.

[IMAGE+link https://classics.mit.edu/Antoninus/meditations.html]


=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.


= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN 
''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts


=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes 
https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN 
https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. 
https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo 
https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ 
https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits 
https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. 
In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. 
https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read 
https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading 
https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time 
https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation 
https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia 
[https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ 
[https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue 
https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University 
https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T10:20:22Z

Arjensuijker:

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s)''': <blockquote> ''Britt Möricke''','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of 
Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.


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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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.

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.

[IMAGE+link https://classics.mit.edu/Antoninus/meditations.html]


=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.


= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN 
''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts


=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes 
https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN 
https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. 
https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo 
https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ 
https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits 
https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. 
In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. 
https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read 
https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading 
https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time 
https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation 
https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia 
[https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ 
[https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue 
https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University 
https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T10:19:46Z

Arjensuijker:

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

'''Title of Research Activity''': ''Enhancing the Reading Experience through Digital Typography''

'''Researcher(s): <blockquote> ''Britt Möricke''','' master in typography and type design

''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of 
Digital Publishing Experiences
</blockquote>
'''Affiliation/Department''': ''Publication Station / Digital Publishing Studio''

'''Timeline (Start–End)''': 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.


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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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.

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.

[IMAGE+link https://classics.mit.edu/Antoninus/meditations.html]


=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.


= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN 
''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts


=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes 
https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN 
https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. 
https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo 
https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ 
https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits 
https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. 
In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. 
https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read 
https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading 
https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time 
https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation 
https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia 
[https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ 
[https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue 
https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University 
https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

Research/new digital reading experiences

2026-02-13T10:07:51Z

Arjensuijker: Created page with " = New Digital Reading Experiences = '''BASIC INFORMATION''' Title of Research Activity: ''Enhancing the Reading Experience through Digital Typography'' Researcher(s): ''Britt Möricke,'' master in typography and type design <blockquote>''Arjen Suijker,'' web developer and Learning Model researcher ''Maytal Huijgen'', designer & researcher of Digital Publishing Experiences </blockquote> Affiliation/D..."

= New Digital Reading Experiences =

'''BASIC INFORMATION'''

Title of Research Activity: ''Enhancing the Reading Experience through Digital Typography''

Researcher(s): ''Britt Möricke,'' master in typography and type design

<blockquote>''Arjen Suijker,'' web developer and Learning Model researcher

''Maytal Huijgen'', designer & researcher of 
Digital Publishing Experiences
</blockquote>
Affiliation/Department: ''Publication Station / Digital Publishing Studio''

Timeline (Start–End): 2024-2026


== INTRODUCTION: 10 DAYS OF RESEARCH ON DIGITAL READING ==

We initiated our research in 2024, motivated by our shared curiosity about how contemporary digital technologies might open possibilities for new reading experiences. Having collaborated on numerous prior projects, we identified both the potential of this field and a notable lack of creative examples available to students engaged with digital publishing practices.

Our three aspects were Coding and AI, Digital Typography, and Interactive Reading, with Arjen focusing on Coding and AI, Britt on Digital Typography, and Maytal on Interactive Reading. These areas are distinct yet complementary. Accordingly, we chose to examine each aspect individually before integrating our findings. On each research day, we gathered insights on each aspect and then developed a prototype to test and refine our conclusions.


=== Attitude: Research by making ===

In this project, we embraced a ''research-by-making'' approach, fully in line with the spirit of the Stations at Willem de Kooning Academy. From day one, we explored our ideas through small experiments and prototypes, testing and iterating as we went. Making was our tool for thinking: each sketch, layout, and micro-experiment helped us uncover insights.

Throughout the process, we carefully documented our experiments, reflections, and discoveries. The records of our research days and the workshops that followed form the backbone of this publication/research, showing how hands-on exploration allowed us to develop and test different approaches to digital text—both within the publishing field and as part of our educational programs. By making, reflecting, and sharing, we turned the act of creation into a method for research.


=== Ten days of research ===

This summary follows our 10 days of research, brings out our findings and presents our prototypes. We have divided it into two parts, following our research structure: Part One presents the findings from our 2024 days of research and the Elective workshop that followed. Part Two presents the research days we did in 2025 and the workshop that followed. 
We hope it will serve as a practical resource and a foundation for further research for students and colleagues, as well as a proposal for new publishing approaches for publishers.


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


== 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.


=== 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.


=== 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 studies1 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.


== 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.


=== 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 research3 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.

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.

[IMAGE+link https://classics.mit.edu/Antoninus/meditations.html]


=== DESIGN ===


=== ''Editorial, Behaviour & Typography'' ===


=== 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.


=== 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 
– 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) 
– 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 
– Historical context, particularly the period of the Roman Empire 
– Explanations of controversial passages 
– Reflections on leadership in the text compared to contemporary notions of leadership 
– 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.


=== 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.

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 digital. It has both desktop and mobile version, which is unique to most publications that so far focused mainly on desktop version. 
The digital publication makes use of various digital possibilities such as the use of layers, split areas, hover effects (for desktop) ---

[IMAGES desktop + mobile]

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.

[IMAGES desktop + mobile]


==== 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.

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.

[GIFs CodePen functions]


=== 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.


=== ===

''Exploring variable fonts'' 
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.

[IMAGE/ GIF?]


=== ===


==== 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é?

[image: Trajan by ChatGPT]

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.

[IMAGE: THE COMPARISON]

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.


=== 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.


=== 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. 
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.


=== (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.


=== Process ===

We decided on the following workflow: 
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. 
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 tag. 
The last step is to use CSS to target these emotion classes and give them a specific layout.

[GRAFIEK HIERVAN?? PROMPTS?]

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. 
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]


== 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. 
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.


=== 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 
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. 
 
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.

[IMAGES + LINKS First Elective]


=== 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.''' 
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.


= Part 2: Immersive Reading =


== INTRODUCTION ==

Looking back at the Elective, we realized that the students’ creative approaches and reading habits revealed surprising insights into how Gen Z interacts with text on screens. Their experiments highlighted the potential of design to guide attention, convey tone, and make reading more engaging — lessons that naturally informed the next phase of our research.

Reading today is shaped not only by traditional formats like books but increasingly by digital and social media environments, where content is short, interactive, and visually engaging. Platforms such as TikTok and Instagram have introduced new ways of presenting text—through motion, emphasis, and typographic play—that capture attention quickly and encourage performative reading. Generation Z exhibits distinctive reading behaviors that embrace such text presentations. While they may spend less time on traditional reading, they engage heavily with them, suggesting that design and presentation play a critical role in motivating engagement.

While these techniques are well-studied for short-form content, it remains unclear whether they can enhance engagement with longer texts without compromising comprehension or reading comfort.

This insight, combined with findings from our initial research project, led to the following research question:

'''''Can Social-Media-inspired text design apply to long reads content?'''''


== CONTENT / DESIGN / TECHNOLOGY ==

In the second part of our research, we followed the same research structure we used for the first part, by addressing the same three main aspects of making public and the relations between them: The ''content'', the ''text design'' and the ''technology''. We aimed, again, for a long-read text, its design, relevant behavior of both text and the typography, and technologies to support that.

The main change was focusing on designing ''immersive'' solutions: creating a reading experience that will follow social media design elements and will include, next to digital text appearances, sound as well, specifically text spoken and written at the same time.


=== CONTENT ===

At first, we were looking to follow our initial guidelines of using short, non-linear texts. We considered short stories such as Kurt Vonnegut, ‘[https://www.latimes.com/archives/la-xpm-2009-oct-18-ca-kurt-vonnegut18-story.html Look at the Birdie]’, Spoken Word/ [https://www.youtube.com/watch?v=t87T8R4L_po Poetry Slam] pieces that has rhythm, sound and hierarchy as part of their natural structure and local stories from a Rotterdam-based writers' group ‘[https://sarmadmagazine.com/about-fiction-writing-club-2 Sarmad Fiction Writing Club]’.

Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.


== DESIGN 
''Behaviour & Typography'' ==


==== On-screen readability ====

Research on digital typography and on-screen readability provides valuable guidance for designing immersive text. For example, a [https://readymag.com/readymag/readme/tips/ Read Me! article by Readymag] highlight how factors such as eye movement, contrast, resolution, responsive layouts, and font choices influence reading comfort and comprehension on screens.

Similarly, studies on [https://www.lexend.com/ dyslexia and type design] emphasize how specific font characteristics can improve legibility for readers with diverse needs, underlining the importance of adaptable and inclusive typographic solutions in digital environments.

Very much like e-readers, the ‘immersive reading’ function, included in software such as Microsoft Word, PDF readers and Teams, allows the reader to change the column width, page background colour, line focus, and space between text according to their needs and reading style. It also allows reading text aloud, change reading speed, switch between languages and convert text.

[https://www.blinkist.com/ Blinkist] is an app that offers digital summaries of thousands of books, promising users that they can get the gist of any great book in under 15 minutes. These summaries are mostly AI generated and are available both as written text and spoken text. Unfortunately, written and spoken text are not synchronized, so they don’t work very well for Immersive reading. These summaries make the content much more approachable to a wider audience, but by design they miss a lot of the depth and nuance of the original works.

Experiments like [https://bionic-reading.com/br-apps/ Bionic Reading] demonstrate how subtle typographic interventions can guide the eye and support fluent reading. Developed by the Swiss designer Renato Casutt, Bionic Reading uses word visualization to help the brain recognize words faster. We initially recognize words by their sounds (“mama” evokes someone who cares for us) before learning to convert these sounds into written characters. Fluency in reading comes from automation, a process that is easy for some and challenging for others. Casutt’s method highlights certain letters of a word in bold, allowing the brain to fill in the rest and jump efficiently to the next set of bold letters. More information and apps can be found at Bionic Reading.

Bionic Reading works across multiple platforms, including Apple iOS and macOS, Google Android, Microsoft Windows, Google Chrome, and the web. Its interface cleans up any text and presents it in the bold-letter format. Users can adjust settings such as Fixation and Saccade (the amount of bold letters), text size, spacing, opacity, background color, and text color, with fixed presets. In the advanced paid version, readers can also select fonts from a specific collection, though the system currently works only with the Latin alphabet.

Mobile reading and fragmented text 
Our research focused on mobile typography, where reading increasingly happens in fragmented ways. Existing research shows that screen typography benefits from flexibility: adjustable line width, spacing, contrast, and background. As Gen Z often consumes text in fragments, combined with audio and motion, typography must remain legible while actively holding attention.

On platforms such as TikTok and Instagram, text rarely appears as continuous paragraphs. Instead, it is presented in short sequences of one to five words, revealed over time. Emphasis is created through size, colour, motion, or highlighting rather than through traditional typographic hierarchy.

(How Social media influenced fonts) https://typedrawers.com/discussion/5079/what-kind-of-impact-did-digital-social-media-have-on-fonts


=== Text on Social Media ===

During our research we investigated two leading social media platforms that were mentioned as the most popular among our audience: Instagram and TikTok. The differences between the two platforms were substantial.


==== An Analysis of Typography in TikTok Video ====

[IMAGES]

The typography used in ''TikTok'' videos follows a high-impact, attention-grabbing approach designed for speed, clarity, and engagement. Here are the key elements:

'''1. All-Caps Dominance & Sentence Case Variations''' 
Most TikTok text is set in all caps, ensuring maximum visibility and urgency. This choice aligns with how people skim content quickly. However, sentence case occasionally appears, often to differentiate between key messages and supporting text.

'''2. Bold, High-Contrast Colour Choices''' 
Red, yellow, black, and white dominate TikTok typography, echoing tabloid-style and meme aesthetics. These colours provide strong contrast, ensuring legibility against the fast-moving, diverse backgrounds of TikTok videos.

'''3. Random Placement & No Clear Composition''' 
Text appears in a mix of placements—from centre to scattered unpredictably across the frame. This lack of traditional composition mirrors the chaotic, spontaneous nature of TikTok, reinforcing the platform's informal and raw aesthetic.

'''4. Sans-Serif and Monospaced Typefaces''' 
Sans-serif fonts (like TikTok’s default Proxima Nova) are common for their clean, modern feel. Monospaced typefaces, often used in captions or for emphasis, add a slightly digital, “hacked” aesthetic that resonates with meme culture and internet-native visuals.

'''5. Outlined Text for Maximum Legibility''' 
Because TikTok videos often have busy backgrounds, outlined text is a practical necessity. White text with a black outline (or vice versa) ensures readability no matter what’s happening in the video, a trick borrowed from subtitles, gaming UI, and meme typography.

'''6. Text Motion''' 
Most of the transitions are a word-by-word replacement of the text. Resembling GIF animation, the text changes almost frame-by-frame in high-speed, following the AI reading rhythm. The (most of the time) fixed positioning is meant to allow the viewer to follow the text. However, both the fast replacement and the fact that there is no trace left of the text, creates a more skimming than reading effect.

'''What This Typography Say About TikTok’s Visual Culture''' 
TikTok typography is designed for speed, with text meant to be understood in milliseconds before viewers scroll away. Traditional rules of composition are often set aside in favor of clarity and immediate impact.

Bold, simple type draws on meme culture, emphasizing humour, emotion, and reaction-driven communication. Overall, TikTok typography prioritizes function over finesse, evolving text for viral, high-speed consumption.


==== An Analysis of Typography in Instagram Text-Animations ====

[IMAGES]

On Instagram you can find typographic experiments done by designers. These designs are closer to printed typography in spirit, but adding motion

Here are the key elements: 
'''1. All-Caps Dominance & Sentence Case Variations''' 
Also on Instagram most of the text is set in all caps, presenting short, catchy sentences. When slightly longer texts are presented, they do appear in sentence case.

'''2. Black & White (maybe One More Colour)''' 
The texts designed for Instagram take much more from printed publications aesthetics than the 90’s web features that are used on TikTok. There is much more diversity in the type choices and the colour combinations are softer. Black&White and the grey tones dominate; some mix one simple colour as addition/ contrast to the grey.

'''3. Central Placement & Clear Compositions''' 
Most text animations have their text centred, taking a large part of the format and maximizing the small mobile space. Animations where the text is being built-up use clear structures, either grid-based or a systematic composition.

'''4. Sans-Serif and Trendy Typefaces''' 
Sans-serif fonts are also common on Instagram. Next to Sans-Serif typefaces there is great use of more trending typefaces and a mixture of multiple types. This typographic approach puts more focus on enhancing legibility, making the text itself the main image and the background as supporting.

'''5. Harmonic Backgrounds for Maximum Legibility''' 
The designers’ work uses much more subtle backgrounds, that work harmonically with the presented text. The background is designed to work ''with'' the text, not overpower it.

'''6. Text Motion''' 
There is great diversity in the text motion. Some animations focus on changing the text’s visuality while the text itself remains fixed to its place. Other animations use the format to have text move in/out or around it. Immersive Text-style animations follow the reading rhythm, highlighting the words by changing the typeface style. 
There are also tools offering the reader interaction with the text itself for web-based content, but this might be less relevant for this specific prototype.

'''Captions''' 
Important part to add is the common use of text captions. There are many benefits for adding captions. As can be found in [https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video. this] article by the Utah State University, captions assist in comprehension and memory and help users pay attention.

There are diverse visualisations of captions - word-by-word presentation of text, text in short lines, central single-word appearance and more. These captions do not follow intonation, rather seem to have definitions of space. 
Many of the platforms [https://www.google.com/search?q=instagram+add+captions&oq=instagram+add+captions&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQLhhA0gEINDgzMWowajSoAgCwAgE&sourceid=chrome&ie=UTF-8 supply with their own] captions' options, that will transcribe a video and let you style the text with their own pre-designs. When designing these captions, you can choose from a variety of typefaces, colours and adjust the sizes.

[IMAGES: automated text captions in Instagram]

''The prototypes'' 
Building on this, we explored creating two immersive videos for the two platforms. The text was combined with motion, voice-over, and background imagery. This introduced new typographic challenges: composing layouts for small screens, maintaining clarity of typefaces, and aligning motion with reading rhythm. 
 
Our first sketch was for the typography only. The typeface '''Tiempos''' by [https://klim.co.nz/ Klim Type Foundry] was chosen for its legibility, deliberately contrasting with meme-style all-caps typography and outlined letterforms common on social media.

[IMAGE: SCREEN WITH TIEMPOS FONT]

We then moved to creating prototypes with motion. The prototypes tested our short text using different typefaces, layouts, playback speeds, and voice options. Clear differences emerged between platforms. '''TikTok typography''' is fast, high-contrast, and designed for skimming. '''Instagram typography''' is more structured and centered, supporting reading through rhythm and restrained motion.

For the ‘TikTok’ version, we chose to use background video recordings of the game ‘Minecraft’. This classic game is often used for storytelling videos on TikTok, unrelated to the story that is being told. For typeface we chose [https://fonts.google.com/specimen/PT+Mono PT Mono], a monospace, code-like typeface that will work well with the pixelated esthetics of the background images. The [https://bookaudiobook.net/one-hundred-years-of-solitude-audiobook/ audio] was available for download online, and we found it very suitable for our video with its deep, soothing voice.

For the ‘Instagram’ version, we chose a more subtle approach. For background, we wanted to check the effect of “hypnotizing” visuals, that will keep the reader engaged. We went for a black and white looping video of water ripples. For the text we used font [https://fonts.google.com/specimen/Merriweather?query=Merriweather Merriweather], a serif typeface that resembles a printed novel typeface. We animated the text with a ‘dropping’ effect, to create motion that follows the reading rhythm.

We eventually added a third prototype, using the opening text from the novel ‘War and Peace by Leo Tolstoy. For this video we based the text visualizations on the different characters: the narrator, Anna Pavlovna Scherer and Prince Vasili Kuragin. Each character got its own visual style, mixing [https://fonts.adobe.com/fonts/ff-meta serif] and [https://fonts.adobe.com/fonts/ff-meta sans serif] versions of Meta Pro and [https://fonts.adobe.com/fonts/mr-eaves-sans Mr. Eves Sans] with different colors. 
Also for this prototype we found an [https://archive.org/details/03Disc3Of4/01+-+Disc+1+of+4.mp3 audio] version online and used it for our test, since the reader was very distinguished in the way he characterized each person. That made the connection between written and spoken text much stronger.

[2X VIDEO PROTOTYPES]

Two prototypes were created using Adobe Premiere, one with Adobe After Effects. The greatest advantage of Adobe Premiere is its ability to transcribe captions based on voice. That is an automatic process that can be generated very fast for a long audio/ video part. The automatic generation, however, does not guarantee precision. It was necessary to review the text, adjust some words (mainly names) and edit manually the connection between background images and the text and its appearance in the layout, breaking some lines to adjust screen width with readability. 
 
Ideally, we would have an automated workflow that generates full video clips. This would allow content to be published quickly and at low cost. The technology behind this workflow should be free and open source, so anyone can use it to publish the content they choose. The video clips themselves are easily shareable and can be published both on one’s own platform and across existing platforms.


=== TECHNOLOGY ===


=== Text to Speech ===

An important aspect of immersive reading is voiceover. Tone, infliction, rhythm, and emphasis all play an important part in how the text is experienced by the reader. In an ideal scenario, there would be a human narrating the text, but in practice this is often too expensive and time-consuming. Therefore, we have done some experiments to determine the usability of various AI Text-to-Speech (TTS) technologies that could create voiceovers from text files.


==== SSML ====

After our initial exploration of various mainstream TTS products, the conclusion was that the voices sound quite convincing and pleasant, but the intonation is unnatural and does not properly emphasize the right words. We sought the solution to this problem in Speech Synthesis Markup Language (SSML). This is a way to include markings in de source text to indicate emphasis, pauses and other things that can improve the speech. Our idea was to use ChatGPT to add these markings to the source text, so that a TTS product can use this to improve its speech pattern.


==== Comparing TTS ====

The next step was a more thorough auditing of various TTS services to determine their quality and their support for SSML.

'''Free option: Amazon Polly'''

https://aws.amazon.com/polly/

Amazon Polly provided unnatural sounding speech. There is a higher quality version available, but that could not be accessed from the Netherlands. It claims to support SSML, but its interpretation often sounds stunted.

'''Free option: Crikk'''

https://crikk.com/

Crikk works better out-of-the-box, but it does not support SSML so it can not be improved upon. In does support pauses, but nothing else.

'''Free option: Google TTS'''

https://cloud.google.com/text-to-speech

Google TTS works better than Amazon and supports SSML, but still the intonation remains very unnatural.

'''Paid option: Elevenlabs'''

https://elevenlabs.io/

Elevenlabs offers a trial of 10000 characters per month. It works much better than all the other options. It appears to do it’s own preprocessing to figure out the right intonation for each sentence. It doesn’t support SSML, but frankly it doesn’t need it.

Overall, there is more variation in quality between different TTS services than we expected, and the large players don’t necessarily seem to do best. However, looking at the pace of innovation in this area, we expect the quality to improve drastically in the coming years.


== ELECTIVE: IMMERSIVE READING ==

To kick off the second Elective, we presented our research and our prototypes. This included findings from the first phase, but the emphasis was on the concept of immersive reading and the treatment of text on video-based social media. We asked students for two things: to do research and to create a prototype.


=== Research ===

We asked them to research along one of the following themes:

* Content
* Screen-based typography
* Voice and sounds
* Motion
* Interactivity
* Background visuals

We then provided them with a template that they could use to document their research.

[IMAGEs: research posters from students]

The students brought many interesting aspects to our attention. All the information was shared in a public folder, so all participants could lear from each other’s findings.


=== ===


=== Prototype ===

Students were asked to create a digital reading experience: the prototype should include a minimum of one paragraph of text, motion and /or interactivity and a carefully considered typography. 
They were free to choose a text of their own, but we also provided them with some choices. Their design choices should align with the experience they wish to create.

Most students choose to use Adobe After Effects for their prototypes, since there was less emphasis on interactivity and more on the synthesis of sound and text.

[IMAGES+LINKS TO STUDENTS PROJECTS]


=== Results ===

Like in the previous Elective, the resulting projects were diverse and surprising. Some students chose their own pieces of text and designed them in a way that engaged with the content, while others experimented with new interaction patterns or novel reading experiences that function independently of content. Their research was equally eclectic, and it was quite surprising to see what sources they were accessing, particularly on social media, that are simply invisible to us as teachers. Overall, we were very inspired by the new insights and perspectives that students were able to present in just one week.


== CONCLUSION ==

Digital reading works according to its own logic. A screen gives typography new possibilities. Text can shift, respond, connect to sound, and direct the reader’s focus in subtle ways. Variable fonts, motion, layered media, and AI-supported analysis give designers more control over how a text is experienced. Meaning no longer depends only on layout and hierarchy; it develops through timing and interaction.

For publishers, this leads to practical opportunities. Long reads can adopt the tempo and clarity people recognize from social platforms without losing depth. Web technologies such as HTML, CSS, and JavaScript make production accessible and flexible. AI tools and advanced text-to-speech systems make synchronized audio and text increasingly achievable. Adaptive editions and immersive formats can become part of regular publishing workflows rather than isolated experiments.

Several questions still require careful study. Motion influences concentration. Pacing affects understanding. AI annotation must meet editorial standards. Inclusive typographic systems should support different reading needs while remaining coherent. Economic sustainability will determine whether immersive formats move beyond prototypes.

Further research can measure how immersive design affects comprehension and retention, improve automated production pipelines that combine structured text and audio, and test scalable applications with publishers in real contexts.

Reading continues to evolve with its medium. Designing specifically for screens opens a clear and promising direction for the future of publishing.


== Sources ==

'''Reading Habits'''

# 2025, ''Gen Z is reading less'', Vibhas Ratanjee, Forbes 
https://www.forbes.com/sites/vibhasratanjee/2025/08/26/gen-z-is-reading-less-what-that-means-in-the-age-of-ready-answers/
# 2025, ''Reading for pleasure has dropped by 40%,'' Madeline Holcombe, CNN 
https://edition.cnn.com/2025/08/20/health/reading-for-pleasure-decline-wellness
# 2025, Al-Kadi. A. ''Towards a Digital Reading Mindset: Digital Reading Habits, Strategies, and Challenges.'' Electronic Journal of Foreign Language Teaching [e-FLT], 22(2), 211–223. 
https://e-flt.nus.edu.sg/wp-content/uploads/al-kadi.pdf
# 2024, ''New Trends in Students’ Reading Habits'', University of Tirana, Faculty of Social Sciences, Tirana, Albania, 2,3University “Haxhi Zeka”, Faculty of Business, Pejë, Kosovo 
https://www.researchgate.net/profile/Brunilda-Zenelaga/publication/379775037_New_Trends_in_Students'_Reading_Habits/links/6683a69cf3b61c4e2ca6901e/New-Trends-in-Students-Reading-Habits.pdf
# ‘Immersive Reading’ 
https://manikapant18.medium.com/what-is-immersive-reading-and-how-it-makes-reading-fun-c71308ee1a04 
This article is focused on reading and understanding by students. The title sounds more promising than the actual content.
# Book-Tok and Gen-Z Reading habbits 
https://www.publishers.org.uk/wp-content/uploads/2022/11/BookTok-for-WEBSITE.pdf 
The numbers show that Book Tok – promoting books on TikTok – has caused an increase in book sales withing young (16-25 yo) people. It does not, however, show that they actually read them. 
In this article from The Guardian: Gen Z is choosing the physical book over the digital environment. 
https://www.theguardian.com/books/2024/feb/09/reading-is-so-sexy-gen-z-turns-to-physical-books-and-libraries.
# Are books dead? Why Gen Z doesn't read 
https://www.generationtechblog.com/p/are-books-dead-why-gen-z-doesnt-read
# Generation z and the art of reading 
https://euranetplus-inside.eu/generation-z-and-the-art-of-reading/
# How Gen Z Came to See Books as a Waste of Time 
https://www.theatlantic.com/newsletters/archive/2024/11/books-briefing-gen-z-reading-books-waste-time/680586/

'''Use of Variable fonts '''

# Introduction to variable fonts https://web.dev/articles/variable-fonts
# Axis-Praxis, Playing with OpenType Variable Fonts [https://www.axis-praxis.org/specimens/__DEFAULT__ https://www.axis-praxis.org]
# Variable Fonts are Awesome for UX Design https://medium.com/staffbase-design/variable-fonts-are-awesome-for-ux-design-a4e3df68cd2

'''Digital Typography Tools experiments'''

# Mark Schultz https://www.schultzschultz.com/touchtype.html
# Beatriz Lozano https://lozanotype.github.io/Java_Sans/
# Munken Poster-making https://colab.munken.com/munkencreator
# ABC Playground https://abc-etc.com/typewriter/

'''Digital Publishing experiments'''

# Text Rain, 1999, Camille Utterback & Romy Achituv, Installation 
https://www.youtube.com/watch?v=f_u3sSffS78
# Edition at Play, 2016, initiative from Visual Editions and Google’s Creative Lab in Sydney, Australia 
[https://editionsatplay.withgoogle.com/#!/detail/free-seed%23%252F https://editionsatplay.withgoogle.com/#!/detail/free-seed#%2F]
# Post Digital Graphic Design, Published by [https://www.onomatopee.net/ Onomatopee], [https://head-publishing.ch/ HEAD-Genève] & [https://www.setmargins.press/ Set Margins]’ 
[https://postdigitalgraphicdesign.com/ https://postdigitalgraphicdesign.com]
# Divine Comedy, Artwork catalogue 
https://divinecomedy.digital/#/

'''Reading Captions'''

# Benefits of Captions, Utha State University 
https://www.usu.edu/accessibility/captions/benefits#:~:text=Adding%20captions%20to%20your%20videos,pay%20attention%20to%20the%20video

MediaWiki:Common.css

2026-02-13T08:00:52Z

Arjensuijker:

/* CSS placed here will be applied to all skins */

@import url("https://use.typekit.net/ihs2tti.css");

body, p {
font-family: "vista-sans",sans-serif;
color: #1A1A1A;
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-site-navigation h2, #mw-related-navigation h2 {
font-family: "vista-sans",sans-serif;
}
}

p {
max-width: 800px;
}

.page-Digital_Publishing_Studio a:visited, .page-Digital_Publishing_Studio a:link,
.page-Print_Studio a:visited, .page-Print_Studio a:link,
.page-Printmaking_Studio a:visited, .page-Printmaking_Studio a:link,
.page-The_Publication_Station a:visited, .page-The_Publication_Station a:link,
#mw-site-navigation a:visited, #mw-site-navigation a:link,
#mw-related-navigation a:visited, #mw-related-navigation a:link
{
color: #1A1A1A;
text-decoration: underline;
}

.page-Digital_Publishing_Studio #toc,
.page-Print_Studio #toc,
.page-Printmaking_Studio #toc,
.page-The_Publication_Station #toc {
display: none;
}

@media screen and (min-width: 1100px) {
#searchform {
width: 800px;
margin-left: 14em;
padding-left: 29px;
}
}

.mw-body h1.firstHeading {
font-family: "vista-sans-narrow",sans-serif;
border: none;
padding-top: 10px;
padding-bottom: 10px;
text-transform: uppercase;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt, .mw-body .toctitle h2 {
font-family: /*"input-mono-narrow",*/ monospace;
margin: 3.35em 0 0.5em;
}
.mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
font-size: 1em;
}
.mw-body h3 {
font-weight: bold;
font-size: 0.8em;
/* display: inline-block;
padding: 7px; */
}
.mw-body h3 .mw-editsection a, .mw-body h3 .mw-editsection a:visited {
color: #fff;
}
.mw-body .toctitle h2 {
color: #1A1A1A;
}
.mw-body h4 {
font-weight: bold;
}

.tools-inline li.selected {
border-bottom-color: #1A1A1A;
}

.sidebar-inner .mw-portlet-body {
border-bottom: dashed 1px #707070;
padding-bottom: 30px;
}

#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
background: none;
border: none;
padding-top: 0;
margin-top: 0;
}

#mw-content {
border: none;
box-shadow: none;
}

.mw-body .mw-parser-output h1::after, .mw-body .mw-parser-output h2::after {
border-bottom-color: #1A1A1A;
}

.not-logged-in .mw-editsection,
.not-logged-in #personal,
.not-logged-in #site-tools,
.not-logged-in #page-tools {
display: none;
}
.not-logged-in #mw-page-header-links {
visibility: hidden;
}

#mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3,
#p-logo-text, .mw-footer-container,
.not-logged-in #contentSub {
display: none;
}

.sidebar-inner > #p-Main_navigation a:link {
font-weight: bold;
}

#searchButton, #mw-searchButton {
right: 0;
}
#searchInput {
padding-left: 10px;
}

.logo-1 .mw-wiki-logo {
background-image: url("/wiki/resources/assets/logo-PS-01.svg");
}
.logo-2 .mw-wiki-logo {
background-image: url("/wiki/resources/assets/logo-PS-02.svg");
}
.logo-3 .mw-wiki-logo {
background-image: url("/wiki/resources/assets/logo-PS-03.svg");
}
.logo-4 .mw-wiki-logo {
background-image: url("/wiki/resources/assets/logo-PS-04.svg");
}
.logo-5 .mw-wiki-logo {
background-image: url("/wiki/resources/assets/logo-PS-05.svg");
}

.studio-cards-wrapper, .columns-wrapper {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.card-wrapper, .columns-wrapper > div {
flex: 1;
flex-direction: column;
display: flex;
flex-basis: 250px;
}
.columns-wrapper ul {
margin: 0;
}
.columns-wrapper li {
list-style: none;
}
.card-wrapper a {
display: block;
height: 100%;
max-height: 417px;
}
.card-wrapper a img {
object-fit: cover;
height: 100% !important;
width: 100%;
}

.thumb-wrapper {
flex: 1;
}

#mw-content-container {
background-color: #fff;
}

html, #mw-footer-container {
background:black;
}

.color-middle, .color-middle-container {
background-color: #1A1A1A;
}

body #personal h2 {
font-family: Calibre, Arial;
}

body #mw-content-container {
border: none;
}

.CategoryTreeToggle {
color: #1A1A1A;
}

.color-left, .color-right {
background-color: #1A1A1A;
}

.mw-references-wrap {
margin-top: 50px;
border-top: solid lightgray 1px;
}

/* One-sided navigation menu */
@media (min-width: 1340px) {
#mw-content-block {
display: block;
}
#mw-content,
#content-bottom-stuff {
margin-left: 14em;
}
#mw-content-wrapper {
float: right;
margin-left: -14em;
width: 100%;
}
#mw-related-navigation {
width: 14em;
padding: 0 1em 0 0;
}
div.color-middle {
margin-right: 0;
}
.mw-wiki-logo {
display: inline-block;
}
}

CSS list

2024-10-24T13:09:53Z

Arjensuijker:

This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples.
{| class="wikitable" border="0" cellspacing="0" cellpadding="0"
|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_text-align.asp text-align]
| Align text to the left, right, center or justify

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font.asp font]
| Change all font properties in one line of code

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]
| Change the typeface of this element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-size.asp font-size]
| Change the size of the font

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_font-width.asp font-width]
| Stretch the width of the font

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]
| Make font italic or oblique

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]
| Change the weight of the font

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_height.asp height]
| Change the height of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_margin.asp margin]
| Put empty space around the outside of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]
| Change the transparency of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_padding.asp padding]
| Put empty space around the inside of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_color.asp color]
| Change text color

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]
| Change the line-height of text

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]
| Make element (in)visible

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_border.asp border]
| show a border around an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]
| Give an element a drop shadow

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]
| Give text a shadow

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_border-radius.php border-radius]
| Give an element rounded corners

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_background.asp background]
| Change the background of an element into a color, image or gradient

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_filter.asp filter]
| Put a color filter on an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/sel_hover.php :hover]
| Define what happens if the mouse is on an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_cursor.asp cursor]
| Change the cursor if it hovers over an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transform.asp transform]
| Transform the dimensions of an element, for example by skewing, scaling or rotating

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transition.asp transition]
| Make an element transition smoothly if it changes

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_columns.asp columns]
| Put the elements inside an element into columns

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_position.asp position]
| Change how an element is positioned. For example absolute or fixed

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_grid.asp grid]
| Put the elements inside an element into a grid

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_animation.asp animation]
| Animate the properties of an element

|}

CSS list

2024-10-24T13:08:48Z

Arjensuijker:

This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples.
{| class="wikitable" border="0" cellspacing="0" cellpadding="0"
|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_text-align.asp text-align]
| Align text to the left, right, center or justify

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font.asp font]
| Change all font properties in one line of code

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]
| Change the typeface of this element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-size.asp font-size]
| Change the size of the font

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_font-width.asp font-width]
| Stretch the width of the font

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]
| Make font italic or oblique

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_height.asp height]
| Change the height of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_margin.asp margin]
| Put empty space around the outside of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]
| Change the transparency of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_padding.asp padding]
Put empty space around the inside of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_color.asp color]
| Change text color

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]
| Change the line-height of text

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]
| Make element (in)visible

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_border.asp border]
| show a border around an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]
| Give an element a drop shadow

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]
| Give text a shadow

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_border-radius.php border-radius]
| Give an element rounded corners

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_background.asp background]
| Change the background of an element into a color, image or gradient

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_filter.asp filter]
| Put a color filter on an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/sel_hover.php :hover]
| Define what happens if the mouse is on an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_cursor.asp cursor]
| Change the cursor if it hovers over an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transform.asp transform]
| Transform the dimensions of an element, for example by skewing, scaling or rotating

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transition.asp transition]
| Make an element transition smoothly if it changes

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_columns.asp columns]
| Put the elements inside an element into columns

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_position.asp position]
| Change how an element is positioned. For example absolute or fixed

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_grid.asp grid]
| Put the elements inside an element into a grid

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_animation.asp animation]
| Animate the properties of an element

|}

CSS list

2024-10-24T12:17:24Z

Arjensuijker:

This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples.
{| class="wikitable" border="0" cellspacing="0" cellpadding="0"
|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_text-align.asp text-align]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font.asp font]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-size.asp font-size]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_font-width.asp font-width]
| Stretch the width of the font

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]
| Make font italic or oblique

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_height.asp height]
| Change the height of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_margin.asp margin]
| Put empty space around the outside of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]
| Change the transparency of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_padding.asp padding]
Put empty space around the inside of an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_color.asp color]
| Change text color

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]
| Change the line-height of text

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]
| Make element (in)visible

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_border.asp border]
| show a border around an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]
| Give an element a drop shadow

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]
| Give text a shadow

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_border-radius.php border-radius]
| Give an element rounded corners

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_background.asp background]
| Change the background of an element into a color, image or gradient

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_filter.asp filter]
| Put a color filter on an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/sel_hover.php :hover]
| Define what happens if the mouse is on an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_cursor.asp cursor]
| Change the cursor if it hovers over an element

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transform.asp transform]
| Transform the dimensions of an element, for example by skewing, scaling or rotating

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transition.asp transition]
| Make an element transition smoothly if it changes

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_columns.asp columns]
| Put the elements inside an element into columns

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_position.asp position]
| Change how an element is positioned. For example absolute or fixed

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_grid.asp grid]
| Put the elements inside an element into a grid

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_animation.asp animation]
| Animate the properties of an element

|}

CSS list

2024-10-24T11:33:40Z

Arjensuijker:

This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples.
{| class="wikitable" border="0" cellspacing="0" cellpadding="0"
|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_text-align.asp text-align]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font.asp font]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-size.asp font-size]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_font-width.asp font-width]
| Stretch the width of the font

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_height.asp height]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_margin.asp margin]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_padding.asp padding]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_color.asp color]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_border.asp border]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_background.asp background]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_filter.asp filter]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_cursor.asp cursor]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transform.asp transform]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transition.asp transition]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_position.asp position]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_perspective.asp perspective]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_grid.asp grid]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_columns.asp columns]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_animation.asp animation]

|}

CSS list

2024-10-24T11:33:17Z

Arjensuijker:

This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples.
{| class="wikitable" border="0" width="216" cellspacing="0" cellpadding="0"
|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_text-align.asp text-align]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font.asp font]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-size.asp font-size]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_font-width.asp font-width]
| Stretch the width of the font

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_height.asp height]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_margin.asp margin]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_padding.asp padding]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_color.asp color]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_border.asp border]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_background.asp background]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_filter.asp filter]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_cursor.asp cursor]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transform.asp transform]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transition.asp transition]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_position.asp position]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_perspective.asp perspective]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_grid.asp grid]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_columns.asp columns]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_animation.asp animation]

|}

AE Scripts

2024-10-18T11:52:04Z

Arjensuijker:

{{Template:Quickstartguide}}
On this page you will find a series of guides to create short animations combined into one. You will be adding Scrips into Adobe After Effects. 
For this demo I chose the words 'Visual Coding' + square shape + the colours #260340 and #d3e52b on a 5:4 canvas ratio. 

== Guide: Text Reveal/ Countdown ==
This short assignment demonstrate how to create a generative text animation. 
[[File:countdown_s.gif|500px]] 

{| class="wikitable"
|-
| skills || wiggle expression
|-
| time to complete || 10 minutes
|}

'''step 1''' 
write text on your background (or solid background layer for creating GIFs). 
center your anchor point [ - command double-click on your anchor icon - ] 
[[File:CountDown1.png|500px]] 

'''step 2''' 
open your text layer > animate > character offset 
[[File:CountDown2.png|500px]] 

'''step 3''' 
Click Option (Alt on Windows) + Stopwatch >wiggle (4,40) 
[[File:CountDown3.png|500px]] 

'''step 4''' 
Set the Range Selector > offset to 0% in the beginning of the timeline, and to 100 % on another point in the timeline. This will create a new keyframe. Adjust this keyframe to you will: closer to the beginning for shorter countdown, further for longer countdown. 
[[File:CountDown4.png|500px]] 
[[File:CountDown6.png|500px]] 

'''step 5''' 
Advanced > Random order ON 
Random seed: 6 

[[File:CountDown7.png|500px]] 

=== TIP === You can use the 'wiggle' expression to create a random color text animation as well! follow [https://www.youtube.com/watch?v=37a3YHq4suE >>this] tutorial

== Guide: Multiple Wiggles ==
This short assignment demonstrates how to adjust multiple layers at the same time. 
[[File:WiggelingSquares_s.gif|500px]] 

{| class="wikitable"
|-
| skills || wiggle expression
|-
| || layer control expression
|-
| time to complete || 17 minutes
|}

'''step 1''' 
create multiple shape layers on your background. 
[[File:WigglingSquares1.png|500px]] 

'''step 2''' 
add a Null layer > rename it 'control'. 
[[File:WigglingSquares2.png|500px]] 
[[File:WigglingSquares2B.png|500px]] 

'''step 3''' 
add Expressions Effect > Slider Control to your control layer. 
[[File:WigglingSquares3.png|500px]] 

'''step 4''' 
add another slider with command D and name them: Time and Position. 
add values to each slider. you can change and adjust these values later. 
Lock the Effects panel to keep it visible. 
[[File:WigglingSquares4B.png|500px]] 

'''step 5''' 
Open the top shape layer's Position and Alt-click the Stopwatch. 
Write wiggle and keep the brackets empty. 
connect the values with the Time , Position sliders by using the PickWhip: 
1. drag the PickWhip next to position first to the Time Slider 
2. add coma , 
3. drag again the pickWhip next to position to the second slider
[[File:WigglingSquares5.png|500px]] 

'''step 6''' 
control-click (right-click) the Position stop watch > select 'Copy Expression Only' 
[[File:WigglingSquares6.png|500px]] 

'''step 7''' 
select all there rest of the shape layers > paste. 

'''step 8''' 
You can now adjust the wiggle values of all the layers together. 
[[File:WigglingSquares8.png|500px]] 

 

== Guide: Font Weight animation ==
This guide demonstrates how to animate text weight by using and editing a given code. 
You can follow the original tutorial showing 3 ways to animate text weight >>[https://www.youtube.com/watch?v=EGi_-k9o-OM here] (expression Strats at 6:51) 
[[File:FontWeight.gif|500px]] 

{| class="wikitable"
|-
| skills || copy-paste-and-adjust code
|-
| || layer control expression
|-
| time to complete || 21 minutes
|}

'''step 1''' 
Add a solid layer and add text layer. Choose a ''typeface with multiple weights''. 

'''step 2''' 
add a Null object > rename it 'control'. 
[[File:FontWeight1.png|500px]] 

'''step 3''' 
add a Slider Control effect to the Null layer > rename it 'font weight'. 
[[File:FontWeight2.png|500px]] 

'''step 4''' 
click your text layer drop-down arrow > open the 'TEXT' drop down menu. 
next to the Source stop watch alt(Option)-click > paste in the following code: <syntaxhighlight lang="javascript">
var array=[

"ChakraPetch-ExtraLight",

"ChakraPetch-Light",

"ChakraPetch-Regular",

"ChakraPetch-Medium",

"ChakraPetch-SemiBold",

"ChakraPetch-Bold"

]; r = Math.round(thisComp.layer("control").effect("font weight")("Slider")); style.setFont(array[r]);

</syntaxhighlight> 

[[File:FontWeight3.png|500px]] 
[[File:FontWeight4.png|500px]] 

 
'''step 5''' 
adjust the code content - change the names of the fonts to your own selection. 

'''step 6''' 
mark inside the brackets of r=Math.round() from (thisComp to "slider")> connect the whip-pick next to the code with the font weight slider. your text and null layer should now be connected. 
[[File:FontWeight5.png|500px]] 

'''step 7''' 
start animating: set the slider on 0 and the indicator in the beginning of the timeline. click the stop-watch next to the slider under the control layer. 
your text and null layer should now be connected. 
[[File:FontWeight6.png|500px]] 
move forward in time and set the control slider on 5 (when using 6 fonts). go further in time and set it bak to 0.

== Recommended Tutorials ==
You can watch our pre-tested video tutorials to create the above and more.
 
1. [https://www.youtube.com/watch?v=Ar_8XBVEKGY introduction to Expressions] 
2. [https://www.youtube.com/watch?v=kbjsL0i0sPM Things Wiggle can do] 
3. [https://www.youtube.com/watch?v=hBCBAbR-B5w&t=317s Wiggle multiple objects] 
4. [https://www.youtube.com/watch?v=37a3YHq4suE&t=12s Wiggle text colors] 
5. [https://www.youtube.com/watch?v=9f8l_Fugc2Q Random color expressions] 
6. [https://youtube.com/shorts/2dkyocGqGHM?feature=share Flicker/ Glitch] 
7. [https://www.youtube.com/watch?v=2T_4ndZ6Nr8 Random letter reveal] 
8. [https://www.youtube.com/watch?v=xrKMeeFrMxg Random options] 
9. [https://www.youtube.com/watch?v=qNhXjGRSe-s Random XYZ Position] 
10. [https://www.youtube.com/watch?v=faheQUVMHWw Five copy-paste Expressions] 
11. [https://helpx.adobe.com/after-effects/using/expression-examples.html Adobe Expressions Examples]

AE Scripts

2024-10-18T11:51:26Z

Arjensuijker: /* Guide: Text Reveal/ Countdown */

{{Template:Quickstartguide}}
On this page you will find a series of guides to create short animations combined into one. You will be adding Scrips into Adobe After Effects. 
For this demo I chose the words 'Visual Coding' + square shape + the colours #260340 and #d3e52b on a 5:4 canvas ratio. 

== Guide: Text Reveal/ Countdown ==
This short assignment demonstrate how to create a generative text animation. 
[[File:countdown_s.gif|500px]] 

{| class="wikitable"
|-
| skills || wiggle expression
|-
| time to complete || 10 minutes
|}

'''step 1''' 
write text on your background (or solid background layer for creating GIFs). 
center your anchor point [ - command double-click on your anchor icon - ] 
[[File:CountDown1.png|500px]] 

'''step 2''' 
open your text layer > animate > character offset 
[[File:CountDown2.png|500px]] 

'''step 3''' 
Click Option (Alt on Windows) + Stopwatch >wiggle (4,40) 
[[File:CountDown3.png|500px]] 

'''step 4''' 
Set the Range Selector > offset to 0% in the beginning of the timeline, and to 100 % on another point in the timeline. This will create a new keyframe 
Adjust keyframe to you will: closer to the beginning for shorter countdown, further for longer countdown. 
[[File:CountDown4.png|500px]] 
[[File:CountDown6.png|500px]] 

'''step 5''' 
Advanced > Random order ON 
Random seed: 6 

[[File:CountDown7.png|500px]] 

=== TIP === You can use the 'wiggle' expression to create a random color text animation as well! follow [https://www.youtube.com/watch?v=37a3YHq4suE >>this] tutorial

== Guide: Multiple Wiggles ==
This short assignment demonstrates how to adjust multiple layers at the same time. 
[[File:WiggelingSquares_s.gif|500px]] 

{| class="wikitable"
|-
| skills || wiggle expression
|-
| || layer control expression
|-
| time to complete || 17 minutes
|}

'''step 1''' 
create multiple shape layers on your background. 
[[File:WigglingSquares1.png|500px]] 

'''step 2''' 
add a Null layer > rename it 'control'. 
[[File:WigglingSquares2.png|500px]] 
[[File:WigglingSquares2B.png|500px]] 

'''step 3''' 
add Expressions Effect > Slider Control to your control layer. 
[[File:WigglingSquares3.png|500px]] 

'''step 4''' 
add another slider with command D and name them: Time and Position. 
add values to each slider. you can change and adjust these values later. 
Lock the Effects panel to keep it visible. 
[[File:WigglingSquares4B.png|500px]] 

'''step 5''' 
Open the top shape layer's Position and Alt-click the Stopwatch. 
Write wiggle and keep the brackets empty. 
connect the values with the Time , Position sliders by using the PickWhip: 
1. drag the PickWhip next to position first to the Time Slider 
2. add coma , 
3. drag again the pickWhip next to position to the second slider
[[File:WigglingSquares5.png|500px]] 

'''step 6''' 
control-click (right-click) the Position stop watch > select 'Copy Expression Only' 
[[File:WigglingSquares6.png|500px]] 

'''step 7''' 
select all there rest of the shape layers > paste. 

'''step 8''' 
You can now adjust the wiggle values of all the layers together. 
[[File:WigglingSquares8.png|500px]] 

 

== Guide: Font Weight animation ==
This guide demonstrates how to animate text weight by using and editing a given code. 
You can follow the original tutorial showing 3 ways to animate text weight >>[https://www.youtube.com/watch?v=EGi_-k9o-OM here] (expression Strats at 6:51) 
[[File:FontWeight.gif|500px]] 

{| class="wikitable"
|-
| skills || copy-paste-and-adjust code
|-
| || layer control expression
|-
| time to complete || 21 minutes
|}

'''step 1''' 
Add a solid layer and add text layer. Choose a ''typeface with multiple weights''. 

'''step 2''' 
add a Null object > rename it 'control'. 
[[File:FontWeight1.png|500px]] 

'''step 3''' 
add a Slider Control effect to the Null layer > rename it 'font weight'. 
[[File:FontWeight2.png|500px]] 

'''step 4''' 
click your text layer drop-down arrow > open the 'TEXT' drop down menu. 
next to the Source stop watch alt(Option)-click > paste in the following code: <syntaxhighlight lang="javascript">
var array=[

"ChakraPetch-ExtraLight",

"ChakraPetch-Light",

"ChakraPetch-Regular",

"ChakraPetch-Medium",

"ChakraPetch-SemiBold",

"ChakraPetch-Bold"

]; r = Math.round(thisComp.layer("control").effect("font weight")("Slider")); style.setFont(array[r]);

</syntaxhighlight> 

[[File:FontWeight3.png|500px]] 
[[File:FontWeight4.png|500px]] 

 
'''step 5''' 
adjust the code content - change the names of the fonts to your own selection. 

'''step 6''' 
mark inside the brackets of r=Math.round() from (thisComp to "slider")> connect the whip-pick next to the code with the font weight slider. your text and null layer should now be connected. 
[[File:FontWeight5.png|500px]] 

'''step 7''' 
start animating: set the slider on 0 and the indicator in the beginning of the timeline. click the stop-watch next to the slider under the control layer. 
your text and null layer should now be connected. 
[[File:FontWeight6.png|500px]] 
move forward in time and set the control slider on 5 (when using 6 fonts). go further in time and set it bak to 0.

== Recommended Tutorials ==
You can watch our pre-tested video tutorials to create the above and more.
 
1. [https://www.youtube.com/watch?v=Ar_8XBVEKGY introduction to Expressions] 
2. [https://www.youtube.com/watch?v=kbjsL0i0sPM Things Wiggle can do] 
3. [https://www.youtube.com/watch?v=hBCBAbR-B5w&t=317s Wiggle multiple objects] 
4. [https://www.youtube.com/watch?v=37a3YHq4suE&t=12s Wiggle text colors] 
5. [https://www.youtube.com/watch?v=9f8l_Fugc2Q Random color expressions] 
6. [https://youtube.com/shorts/2dkyocGqGHM?feature=share Flicker/ Glitch] 
7. [https://www.youtube.com/watch?v=2T_4ndZ6Nr8 Random letter reveal] 
8. [https://www.youtube.com/watch?v=xrKMeeFrMxg Random options] 
9. [https://www.youtube.com/watch?v=qNhXjGRSe-s Random XYZ Position] 
10. [https://www.youtube.com/watch?v=faheQUVMHWw Five copy-paste Expressions] 
11. [https://helpx.adobe.com/after-effects/using/expression-examples.html Adobe Expressions Examples]

Web-to-print-with-pagedjs

2023-11-24T15:02:00Z

Arjensuijker:

== Printing from HTML & CSS ==
Did you know you can design beautiful printed books, flyers etc. directly in CSS and HTML? This seems like a strange technology to use, because it is much easier to do in Indesign. However, doing it directly from HTML and CSS offers some unique possibilities:

* Better hybrid publishing workflow
**You can create a publication that has HTML as it's source and from there can be exported to many different formats, including a printed book, pdf file, website, web app, epub etc. Because you have one online source, it is easy to update and collaborate on without having the trouble of sending around multiple versions etc.
* Customized printed publications
**Printing from HTML & CSS allows you to create printed publications that are tailored to individual users because both the content and design can easily be changed programmatically.

This technology is still rather niche, so many applications for it are relatively underexplored.

== Why Paged.js? ==
For decades, CSS has included possibilities for designing printed publications. Unfortunately, browsers have stopped adhering to these standards for print CSS. This means that you can design a beautiful books in your CSS, but when you print it directly in the browser (like you are supposed to do) it will miss a lot of features that make a book a book. There are many initiatives out there that fix this issue in different ways. One way is to send the file to a server and make a pdf from it there, but this can get rather complicated. Paged.js solves it by using JavaScript to interpret you CSS and force the brower to interpret it correctly when printing. For many designers, this is the simplest solution.

== How to get started with the Paged.js polyfill ==
The general workflow is to include a link to the Paged.js polyfill (the easiest option) in the '''head''' of your HTML document like this:

<code><script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script></code>

After that, all of your print CSS should be correctly interpreted by the browser. It will also automatically show a preview of the print version in you browser window. But be careful, it doesn't work on local files! Therefore, the easiest way to work with it is to run your HTML and CSS files in Visual Studio Code with the Live Server extension.

== Writing print CSS ==
The documentation of print CSS is excellent on Paged.js, so I won't repeat it here. Please follow their instructions [https://pagedjs.org/documentation/5-web-design-for-print/#the-%40media-print-query here] and enjoy!

== Example CSS ==
Here is an example of a css file that uses many different print properties.

<syntaxhighlight lang="css">
body {
background: red;
font-size: 35px;
}

@media print {
@page {
size: A5;
margin: 5mm 10mm;
bleed: 6mm;
marks: crop;
/* background-image: url('SILVER-HOLOGRAM-scaled.jpg'); */

@top-right {
content: "My beautiful book";
font-size: 15px;
color: brown;
}

@bottom-right {
content: "page "counter(page);
}

@bottom-center {
content: string(title);
}
}

@page chapterpage {

@bottom-right {
content: "";
}

}

@page: first {
@top-right {
content: "";
}

@bottom-right {
content: "";
}

@bottom-center {
content: "";
}

background-image:url('SILVER-HOLOGRAM-scaled.jpg');

}

@page: right {
margin-right: 20mm
}

@page: left {
margin-left: 20mm
}

body {
background: white;
}

h2 {
break-before: right;
string-set: title content(text);
page: chapterpage;
}

h1 {
break-after: page;
}

.page-break {
break-before: page;
}

}
</syntaxhighlight>

Jsonbin database

2023-11-24T14:46:42Z

Arjensuijker: /* What is a JSONbin? */

If you want users to save and share information on a website that you build, you are going to have to use some kind of database. Tis kind of technology is the backbone of social media, Wordpress websites and basically any website that lets it's users interact with each other.

Making this happen can be pretty hard. Usually you need to rent some kind of server, and also learn to code a server-side language. However, there is an alternative: Use a JSON 'database' on someone else's server.

=== What is a JSONbin? ===
A JSONbin is basically a service that allows you to save JSON files on someone else's server, usually for free. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to store and send data over the internet. For our purposes, it is most important that it allows you to send and store arrays, which are lists of texts, numbers or other info. We can just send our info to a JSONbin, and there it will be saved so that another user can retrieve it. For example, you can create a public message board this way, where everyone can send a new message and view the messages that other people have sent.

There's many different JSONBIN services out there, but at the moment of writing there is only one that allows you to add information without replacing the whole database. It can be found on [https://jsonbin.org/ jsonbin.org].

=== Using JSONbin.org to create a message board ===
As an example project, we'll create a very basic message board. People can post messages and see all messages from others. We will use one HTML file and one JavaScript. In the end we will have code to empty the database, code to add an item to the database and code to load everything from the database into our page.

An example of what we will build and an overview of all the code can be found here:

https://codepen.io/arjensuijker/pen/wvNjjWe?editors=1010

'''1. Create an account'''

To use jsonbin.org, you need a Github account, you can do that by clicking the 'sign in' link here https://jsonbin.org/.

Once you are logged in, the page on https://jsonbin.org/ should show your account data, including an '''API key'''. This API key is the key that allows you to change your database. In the example that we are building, we are using the API key directly in our code. This is very insecure, because anybody can find this key in your code and change or remove the database. However, doing it the secure way is to hard for this first project.

'''2. Set up your files'''

We will work in Visual Studio Code. It works really well for this project, because it has a convenient live server. Instructions for setting up VS code can be found here: [[Visual Studio Code|VS Code]].

In VS Code, you need to setup a basic HTML file that incudes Jquery and a JavaScript file. The process to do this is described here: [[JQuery]].

Making it in CodePen.io instead of VS Code will work too. Just make sure to include Jquery.

'''3. Create an empty database'''

By default, your JSONbin is already filled with some stuff that we don't need. Therefore we will first write a script that replaces the current database with an empty array. We will use an array because that's basically a list of things/values, which is perfect to hold our list of messages. To do this, we first need a button in our HTML, we can add that in the body like this:

<code><button id="empty">empty database</button></code>

Next, we'll add the JavaScript code that makes it work in our script.js file:<syntaxhighlight lang="javascript" line="1">
//the url to access your database. replace username with your username
var url = "https://jsonbin.org/username";

//wait until the document is ready
$( document ).ready(function() {
//execute a function when the button with the id empty is clicked
$('#empty').click(function(){
//make a POST ajax request, which sends data to the database
$.ajax({
method: "POST",
url: url,
contentType:"application/json; charset=utf-8",
dataType: "json",
// the data we send is just []. This is an empty array
data: "[]",
headers: { "authorization": "token your_api_key_here" }
});
});

})
</syntaxhighlight>Please carefully read the comments to know what the code does. You need to replace username on line 2 with your own username (as found on https://jsonbin.org/ after logging in). You also need to replace your_api_key_here on line 14 with your API key (the huge string of numbers and letters also found on the jsonbin page).

When you click the button now, it should create the database, ready for you to fill! You can check this by being logged in on jsonbin.org and visiting https://jsonbin.org/username (replace username with your username) in your browser. It should only show [].

'''4. Add messages'''

We will add an input field to the same page that allows you to send a message to the database. We'll start by adding the input field to the html file.

<code><input id="message"></code>

Next, we'll add the JavaScript code that selects the input field, takes its input and sends it to the database. The code needs to be added '''inside the document ready function''' underneath the button click function'''.'''<syntaxhighlight lang="javascript">
//execute a function when the text inside the message is changed (press enter send message)
$('#message').change(function(){
//make a PATCH ajax request, which adds data to the database
$.ajax({
method: "PATCH",
url: url,
contentType:"application/json; charset=utf-8",
dataType: "json",
// the data we send is the value of the field that is changed, made into a JSON string
data: JSON.stringify($(this).val()),
headers: { "authorization": "token your_api_key_here" }
});
});
</syntaxhighlight>Again, make sure to replace your_api_key_here. If you enter a message into the input field now and press enter, it will be saved into the database.

'''5. Load messages'''

The next step is to make it possible to load the messages from the database. Again, we first add a button in the HTML.

<code><button id="load">load messages</button></code>

Next, we add the code to make it work. Add it somewhere after the previous message change function, but before the closing tags of the document ready function.<syntaxhighlight lang="javascript">
$('#load').click(function(){
//make a GET ajax request, which GETs data from the database
$.ajax({
method: "GET",
url: url,
contentType:"application/json; charset=utf-8",
dataType: "json",
headers: { "authorization": "token your_api_key_here" }
// execute a function when the request is done
}).done(function(result){
//empty the message list div
$('#message-list').html('');
// for each value in the database, execute a function
$.each( result, function( number, value ) {
//add a paragraph element containing the value to the message list
$('#message-list').append(""+value+"");
});
});
});
</syntaxhighlight>You should now have all the code you need!

Jsonbin database

2023-11-23T13:37:53Z

Arjensuijker: /* Using JSONbin.org to create a message board */

If you want users to save and share information on a website that you build, you are going to have to use some kind of database. Tis kind of technology is the backbone of social media, Wordpress websites and basically any website that lets it's users interact with each other.

Making this happen can be pretty hard. Usually you need to rent some kind of server, and also learn to code a server-side language. However, there is an alternative: Use a JSON 'database' on someone else's server.

=== What is a JSONbin? ===
A JSONbin is basically a website that allows you to save JSON files on their server. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to send data over the internet. For our purposes, it is most important that it allows you to send arrays, which are lists of texts, numbers or other info. We can just send our info to a JSONbin, and there it will be saved so that another user can retrieve it. For example, you can create a public message board this way, where everyone can send a new message and view the messages that other people have sent.

There's many JSONBIN projects out there, but at the moment of writing there is only one that allows you to add information without replacing the whole database. It can be found on jsonbin.org.

=== Using JSONbin.org to create a message board ===
As an example project, we'll create a very basic message board. People can post messages and see all messages from others. We will use one HTML file and one JavaScript. In the end we will have code to empty the database, code to add an item to the database and code to load everything from the database into our page.

An example of what we will build and an overview of all the code can be found here:

https://codepen.io/arjensuijker/pen/wvNjjWe?editors=1010

'''1. Create an account'''

To use jsonbin.org, you need a Github account, you can do that by clicking the 'sign in' link here https://jsonbin.org/.

Once you are logged in, the page on https://jsonbin.org/ should show your account data, including an '''API key'''. This API key is the key that allows you to change your database. In the example that we are building, we are using the API key directly in our code. This is very insecure, because anybody can find this key in your code and change or remove the database. However, doing it the secure way is to hard for this first project.

'''2. Set up your files'''

We will work in Visual Studio Code. It works really well for this project, because it has a convenient live server. Instructions for setting up VS code can be found here: [[Visual Studio Code|VS Code]].

In VS Code, you need to setup a basic HTML file that incudes Jquery and a JavaScript file. The process to do this is described here: [[JQuery]].

Making it in CodePen.io instead of VS Code will work too. Just make sure to include Jquery.

'''3. Create an empty database'''

By default, your JSONbin is already filled with some stuff that we don't need. Therefore we will first write a script that replaces the current database with an empty array. We will use an array because that's basically a list of things/values, which is perfect to hold our list of messages. To do this, we first need a button in our HTML, we can add that in the body like this:

<code><button id="empty">empty database</button></code>

Next, we'll add the JavaScript code that makes it work in our script.js file:<syntaxhighlight lang="javascript" line="1">
//the url to access your database. replace username with your username
var url = "https://jsonbin.org/username";

//wait until the document is ready
$( document ).ready(function() {
//execute a function when the button with the id empty is clicked
$('#empty').click(function(){
//make a POST ajax request, which sends data to the database
$.ajax({
method: "POST",
url: url,
contentType:"application/json; charset=utf-8",
dataType: "json",
// the data we send is just []. This is an empty array
data: "[]",
headers: { "authorization": "token your_api_key_here" }
});
});

})
</syntaxhighlight>Please carefully read the comments to know what the code does. You need to replace username on line 2 with your own username (as found on https://jsonbin.org/ after logging in). You also need to replace your_api_key_here on line 14 with your API key (the huge string of numbers and letters also found on the jsonbin page).

When you click the button now, it should create the database, ready for you to fill! You can check this by being logged in on jsonbin.org and visiting https://jsonbin.org/username (replace username with your username) in your browser. It should only show [].

'''4. Add messages'''

We will add an input field to the same page that allows you to send a message to the database. We'll start by adding the input field to the html file.

<code><input id="message"></code>

Next, we'll add the JavaScript code that selects the input field, takes its input and sends it to the database. The code needs to be added '''inside the document ready function''' underneath the button click function'''.'''<syntaxhighlight lang="javascript">
//execute a function when the text inside the message is changed (press enter send message)
$('#message').change(function(){
//make a PATCH ajax request, which adds data to the database
$.ajax({
method: "PATCH",
url: url,
contentType:"application/json; charset=utf-8",
dataType: "json",
// the data we send is the value of the field that is changed, made into a JSON string
data: JSON.stringify($(this).val()),
headers: { "authorization": "token your_api_key_here" }
});
});
</syntaxhighlight>Again, make sure to replace your_api_key_here. If you enter a message into the input field now and press enter, it will be saved into the database.

'''5. Load messages'''

The next step is to make it possible to load the messages from the database. Again, we first add a button in the HTML.

<code><button id="load">load messages</button></code>

Next, we add the code to make it work. Add it somewhere after the previous message change function, but before the closing tags of the document ready function.<syntaxhighlight lang="javascript">
$('#load').click(function(){
//make a GET ajax request, which GETs data from the database
$.ajax({
method: "GET",
url: url,
contentType:"application/json; charset=utf-8",
dataType: "json",
headers: { "authorization": "token your_api_key_here" }
// execute a function when the request is done
}).done(function(result){
//empty the message list div
$('#message-list').html('');
// for each value in the database, execute a function
$.each( result, function( number, value ) {
//add a paragraph element containing the value to the message list
$('#message-list').append(""+value+"");
});
});
});
</syntaxhighlight>You should now have all the code you need!

Jsonbin database

2023-11-23T08:29:24Z

Arjensuijker: /* Using JSONbin.org to create a message board */

Jsonbin database

2023-11-17T12:22:13Z

Arjensuijker:

Jsonbin database

2023-11-16T12:06:51Z

Arjensuijker:

Jsonbin database

2023-11-16T10:29:23Z

Arjensuijker: /* Using JSONbin */

JQuery

2023-11-16T09:49:40Z

Arjensuijker:

=== What is jQuery? ===
jQuery is a library for JavaScript, which is a programming language used to make websites interactive. It's like a set of handy tools that makes it easier for developers to work with JavaScript, allowing them to do things like adding animations and making web pages respond to user actions without writing as much code.

=== Getting started ===

===== 1. Prepare your HTML file =====
Open Visual Studio Code and create a new file. Save the file as index.html, inside of a folder that will contain all the files for this website and noting else. In this file, enter the ! symbol and chose the first option that shows up underneath. This should create a default html file, ready to work with.

===== 2. Add a JavaScript page =====
Open en new file and save it in the same folder as your html file, name it script.js. In de head of your html document, you should add a link to this JS file:

<code><script src="script.js"></script></code>

===== 3. Add jQuery =====
Before you can use jQuery code in your JavaScript file, you need to load the jQuery library file. the easiest way to do that is to copy the following line of code into the head of your document, above the link to your script file.

<code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script></code>

===== 4. Test if it works =====
Enter the code below in your script.js file to check whether everything works correctly:<syntaxhighlight lang="javascript">
$(function() {

alert('Hello world!');

});
</syntaxhighlight>This should wait for the page to be loaded and then show a message saying Hello world!

Html-css-list

2023-10-31T10:13:47Z

Arjensuijker: Arjensuijker moved page Html-css-list to HTML list

#REDIRECT [[HTML list]]

HTML list

2023-10-31T10:13:47Z

Arjensuijker: Arjensuijker moved page Html-css-list to HTML list

=== Useful HTML elements ===
With links to an explanation and examples.
{| class="wikitable"
|Elements
|description
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html <html>]
|Main html tag
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head <head>]
|Contains all extra info (linked files, meta info)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title <title>]
|The title of your document
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link <link>]
|A link to load an external file (like CSS)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body <body>]
|Contains all visible content
|-
|[https://www.w3schools.com/html/html5_semantic_elements.asp <main>, <section>, <nav>, etc...]
|Empty blocks used for structuring content
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div <nowiki><div></nowiki>]
|An empty block used for formatting
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p <nowiki></nowiki>]
|A text paragraph
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a <a>]
|A clickable link
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1 <nowiki><h1></nowiki>]
|A header
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee <marquee>]
|A moving piece of text (only use for fun)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br <nowiki> </nowiki>]
|A line break
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul <nowiki><ul></nowiki>]
|A bulleted list
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b <nowiki></nowiki>]
|Bold text
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i <nowiki></nowiki>]
|Italic text
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img <img>]
|An image
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio <audio>]
|An audio player (plays mp3)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video <video>]
|A video player (plays mp4)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe <iframe>]
|A frame containing another website
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button <button>]
|A button that can execute javascript
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input <input>]
|A user input for text, numbers, dates etc.
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea <textarea>]
|A user input for large text
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details <details>]
|A dropdown containing more details
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter <meter>]
|A meter showing progress or a value in a range
|}

CSS list

2023-10-31T10:12:26Z

Arjensuijker: Created page with "This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples. {| class="wikitable" border="0" width="216" cellspacing="0" cellpadding="0" |- | nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_text-align.asp text-align] |- | nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font.asp font] |- | nowrap="nowrap" width="216" |[https://www.w3schools.com..."

This is a list of the most useful CSS properties, roughly ranked from easy to hard. They link to an explanation and examples.
{| class="wikitable" border="0" width="216" cellspacing="0" cellpadding="0"
|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_text-align.asp text-align]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font.asp font]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-family.asp font-family]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-size.asp font-size]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_font-stretch.asp font-stretch]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_font-style.asp font-style]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_font_weight.asp font-weight]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_height.asp height]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_margin.asp margin]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_opacity.asp opacity]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_padding.asp padding]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_text_color.asp color]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_dim_line-height.asp line-height]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_visibility.asp visibility]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_border.asp border]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_box-shadow.asp box-shadow]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_background.asp background]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_filter.asp filter]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_cursor.asp cursor]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_text-shadow.asp text-shadow]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transform.asp transform]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_transition.asp transition]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_class_position.asp position]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_perspective.asp perspective]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/pr_grid.asp grid]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_columns.asp columns]

|-
| nowrap="nowrap" width="216" |[https://www.w3schools.com/cssref/css3_pr_animation.asp animation]

|}

HTML list

2023-10-31T09:56:23Z

Arjensuijker:

HTML list

2023-10-31T08:50:16Z

Arjensuijker: Created page with "=== Useful HTML elements === With links to an explanation and examples. {| class="wikitable" |Elements |description |- |[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html <html>] |Main html tag |- |[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head <head>] |Contains all extra info (linked files, meta info) |- |[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title <title>] |The title of your document |- |[https://developer.mozilla.org/..."

=== Useful HTML elements ===
With links to an explanation and examples.
{| class="wikitable"
|Elements
|description
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html <html>]
|Main html tag
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head <head>]
|Contains all extra info (linked files, meta info)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title <title>]
|The title of your document
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link <link>]
|A link to load an external file (like CSS)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body <body>]
|Contains all visible content
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p <nowiki></nowiki>]
|A text paragraph
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div <nowiki><div></nowiki>]
|An empty block used for formatting
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a <a>]
|A clickable link
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img <img>]
|An image
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1 <nowiki><h1></nowiki>]
|A header
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee <marquee>]
|A moving piece of text (only use for fun)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br <nowiki> </nowiki>]
|A line break
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul <nowiki><ul></nowiki>]
|A bulleted list
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b <nowiki></nowiki>]
|Bold text
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i <nowiki></nowiki>]
|Italic text
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio <audio>]
|An audio player (plays mp3)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video <video>]
|A video player (plays mp4)
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe <iframe>]
|A frame containing another website
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button <button>]
|A button that can execute javascript
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input <input>]
|A user input for text, numbers, dates etc.
|-
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea <textarea>]
|A user input for large text
|}

Jsonbin database

2023-10-12T14:16:02Z

Arjensuijker:

Digital Publishing Studio

2023-10-12T14:13:40Z

Arjensuijker: /* JavaScript */

==Designing Publications==
{{Columns}}
{{Column}}
* [[The_process_of_making_a_publication|Publications design process]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==The interwebs==
{{Columns}}
{{Column}}
* [[Online_Platforms|Online Platforms]]
{{ColumnEnd}}
{{Column}}
* [[Timeline_of_the_Interweb|Timeline of the Interwebs]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==HTML & CSS==
{{Columns}}
{{Column}}
* [[Web-to-print-with-pagedjs|Web-to-print]]
{{ColumnEnd}}
{{Column}}
* [[Responsive_webdesign_basics|Responsive webdesign basics]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
* [[CSS_Grid|CSS grid]]
{{ColumnEnd}}
{{ColumnsEnd}}

==JavaScript==
{{Columns}}
{{Column}}
* [[jQuery|Using jQuery]]
* [[Web_scraping|Web Scraping]]
{{ColumnEnd}}
{{Column}}
* [[Jsonbin_database|JSONbin database]]
{{ColumnEnd}}
{{Column}}
* [[Apis-in-jquery|API's in jQuery]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Programming==
{{Columns}}
{{Column}}
* [[Visual_Studio_Code|Visual Studio Code]]
* [[Coding_Resources|Coding Resources]]
{{ColumnEnd}}
{{Column}}
* [[Hyperlink|Hyperlink]]
{{ColumnEnd}}
{{Column}}
* [[Stealing_A_Website|Stealing a Website]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Adobe Tutorials==
{{Columns}}
{{Column}}
* [[Photoshop_Script_Gif|Making a Gif in Photoshop]]
* [[AE_Scripts|After Effect Scripts]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

Digital Publishing Studio

2023-10-12T12:41:53Z

Arjensuijker:

==Designing Publications==
{{Columns}}
{{Column}}
* [[The_process_of_making_a_publication|Publications design process]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==The interwebs==
{{Columns}}
{{Column}}
* [[Online_Platforms|Online Platforms]]
{{ColumnEnd}}
{{Column}}
* [[Timeline_of_the_Interweb|Timeline of the Interwebs]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==HTML & CSS==
{{Columns}}
{{Column}}
* [[Web-to-print-with-pagedjs|Web-to-print]]
{{ColumnEnd}}
{{Column}}
* [[Responsive_webdesign_basics|Responsive webdesign basics]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
* [[CSS_Grid|CSS grid]]
{{ColumnEnd}}
{{ColumnsEnd}}

==JavaScript==
{{Columns}}
{{Column}}
* [[Using jQuery|jQuery]]
* [[Web_scraping|Web Scraping]]
{{ColumnEnd}}
{{Column}}
* [[Jsonbin_database|JSONbin database]]
{{ColumnEnd}}
{{Column}}
* [[Apis-in-jquery|API's in jQuery]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Programming==
{{Columns}}
{{Column}}
* [[Visual_Studio_Code|Visual Studio Code]]
* [[Coding_Resources|Coding Resources]]
{{ColumnEnd}}
{{Column}}
* [[Hyperlink|Hyperlink]]
{{ColumnEnd}}
{{Column}}
* [[Stealing_A_Website|Stealing a Website]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Adobe Tutorials==
{{Columns}}
{{Column}}
* [[Photoshop_Script_Gif|Making a Gif in Photoshop]]
* [[AE_Scripts|After Effect Scripts]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

Digital Publishing Studio

2023-10-12T12:39:34Z

Arjensuijker: /* JavaScript */

==Designing Publications==
{{Columns}}
{{Column}}
* [[The_process_of_making_a_publication|Publications design process]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==HTML & CSS==
{{Columns}}
{{Column}}
* [[Web-to-print-with-pagedjs|Web-to-print]]
{{ColumnEnd}}
{{Column}}
* [[Timeline_of_the_Interweb|Timeline of the Interwebs]]
* [[Responsive_webdesign_basics|Responsive webdesign basics]]
{{ColumnEnd}}
{{Column}}
* [[Online_Platforms|Online Platforms]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==JavaScript==
{{Columns}}
{{Column}}
* [[Using jQuery|jQuery]]
* [[Web_scraping|Web Scraping]]
{{ColumnEnd}}
{{Column}}
* [[Jsonbin_database|JSONbin database]]
{{ColumnEnd}}
{{Column}}
* [[Apis-in-jquery|API's in jQuery]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Programming==
{{Columns}}
{{Column}}
* [[Visual_Studio_Code|Visual Studio Code]]
* [[Coding_Resources|Coding Resources]]
{{ColumnEnd}}
{{Column}}
* [[CSS_Grid|CSS grid]]
* [[Hyperlink|Hyperlink]]
{{ColumnEnd}}
{{Column}}
* [[Stealing_A_Website|Stealing a Website]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Adobe Tutorials==
{{Columns}}
{{Column}}
* [[Photoshop_Script_Gif|Making a Gif in Photoshop]]
* [[AE_Scripts|After Effect Scripts]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

Digital Publishing Studio

2023-10-12T12:38:43Z

Arjensuijker:

==Designing Publications==
{{Columns}}
{{Column}}
* [[The_process_of_making_a_publication|Publications design process]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==HTML & CSS==
{{Columns}}
{{Column}}
* [[Web-to-print-with-pagedjs|Web-to-print]]
{{ColumnEnd}}
{{Column}}
* [[Timeline_of_the_Interweb|Timeline of the Interwebs]]
* [[Responsive_webdesign_basics|Responsive webdesign basics]]
{{ColumnEnd}}
{{Column}}
* [[Online_Platforms|Online Platforms]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==JavaScript==
{{Columns}}
{{Column}}
* [[Web_scraping|Web Scraping]]
{{ColumnEnd}}
{{Column}}
* [[Jsonbin_database|JSONbin database]]
{{ColumnEnd}}
{{Column}}
* [[Apis-in-jquery|API's in jQuery]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Programming==
{{Columns}}
{{Column}}
* [[Visual_Studio_Code|Visual Studio Code]]
* [[Coding_Resources|Coding Resources]]
{{ColumnEnd}}
{{Column}}
* [[CSS_Grid|CSS grid]]
* [[Hyperlink|Hyperlink]]
{{ColumnEnd}}
{{Column}}
* [[Stealing_A_Website|Stealing a Website]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Adobe Tutorials==
{{Columns}}
{{Column}}
* [[Photoshop_Script_Gif|Making a Gif in Photoshop]]
* [[AE_Scripts|After Effect Scripts]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

JQuery

2023-10-12T12:35:45Z

Arjensuijker: new

=== What is jQuery? ===
jQuery is a library for JavaScript, which is a programming language used to make websites interactive. It's like a set of handy tools that makes it easier for developers to work with JavaScript, allowing them to do things like adding animations and making web pages respond to user actions without writing as much code.

=== Getting started ===

===== 1. Prepare your HTML file =====
Open Visual Studio Code and create a new file. Save the file as index.html, inside of a folder that will contain all the files for this website and noting else. In this file, enter the ! symbol and chose the first option that shows up underneath. This should create a default html file, ready to work with.

===== 2. Add a JavaScript page =====
Open en new file and save it in the same folder as your html file, name it script.js. In de head of your html document, you should add a link to this JS file, by typing script, accepting the first autocomplete option and adding href="script.js" inside the opening script tag.

===== 3. Add jQuery =====
Before you can use jQuery code in your JavaScript file, you need to load the jQuery library file. the easiest way to do that is to copy the following line of code into the head of your document, above the link to your script file.

<code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script></code>

===== 4. Test if it works =====
Enter the code below to check whether everything works correctly:<syntaxhighlight lang="javascript">
$(function() {

alert('Hello world!');

});
</syntaxhighlight>This should wait for the page to be loaded and then show a message saying Hello world!

Digital Publishing Studio

2023-10-12T08:22:29Z

Arjensuijker:

==Designing Publications==
{{Columns}}
{{Column}}
* [[The_process_of_making_a_publication|Publications design process]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Web and Internet==
{{Columns}}
{{Column}}
* [[Web_scraping|Web Scraping]]
* [[Web-to-print-with-pagedjs|Web-to-print]]
* [[Jsonbin_database|JSONbin database]]
{{ColumnEnd}}
{{Column}}
* [[Timeline_of_the_Interweb|Timeline of the Interwebs]]
* [[Responsive_webdesign_basics|Responsive webdesign basics]]
{{ColumnEnd}}
{{Column}}
* [[Online_Platforms|Online Platforms]]
* [[Apis-in-jquery|API's in jQuery]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Programming==
{{Columns}}
{{Column}}
* [[Visual_Studio_Code|Visual Studio Code]]
* [[Coding_Resources|Coding Resources]]
{{ColumnEnd}}
{{Column}}
* [[CSS_Grid|CSS grid]]
* [[Hyperlink|Hyperlink]]
{{ColumnEnd}}
{{Column}}
* [[Stealing_A_Website|Stealing a Website]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Adobe Tutorials==
{{Columns}}
{{Column}}
* [[Photoshop_Script_Gif|Making a Gif in Photoshop]]
* [[AE_Scripts|After Effect Scripts]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

Jsonbin database

2023-10-12T08:21:18Z

Arjensuijker: new

Digital Publishing Studio

2023-10-10T12:17:48Z

Arjensuijker:

==Designing Publications==
{{Columns}}
{{Column}}
* [[The_process_of_making_a_publication|Publications design process]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Web and Internet==
{{Columns}}
{{Column}}
* [[Web_scraping|Web Scraping]]
* [[Web-to-print-with-pagedjs|Web-to-print]]
{{ColumnEnd}}
{{Column}}
* [[Timeline_of_the_Interweb|Timeline of the Interwebs]]
* [[Responsive_webdesign_basics|Responsive webdesign basics]]
{{ColumnEnd}}
{{Column}}
* [[Online_Platforms|Online Platforms]]
* [[Apis-in-jquery|API's in jQuery]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Programming==
{{Columns}}
{{Column}}
* [[Visual_Studio_Code|Visual Studio Code]]
* [[Coding_Resources|Coding Resources]]
{{ColumnEnd}}
{{Column}}
* [[CSS_Grid|CSS grid]]
* [[Hyperlink|Hyperlink]]
{{ColumnEnd}}
{{Column}}
* [[Stealing_A_Website|Stealing a Website]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Adobe Tutorials==
{{Columns}}
{{Column}}
* [[Photoshop_Script_Gif|Making a Gif in Photoshop]]
* [[AE_Scripts|After Effect Scripts]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

Apis-in-jquery

2023-10-10T12:16:25Z

Arjensuijker: new page

JavaScript allows you to pull information from external sources, and do something with it on your own website/app. For example, you can change the colors of your website based on the weather, or display the current number of humans in every country. This made even easier with Jquery, a library that makes writing JavaScript easier for the web.

=== 1. Load Jquery ===
You can load the jquery library file directly from the cloud by pasting this line of code in the head of your HTML:

<code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script></code>

=== 2. Create a JS file ===
First, create a new file, place it in the same folder as your html file and name it script.js. After that, place a link to it in the head of your document (underneath the jQuery link) like so:

<code><script src="script.js"></script></code>

=== 3. Find a good API ===
There are API's for many things. A huge collection of them can be found [https://github.com/public-apis/public-apis here]. lt is easiest to select one that requires no authorization and has no CORS protection. A relatively simple one to use is Open Meteo. This is an API that can be used to get past, present or future weather.

=== 4. Call the API ===
In the script.js file that you just made, paste the following to test it out: <syntaxhighlight lang="js" line="1">
$( document ).ready(function() {
$.getJSON( "https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&current=temperature_2m", function( result ) {
$('body').html(result.current.temperature_2m);
});
});
</syntaxhighlight>On line 1, we tell jQuery to wait until everything is loaded. On line 2, we tel jQuery to get the info from Open Meteo in the Json format. On line 3, we place the temperature part of the results in the html of our body element.

Digital Publishing Studio

2023-10-10T11:31:53Z

Arjensuijker: /* Web and Internet */

==Designing Publications==
{{Columns}}
{{Column}}
* [[The_process_of_making_a_publication|Publications design process]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Web and Internet==
{{Columns}}
{{Column}}
* [[Web_scraping|Web Scraping]]
* [[Web-to-print-with-pagedjs|Web-to-print]]
{{ColumnEnd}}
{{Column}}
* [[Timeline_of_the_Interweb|Timeline of the Interwebs]]
* [[Responsive_webdesign_basics|Responsive webdesign basics]]
{{ColumnEnd}}
{{Column}}
* [[Online_Platforms|Online Platforms]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Programming==
{{Columns}}
{{Column}}
* [[Visual_Studio_Code|Visual Studio Code]]
* [[Coding_Resources|Coding Resources]]
{{ColumnEnd}}
{{Column}}
* [[CSS_Grid|CSS grid]]
* [[Hyperlink|Hyperlink]]
{{ColumnEnd}}
{{Column}}
* [[Stealing_A_Website|Stealing a Website]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}

==Adobe Tutorials==
{{Columns}}
{{Column}}
* [[Photoshop_Script_Gif|Making a Gif in Photoshop]]
* [[AE_Scripts|After Effect Scripts]]
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{Column}}
{{ColumnEnd}}
{{ColumnsEnd}}