Over the last few decades, the rise of the Internet and later of personal computers has changed many of our habits and the way we communicate. We need our eyes more than ever to read, and they are now exposed every day to hundreds or even thousands of messages (text messages, emails, newsletters, articles, advertisements, etc.).

As discussed in a previous article, typography has played a role as discreet as it is essential for several centuries in delivering written messages and has therefore also been affected by this phenomenon. This advent of digital technology has indeed offered a whole new world of expression to typographers, leading them to invent new techniques and integrate technology into their artistic practice.

In this article, we will present you some of the typographic specificities of the digital age, and particularly how it has translated to the book industry. Far from denying its fundamental principles, you will see how this discipline has been able to adapt to fulfill its long-standing mission with elegance and efficiency.

Ebooks

Definition and History

An electronic book, also known as ebook, e-book or eBook, is “a book publication made available in digital form, consisting of text, images, or both, readable on the flat-panel display of computers or other electronic devices.” (Source: Wikipedia)

The ebook’s content, by its very nature, is customizable. Most ebooks are formatted in EPUB, the most common format in the industry. The layout of an EPUB book can be adapted by the reader according to their preferences: font size, margin size, text justification, and even background colour. This is one of the biggest advantages of digital technology, books can take the form that the reader desires.
EPUB or electronic publication is the most widely used format for ebooks on the market. Created by the International Digital Publishing Forum, it still is a standard in the ebook industry.

In the early 2000s, when some businesses were offering the first reading software to the public (Mobipocket, Adobe) and the first ranges of consumer e-readers were launched (Bookeen with Cybook, Sony with LIBRIe, and later Amazon with Kindle), many people announced the imminent end of the physical book in favour of this new technology. The reality has since shown that the reading experience for many readers is intimately linked to the contact with paper, and that the screen will not replace this unique connection. The ebook market represents about 10–15% of the paper book market today, and this proportion has remained constant for several years now. (Source: TonerBuzz)

Source : EbookFriendly
For typographers, creating an ebook is a unique challenge. It is about making the text as pleasant to read on the screen as it is on paper, while being able to adapt to different screen sizes and types. The layout of an ebook cannot necessarily be done in the same way as a printed book. There are several techniques at their disposal.

Font Choice

Font choice is an essential parameter when it comes to the layout of a book. Some fonts are better suited to digital media than others and some have been created specifically for ebooks:

Serif fonts are traditionally intended for paper books because, historically speaking, they are the oldest and used to be the closest to cursive writing.

e.g. Baskerville, Book Antiqua, Garamond, Palatino, Times

– On the contrary, with sans serif fonts, the characters are clearly delimited and separated from each other, which makes them easier to identify on a medium made of pixels. This type of font is therefore often preferred by graphic designers when creating ebooks.

e.g. Arial, Georgia, Helvetica, Lucida, Tahoma, Verdana

Do We Learn Better With a Legible Font?

Whatever the medium, the main mission of typography is to make reading easier and to simplify the delivery of messages. Intuitively, one might think that this helps the reader retain the message better. But is this really the case?

A cognitive science experiment conducted in 2010 by psychologists from Princeton and Indiana Universities on hundreds of people (including a group of 222 students from Ohio) showed two surprising things about this subject:
1. Neither font size nor bold formatting appears to affect our ability to retain messages;
2. A message is best retained not only when the font is unfamiliar to an individual, but even more so when the font is somewhat difficult to decipher.
Fluid reading can therefore, according to this study, be deceptive to the brain and create a sense of confidence that does not facilitate retaining information in our memory. On the contrary, an unusual font makes us think more deeply about what we are reading, and make us pay closer attention.
Of course, the results of this experiment must be nuanced. Entire textbooks written in an extravagant font would undoubtedly end up tiring and discouraging the most studious students, but it would seem that there is some truth in the phrase “It is by suffering that we learn.”

Font Optimization

Font optimization, also known as font hinting, is used to adjust the rendering of vector font outlines at the time of rasterization, i.e. when a vector image* is converted into a raster image**. Letters with a hinting font will have a clearer outline definition and will allow better on-screen readability.

*Vector image: Image produced using mathematical equations, lines, and curves with fixed points on a grid. These mathematical formulas capture shape, border, and fill colour to build an image. Because the mathematical formula recalibrates to any size, you can scale a vector image up or down without impacting its quality.
**Raster image: image built from pixels — tiny color squares that, in great quantity, can form highly detailed images such as photographs. The more pixels an image has, the higher quality it will be, and vice versa.
(Source : Adobe)
This process can be combined with anti-aliasing to produce a greyscale or subpixels. These processes allow the letters on the screen to have a “softer” edge, as do the letters on a printed text on paper.
Source : Free Type

The X-Height

Another characteristic to consider is the x-height of a font. Also known as the “corpus size,” the x-height is one of the most important dimensions of a font. It defines the height of lowercase letters without ascenders in relation to the height of upper case letters.

X-height: The distance between the baseline and the middle line of lowercase letters in a font.

It is typically the height of the letter x in the font (hence the name), as well as the letters v, w and z. Curved letters such as a, c, e, m, n, o, r, s and u tend to protrude slightly beyond the x-height (see below), due to an excess without which our eye would perceive these letters as being smaller than the x. The point of the i also extends beyond the x-height.

Police : Times New Roman
It is important to remember that even if you think you have chosen the “perfect” font, Kindle e-readers allow the user to change the font of the book anyway. That’s why it’s recommended to choose a simple, standard font like Georgia, which has been specially designed to be readable even on low-resolution screens. Lucida without Unicode, Helvetica, Arial, Trebuchet or Verdana are also suitable.
Source : Wikipedia

Websites

Books are not the only graphic objects that have required typographers to stay up to date in recent decades, the advent of digital technology has also marked the arrival of a new written medium and support: websites.

Source : GraphicMama

The Three Challenges of Typography on the Internet

Unlike ebooks, websites offer users a relatively limited choice of customizable options. Apart from the zoom level applied on the browser or the “dark mode” that some sites offer, the other parameters (margins, line spacing, proportions, colours, etc.) generally cannot be easily modified by the reader.

Screen size: While ebooks are generally read on e-readers whose dimensions can vary from one brand to another, websites can be consulted on dozens (or even hundreds) of different screen sizes, ranging from smartphones to computer screens to tablets. This requires the layout to be responsive, meaning that it can instantly adapt to the displayed screen size.

Screen definition: The number of points (called pixels) that a screen can display. The higher the density of these pixels, the more accurately the screen can display elements (images, text) and allow for subtle nuances. Typographers must therefore ensure that their work is as comfortable to read on the latest screen as on an older monitor.

Screen calibration: One of the major differences between websites and ebooks is the use of colour. While the vast majority of ebooks around the world are in black and white, almost all websites follow graphic charts with various colours and style effects. However, over time, not all screens display colours in the exact same way. If your profession (photographer, designer, artist) or your preference makes you sensitive to this aspect, it is strongly recommended that you regularly calibrate your screen.

Source : X-rite

In our article “Typography and its Importance in Book Publishing”, renowned typographer Dwight Smith tells us about an example of typographic composition he contributed to in the 1990s, when OpenType technology had not yet been invented.

Some Useful Tips

Typography is an extremely broad discipline, with hundreds of rules that cannot be summarized in a single blog post, but here are some basic typographic tips that will help improve the user experience of your website:

Fonts with distinct letters and low contrast are recommended. Some fonts, such as Google’s, are designed to be used on websites;
Make sure that the spaces between the lines (line spacing) allow your visitors to read the text comfortably, line spacing between 1.15 and 1.75 is preferable;
Find a style and stick to it. Try to use only one typeface (and only 2–3 fonts)* to keep a consistent style and improve readability. Try not to use too many different sizes. For example, one size for body text, one size for subheads and one size for titles is sufficient;
Make sure there is a good contrast between the background colours and the text colours. Avoid using too much colour for the text, unless it is for headlines. Avoid using background colours that reduce text contrast and adjust your site for users who use night mode or dark mode;
Keep sentences short and paragraphs short to allow readers to skim through sections of the site and find the information they are interested in more easily;
Pay attention to line length: lines that are too long require the reader to concentrate and negatively affect the user experience.

*Font vs. Typeface: What Is the Difference?

A font is a set of glyphs of the same family and style, which forms the complete and coherent alphabet of a language, all sizes and weights combined. In comparison, a font is a set of characters of a single typeface that corresponds to the same characteristics of size, weight and italics.
To put it simply, a font is a small part of a typeface.

History of the @ Symbol

Now widely used and closely related to the Internet, the @ symbol would have appeared well before the end of the 20th century. Over time, it has served various purposes in different languages, proving that typography is a discipline that has always been able to keep up with the times:

  • Between the sixth and twelfth centuries, in some Latin manuscripts, it appeared as an abbreviation of the word ad (meaning at/to) where the d was wrapped around the a.
  • It was later preserved in Chancery Latin and was used in the seventeenth century on diplomatic letters sent across Europe to indicate, for example, in which city was located the person to whom a letter was addressed.
  • In the nineteenth century, in the United States, it was used by merchants to indicate the unit prices of products on the shelves. This usage still persists today in the English-speaking world.
  • The symbol is also present in Spanish. It was used until 1859 as a unit of measurement of weight equivalent to about 11.5 kg. Its form is close to both a (Spanish female names) and o (Spanish male names), so nowadays it is sometimes used by those wishing to apply the principle of inclusive writing.
  • The Portuguese also still use it today to designate volumes of wine, the @ is equivalent to the content of an amphora, of which it is the abbreviation.
  • In 1971, the American engineer Ray Tomlinson chose the @ on the keyboard to separate the name of the recipient from that of the machine hosting his address, as the symbol cannot appear in any proper or common name. That day, he sent the first email in history.
Source : Wikipedia

Conclusion

As it has done for centuries for print media, typography has been called upon in recent decades to fulfill its essential mission in the “new world” of digital media, which is to make messages easier to read, to convey a certain sense of aesthetics and to offer to content creators the same graphic coherence that can be found throughout a collection of titles from a publishing house.

The task is difficult because of digital media since formats, definitions and calibrations can vary from one device to another. But, as they always have done, typographers have been able to use their creativity to put technology at the service of readers and Internet users. However, regular technological innovations require constant attention and regular updating of their typesetting tools.
Louis de Bernis

Louis de Bernis has been Rapido Books’ marketing coordinator since 2017. He is involved in the publication of various resources: blog posts, the Printer’s Glossary, video tutorials