How letters and fonts adapted to our screens

How letters changed shape depending on their cultural or physical needs and conditions to adapt to different times.

Vicky Gerchinhoren
UX Collective

--

Writing went through many iterations before it became what is today. Times New Roman wasn’t the default script for ancient Egyptians, in fact, paper didn’t even exist when the first words were written.

This article interview Fleksy did to me will take you on a journey through the evolution of fonts and explain some of the “how’s” and “why’s” the fonts we use today came about over thousands of years.

Different scripts come from different times in history and their shapes have a relationship with a particular historical moment. For example, Italic calligraphy arose from a period of high paper and bureaucratic work in the Italian chancery during the Renaissance period. The number of documents needed to be written made the humanist minuscule script be deformed — transformed. It was so much work that the amount of traces was naturally reduced and the letters were naturally skewed by the speed of their writing. As a result, the shapes of the letters were simplified and a predecessor of the modern Italic script was born.

Ancient manuscript showing the italic script used during the Renaissance period and on.
Italic script used during the Renaissance period and on

So Italic came from people writing faster, reducing the number of strokes, and creating less formal calligraphy.

Each script communicates a feeling with their shapes, we perceive different things from content written in different letter styles. Both typeface -mechanical- or calligraphic -manual- have a trace of cultural heritage that -I believe- is amazing.

In modern times, we associate Blackletter with dark non-ecclesiastic purposes because they are bold, obscure, and also difficult to read.

Blackletter, for instance, comes from the times of the middle ages when they didn’t have access to the same resources as we do today. Instead of writing on paper, they used animal skins, which were harder to get and expensive.

Due to the lack of resources, high costs, and sacred content, the writing was reserved for important people like monks and priests. It also required scribes to fit a lot of text per page, hence the small inner space and between the letters, the result is a very condensed letter shape, obscure, and dark-bodied.

A manuscript shows Blackletter script used since the year 1150. There’s heavy ink and a dash of red ink for majuscule.
Blackletter script used since the year 1150

Back then, Blackletter was used in caves and monasteries for sacred books, today it has been adopted and used by Metal bands! You would not see a dark font like Blackletter used for something like a kid’s birthday party… and that’s because there is a very close relationship between text and visual design.

Calligraphy is the hand script and typography is the design of the letters and text for mechanical writing. From manual writing to mechanical or automatic writing, you have the Industrial Revolution and a guy called Gutenberg.

Gutenberg designed the way to reproduce text by breaking it down into little mobile pieces allowing you to compose words and columns of text, effectively creating print and making books available to everyone in the world.

“Calligraphy is the hand script and typography is the mechanical design of the text”

Fonts are important not just because we read through them, but because there is style and meaning in their shapes. Throughout history, we have had different needs and these needs can be seen through the transformation of fonts from the Stone Ages and Ancient Egyptians to the Renaissance and on through the 21st century.

Needs that we have now were not covered back then, like computer screens or even the tiny print that you can find in a phonebook. In fact, the Bell Centennial font was specifically designed for the Bell phone books so the letters would hold the ink in ink traps and would look sharp after it spread on the paper. This was a big design challenge since the font size had to be extremely small and legible.

Left: M letter design shows an ink trap in each angle. Right: M letter print on paper with in spread creating sharp angles.

Matthew Carter, the designer who created the Bell Centennial font is also responsible for one of the first fonts to be used on-screen: Verdana. Carter is a very purpose-driven designer, and he created Verdana with functionality and technical issues in mind at the same time to assess perfectly how the font would be rendered in its environment. To improve legibility for the screen, he increased the x-height (which is the lower case letter height) in order to give more room to the portion of the letter that has the larger amount of visual information, which our brain uses to process the text and read the words. This enhancement is especially useful for reading faster on screens and was imperative in the early days of digital text when displays were extra pixelated and blurry.

Portrait photo of Matthew Carter — Designer of the Bell Centennial and Verdana typefaces
Matthew Carter — Designer of the Bell Centennial and Verdana typefaces

Due to the pixelation of screens, letters in certain fonts and sizes will not render properly and will actually blend together and blur. The way typeface designers managed to fix this is by meticulously altering the letter’s position and shape to feed the pixel grid proportionally, which they call hinting.

Hinting takes a lot of engineering work and is not mathematical as most engineering jobs, but actually requires years of a trained eye to visually map out the text.

Left: Unhinhted letter blueprint. Right: Hinted letter structure adapting to the pixels grid.
Unhinted (left) and hinted (right) letter at ppem 17 (source: blog.typekit.com)

An example of hinting in action is when you might have noticed the “x”,”e” or “z” often shift slightly right or left as you type or change font sizes, so it does not appear attached to the adjacent letters. It’s notable that some fonts don’t have hinting work done at all and these are often the cheap or free fonts, which you wouldn’t want to use in a professional setting.

See How do fonts influence the way you type to learn more about the use of fonts in everyday life and branding.

Originally published at https://medium.com on July 24, 2020.

The UX Collective donates US$1 for each article published in our platform. This story contributed to UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.

--

--

Product Designer and Visual Geek. Teaching at @Elisava and @weareshifta, directing design at@fleksy, ex @Mozilla and Tef R&D. Calligraphy passionate.